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")

	}

};