Simple Fragment shader in Three.js
<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>