TSL: Introduce builtinAOContext and Enhance AO Post-Processing Example

examples/webgpu_postprocessing_ao.html

@@ -36,7 +36,7 @@
 		<script type="module">
 
 			import * as THREE from 'three/webgpu';
-			import { sample, pass, mrt, context, screenUV, normalView, velocity, vec3, vec4, directionToColor, colorToDirection, colorSpaceToWorking } from 'three/tsl';
+			import { sample, pass, mrt, context, screenUV, normalView, velocity, vec3, vec4, directionToColor, colorToDirection, colorSpaceToWorking, materialTransparent, select } from 'three/tsl';
 			import { ao } from 'three/addons/tsl/display/GTAONode.js';
 			import { traa } from 'three/addons/tsl/display/TRAANode.js';
 
@@ -49,7 +49,7 @@
 
 			let camera, scene, renderer, postProcessing, controls;
 
-			let aoPass, traaPass;
+			let aoPass, traaPass, transparentMesh;
 
 			const params = {
 				samples: 16,
@@ -58,7 +58,8 @@
 				radius: 0.25,
 				scale: 1,
 				thickness: 1,
-				aoOnly: false
+				aoOnly: false,
+				transparentOpacity: 0.3
 			};
 
 			init();
@@ -142,8 +143,18 @@
 
 				// scene context
 
+				const aoSample = aoPassOutput.sample( screenUV ).r;
+
 				scenePass.contextNode = context( {
-					ao: aoPassOutput.sample( screenUV ).r
+
+					getAO: ( node, { material } ) => {
+
+						if ( material.transparent === true ) return node;
+
+						return node !== null ? node.mul( aoSample ) : aoSample;
+
+					}
+
 				} );
 
 				// final output + traa
@@ -170,8 +181,7 @@
 
 				//
 
-				const transparentMesh = new THREE.Mesh( new THREE.PlaneGeometry( 1.8, 2 ), new THREE.MeshStandardNodeMaterial( { transparent: true, opacity: .1 } ) );
-				transparentMesh.material.transparent = true;
+				transparentMesh = new THREE.Mesh( new THREE.PlaneGeometry( 1.8, 2 ), new THREE.MeshStandardNodeMaterial( { transparent: true, opacity: params.transparentOpacity } ) );
 				transparentMesh.position.z = 0;
 				transparentMesh.position.y = 0.5;
 				transparentMesh.visible = false;
@@ -192,6 +202,7 @@
 				gui.add( params, 'thickness', 0.01, 2 ).onChange( updateParameters );
 				gui.add( aoPass, 'useTemporalFiltering' ).name( 'temporal filtering' );
 				gui.add( transparentMesh, 'visible' ).name( 'show transparent mesh' );
+				gui.add( params, 'transparentOpacity', 0, 1, 0.01 ).name( 'transparent opacity' ).onChange( updateParameters );
 				gui.add( params, 'aoOnly' ).onChange( ( value ) => {
 
 					if ( value === true ) {
@@ -220,6 +231,8 @@
 				aoPass.scale.value = params.scale;
 				aoPass.thickness.value = params.thickness;
 
+				transparentMesh.material.opacity = params.transparentOpacity;
+
 			}
 
 			function onWindowResize() {

src/materials/nodes/NodeMaterial.js

@@ -1060,17 +1060,25 @@ class NodeMaterial extends Material {
 
 		}
 
-		let aoNode = builder.context.ao || null;
+		let aoNode = this.aoNode;
 
-		if ( this.aoNode !== null || builder.material.aoMap ) {
+		if ( aoNode === null && builder.material.aoMap ) {
 
-			const mtlAO = this.aoNode !== null ? this.aoNode : materialAO;
+			aoNode = materialAO;
 
-			aoNode = aoNode !== null ? aoNode.mul( mtlAO ) : mtlAO;
+		}
+
+		if ( builder.context.getAO ) {
+
+			aoNode = builder.context.getAO( aoNode, { material: builder.material } );
+
+		} else {
+
+			aoNode = null;
 
 		}
 
-		if ( aoNode !== null ) {
+		if ( aoNode ) {
 
 			materialLightsNode.push( new AONode( aoNode ) );
 

src/materials/nodes/manager/NodeMaterialObserver.js

@@ -259,7 +259,7 @@ class NodeMaterialObserver {
 
 		}
 
-		if ( builder.context.modelViewMatrix || builder.context.modelNormalViewMatrix || builder.context.ao || builder.context.getShadow )
+		if ( builder.context.modelViewMatrix || builder.context.modelNormalViewMatrix || builder.context.getAO || builder.context.getShadow )
 			return true;
 
 		return false;