GTAONode: Implement composite. (mrdoob#28851)

* GTAONode: Implement composite. * Examples: Clean up.
lmj01 · Jul 11, 2024 · 0c11af3 · 0c11af3
1 parent 3230889
commit 0c11af3
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 13 deletions.
diff --git a/examples/screenshots/webgpu_postprocessing_ao.jpg b/examples/screenshots/webgpu_postprocessing_ao.jpg
diff --git a/examples/webgpu_postprocessing_ao.html b/examples/webgpu_postprocessing_ao.html
@@ -28,9 +28,15 @@
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
 			import Stats from 'three/addons/libs/stats.module.js';
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
 			let camera, scene, renderer, postProcessing, controls, clock, stats, mixer;
 
+			const params = {
+				blendIntensity: 1,
+				enabled: true
+			};
+
 			init();
 
 			async function init() {
@@ -102,6 +108,31 @@
 
 				window.addEventListener( 'resize', onWindowResize );
 
+				//
+
+				const gui = new GUI();
+				gui.title( 'AO settings' );
+				gui.add( params, 'blendIntensity' ).min( 0 ).max( 1 ).onChange( ( value ) => {
+
+					aoPass.blendIntensity.value = value;
+
+				} );
+				gui.add( params, 'enabled' ).onChange( ( value ) => {
+
+					if ( value === true ) {
+
+						postProcessing.outputNode = aoPass;
+
+					} else {
+
+						postProcessing.outputNode = scenePassColor;
+
+					}
+
+					postProcessing.needsUpdate = true;
+
+				} );
+
 			}
 
 			function onWindowResize() {

diff --git a/src/nodes/display/GTAONode.js b/src/nodes/display/GTAONode.js
@@ -36,6 +36,7 @@ class GTAONode extends TempNode {
 		this.distanceExponent = uniform( 1 );
 		this.distanceFallOff = uniform( 1 );
 		this.scale = uniform( 1 );
+		this.blendIntensity = uniform( 1 );
 		this.noiseNode = texture( generateMagicSquareNoise() );
 
 		this.cameraProjectionMatrix = uniform( camera.projectionMatrix );
@@ -53,12 +54,6 @@ class GTAONode extends TempNode {
 
 	}
 
-	getTextureNode() {
-
-		return this._textureNode;
-
-	}
-
 	setSize( width, height ) {
 
 		this.resolution.value.set( width, height );
@@ -115,7 +110,7 @@ class GTAONode extends TempNode {
 
 		const uvNode = uv();
 
-		// const sampleTexture = ( uv ) => textureNode.uv( uv );
+		const sampleTexture = ( uv ) => textureNode.uv( uv );
 		const sampleDepth = ( uv ) => this.depthNode.uv( uv ).x;
 		const sampleNoise = ( uv ) => this.noiseNode.uv( uv );
 
@@ -228,18 +223,22 @@ class GTAONode extends TempNode {
 
 		} );
 
+		const composite = tslFn( () => {
+
+			const beauty = sampleTexture( uvNode );
+			const ao = this._textureNode.uv( uvNode );
+
+			return beauty.mul( mix( vec3( 1.0 ), ao, this.blendIntensity ) );
+
+		} );
+
 		const material = this._material || ( this._material = builder.createNodeMaterial() );
 		material.fragmentNode = ao().context( builder.getSharedContext() );
 		material.needsUpdate = true;
 
 		//
 
-		const properties = builder.getNodeProperties( this );
-		properties.textureNode = textureNode;
-
-		//
-
-		return this._textureNode;
+		return composite();
 
 	}