GodRaysShader.js 6.5 KB

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