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();
@@ -143,7 +144,7 @@
 				// scene context
 
 				scenePass.contextNode = context( {
-					ao: aoPassOutput.sample( screenUV ).r
+					ao: select( materialTransparent, 1, aoPassOutput.sample( screenUV ).r )
 				} );
 
 				// final output + traa
@@ -170,7 +171,7 @@
 
 				//
 
-				const transparentMesh = new THREE.Mesh( new THREE.PlaneGeometry( 1.8, 2 ), new THREE.MeshStandardNodeMaterial( { transparent: true, opacity: .1 } ) );
+				transparentMesh = new THREE.Mesh( new THREE.PlaneGeometry( 1.8, 2 ), new THREE.MeshStandardNodeMaterial( { transparent: true, opacity: params.transparentOpacity } ) );
 				transparentMesh.material.transparent = true;
 				transparentMesh.position.z = 0;
 				transparentMesh.position.y = 0.5;
@@ -192,6 +193,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 +222,8 @@
 				aoPass.scale.value = params.scale;
 				aoPass.thickness.value = params.thickness;
 
+				transparentMesh.material.opacity = params.transparentOpacity;
+
 			}
 
 			function onWindowResize() {

src/Three.TSL.js

@@ -309,6 +309,7 @@ export const materialSpecularIntensity = TSL.materialSpecularIntensity;
 export const materialSpecularStrength = TSL.materialSpecularStrength;
 export const materialThickness = TSL.materialThickness;
 export const materialTransmission = TSL.materialTransmission;
+export const materialTransparent = TSL.materialTransparent;
 export const max = TSL.max;
 export const maxMipLevel = TSL.maxMipLevel;
 export const mediumpModelViewMatrix = TSL.mediumpModelViewMatrix;

src/nodes/accessors/MaterialProperties.js

@@ -57,3 +57,11 @@ export const materialEnvRotation = /*@__PURE__*/ uniform( new Matrix4() ).onRefe
 	return _m1;
 
 } );
+
+/**
+ * TSL object that represents whether the material is transparent.
+ *
+ * @tsl
+ * @type {UniformNode<bool>}
+ */
+export const materialTransparent = /*@__PURE__*/ uniform( false ).onReference( ( { material } ) => material ).onObjectUpdate( ( { material } ) => material.transparent );