322 lines
		
	
	
		
			6.7 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
		
		
			
		
	
	
			322 lines
		
	
	
		
			6.7 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
|  | import { | ||
|  | 	Color, | ||
|  | 	Vector3 | ||
|  | } from 'three'; | ||
|  | 
 | ||
|  | /** | ||
|  |  * 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
 | ||
|  |  */ | ||
|  | 
 | ||
|  | const GodRaysDepthMaskShader = { | ||
|  | 
 | ||
|  | 	name: 'GodRaysDepthMaskShader', | ||
|  | 
 | ||
|  | 	uniforms: { | ||
|  | 
 | ||
|  | 		tInput: { | ||
|  | 			value: null | ||
|  | 		} | ||
|  | 
 | ||
|  | 	}, | ||
|  | 
 | ||
|  | 	vertexShader: /* glsl */`
 | ||
|  | 
 | ||
|  | 		varying vec2 vUv; | ||
|  | 
 | ||
|  | 		void main() { | ||
|  | 
 | ||
|  | 		 vUv = uv; | ||
|  | 		 gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); | ||
|  | 
 | ||
|  | 	 }`,
 | ||
|  | 
 | ||
|  | 	fragmentShader: /* glsl */`
 | ||
|  | 
 | ||
|  | 		varying vec2 vUv; | ||
|  | 
 | ||
|  | 		uniform sampler2D tInput; | ||
|  | 
 | ||
|  | 		void main() { | ||
|  | 
 | ||
|  | 			gl_FragColor = vec4( 1.0 ) - texture2D( tInput, vUv ); | ||
|  | 
 | ||
|  | 		}`
 | ||
|  | 
 | ||
|  | }; | ||
|  | 
 | ||
|  | 
 | ||
|  | /** | ||
|  |  * The god-ray generation shader. | ||
|  |  * | ||
|  |  * First pass: | ||
|  |  * | ||
|  |  * 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. | ||
|  |  */ | ||
|  | 
 | ||
|  | const GodRaysGenerateShader = { | ||
|  | 
 | ||
|  | 	name: 'GodRaysGenerateShader', | ||
|  | 
 | ||
|  | 	uniforms: { | ||
|  | 
 | ||
|  | 		tInput: { | ||
|  | 			value: null | ||
|  | 		}, | ||
|  | 		fStepSize: { | ||
|  | 			value: 1.0 | ||
|  | 		}, | ||
|  | 		vSunPositionScreenSpace: { | ||
|  | 			value: new Vector3() | ||
|  | 		} | ||
|  | 
 | ||
|  | 	}, | ||
|  | 
 | ||
|  | 	vertexShader: /* glsl */`
 | ||
|  | 
 | ||
|  | 		varying vec2 vUv; | ||
|  | 
 | ||
|  | 		void main() { | ||
|  | 
 | ||
|  | 		 vUv = uv; | ||
|  | 		 gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); | ||
|  | 
 | ||
|  | 	 }`,
 | ||
|  | 
 | ||
|  | 	fragmentShader: /* glsl */`
 | ||
|  | 
 | ||
|  | 		#define TAPS_PER_PASS 6.0 | ||
|  | 
 | ||
|  | 		varying vec2 vUv; | ||
|  | 
 | ||
|  | 		uniform sampler2D tInput; | ||
|  | 
 | ||
|  | 		uniform vec3 vSunPositionScreenSpace; | ||
|  | 		uniform float fStepSize; // filter step size
 | ||
|  | 
 | ||
|  | 		void main() { | ||
|  | 
 | ||
|  | 		// delta from current pixel to "sun" position
 | ||
|  | 
 | ||
|  | 			vec2 delta = vSunPositionScreenSpace.xy - 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; | ||
|  | 
 | ||
|  | 		// This breaks ANGLE in Chrome 22
 | ||
|  | 		//	- see http://code.google.com/p/chromium/issues/detail?id=153105
 | ||
|  | 
 | ||
|  | 		/* | ||
|  | 		// 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 color. 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.0 ? texture2D( tInput, uv ).r : 0.0 );", | ||
|  | 		"	uv += stepv;", | ||
|  | 
 | ||
|  | 		"}", | ||
|  | 		*/ | ||
|  | 
 | ||
|  | 		// Unrolling loop manually makes it work in ANGLE
 | ||
|  | 
 | ||
|  | 			float f = min( 1.0, max( vSunPositionScreenSpace.z / 1000.0, 0.0 ) ); // used to fade out godrays
 | ||
|  | 
 | ||
|  | 			if ( 0.0 <= iters && uv.y < 1.0 ) col += texture2D( tInput, uv ).r * f; | ||
|  | 			uv += stepv; | ||
|  | 
 | ||
|  | 			if ( 1.0 <= iters && uv.y < 1.0 ) col += texture2D( tInput, uv ).r * f; | ||
|  | 			uv += stepv; | ||
|  | 
 | ||
|  | 			if ( 2.0 <= iters && uv.y < 1.0 ) col += texture2D( tInput, uv ).r * f; | ||
|  | 			uv += stepv; | ||
|  | 
 | ||
|  | 			if ( 3.0 <= iters && uv.y < 1.0 ) col += texture2D( tInput, uv ).r * f; | ||
|  | 			uv += stepv; | ||
|  | 
 | ||
|  | 			if ( 4.0 <= iters && uv.y < 1.0 ) col += texture2D( tInput, uv ).r * f; | ||
|  | 			uv += stepv; | ||
|  | 
 | ||
|  | 			if ( 5.0 <= iters && uv.y < 1.0 ) col += texture2D( tInput, uv ).r * f; | ||
|  | 			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.0; | ||
|  | 
 | ||
|  | 		}`
 | ||
|  | 
 | ||
|  | }; | ||
|  | 
 | ||
