Depth 2

HTML

<script id="fragmentShader" type="x-shader/x-fragment">
    uniform vec4 u_abcd;
    uniform float u_unitLength;
    
    varying vec4 v_worldPosition;   
    
	void main( void ) 
    {        
        float depth = dot(u_abcd.xyz, v_worldPosition.xyz) + u_abcd.w;
        vec3 color = vec3(1.0 - depth / u_unitLength);
        gl_FragColor = vec4( color, 1.0 );
	}
    
</script>

<script id="vertexShader" type="x-shader/x-vertex">
    varying vec4 v_worldPosition;    
    
	void main()
	{
		v_worldPosition = modelMatrix * vec4( position, 1.0 );		
        vec4 mvPosition = viewMatrix * v_worldPosition;
		gl_Position = projectionMatrix * mvPosition;
	}

</script>

CSS

canvas { width: 100%; height: 100% }

JavaScript

var scene = new THREE.Scene(); 
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); 
var renderer = new THREE.WebGLRenderer(); 
renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement );
var clearColor = new THREE.Color( 0x40f040 );
renderer.setClearColor(clearColor,0.5);

var point = new THREE.Vector3(0, 20.0, 0);
var normal = new THREE.Vector3(0, -1.0, 0);

var d = -point.dot(normal);

uniforms = {
    u_abcd: { type: "v4", value: new THREE.Vector4(normal.x, normal.y, normal.z, d)  },
    u_unitLength: { type: "f", value: 40.0  }
};

var material = new THREE.ShaderMaterial( {
    uniforms: uniforms, 
    vertexShader: document.getElementById( 'vertexShader' ).textContent,
    fragmentShader: document.getElementById( 'fragmentShader' ).textContent } );

for (i = 0; i<20; i++)
{
    var radius = Math.random() * 10.0;
    var height = Math.random() * 10.0;
    var geometry = new THREE.CylinderGeometry( radius, radius, height, 32 );
    var object = new THREE.Mesh( geometry, material ); 
    object.rotation.x = Math.random() * Math.PI; 
    object.rotation.z = Math.random() * Math.PI;
    object.position.x = (Math.random() - 0.5) * 50.0; 
    object.position.y = (Math.random() - 0.5) * 20.0;
    object.position.z = (Math.random() - 0.5) * 50.0;
    scene.add( object ); 
}

var phi = 0;

var render = function () 
{ 
    requestAnimationFrame(render); 
    var r = (Math.sin(4*phi)+2) * 30;
    camera.position.x = Math.sin(phi) * r;
    camera.position.z = Math.cos(phi) * r;
    camera.rotation.y = phi;
    phi += 0.005;
    
    //update uniforms
    var normal = new THREE.Vector3();
    normal.x = -Math.sin(phi);
    normal.z = -Math.cos(phi);
    var point = new THREE.Vector3();
    point.x = Math.sin(phi) * 20;
    point.z = Math.cos(phi) * 20;
    
    var d = -point.dot(normal);  
    uniforms.u_abcd.value.x = normal.x;
    uniforms.u_abcd.value.y = normal.y;
   ...