Examples: Use RedFormat and UnsignedInt248Type in SSAOPass. (#23210)

examples/jsm/postprocessing/SSAOPass.js

@@ -7,16 +7,17 @@ import {
 	DstAlphaFactor,
 	DstColorFactor,
 	FloatType,
-	LinearFilter,
 	MathUtils,
 	MeshNormalMaterial,
 	NearestFilter,
 	NoBlending,
-	RGBAFormat,
+	RedFormat,
+	LuminanceFormat,
+	DepthStencilFormat,
+	UnsignedInt248Type,
 	RepeatWrapping,
 	ShaderMaterial,
 	UniformsUtils,
-	UnsignedShortType,
 	Vector3,
 	WebGLRenderTarget,
 	ZeroFactor
@@ -61,30 +62,22 @@ class SSAOPass extends Pass {
 		// beauty render target
 
 		const depthTexture = new DepthTexture();
-		depthTexture.type = UnsignedShortType;
+		depthTexture.format = DepthStencilFormat;
+		depthTexture.type = UnsignedInt248Type;
 
-		this.beautyRenderTarget = new WebGLRenderTarget( this.width, this.height, {
-			minFilter: LinearFilter,
-			magFilter: LinearFilter,
-			format: RGBAFormat
-		} );
+		this.beautyRenderTarget = new WebGLRenderTarget( this.width, this.height );
 
 		// normal render target with depth buffer
 
 		this.normalRenderTarget = new WebGLRenderTarget( this.width, this.height, {
 			minFilter: NearestFilter,
 			magFilter: NearestFilter,
-			format: RGBAFormat,
 			depthTexture: depthTexture
 		} );
 
 		// ssao render target
 
-		this.ssaoRenderTarget = new WebGLRenderTarget( this.width, this.height, {
-			minFilter: LinearFilter,
-			magFilter: LinearFilter,
-			format: RGBAFormat
-		} );
+		this.ssaoRenderTarget = new WebGLRenderTarget( this.width, this.height );
 
 		this.blurRenderTarget = this.ssaoRenderTarget.clone();
 
@@ -191,6 +184,8 @@ class SSAOPass extends Pass {
 
 	render( renderer, writeBuffer /*, readBuffer, deltaTime, maskActive */ ) {
 
+		if ( renderer.capabilities.isWebGL2 === false ) this.noiseTexture.format = LuminanceFormat;
+
 		// render beauty
 
 		renderer.setRenderTarget( this.beautyRenderTarget );
@@ -391,26 +386,19 @@ class SSAOPass extends Pass {
 		const simplex = new SimplexNoise();
 
 		const size = width * height;
-		const data = new Float32Array( size * 4 );
+		const data = new Float32Array( size );
 
 		for ( let i = 0; i < size; i ++ ) {
 
-			const stride = i * 4;
-
 			const x = ( Math.random() * 2 ) - 1;
 			const y = ( Math.random() * 2 ) - 1;
 			const z = 0;
 
-			const noise = simplex.noise3d( x, y, z );
-
-			data[ stride ] = noise;
-			data[ stride + 1 ] = noise;
-			data[ stride + 2 ] = noise;
-			data[ stride + 3 ] = 1;
+			data[ i ] = simplex.noise3d( x, y, z );
 
 		}
 
-		this.noiseTexture = new DataTexture( data, width, height, RGBAFormat, FloatType );
+		this.noiseTexture = new DataTexture( data, width, height, RedFormat, FloatType );
 		this.noiseTexture.wrapS = RepeatWrapping;
 		this.noiseTexture.wrapT = RepeatWrapping;
 		this.noiseTexture.needsUpdate = true;

examples/jsm/shaders/SSAOShader.js

@@ -134,7 +134,7 @@ const SSAOShader = {
 			vec3 viewNormal = getViewNormal( vUv );
 
 			vec2 noiseScale = vec2( resolution.x / 4.0, resolution.y / 4.0 );
-			vec3 random = texture2D( tNoise, vUv * noiseScale ).xyz;
+			vec3 random = vec3( texture2D( tNoise, vUv * noiseScale ).r );
 
 			// compute matrix used to reorient a kernel vector