import { DataTexture, Matrix4, RepeatWrapping, Vector2, Vector3, } from 'three'; /** * References: * - implemented algorithm - GTAO * - https://iryoku.com/downloads/Practical-Realtime-Strategies-for-Accurate-Indirect-Occlusion.pdf * - https://github.com/Patapom/GodComplex/blob/master/Tests/TestHBIL/2018%20Mayaux%20-%20Horizon-Based%20Indirect%20Lighting%20(HBIL).pdf * * - other AO algorithms that are not implemented here: * - Screen Space Ambient Occlusion (SSAO), see also SSAOShader.js * - http://john-chapman-graphics.blogspot.com/2013/01/ssao-tutorial.html * - https://learnopengl.com/Advanced-Lighting/SSAO * - https://creativecoding.soe.ucsc.edu/courses/cmpm164/_schedule/AmbientOcclusion.pdf * - https://drive.google.com/file/d/1SyagcEVplIm2KkRD3WQYSO9O0Iyi1hfy/edit * - Scalable Ambient Occlusion (SAO), see also SAOShader.js * - https://casual-effects.com/research/McGuire2012SAO/index.html * - https://research.nvidia.com/sites/default/files/pubs/2012-06_Scalable-Ambient-Obscurance/McGuire12SAO.pdf * - N8HO * - https://github.com/N8python/n8ao * - Horizon Based Ambient Occlusion (HBAO) * - http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.577.2286&rep=rep1&type=pdf * - https://www.derschmale.com/2013/12/20/an-alternative-implementation-for-hbao-2/ * * - further reading * - https://ceur-ws.org/Vol-3027/paper5.pdf * - https://www.comp.nus.edu.sg/~lowkl/publications/mssao_visual_computer_2012.pdf * - https://web.ics.purdue.edu/~tmcgraw/papers/mcgraw-ao-2008.pdf * - https://www.activision.com/cdn/research/Practical_Real_Time_Strategies_for_Accurate_Indirect_Occlusion_NEW%20VERSION_COLOR.pdf * - https://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.390.2463&rep=rep1&type=pdf * - https://www.intel.com/content/www/us/en/developer/articles/technical/adaptive-screen-space-ambient-occlusion.html */ const GTAOShader = { name: 'GTAOShader', defines: { PERSPECTIVE_CAMERA: 1, SAMPLES: 16, NORMAL_VECTOR_TYPE: 1, DEPTH_SWIZZLING: 'x', SCREEN_SPACE_RADIUS: 0, SCREEN_SPACE_RADIUS_SCALE: 100.0, SCENE_CLIP_BOX: 0, }, uniforms: { tNormal: { value: null }, tDepth: { value: null }, tNoise: { value: null }, resolution: { value: new Vector2() }, cameraNear: { value: null }, cameraFar: { value: null }, cameraProjectionMatrix: { value: new Matrix4() }, cameraProjectionMatrixInverse: { value: new Matrix4() }, cameraWorldMatrix: { value: new Matrix4() }, radius: { value: 0.25 }, distanceExponent: { value: 1. }, thickness: { value: 1. }, distanceFallOff: { value: 1. }, scale: { value: 1. }, sceneBoxMin: { value: new Vector3( - 1, - 1, - 1 ) }, sceneBoxMax: { value: new Vector3( 1, 1, 1 ) }, }, vertexShader: /* glsl */` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); }`, fragmentShader: /* glsl */` varying vec2 vUv; uniform highp sampler2D tNormal; uniform highp sampler2D tDepth; uniform sampler2D tNoise; uniform vec2 resolution; uniform float cameraNear; uniform float cameraFar; uniform mat4 cameraProjectionMatrix; uniform mat4 cameraProjectionMatrixInverse; uniform mat4 cameraWorldMatrix; uniform float radius; uniform float distanceExponent; uniform float thickness; uniform float distanceFallOff; uniform float scale; #if SCENE_CLIP_BOX == 1 uniform vec3 sceneBoxMin; uniform vec3 sceneBoxMax; #endif #include #include #ifndef FRAGMENT_OUTPUT #define FRAGMENT_OUTPUT vec4(vec3(ao), 1.) #endif vec3 getViewPosition(const in vec2 screenPosition, const in float depth) { vec4 clipSpacePosition = vec4(vec3(screenPosition, depth) * 2.0 - 1.0, 1.0); vec4 viewSpacePosition = cameraProjectionMatrixInverse * clipSpacePosition; return viewSpacePosition.xyz / viewSpacePosition.w; } float getDepth(const vec2 uv) { return textureLod(tDepth, uv.xy, 0.0).DEPTH_SWIZZLING; } float fetchDepth(const ivec2 uv) { return texelFetch(tDepth, uv.xy, 0).DEPTH_SWIZZLING; } float getViewZ(const in float depth) { #if PERSPECTIVE_CAMERA == 1 return perspectiveDepthToViewZ(depth, cameraNear, cameraFar); #else return orthographicDepthToViewZ(depth, cameraNear, cameraFar); #endif } vec3 computeNormalFromDepth(const vec2 uv) { vec2 size = vec2(textureSize(tDepth, 0)); ivec2 p = ivec2(uv * size); float c0 = fetchDepth(p); float l2 = fetchDepth(p - ivec2(2, 0)); float l1 = fetchDepth(p - ivec2(1, 0)); float r1 = fetchDepth(p + ivec2(1, 0)); float r2 = fetchDepth(p + ivec2(2, 0)); float b2 = fetchDepth(p - ivec2(0, 2)); float b1 = fetchDepth(p - ivec2(0, 1)); float t1 = fetchDepth(p + ivec2(0, 1)); float t2 = fetchDepth(p + ivec2(0, 2)); float dl = abs((2.0 * l1 - l2) - c0); float dr = abs((2.0 * r1 - r2) - c0); float db = abs((2.0 * b1 - b2) - c0); float dt = abs((2.0 * t1 - t2) - c0); vec3 ce = getViewPosition(uv, c0).xyz; vec3 dpdx = (dl < dr) ? ce - getViewPosition((uv - vec2(1.0 / size.x, 0.0)), l1).xyz : -ce + getViewPosition((uv + vec2(1.0 / size.x, 0.0)), r1).xyz; vec3 dpdy = (db < dt) ? ce - getViewPosition((uv - vec2(0.0, 1.0 / size.y)), b1).xyz : -ce + getViewPosition((uv + vec2(0.0, 1.0 / size.y)), t1).xyz; return normalize(cross(dpdx, dpdy)); } vec3 getViewNormal(const vec2 uv) { #if NORMAL_VECTOR_TYPE == 2 return normalize(textureLod(tNormal, uv, 0.).rgb); #elif NORMAL_VECTOR_TYPE == 1 return unpackRGBToNormal(textureLod(tNormal, uv, 0.).rgb); #else return computeNormalFromDepth(uv); #endif } vec3 getSceneUvAndDepth(vec3 sampleViewPos) { vec4 sampleClipPos = cameraProjectionMatrix * vec4(sampleViewPos, 1.); vec2 sampleUv = sampleClipPos.xy / sampleClipPos.w * 0.5 + 0.5; float sampleSceneDepth = getDepth(sampleUv); return vec3(sampleUv, sampleSceneDepth); } void main() { float depth = getDepth(vUv.xy); if (depth >= 1.0) { discard; return; } vec3 viewPos = getViewPosition(vUv, depth); vec3 viewNormal = getViewNormal(vUv); float radiusToUse = radius; float distanceFalloffToUse = thickness; #if SCREEN_SPACE_RADIUS == 1 float radiusScale = getViewPosition(vec2(0.5 + float(SCREEN_SPACE_RADIUS_SCALE) / resolution.x, 0.0), depth).x; radiusToUse *= radiusScale; distanceFalloffToUse *= radiusScale; #endif #if SCENE_CLIP_BOX == 1 vec3 worldPos = (cameraWorldMatrix * vec4(viewPos, 1.0)).xyz; float boxDistance = length(max(vec3(0.0), max(sceneBoxMin - worldPos, worldPos - sceneBoxMax))); if (boxDistance > radiusToUse) { discard; return; } #endif vec2 noiseResolution = vec2(textureSize(tNoise, 0)); vec2 noiseUv = vUv * resolution / noiseResolution; vec4 noiseTexel = textureLod(tNoise, noiseUv, 0.0); vec3 randomVec = noiseTexel.xyz * 2.0 - 1.0; vec3 tangent = normalize(vec3(randomVec.xy, 0.)); vec3 bitangent = vec3(-tangent.y, tangent.x, 0.); mat3 kernelMatrix = mat3(tangent, bitangent, vec3(0., 0., 1.)); const int DIRECTIONS = SAMPLES < 30 ? 3 : 5; const int STEPS = (SAMPLES + DIRECTIONS - 1) / DIRECTIONS; float ao = 0.0, totalWeight = 0.0; for (int i = 0; i < DIRECTIONS; ++i) { float angle = float(i) / float(DIRECTIONS) * PI; vec4 sampleDir = vec4(cos(angle), sin(angle), 0., 0.5 + 0.5 * noiseTexel.w); sampleDir.xyz = normalize(kernelMatrix * sampleDir.xyz); vec3 viewDir = normalize(-viewPos.xyz); vec3 sliceBitangent = normalize(cross(sampleDir.xyz, viewDir)); vec3 sliceTangent = cross(sliceBitangent, viewDir); vec3 normalInSlice = normalize(viewNormal - sliceBitangent * dot(viewNormal, sliceBitangent)); vec3 tangentToNormalInSlice = cross(normalInSlice, sliceBitangent); vec2 cosHorizons = vec2(dot(viewDir, tangentToNormalInSlice), dot(viewDir, -tangentToNormalInSlice)); for (int j = 0; j < STEPS; ++j) { vec3 sampleViewOffset = sampleDir.xyz * radiusToUse * sampleDir.w * pow(float(j + 1) / float(STEPS), distanceExponent); vec3 sampleSceneUvDepth = getSceneUvAndDepth(viewPos + sampleViewOffset); vec3 sampleSceneViewPos = getViewPosition(sampleSceneUvDepth.xy, sampleSceneUvDepth.z); vec3 viewDelta = sampleSceneViewPos - viewPos; if (abs(viewDelta.z) < thickness) { float sampleCosHorizon = dot(viewDir, normalize(viewDelta)); cosHorizons.x += max(0., (sampleCosHorizon - cosHorizons.x) * mix(1., 2. / float(j + 2), distanceFallOff)); } sampleSceneUvDepth = getSceneUvAndDepth(viewPos - sampleViewOffset); sampleSceneViewPos = getViewPosition(sampleSceneUvDepth.xy, sampleSceneUvDepth.z); viewDelta = sampleSceneViewPos - viewPos; if (abs(viewDelta.z) < thickness) { float sampleCosHorizon = dot(viewDir, normalize(viewDelta)); cosHorizons.y += max(0., (sampleCosHorizon - cosHorizons.y) * mix(1., 2. / float(j + 2), distanceFallOff)); } } vec2 sinHorizons = sqrt(1. - cosHorizons * cosHorizons); float nx = dot(normalInSlice, sliceTangent); float ny = dot(normalInSlice, viewDir); float nxb = 1. / 2. * (acos(cosHorizons.y) - acos(cosHorizons.x) + sinHorizons.x * cosHorizons.x - sinHorizons.y * cosHorizons.y); float nyb = 1. / 2. * (2. - cosHorizons.x * cosHorizons.x - cosHorizons.y * cosHorizons.y); float occlusion = nx * nxb + ny * nyb; ao += occlusion; } ao = clamp(ao / float(DIRECTIONS), 0., 1.); #if SCENE_CLIP_BOX == 1 ao = mix(ao, 1., smoothstep(0., radiusToUse, boxDistance)); #endif ao = pow(ao, scale); gl_FragColor = FRAGMENT_OUTPUT; }` }; const GTAODepthShader = { name: 'GTAODepthShader', defines: { PERSPECTIVE_CAMERA: 1 }, uniforms: { tDepth: { value: null }, cameraNear: { value: null }, cameraFar: { value: null }, }, vertexShader: /* glsl */` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); }`, fragmentShader: /* glsl */` uniform sampler2D tDepth; uniform float cameraNear; uniform float cameraFar; varying vec2 vUv; #include 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 ); }` }; const GTAOBlendShader = { name: 'GTAOBlendShader', uniforms: { tDiffuse: { value: null }, intensity: { value: 1.0 } }, vertexShader: /* glsl */` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); }`, fragmentShader: /* glsl */` uniform float intensity; uniform sampler2D tDiffuse; varying vec2 vUv; void main() { vec4 texel = texture2D( tDiffuse, vUv ); gl_FragColor = vec4(mix(vec3(1.), texel.rgb, intensity), texel.a); }` }; function generateMagicSquareNoise( size = 5 ) { const noiseSize = Math.floor( size ) % 2 === 0 ? Math.floor( size ) + 1 : Math.floor( size ); const magicSquare = generateMagicSquare( noiseSize ); const noiseSquareSize = magicSquare.length; const data = new Uint8Array( noiseSquareSize * 4 ); for ( let inx = 0; inx < noiseSquareSize; ++ inx ) { const iAng = magicSquare[ inx ]; const angle = ( 2 * Math.PI * iAng ) / noiseSquareSize; const randomVec = new Vector3( Math.cos( angle ), Math.sin( angle ), 0 ).normalize(); data[ inx * 4 ] = ( randomVec.x * 0.5 + 0.5 ) * 255; data[ inx * 4 + 1 ] = ( randomVec.y * 0.5 + 0.5 ) * 255; data[ inx * 4 + 2 ] = 127; data[ inx * 4 + 3 ] = 255; } const noiseTexture = new DataTexture( data, noiseSize, noiseSize ); noiseTexture.wrapS = RepeatWrapping; noiseTexture.wrapT = RepeatWrapping; noiseTexture.needsUpdate = true; return noiseTexture; } function generateMagicSquare( size ) { const noiseSize = Math.floor( size ) % 2 === 0 ? Math.floor( size ) + 1 : Math.floor( size ); const noiseSquareSize = noiseSize * noiseSize; const magicSquare = Array( noiseSquareSize ).fill( 0 ); let i = Math.floor( noiseSize / 2 ); let j = noiseSize - 1; for ( let num = 1; num <= noiseSquareSize; ) { if ( i === - 1 && j === noiseSize ) { j = noiseSize - 2; i = 0; } else { if ( j === noiseSize ) { j = 0; } if ( i < 0 ) { i = noiseSize - 1; } } if ( magicSquare[ i * noiseSize + j ] !== 0 ) { j -= 2; i ++; continue; } else { magicSquare[ i * noiseSize + j ] = num ++; } j ++; i --; } return magicSquare; } export { generateMagicSquareNoise, GTAOShader, GTAODepthShader, GTAOBlendShader };