SSAOShader.js 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296
  1. console.warn( "THREE.SSAOShader: As part of the transition to ES6 Modules, the files in 'examples/js' were deprecated in May 2020 (r117) and will be deleted in December 2020 (r124). You can find more information about developing using ES6 Modules in https://threejs.org/docs/index.html#manual/en/introduction/Import-via-modules." );
  2. /**
  3. * @author Mugen87 / https://github.com/Mugen87
  4. *
  5. * References:
  6. * http://john-chapman-graphics.blogspot.com/2013/01/ssao-tutorial.html
  7. * https://learnopengl.com/Advanced-Lighting/SSAO
  8. * https://github.com/McNopper/OpenGL/blob/master/Example28/shader/ssao.frag.glsl
  9. */
  10. THREE.SSAOShader = {
  11. defines: {
  12. "PERSPECTIVE_CAMERA": 1,
  13. "KERNEL_SIZE": 32
  14. },
  15. uniforms: {
  16. "tDiffuse": { value: null },
  17. "tNormal": { value: null },
  18. "tDepth": { value: null },
  19. "tNoise": { value: null },
  20. "kernel": { value: null },
  21. "cameraNear": { value: null },
  22. "cameraFar": { value: null },
  23. "resolution": { value: new THREE.Vector2() },
  24. "cameraProjectionMatrix": { value: new THREE.Matrix4() },
  25. "cameraInverseProjectionMatrix": { value: new THREE.Matrix4() },
  26. "kernelRadius": { value: 8 },
  27. "minDistance": { value: 0.005 },
  28. "maxDistance": { value: 0.05 },
  29. },
  30. vertexShader: [
  31. "varying vec2 vUv;",
  32. "void main() {",
  33. " vUv = uv;",
  34. " gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
  35. "}"
  36. ].join( "\n" ),
  37. fragmentShader: [
  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( depthSampler, coord ).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 = texture2D( tNoise, vUv * noiseScale ).xyz;",
  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. ].join( "\n" )
  110. };
  111. THREE.SSAODepthShader = {
  112. defines: {
  113. "PERSPECTIVE_CAMERA": 1
  114. },
  115. uniforms: {
  116. "tDepth": { value: null },
  117. "cameraNear": { value: null },
  118. "cameraFar": { value: null },
  119. },
  120. vertexShader: [
  121. "varying vec2 vUv;",
  122. "void main() {",
  123. " vUv = uv;",
  124. " gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
  125. "}"
  126. ].join( "\n" ),
  127. fragmentShader: [
  128. "uniform sampler2D tDepth;",
  129. "uniform float cameraNear;",
  130. "uniform float cameraFar;",
  131. "varying vec2 vUv;",
  132. "#include <packing>",
  133. "float getLinearDepth( const in vec2 screenPosition ) {",
  134. " #if PERSPECTIVE_CAMERA == 1",
  135. " float fragCoordZ = texture2D( tDepth, screenPosition ).x;",
  136. " float viewZ = perspectiveDepthToViewZ( fragCoordZ, cameraNear, cameraFar );",
  137. " return viewZToOrthographicDepth( viewZ, cameraNear, cameraFar );",
  138. " #else",
  139. " return texture2D( depthSampler, coord ).x;",
  140. " #endif",
  141. "}",
  142. "void main() {",
  143. " float depth = getLinearDepth( vUv );",
  144. " gl_FragColor = vec4( vec3( 1.0 - depth ), 1.0 );",
  145. "}"
  146. ].join( "\n" )
  147. };
  148. THREE.SSAOBlurShader = {
  149. uniforms: {
  150. "tDiffuse": { value: null },
  151. "resolution": { value: new THREE.Vector2() }
  152. },
  153. vertexShader: [
  154. "varying vec2 vUv;",
  155. "void main() {",
  156. " vUv = uv;",
  157. " gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
  158. "}"
  159. ].join( "\n" ),
  160. fragmentShader: [
  161. "uniform sampler2D tDiffuse;",
  162. "uniform vec2 resolution;",
  163. "varying vec2 vUv;",
  164. "void main() {",
  165. " vec2 texelSize = ( 1.0 / resolution );",
  166. " float result = 0.0;",
  167. " for ( int i = - 2; i <= 2; i ++ ) {",
  168. " for ( int j = - 2; j <= 2; j ++ ) {",
  169. " vec2 offset = ( vec2( float( i ), float( j ) ) ) * texelSize;",
  170. " result += texture2D( tDiffuse, vUv + offset ).r;",
  171. " }",
  172. " }",
  173. " gl_FragColor = vec4( vec3( result / ( 5.0 * 5.0 ) ), 1.0 );",
  174. "}"
  175. ].join( "\n" )
  176. };