GodRaysShader.js 6.8 KB

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