SSAOShader.js 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  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. var 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: [ 'varying vec2 vUv;', 'void main() {', ' vUv = uv;', ' gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );', '}' ].join( '\n' ),
  55. fragmentShader: [ 'uniform sampler2D tDiffuse;', 'uniform sampler2D tNormal;', 'uniform sampler2D tDepth;', 'uniform sampler2D tNoise;', 'uniform vec3 kernel[ KERNEL_SIZE ];', 'uniform vec2 resolution;', 'uniform float cameraNear;', 'uniform float cameraFar;', 'uniform mat4 cameraProjectionMatrix;', 'uniform mat4 cameraInverseProjectionMatrix;', 'uniform float kernelRadius;', 'uniform float minDistance;', // avoid artifacts caused by neighbour fragments with minimal depth difference
  56. 'uniform float maxDistance;', // avoid the influence of fragments which are too far away
  57. 'varying vec2 vUv;', '#include <packing>', 'float getDepth( const in vec2 screenPosition ) {', ' return texture2D( tDepth, screenPosition ).x;', '}', 'float getLinearDepth( const in vec2 screenPosition ) {', ' #if PERSPECTIVE_CAMERA == 1', ' float fragCoordZ = texture2D( tDepth, screenPosition ).x;', ' float viewZ = perspectiveDepthToViewZ( fragCoordZ, cameraNear, cameraFar );', ' return viewZToOrthographicDepth( viewZ, cameraNear, cameraFar );', ' #else', ' return texture2D( tDepth, screenPosition ).x;', ' #endif', '}', 'float getViewZ( const in float depth ) {', ' #if PERSPECTIVE_CAMERA == 1', ' return perspectiveDepthToViewZ( depth, cameraNear, cameraFar );', ' #else', ' return orthographicDepthToViewZ( depth, cameraNear, cameraFar );', ' #endif', '}', 'vec3 getViewPosition( const in vec2 screenPosition, const in float depth, const in float viewZ ) {', ' float clipW = cameraProjectionMatrix[2][3] * viewZ + cameraProjectionMatrix[3][3];', ' vec4 clipPosition = vec4( ( vec3( screenPosition, depth ) - 0.5 ) * 2.0, 1.0 );', ' clipPosition *= clipW; // unprojection.', ' return ( cameraInverseProjectionMatrix * clipPosition ).xyz;', '}', 'vec3 getViewNormal( const in vec2 screenPosition ) {', ' return unpackRGBToNormal( texture2D( tNormal, screenPosition ).xyz );', '}', 'void main() {', ' float depth = getDepth( vUv );', ' float viewZ = getViewZ( depth );', ' vec3 viewPosition = getViewPosition( vUv, depth, viewZ );', ' vec3 viewNormal = getViewNormal( vUv );', ' vec2 noiseScale = vec2( resolution.x / 4.0, resolution.y / 4.0 );', ' vec3 random = texture2D( tNoise, vUv * noiseScale ).xyz;', // compute matrix used to reorient a kernel vector
  58. ' vec3 tangent = normalize( random - viewNormal * dot( random, viewNormal ) );', ' vec3 bitangent = cross( viewNormal, tangent );', ' mat3 kernelMatrix = mat3( tangent, bitangent, viewNormal );', ' float occlusion = 0.0;', ' for ( int i = 0; i < KERNEL_SIZE; i ++ ) {', ' vec3 sampleVector = kernelMatrix * kernel[ i ];', // reorient sample vector in view space
  59. ' vec3 samplePoint = viewPosition + ( sampleVector * kernelRadius );', // calculate sample point
  60. ' vec4 samplePointNDC = cameraProjectionMatrix * vec4( samplePoint, 1.0 );', // project point and calculate NDC
  61. ' samplePointNDC /= samplePointNDC.w;', ' vec2 samplePointUv = samplePointNDC.xy * 0.5 + 0.5;', // compute uv coordinates
  62. ' float realDepth = getLinearDepth( samplePointUv );', // get linear depth from depth texture
  63. ' float sampleDepth = viewZToOrthographicDepth( samplePoint.z, cameraNear, cameraFar );', // compute linear depth of the sample view Z value
  64. ' float delta = sampleDepth - realDepth;', ' if ( delta > minDistance && delta < maxDistance ) {', // if fragment is before sample point, increase occlusion
  65. ' occlusion += 1.0;', ' }', ' }', ' occlusion = clamp( occlusion / float( KERNEL_SIZE ), 0.0, 1.0 );', ' gl_FragColor = vec4( vec3( 1.0 - occlusion ), 1.0 );', '}' ].join( '\n' )
  66. };
  67. var SSAODepthShader = {
  68. defines: {
  69. 'PERSPECTIVE_CAMERA': 1
  70. },
  71. uniforms: {
  72. 'tDepth': {
  73. value: null
  74. },
  75. 'cameraNear': {
  76. value: null
  77. },
  78. 'cameraFar': {
  79. value: null
  80. }
  81. },
  82. vertexShader: [ 'varying vec2 vUv;', 'void main() {', ' vUv = uv;', ' gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );', '}' ].join( '\n' ),
  83. fragmentShader: [ 'uniform sampler2D tDepth;', 'uniform float cameraNear;', 'uniform float cameraFar;', 'varying vec2 vUv;', '#include <packing>', 'float getLinearDepth( const in vec2 screenPosition ) {', ' #if PERSPECTIVE_CAMERA == 1', ' float fragCoordZ = texture2D( tDepth, screenPosition ).x;', ' float viewZ = perspectiveDepthToViewZ( fragCoordZ, cameraNear, cameraFar );', ' return viewZToOrthographicDepth( viewZ, cameraNear, cameraFar );', ' #else', ' return texture2D( tDepth, screenPosition ).x;', ' #endif', '}', 'void main() {', ' float depth = getLinearDepth( vUv );', ' gl_FragColor = vec4( vec3( 1.0 - depth ), 1.0 );', '}' ].join( '\n' )
  84. };
  85. var SSAOBlurShader = {
  86. uniforms: {
  87. 'tDiffuse': {
  88. value: null
  89. },
  90. 'resolution': {
  91. value: new THREE.Vector2()
  92. }
  93. },
  94. vertexShader: [ 'varying vec2 vUv;', 'void main() {', ' vUv = uv;', ' gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );', '}' ].join( '\n' ),
  95. fragmentShader: [ 'uniform sampler2D tDiffuse;', 'uniform vec2 resolution;', 'varying vec2 vUv;', 'void main() {', ' vec2 texelSize = ( 1.0 / resolution );', ' float result = 0.0;', ' for ( int i = - 2; i <= 2; i ++ ) {', ' for ( int j = - 2; j <= 2; j ++ ) {', ' vec2 offset = ( vec2( float( i ), float( j ) ) ) * texelSize;', ' result += texture2D( tDiffuse, vUv + offset ).r;', ' }', ' }', ' gl_FragColor = vec4( vec3( result / ( 5.0 * 5.0 ) ), 1.0 );', '}' ].join( '\n' )
  96. };
  97. THREE.SSAOBlurShader = SSAOBlurShader;
  98. THREE.SSAODepthShader = SSAODepthShader;
  99. THREE.SSAOShader = SSAOShader;
  100. } )();