SSAOShader.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288
  1. import {
  2. Matrix4,
  3. Vector2
  4. } from 'three';
  5. /**
  6. * References:
  7. * http://john-chapman-graphics.blogspot.com/2013/01/ssao-tutorial.html
  8. * https://learnopengl.com/Advanced-Lighting/SSAO
  9. * https://github.com/McNopper/OpenGL/blob/master/Example28/shader/ssao.frag.glsl
  10. */
  11. const SSAOShader = {
  12. defines: {
  13. 'PERSPECTIVE_CAMERA': 1,
  14. 'KERNEL_SIZE': 32
  15. },
  16. uniforms: {
  17. 'tDiffuse': { value: null },
  18. 'tNormal': { value: null },
  19. 'tDepth': { value: null },
  20. 'tNoise': { value: null },
  21. 'kernel': { value: null },
  22. 'cameraNear': { value: null },
  23. 'cameraFar': { value: null },
  24. 'resolution': { value: new Vector2() },
  25. 'cameraProjectionMatrix': { value: new Matrix4() },
  26. 'cameraInverseProjectionMatrix': { value: new Matrix4() },
  27. 'kernelRadius': { value: 8 },
  28. 'minDistance': { value: 0.005 },
  29. 'maxDistance': { value: 0.05 },
  30. },
  31. vertexShader: /* glsl */`
  32. varying vec2 vUv;
  33. void main() {
  34. vUv = uv;
  35. gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  36. }`,
  37. fragmentShader: /* glsl */`
  38. uniform sampler2D tDiffuse;
  39. uniform sampler2D tNormal;
  40. uniform sampler2D tDepth;
  41. uniform sampler2D tNoise;
  42. uniform vec3 kernel[ KERNEL_SIZE ];
  43. uniform vec2 resolution;
  44. uniform float cameraNear;
  45. uniform float cameraFar;
  46. uniform mat4 cameraProjectionMatrix;
  47. uniform mat4 cameraInverseProjectionMatrix;
  48. uniform float kernelRadius;
  49. uniform float minDistance; // avoid artifacts caused by neighbour fragments with minimal depth difference
  50. uniform float maxDistance; // avoid the influence of fragments which are too far away
  51. varying vec2 vUv;
  52. #include <packing>
  53. float getDepth( const in vec2 screenPosition ) {
  54. return texture2D( tDepth, screenPosition ).x;
  55. }
  56. float getLinearDepth( const in vec2 screenPosition ) {
  57. #if PERSPECTIVE_CAMERA == 1
  58. float fragCoordZ = texture2D( tDepth, screenPosition ).x;
  59. float viewZ = perspectiveDepthToViewZ( fragCoordZ, cameraNear, cameraFar );
  60. return viewZToOrthographicDepth( viewZ, cameraNear, cameraFar );
  61. #else
  62. return texture2D( tDepth, screenPosition ).x;
  63. #endif
  64. }
  65. float getViewZ( const in float depth ) {
  66. #if PERSPECTIVE_CAMERA == 1
  67. return perspectiveDepthToViewZ( depth, cameraNear, cameraFar );
  68. #else
  69. return orthographicDepthToViewZ( depth, cameraNear, cameraFar );
  70. #endif
  71. }
  72. vec3 getViewPosition( const in vec2 screenPosition, const in float depth, const in float viewZ ) {
  73. float clipW = cameraProjectionMatrix[2][3] * viewZ + cameraProjectionMatrix[3][3];
  74. vec4 clipPosition = vec4( ( vec3( screenPosition, depth ) - 0.5 ) * 2.0, 1.0 );
  75. clipPosition *= clipW; // unprojection.
  76. return ( cameraInverseProjectionMatrix * clipPosition ).xyz;
  77. }
  78. vec3 getViewNormal( const in vec2 screenPosition ) {
  79. return unpackRGBToNormal( texture2D( tNormal, screenPosition ).xyz );
  80. }
  81. void main() {
  82. float depth = getDepth( vUv );
  83. float viewZ = getViewZ( depth );
  84. vec3 viewPosition = getViewPosition( vUv, depth, viewZ );
  85. vec3 viewNormal = getViewNormal( vUv );
  86. vec2 noiseScale = vec2( resolution.x / 4.0, resolution.y / 4.0 );
  87. vec3 random = vec3( texture2D( tNoise, vUv * noiseScale ).r );
  88. // compute matrix used to reorient a kernel vector
  89. vec3 tangent = normalize( random - viewNormal * dot( random, viewNormal ) );
  90. vec3 bitangent = cross( viewNormal, tangent );
  91. mat3 kernelMatrix = mat3( tangent, bitangent, viewNormal );
  92. float occlusion = 0.0;
  93. for ( int i = 0; i < KERNEL_SIZE; i ++ ) {
  94. vec3 sampleVector = kernelMatrix * kernel[ i ]; // reorient sample vector in view space
  95. vec3 samplePoint = viewPosition + ( sampleVector * kernelRadius ); // calculate sample point
  96. vec4 samplePointNDC = cameraProjectionMatrix * vec4( samplePoint, 1.0 ); // project point and calculate NDC
  97. samplePointNDC /= samplePointNDC.w;
  98. vec2 samplePointUv = samplePointNDC.xy * 0.5 + 0.5; // compute uv coordinates
  99. float realDepth = getLinearDepth( samplePointUv ); // get linear depth from depth texture
  100. float sampleDepth = viewZToOrthographicDepth( samplePoint.z, cameraNear, cameraFar ); // compute linear depth of the sample view Z value
  101. float delta = sampleDepth - realDepth;
  102. if ( delta > minDistance && delta < maxDistance ) { // if fragment is before sample point, increase occlusion
  103. occlusion += 1.0;
  104. }
  105. }
  106. occlusion = clamp( occlusion / float( KERNEL_SIZE ), 0.0, 1.0 );
  107. gl_FragColor = vec4( vec3( 1.0 - occlusion ), 1.0 );
  108. }`
  109. };
  110. const SSAODepthShader = {
  111. defines: {
  112. 'PERSPECTIVE_CAMERA': 1
  113. },
  114. uniforms: {
  115. 'tDepth': { value: null },
  116. 'cameraNear': { value: null },
  117. 'cameraFar': { value: null },
  118. },
  119. vertexShader:
  120. `varying vec2 vUv;
  121. void main() {
  122. vUv = uv;
  123. gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  124. }`,
  125. fragmentShader:
  126. `uniform sampler2D tDepth;
  127. uniform float cameraNear;
  128. uniform float cameraFar;
  129. varying vec2 vUv;
  130. #include <packing>
  131. float getLinearDepth( const in vec2 screenPosition ) {
  132. #if PERSPECTIVE_CAMERA == 1
  133. float fragCoordZ = texture2D( tDepth, screenPosition ).x;
  134. float viewZ = perspectiveDepthToViewZ( fragCoordZ, cameraNear, cameraFar );
  135. return viewZToOrthographicDepth( viewZ, cameraNear, cameraFar );
  136. #else
  137. return texture2D( tDepth, screenPosition ).x;
  138. #endif
  139. }
  140. void main() {
  141. float depth = getLinearDepth( vUv );
  142. gl_FragColor = vec4( vec3( 1.0 - depth ), 1.0 );
  143. }`
  144. };
  145. const SSAOBlurShader = {
  146. uniforms: {
  147. 'tDiffuse': { value: null },
  148. 'resolution': { value: new Vector2() }
  149. },
  150. vertexShader:
  151. `varying vec2 vUv;
  152. void main() {
  153. vUv = uv;
  154. gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  155. }`,
  156. fragmentShader:
  157. `uniform sampler2D tDiffuse;
  158. uniform vec2 resolution;
  159. varying vec2 vUv;
  160. void main() {
  161. vec2 texelSize = ( 1.0 / resolution );
  162. float result = 0.0;
  163. for ( int i = - 2; i <= 2; i ++ ) {
  164. for ( int j = - 2; j <= 2; j ++ ) {
  165. vec2 offset = ( vec2( float( i ), float( j ) ) ) * texelSize;
  166. result += texture2D( tDiffuse, vUv + offset ).r;
  167. }
  168. }
  169. gl_FragColor = vec4( vec3( result / ( 5.0 * 5.0 ) ), 1.0 );
  170. }`
  171. };
  172. export { SSAOShader, SSAODepthShader, SSAOBlurShader };