301 lines
		
	
	
		
			6.3 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
		
		
			
		
	
	
			301 lines
		
	
	
		
			6.3 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
| 
								 | 
							
								import {
							 | 
						||
| 
								 | 
							
									Matrix4,
							 | 
						||
| 
								 | 
							
									Vector2
							 | 
						||
| 
								 | 
							
								} from 'three';
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								/**
							 | 
						||
| 
								 | 
							
								 * References:
							 | 
						||
| 
								 | 
							
								 * http://john-chapman-graphics.blogspot.com/2013/01/ssao-tutorial.html
							 | 
						||
| 
								 | 
							
								 * https://learnopengl.com/Advanced-Lighting/SSAO
							 | 
						||
| 
								 | 
							
								 * https://github.com/McNopper/OpenGL/blob/master/Example28/shader/ssao.frag.glsl
							 | 
						||
| 
								 | 
							
								 */
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								const SSAOShader = {
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									name: 'SSAOShader',
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									defines: {
							 | 
						||
| 
								 | 
							
										'PERSPECTIVE_CAMERA': 1,
							 | 
						||
| 
								 | 
							
										'KERNEL_SIZE': 32
							 | 
						||
| 
								 | 
							
									},
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									uniforms: {
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										'tNormal': { value: null },
							 | 
						||
| 
								 | 
							
										'tDepth': { value: null },
							 | 
						||
| 
								 | 
							
										'tNoise': { value: null },
							 | 
						||
| 
								 | 
							
										'kernel': { value: null },
							 | 
						||
| 
								 | 
							
										'cameraNear': { value: null },
							 | 
						||
| 
								 | 
							
										'cameraFar': { value: null },
							 | 
						||
| 
								 | 
							
										'resolution': { value: new Vector2() },
							 | 
						||
| 
								 | 
							
										'cameraProjectionMatrix': { value: new Matrix4() },
							 | 
						||
| 
								 | 
							
										'cameraInverseProjectionMatrix': { value: new Matrix4() },
							 | 
						||
| 
								 | 
							
										'kernelRadius': { value: 8 },
							 | 
						||
| 
								 | 
							
										'minDistance': { value: 0.005 },
							 | 
						||
| 
								 | 
							
										'maxDistance': { value: 0.05 },
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									},
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									vertexShader: /* glsl */`
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										varying vec2 vUv;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										void main() {
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											vUv = uv;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										}`,
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									fragmentShader: /* glsl */`
							 | 
						||
| 
								 | 
							
										uniform highp sampler2D tNormal;
							 | 
						||
| 
								 | 
							
										uniform highp 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
							 | 
						||
| 
								 | 
							
										uniform float maxDistance; // avoid the influence of fragments which are too far away
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										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 );
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											if ( depth == 1.0 ) {
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
												gl_FragColor = vec4( 1.0 ); // don't influence background
							 | 
						||
| 
								 | 
							
												
							 | 
						||
| 
								 | 
							
											} else {
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
												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 = vec3( texture2D( tNoise, vUv * noiseScale ).r );
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
												// compute matrix used to reorient a kernel vector
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
												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
							 | 
						||
| 
								 | 
							
													vec3 samplePoint = viewPosition + ( sampleVector * kernelRadius ); // calculate sample point
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
													vec4 samplePointNDC = cameraProjectionMatrix * vec4( samplePoint, 1.0 ); // project point and calculate NDC
							 | 
						||
| 
								 | 
							
													samplePointNDC /= samplePointNDC.w;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
													vec2 samplePointUv = samplePointNDC.xy * 0.5 + 0.5; // compute uv coordinates
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
													float realDepth = getLinearDepth( samplePointUv ); // get linear depth from depth texture
							 | 
						||
| 
								 | 
							
													float sampleDepth = viewZToOrthographicDepth( samplePoint.z, cameraNear, cameraFar ); // compute linear depth of the sample view Z value
							 | 
						||
| 
								 | 
							
													float delta = sampleDepth - realDepth;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
													if ( delta > minDistance && delta < maxDistance ) { // if fragment is before sample point, increase occlusion
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
														occlusion += 1.0;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
													}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
												}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
												occlusion = clamp( occlusion / float( KERNEL_SIZE ), 0.0, 1.0 );
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
												gl_FragColor = vec4( vec3( 1.0 - occlusion ), 1.0 );
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										}`
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								};
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								const SSAODepthShader = {
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									name: 'SSAODepthShader',
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									defines: {
							 | 
						||
| 
								 | 
							
										'PERSPECTIVE_CAMERA': 1
							 | 
						||
| 
								 | 
							
									},
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									uniforms: {
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										'tDepth': { value: null },
							 | 
						||
| 
								 | 
							
										'cameraNear': { value: null },
							 | 
						||
| 
								 | 
							
										'cameraFar': { value: null },
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									},
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									vertexShader:
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										`varying vec2 vUv;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										void main() {
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											vUv = uv;
							 | 
						||
| 
								 | 
							
											gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										}`,
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									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 );
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										}`
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								};
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								const SSAOBlurShader = {
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									name: 'SSAOBlurShader',
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									uniforms: {
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										'tDiffuse': { value: null },
							 | 
						||
| 
								 | 
							
										'resolution': { value: new Vector2() }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									},
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									vertexShader:
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										`varying vec2 vUv;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										void main() {
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											vUv = uv;
							 | 
						||
| 
								 | 
							
											gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										}`,
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									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 );
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										}`
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								};
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								export { SSAOShader, SSAODepthShader, SSAOBlurShader };
							 |