title: Simple Fragment shader in Three.js
body: <p>I'm exploring shaders in Three.JS and trying to create a simple tv-static effect. From what I understand, I need to use a fragment shader as the material in my mesh.</p>
  
  <p>I'm having a hard time switching from tutorials to the Three.js environment, because things are undefined. My problem seems to be the position variable not being set as a uniform, but I'm unsure how to do this.</p>
  
  <p>Console error: <code>.WebGLProgram: shader error:  0 gl.VALIDATE_STATUS true gl.getProgramInfoLog Varying 'position' has static-use in the frag shader, but is undeclared in the vert shader.</code></p>
  
  <p>Shader:</p>
  
  <pre><code>&lt;script type="x-shader/x-fragment" id="static"&gt;
          uniform float time;
          varying vec2 position;
  
          float rand(vec2 co){
              return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
          }
  
          void main()
          {
              vec2 uv = position.xy;
              float r = floor(rand(uv * time / 2.0) + 0.5);
              gl_FragColor = vec4(r, r, r, 1.0);
          }
  &lt;/script&gt;
  </code></pre>
  
  <p>JS:
  </p>
  
  <pre><code>var camera, scene, renderer, geometry, material, mesh, uniforms;
  
  init();
  animate();
  
  function init() {
  
      scene = new THREE.Scene();
  
      camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
      camera.position.z = 500;
      scene.add(camera);
  
      geometry = new THREE.CylinderGeometry(100, 100, 20, 32);
  
      debugMaterial = new THREE.MeshNormalMaterial();
  
      uniforms = {
        time: { type: 'f', value: 0 }
      };
  
      var shaderMaterial = new THREE.ShaderMaterial({
        uniforms: uniforms,
        fragmentShader: document.getElementById('static').innerHTML
      });
  
      mesh = new THREE.Mesh(geometry, shaderMaterial);
      /* toggle the mesh variable to see the object */
      //mesh = new THREE.Mesh(geometry, debugMaterial);
  
      scene.add(mesh);
  
      renderer = new THREE.CanvasRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
  
      document.body.appendChild(renderer.domElement);
  
  }
  
  function animate() {
  
      requestAnimationFrame(animate);
      render();
  
  }
  
  function render(delta) {
  
      mesh.rotation.x += 0.01;
      mesh.rotation.y += 0.02;
  
      uniforms.time += delta * 10;
  
      renderer.render(scene, camera);
  
  }
  
  render();
  </code></pre>
  
  <p>Desired effect: The below pixel shader on the cylinder geometry.
  <a href="https://i.stack.imgur.com/nWOng.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nWOng.png" alt="static"></a></p>
  
  <p>Fiddle (output is blank, although I've included a debugMaterial, so you just toggle the <code>mesh =</code> lines to see the geometry as intended): <a href="https://jsfiddle.net/z688644L/2/" rel="nofollow noreferrer">https://jsfiddle.net/z688644L/2/</a></p>