123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313 |
- 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 = {
- 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 = {
- 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 = {
- 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 = {
- 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 };
|