SSAOShader.js 6.7 KB

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