SSAOShader.js 6.6 KB

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