White noise texture

add normal map?!

HTML

<div id="info">White Noise 2D Texture</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
<script id="myVertexShader" type="x-shader/x-vertex">
    varying vec2 vUv;
    varying vec4 wPos;
    void main() {
        wPos = modelMatrix * vec4(position, 1.0);
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        vUv = uv;
    }
</script>
<script id="myFragmentShader" type="x-shader/x-fragment">
    uniform vec3 wLightPos;
    uniform int timeVary;
    uniform float time;
    uniform float gran;
    varying vec4 wPos;
    varying vec2 vUv;
    float rand(vec2 co) {
        return fract(sin(dot(co.xy, vec2(12.9898, 78.233))) * 43758.5453);
    }
    float adjRand(vec2 co, float gran) {
        return rand(floor(vUv * gran) / gran);
    }
    void main() {
        vec2 co;
        float height;
        if (timeVary == 1) { 
            co = vUv + vec2(time, time);
            height = rand(co);
        } else {     
            co= vUv;
            height = adjRand(co, gran);
        }

        float r;
        /*  ... normal map not obvious
        float eps = 0.0001;
        float hUU = adjRand(vec2(co[0] + eps, co[1]), gran);
        float hVV = adjRand(vec2(co[0], co[1] + eps), gran);

        // tangent space normal
        vec3 uu = vec3(eps, 0, hUU - height);
        vec3 vv = vec3(0, eps, hVV - height);
        vec3 nn = normalize(cross(uu, vv));
        vec3 wL = normalize(wLightPos - wPos.xyz);
        float ndotl = dot(wL, nn);
        r = ndotl;
        r = ndotl*height;
    */
        r = height;
        gl_FragColor = vec4(r, r, r, 1);
    }
</script>

CSS

#info {
    position: absolute;
    top: 0px;
    width: 100%;
    padding: 10px;
    text-align: center;
    color: #ffff00
}
body {
    overflow: hidden;
}

JavaScript

var renderer, scene, camera, controls, mesh, light;
var clock, lightball;
var angle = 0,
    sign = 1;
var gcontrols;

init();
animate();

function init() {
    clock = new THREE.Clock();

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 100);
    camera.position.z = 3;

    controls = new THREE.OrbitControls(camera, renderer.domElement);

    light = new THREE.PointLight();
    light.position.set(3, 3, 3);
    scene.add(light);

    lightball = new THREE.Mesh(
    new THREE.SphereGeometry(0.03, 12, 12),
    new THREE.MeshBasicMaterial({
        color: 0xffff00
    }));
 //   scene.add(lightball);

    var geometry = new THREE.PlaneGeometry(1, 1);
    var material = new THREE.ShaderMaterial({
        side: THREE.DoubleSide,
        uniforms: {
            timeVary: {
                type: 'i',
                value: 0
            },
            gran: {
                type: 'f',
                value: 10
            },
            time: {
                type: 'f',
                value: 1.0
            },
            wLightPos: {
                type: 'v3',
                value: new THREE.Vector3(1, 1, 5)
            }
        },
        vertexShader: document.getElementById('myVertexShader').textContent,
        fragmentShader: document.getElementById('myFragmentShader').textContent
    });

    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
    
    gcontrols = {
        gran: 50,
        timeVary:false
    };
    
    var gui = new dat.GUI();
    gui.domElement.id = 'gui';
    
    gui.add(gcontrols, 'gran', 10,1000);
    gui.add(gcontrols, 'timeVary');    
}

function animate() {
    angle += 0.01 * sign;
    if (angle > Math.PI || angle < 0) sign *= -1;

    mesh.material.uniforms.gran.value = gcontrols.gran;
   ...