ShaderGodRays.js 6.9 KB

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