D3 Examples - shader gear

xxxxxxxxxx
 
<meta charset="utf-8">
​
​
<script id="fragmentShader" type="x-shader/x-fragment">
  uniform vec2 u_resolution;
  uniform float u_time;
​
  void main() {
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    gl_FragColor=vec4(st.x,st.y,0.0,1.0);
  }
</script>
​
​
​
<body>
  <style>body{margin: 0px;}</style>
  <div id="container"></div>
  <script src="three.js"></script>
  <script src="d3.js"></script>
  <script id="vertexShader" type="x-shader/x-vertex">
    void main() {
      gl_Position = vec4( position, 1.0 );
    }
  </script>
  <script>
    var container;
    var camera, scene, renderer;
    var uniforms;
​
​
    d3.xhr('12.glsl', function(res){
      fragShader = res.response
      init()
      animate()
    })
​
​
    function init() {
      container = document.getElementById( 'container' );
​
      camera = new THREE.Camera();
      camera.position.z = 1;
​
      scene = new THREE.Scene();
​
      var geometry = new THREE.PlaneBufferGeometry(2, 2);
​
      uniforms = {
        u_time: { type: "f", value: 1.0 },
        u_resolution: { type: "v2", value: new THREE.Vector2() },
        u_mouse: { type: "v2", value: new THREE.Vector2() }
      };
​
      var material = new THREE.ShaderMaterial( {
        uniforms: uniforms,
        vertexShader: document.getElementById( 'vertexShader' ).textContent,
        fragmentShader: fragShader
      } );
​
      var mesh = new THREE.Mesh( geometry, material );
      scene.add( mesh );
​
      renderer = new THREE.WebGLRenderer();
      renderer.setPixelRatio( window.devicePixelRatio );
​
      container.appendChild( renderer.domElement );
​
      onWindowResize();
      window.addEventListener( 'resize', onWindowResize, false );
​
      document.onmousemove = function(e){
        uniforms.u_mouse.value.x = e.pageX
        uniforms.u_mouse.value.y = e.pageY
      }
​
    }
​
    function onWindowResize( event ) {
      renderer.setSize( window.innerWidth, window.innerHeight );
      uniforms.u_resolution.value.x = renderer.domElement.width;
      uniforms.u_resolution.value.y = renderer.domElement.height;
    }
​
​
​
    function animate() {
      requestAnimationFrame( animate );
      render();
    }
​
    function render() {
      uniforms.u_time.value += 0.05;
      renderer.render( scene, camera );
    }
  </script>
</body>
​
    