GodRaysShader.js 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297
  1. ( function () {
  2. /**
  3. * God-rays (crepuscular rays)
  4. *
  5. * Similar implementation to the one used by Crytek for CryEngine 2 [Sousa2008].
  6. * Blurs a mask generated from the depth map along radial lines emanating from the light
  7. * source. The blur repeatedly applies a blur filter of increasing support but constant
  8. * sample count to produce a blur filter with large support.
  9. *
  10. * My implementation performs 3 passes, similar to the implementation from Sousa. I found
  11. * just 6 samples per pass produced acceptible results. The blur is applied three times,
  12. * with decreasing filter support. The result is equivalent to a single pass with
  13. * 6*6*6 = 216 samples.
  14. *
  15. * References:
  16. *
  17. * Sousa2008 - Crysis Next Gen Effects, GDC2008, http://www.crytek.com/sites/default/files/GDC08_SousaT_CrysisEffects.ppt
  18. */
  19. const GodRaysDepthMaskShader = {
  20. uniforms: {
  21. tInput: {
  22. value: null
  23. }
  24. },
  25. vertexShader:
  26. /* glsl */
  27. `
  28. varying vec2 vUv;
  29. void main() {
  30. vUv = uv;
  31. gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  32. }`,
  33. fragmentShader:
  34. /* glsl */
  35. `
  36. varying vec2 vUv;
  37. uniform sampler2D tInput;
  38. void main() {
  39. gl_FragColor = vec4( 1.0 ) - texture2D( tInput, vUv );
  40. }`
  41. };
  42. /**
  43. * The god-ray generation shader.
  44. *
  45. * First pass:
  46. *
  47. * The depth map is blurred along radial lines towards the "sun". The
  48. * output is written to a temporary render target (I used a 1/4 sized
  49. * target).
  50. *
  51. * Pass two & three:
  52. *
  53. * The results of the previous pass are re-blurred, each time with a
  54. * decreased distance between samples.
  55. */
  56. const GodRaysGenerateShader = {
  57. uniforms: {
  58. tInput: {
  59. value: null
  60. },
  61. fStepSize: {
  62. value: 1.0
  63. },
  64. vSunPositionScreenSpace: {
  65. value: new THREE.Vector3()
  66. }
  67. },
  68. vertexShader:
  69. /* glsl */
  70. `
  71. varying vec2 vUv;
  72. void main() {
  73. vUv = uv;
  74. gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  75. }`,
  76. fragmentShader:
  77. /* glsl */
  78. `
  79. #define TAPS_PER_PASS 6.0
  80. varying vec2 vUv;
  81. uniform sampler2D tInput;
  82. uniform vec3 vSunPositionScreenSpace;
  83. uniform float fStepSize; // filter step size
  84. void main() {
  85. // delta from current pixel to "sun" position
  86. vec2 delta = vSunPositionScreenSpace.xy - vUv;
  87. float dist = length( delta );
  88. // Step vector (uv space)
  89. vec2 stepv = fStepSize * delta / dist;
  90. // Number of iterations between pixel and sun
  91. float iters = dist/fStepSize;
  92. vec2 uv = vUv.xy;
  93. float col = 0.0;
  94. // This breaks ANGLE in Chrome 22
  95. // - see http://code.google.com/p/chromium/issues/detail?id=153105
  96. /*
  97. // Unrolling didnt do much on my hardware (ATI Mobility Radeon 3450),
  98. // so i've just left the loop
  99. "for ( float i = 0.0; i < TAPS_PER_PASS; i += 1.0 ) {",
  100. // Accumulate samples, making sure we dont walk past the light source.
  101. // The check for uv.y < 1 would not be necessary with "border" UV wrap
  102. // mode, with a black border color. I don't think this is currently
  103. // exposed by three.js. As a result there might be artifacts when the
  104. // sun is to the left, right or bottom of screen as these cases are
  105. // not specifically handled.
  106. " col += ( i <= iters && uv.y < 1.0 ? texture2D( tInput, uv ).r : 0.0 );",
  107. " uv += stepv;",
  108. "}",
  109. */
  110. // Unrolling loop manually makes it work in ANGLE
  111. float f = min( 1.0, max( vSunPositionScreenSpace.z / 1000.0, 0.0 ) ); // used to fade out godrays
  112. if ( 0.0 <= iters && uv.y < 1.0 ) col += texture2D( tInput, uv ).r * f;
  113. uv += stepv;
  114. if ( 1.0 <= iters && uv.y < 1.0 ) col += texture2D( tInput, uv ).r * f;
  115. uv += stepv;
  116. if ( 2.0 <= iters && uv.y < 1.0 ) col += texture2D( tInput, uv ).r * f;
  117. uv += stepv;
  118. if ( 3.0 <= iters && uv.y < 1.0 ) col += texture2D( tInput, uv ).r * f;
  119. uv += stepv;
  120. if ( 4.0 <= iters && uv.y < 1.0 ) col += texture2D( tInput, uv ).r * f;
  121. uv += stepv;
  122. if ( 5.0 <= iters && uv.y < 1.0 ) col += texture2D( tInput, uv ).r * f;
  123. uv += stepv;
  124. // Should technically be dividing by 'iters but 'TAPS_PER_PASS' smooths out
  125. // objectionable artifacts, in particular near the sun position. The side
  126. // effect is that the result is darker than it should be around the sun, as
  127. // TAPS_PER_PASS is greater than the number of samples actually accumulated.
  128. // When the result is inverted (in the shader 'godrays_combine this produces
  129. // a slight bright spot at the position of the sun, even when it is occluded.
  130. gl_FragColor = vec4( col/TAPS_PER_PASS );
  131. gl_FragColor.a = 1.0;
  132. }`
  133. };
  134. /**
  135. * Additively applies god rays from texture tGodRays to a background (tColors).
  136. * fGodRayIntensity attenuates the god rays.
  137. */
  138. const GodRaysCombineShader = {
  139. uniforms: {
  140. tColors: {
  141. value: null
  142. },
  143. tGodRays: {
  144. value: null
  145. },
  146. fGodRayIntensity: {
  147. value: 0.69
  148. }
  149. },
  150. vertexShader:
  151. /* glsl */
  152. `
  153. varying vec2 vUv;
  154. void main() {
  155. vUv = uv;
  156. gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  157. }`,
  158. fragmentShader:
  159. /* glsl */
  160. `
  161. varying vec2 vUv;
  162. uniform sampler2D tColors;
  163. uniform sampler2D tGodRays;
  164. uniform float fGodRayIntensity;
  165. void main() {
  166. // Since THREE.MeshDepthMaterial renders foreground objects white and background
  167. // objects black, the god-rays will be white streaks. Therefore value is inverted
  168. // before being combined with tColors
  169. gl_FragColor = texture2D( tColors, vUv ) + fGodRayIntensity * vec4( 1.0 - texture2D( tGodRays, vUv ).r );
  170. gl_FragColor.a = 1.0;
  171. }`
  172. };
  173. /**
  174. * A dodgy sun/sky shader. Makes a bright spot at the sun location. Would be
  175. * cheaper/faster/simpler to implement this as a simple sun sprite.
  176. */
  177. const GodRaysFakeSunShader = {
  178. uniforms: {
  179. vSunPositionScreenSpace: {
  180. value: new THREE.Vector3()
  181. },
  182. fAspect: {
  183. value: 1.0
  184. },
  185. sunColor: {
  186. value: new THREE.Color( 0xffee00 )
  187. },
  188. bgColor: {
  189. value: new THREE.Color( 0x000000 )
  190. }
  191. },
  192. vertexShader:
  193. /* glsl */
  194. `
  195. varying vec2 vUv;
  196. void main() {
  197. vUv = uv;
  198. gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  199. }`,
  200. fragmentShader:
  201. /* glsl */
  202. `
  203. varying vec2 vUv;
  204. uniform vec3 vSunPositionScreenSpace;
  205. uniform float fAspect;
  206. uniform vec3 sunColor;
  207. uniform vec3 bgColor;
  208. void main() {
  209. vec2 diff = vUv - vSunPositionScreenSpace.xy;
  210. // Correct for aspect ratio
  211. diff.x *= fAspect;
  212. float prop = clamp( length( diff ) / 0.5, 0.0, 1.0 );
  213. prop = 0.35 * pow( 1.0 - prop, 3.0 );
  214. gl_FragColor.xyz = ( vSunPositionScreenSpace.z > 0.0 ) ? mix( sunColor, bgColor, 1.0 - prop ) : bgColor;
  215. gl_FragColor.w = 1.0;
  216. }`
  217. };
  218. THREE.GodRaysCombineShader = GodRaysCombineShader;
  219. THREE.GodRaysDepthMaskShader = GodRaysDepthMaskShader;
  220. THREE.GodRaysFakeSunShader = GodRaysFakeSunShader;
  221. THREE.GodRaysGenerateShader = GodRaysGenerateShader;
  222. } )();