SSAOShader.js 6.4 KB

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