|  | /** | ||
|  |  * Additively applies god rays from texture tGodRays to a background (tColors). | ||
|  |  * fGodRayIntensity attenuates the god rays. | ||
|  |  */ | ||
|  | 
 | ||
|  | const GodRaysCombineShader = { | ||
|  | 
 | ||
|  | 	name: 'GodRaysCombineShader', | ||
|  | 
 | ||
|  | 	uniforms: { | ||
|  | 
 | ||
|  | 		tColors: { | ||
|  | 			value: null | ||
|  | 		}, | ||
|  | 
 | ||
|  | 		tGodRays: { | ||
|  | 			value: null | ||
|  | 		}, | ||
|  | 
 | ||
|  | 		fGodRayIntensity: { | ||
|  | 			value: 0.69 | ||
|  | 		} | ||
|  | 
 | ||
|  | 	}, | ||
|  | 
 | ||
|  | 	vertexShader: /* glsl */`
 | ||
|  | 
 | ||
|  | 		varying vec2 vUv; | ||
|  | 
 | ||
|  | 		void main() { | ||
|  | 
 | ||
|  | 			vUv = uv; | ||
|  | 			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); | ||
|  | 
 | ||
|  | 		}`,
 | ||
|  | 
 | ||
|  | 	fragmentShader: /* glsl */`
 | ||
|  | 
 | ||
|  | 		varying vec2 vUv; | ||
|  | 
 | ||
|  | 		uniform sampler2D tColors; | ||
|  | 		uniform sampler2D tGodRays; | ||
|  | 
 | ||
|  | 		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.0 - texture2D( tGodRays, vUv ).r ); | ||
|  | 			gl_FragColor.a = 1.0; | ||
|  | 
 | ||
|  | 		}`
 | ||
|  | 
 | ||
|  | }; | ||
|  | 
 | ||
|  | 
 | ||
|  | /** | ||
|  |  * 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. | ||
|  |  */ | ||
|  | 
 | ||
|  | const GodRaysFakeSunShader = { | ||
|  | 
 | ||
|  | 	name: 'GodRaysFakeSunShader', | ||
|  | 
 | ||
|  | 	uniforms: { | ||
|  | 
 | ||
|  | 		vSunPositionScreenSpace: { | ||
|  | 			value: new Vector3() | ||
|  | 		}, | ||
|  | 
 | ||
|  | 		fAspect: { | ||
|  | 			value: 1.0 | ||
|  | 		}, | ||
|  | 
 | ||
|  | 		sunColor: { | ||
|  | 			value: new Color( 0xffee00 ) | ||
|  | 		}, | ||
|  | 
 | ||
|  | 		bgColor: { | ||
|  | 			value: new Color( 0x000000 ) | ||
|  | 		} | ||
|  | 
 | ||
|  | 	}, | ||
|  | 
 | ||
|  | 	vertexShader: /* glsl */`
 | ||
|  | 
 | ||
|  | 		varying vec2 vUv; | ||
|  | 
 | ||
|  | 		void main() { | ||
|  | 
 | ||
|  | 			vUv = uv; | ||
|  | 			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); | ||
|  | 
 | ||
|  | 		}`,
 | ||
|  | 
 | ||
|  | 	fragmentShader: /* glsl */`
 | ||
|  | 
 | ||
|  | 		varying vec2 vUv; | ||
|  | 
 | ||
|  | 		uniform vec3 vSunPositionScreenSpace; | ||
|  | 		uniform float fAspect; | ||
|  | 
 | ||
|  | 		uniform vec3 sunColor; | ||
|  | 		uniform vec3 bgColor; | ||
|  | 
 | ||
|  | 		void main() { | ||
|  | 
 | ||
|  | 			vec2 diff = vUv - vSunPositionScreenSpace.xy; | ||
|  | 
 | ||
|  | 		// Correct for aspect ratio
 | ||
|  | 
 | ||
|  | 			diff.x *= fAspect; | ||
|  | 
 | ||
|  | 			float prop = clamp( length( diff ) / 0.5, 0.0, 1.0 ); | ||
|  | 			prop = 0.35 * pow( 1.0 - prop, 3.0 ); | ||
|  | 
 | ||
|  | 			gl_FragColor.xyz = ( vSunPositionScreenSpace.z > 0.0 ) ? mix( sunColor, bgColor, 1.0 - prop ) : bgColor; | ||
|  | 			gl_FragColor.w = 1.0; | ||
|  | 
 | ||
|  | 		}`
 | ||
|  | 
 | ||
|  | }; | ||
|  | 
 | ||
|  | export { GodRaysDepthMaskShader, GodRaysGenerateShader, GodRaysCombineShader, GodRaysFakeSunShader }; |