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 }; |