topical media & game development

talk show tell print

mobile-query-three-vendor-three.js-ShaderGodRays.js / js



  

author: huwb / 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: 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 = uv;",
                                  "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
  
                          "}"
  
                  ].join("\n"),
  
                  fragmentShader: [
  
                          "#define TAPS_PER_PASS 6.0",
  
                          "varying vec2 vUv;",
  
                          "uniform sampler2D tInput;",
  
                          "uniform vec2 vSunPositionScreenSpace;",
                          "uniform float fStepSize;", // filter step size
  
                          "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;",
  
                                  // 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 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.0 ? texture2D( tInput, uv ).r : 0.0 );",
                                          "uv += stepv;",
  
                                  "}",
  				*/
  
                                  // Unrolling loop manually makes it work in ANGLE
  
                                  "if ( 0.0 <= iters && uv.y < 1.0 ) col += texture2D( tInput, uv ).r;",
                                  "uv += stepv;",
  
                                  "if ( 1.0 <= iters && uv.y < 1.0 ) col += texture2D( tInput, uv ).r;",
                                  "uv += stepv;",
  
                                  "if ( 2.0 <= iters && uv.y < 1.0 ) col += texture2D( tInput, uv ).r;",
                                  "uv += stepv;",
  
                                  "if ( 3.0 <= iters && uv.y < 1.0 ) col += texture2D( tInput, uv ).r;",
                                  "uv += stepv;",
  
                                  "if ( 4.0 <= iters && uv.y < 1.0 ) col += texture2D( tInput, uv ).r;",
                                  "uv += stepv;",
  
                                  "if ( 5.0 <= iters && uv.y < 1.0 ) col += texture2D( tInput, uv ).r;",
                                  "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;",
  
                          "}"
  
                  ].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: null
                          },
  
                          tGodRays: {
                                  type: "t",
                                  value: 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 = uv;",
                                  "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.0 - texture2D( tGodRays, vUv ).r );",
                                  "gl_FragColor.a = 1.0;",
  
                          "}"
  
                  ].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
                          },
  
                          sunColor: {
                                  type: "c",
                                  value: new THREE.Color( 0xffee00 )
                          },
  
                          bgColor: {
                                  type: "c",
                                  value: new THREE.Color( 0x000000 )
                          }
  
                  },
  
                  vertexShader: [
  
                          "varying vec2 vUv;",
  
                          "void main() {",
  
                                  "vUv = uv;",
                                  "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
  
                          "}"
  
                  ].join("\n"),
  
                  fragmentShader: [
  
                          "varying vec2 vUv;",
  
                          "uniform vec2 vSunPositionScreenSpace;",
                          "uniform float fAspect;",
  
                          "uniform vec3 sunColor;",
                          "uniform vec3 bgColor;",
  
                          "void main() {",
  
                                  "vec2 diff = vUv - vSunPositionScreenSpace;",
  
                                  // 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 = mix( sunColor, bgColor, 1.0 - prop );",
                                  "gl_FragColor.w = 1.0;",
  
                          "}"
  
                  ].join("\n")
  
          }
  
  };
  


(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.