three.js/examples/js/ShaderGodRays.js

/**
 * @author huwb / http://huwbowles.com/
 *
 * God-rays (crepuscular rays)
 *
 * Similar implementation to the one used by Crytek for CryEngine 2 [Sousa2008].
 * Blurs a mask generated from the depth map along radial lines emanating from the light
 * source. The blur repeatedly applies a blur filter of increasing support but constant
 * sample count, to produce a blur filter with large support.
 *
 * My implementation performs 3 passes, similar to the implementation from Sousa. I found
 * just 6 samples per pass produced acceptible results. The blur is applied three times,
 * with decreasing filter support. The result is equivalent to a single pass with
 * 6*6*6 = 216 samples.
 *
 * References:
 *      Sousa2008 - Crysis Next Gen Effects, GDC2008, http://www.crytek.com/sites/default/files/GDC08_SousaT_CrysisEffects.ppt
 */
 
 THREE.ShaderGodRays = {
 
	/* -------------------------------------------------------------------------
	// The god-ray generation shader. 
	//
	// First pass:
	//      The input is the depth map. I found that the output from the
	//      THREE.MeshDepthMaterial material was directly suitable without
	//      requiring any treatment whatsoever.
	//
	//      The depth map is blurred along radial lines towards the "sun". The
	//      output is written to a temporary render target (I used a 1/4 sized
	//      target).
	//      
	// Pass two & three:
	//      The results of the previous pass are re-blurred, each time with a
	//      decreased distance between samples.
	//      
	 ------------------------------------------------------------------------- */
	'godrays_generate'	: {

	    uniforms: { tInput:   { type: "t", value: 0, texture: null },
				    fStepSize:     { type: "f", value: 1.0 },
    			    vSunPositionScreenSpace:  { type: "v2", value: new THREE.Vector2( 0.5, 0.5 ) },
			      },

	    vertexShader: [
	        "varying vec2 vUv;",
	        "void main() {",
		        "vUv = vec2( uv.x, 1.0 - uv.y );",
		        "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
	        "}"
	    ].join("\n"),

	    fragmentShader: [

	        "varying vec2 vUv;",

	        "uniform sampler2D tInput;",
        	
            "uniform vec2 vSunPositionScreenSpace;",
	        "uniform float fStepSize;",  	// filter step size
            
            "#define TAPS_PER_PASS 6.0",
            
	        "void main() {",
                // delta from current pixel to "sun" position
		        "vec2 delta = (vSunPositionScreenSpace - vUv);",
		        "float dist = length(delta);",
		        // Step vector (uv space)
		        "vec2 stepv = fStepSize*delta/dist;",
		        // Number of iterations between pixel and sun
		        "float iters = dist/fStepSize;",
        		
		        "vec2 uv = vUv.xy;",
		        "float col = 0.0;",
		        
                // Unrolling didnt do much on my hardware (ATI Mobility Radeon 3450),
                // so i've just left the loop
		        "for (float i = 0.0; i < TAPS_PER_PASS; i+=1.0 ) {",
    		        // Accumulate samples, making sure we dont walk past the light source.
    		        
		            // The check for uv.y<1 would not be necessary with "border" UV wrap
		            // mode, with a black border colour. I don't think this is currently
		            // exposed by three.js. As a result there might be artifacts when the
		            // sun is to the left, right or bottom of screen as these cases are
		            // not specifically handled.
		            "col += (i <= iters && uv.y<1. ? texture2D( tInput, uv ).r : .0) ;",
		            "uv += stepv;",
		        "}",
        		
		        // Should technically be dividing by 'iters', but 'TAPS_PER_PASS' smooths out
		        // objectionable artifacts, in particular near the sun position. The side
		        // effect is that the result is darker than it should be around the sun, as
		        // TAPS_PER_PASS is greater than the number of samples actually accumulated.
		        // When the result is inverted (in the shader 'godrays_combine', this produces
		        // a slight bright spot at the position of the sun, even when it is occluded.
		        "gl_FragColor = vec4( col/TAPS_PER_PASS );",
		        "gl_FragColor.a = 1.;",
	        "}"

	    ].join("\n")

	},

	/* -------------------------------------------------------------------------
	// Additively applies god rays from texture tGodRays to a background (tColors).
	//
	// fGodRayIntensity attenuates the god rays.
	 ------------------------------------------------------------------------- */
	'godrays_combine'	: {

	    uniforms: { tColors:   { type: "t", value: 0, texture: null },
	                tGodRays:   { type: "t", value: 1, texture: null },
				    fGodRayIntensity:     { type: "f", value: 0.69 },
    			    vSunPositionScreenSpace:  { type: "v2", value: new THREE.Vector2( 0.5, 0.5 ) },
			      },

	    vertexShader: [
	        "varying vec2 vUv;",
	        "void main() {",
		        "vUv = vec2( uv.x, 1.0 - uv.y );",
		        "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",

	        "}"
	    ].join("\n"),

	    fragmentShader: [
	    
	        "varying vec2 vUv;",

	        "uniform sampler2D tColors;",
	        "uniform sampler2D tGodRays;",
        	
            "uniform vec2 vSunPositionScreenSpace;",
	        "uniform float fGodRayIntensity;",
            
	        "void main() {",
	            // Since THREE.MeshDepthMaterial renders foreground objects white and background
	            // objects black, the god-rays will be white streaks. Therefore value is inverted
	            // before being combined with tColors
                "gl_FragColor = texture2D( tColors, vUv ) + fGodRayIntensity*vec4( 1.-texture2D( tGodRays, vUv ).r );",
                "gl_FragColor.a = 1.;",
	        "}"
	    
	    ].join("\n")

	},
	
	
	/* -------------------------------------------------------------------------
	// A dodgy sun/sky shader. Makes a bright spot at the sun location. Would be
	// cheaper/faster/simpler to implement this as a simple sun sprite.
	 ------------------------------------------------------------------------- */
	'godrays_fake_sun'	: {

	    uniforms: { vSunPositionScreenSpace:  { type: "v2", value: new THREE.Vector2( 0.5, 0.5 ) },
				    fAspect:     { type: "f", value: 1.0 },
			      },

	    vertexShader: [
	        "varying vec2 vUv;",
	        "void main() {",
		        "vUv = vec2( uv.x, 1.0 - uv.y );",
		        "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
	        "}"
	    ].join("\n"),

	    fragmentShader: [

	        "varying vec2 vUv;",

            "uniform vec2 vSunPositionScreenSpace;",
            "uniform float fAspect;",
            
	        "void main() {",
	            "vec2 diff = vUv-vSunPositionScreenSpace;",
	            // Correct for aspect ratio
	            "diff.x *= fAspect;",
	            "float prop = clamp(length(diff)/.5,0.,1.);",
    	        "prop = .35*pow( 1.0 - prop, 3. ) ;",
                "gl_FragColor = vec4(prop,prop,0.2,1.);",
	        "}"

	    ].join("\n")
	}
 };