TSL: Update DoF node and example (#28772)

* update DoF node and example

* update build for now

* Revert "update build for now"

This reverts commit 9b25ea4826eff677c7f3212540f6b679dcf736f3.

* update build for now

build/three.webgpu.js

@@ -52939,16 +52939,17 @@ addNodeElement( 'sobel', sobel );
 
 class DepthOfFieldNode extends TempNode {
 
-	constructor( textureNode, viewZNode, focus = 1, aperture = 0.025, maxblur = 1 ) {
+	constructor( textureNode, viewZNode, focusNode, apertureNode, maxblurNode ) {
 
 		super();
 
 		this.textureNode = textureNode;
 		this.viewZNode = viewZNode;
 
-		this.focus = uniform( focus );
-		this.aperture = uniform( aperture );
-		this.maxblur = uniform( maxblur );
+		this.focusNode = focusNode;
+		this.apertureNode = apertureNode;
+		this.maxblurNode = maxblurNode;
+
 		this._aspect = uniform( 0 );
 
 		this.updateBeforeType = NodeUpdateType.RENDER;
@@ -52965,19 +52966,18 @@ class DepthOfFieldNode extends TempNode {
 
 	setup() {
 
-		const { textureNode } = this;
-
+		const textureNode = this.textureNode;
 		const uvNode = textureNode.uvNode || uv();
 
-		const sampleTexture = ( uv ) => this.textureNode.uv( uv );
+		const sampleTexture = ( uv ) => textureNode.uv( uv );
 
 		const dof = tslFn( () => {
 
 			const aspectcorrect = vec2( 1.0, this._aspect );
 
-			const factor = this.focus.add( this.viewZNode );
+			const factor = this.focusNode.add( this.viewZNode );
 
-			const dofblur = vec2( clamp( factor.mul( this.aperture ), this.maxblur.negate(), this.maxblur ) );
+			const dofblur = vec2( clamp( factor.mul( this.apertureNode ), this.maxblurNode.negate(), this.maxblurNode ) );
 
 			const dofblur9 = dofblur.mul( 0.9 );
 			const dofblur7 = dofblur.mul( 0.7 );
@@ -53044,7 +53044,7 @@ class DepthOfFieldNode extends TempNode {
 
 }
 
-const dof = ( node, viewZNode, focus, apeture, maxblur ) => nodeObject( new DepthOfFieldNode( nodeObject( node ), nodeObject( viewZNode ), focus, apeture, maxblur ) );
+const dof = ( node, viewZNode, focus = 1, aperture = 0.025, maxblur = 1 ) => nodeObject( new DepthOfFieldNode( nodeObject( node ), nodeObject( viewZNode ), nodeObject( focus ), nodeObject( aperture ), nodeObject( maxblur ) ) );
 
 addNodeElement( 'dof', dof );
 

examples/webgpu_postprocessing_dof.html

@@ -20,7 +20,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { cubeTexture, positionWorld, oscSine, timerGlobal, pass } from 'three/tsl';
+			import { cubeTexture, positionWorld, oscSine, timerGlobal, pass, uniform } from 'three/tsl';
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
@@ -102,6 +102,12 @@
 				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
+				const effectController = {
+					focus: uniform( 500.0 ),
+					aperture: uniform( 5 ),
+					maxblur: uniform( 0.01 )
+				};
+
 				// post processing
 
 				postProcessing = new THREE.PostProcessing( renderer );
@@ -111,7 +117,7 @@
 				const scenePassColor = scenePass.getTextureNode();
 				const scenePassViewZ = scenePass.getViewZNode();
 
-				const dofPass = scenePassColor.dof( scenePassViewZ );
+				const dofPass = scenePassColor.dof( scenePassViewZ, effectController.focus, effectController.aperture.mul( 0.00001 ), effectController.maxblur );
 
 				postProcessing.outputNode = dofPass;
 
@@ -129,28 +135,10 @@
 
 				// gui
 
-				const effectController = {
-
-					focus: 500.0,
-					aperture: 5,
-					maxblur: 0.01
-
-				};
-
-				function updateEffect( ) {
-
-					dofPass.focus.value = effectController.focus;
-					dofPass.aperture.value = effectController.aperture * 0.00001;
-					dofPass.maxblur.value = effectController.maxblur;
-
-				}
-
 				const gui = new GUI();
-				gui.add( effectController, 'focus', 10.0, 3000.0, 10 ).onChange( updateEffect );
-				gui.add( effectController, 'aperture', 0, 10, 0.1 ).onChange( updateEffect );
-				gui.add( effectController, 'maxblur', 0.0, 0.01, 0.001 ).onChange( updateEffect );
-
-				updateEffect();
+				gui.add( effectController.focus, 'value', 10.0, 3000.0, 10 ).name( 'focus' );
+				gui.add( effectController.aperture, 'value', 0, 10, 0.1 ).name( 'aperture' );
+				gui.add( effectController.maxblur, 'value', 0.0, 0.01, 0.001 ).name( 'maxblur' );
 
 			}
 

src/nodes/display/DepthOfFieldNode.js

@@ -7,16 +7,17 @@ import { clamp } from '../math/MathNode.js';
 
 class DepthOfFieldNode extends TempNode {
 
-	constructor( textureNode, viewZNode, focus = 1, aperture = 0.025, maxblur = 1 ) {
+	constructor( textureNode, viewZNode, focusNode, apertureNode, maxblurNode ) {
 
 		super();
 
 		this.textureNode = textureNode;
 		this.viewZNode = viewZNode;
 
-		this.focus = uniform( focus );
-		this.aperture = uniform( aperture );
-		this.maxblur = uniform( maxblur );
+		this.focusNode = focusNode;
+		this.apertureNode = apertureNode;
+		this.maxblurNode = maxblurNode;
+
 		this._aspect = uniform( 0 );
 
 		this.updateBeforeType = NodeUpdateType.RENDER;
@@ -33,19 +34,18 @@ class DepthOfFieldNode extends TempNode {
 
 	setup() {
 
-		const { textureNode } = this;
-
+		const textureNode = this.textureNode;
 		const uvNode = textureNode.uvNode || uv();
 
-		const sampleTexture = ( uv ) => this.textureNode.uv( uv );
+		const sampleTexture = ( uv ) => textureNode.uv( uv );
 
 		const dof = tslFn( () => {
 
 			const aspectcorrect = vec2( 1.0, this._aspect );
 
-			const factor = this.focus.add( this.viewZNode );
+			const factor = this.focusNode.add( this.viewZNode );
 
-			const dofblur = vec2( clamp( factor.mul( this.aperture ), this.maxblur.negate(), this.maxblur ) );
+			const dofblur = vec2( clamp( factor.mul( this.apertureNode ), this.maxblurNode.negate(), this.maxblurNode ) );
 
 			const dofblur9 = dofblur.mul( 0.9 );
 			const dofblur7 = dofblur.mul( 0.7 );
@@ -112,7 +112,7 @@ class DepthOfFieldNode extends TempNode {
 
 }
 
-export const dof = ( node, viewZNode, focus, apeture, maxblur ) => nodeObject( new DepthOfFieldNode( nodeObject( node ), nodeObject( viewZNode ), focus, apeture, maxblur ) );
+export const dof = ( node, viewZNode, focus = 1, aperture = 0.025, maxblur = 1 ) => nodeObject( new DepthOfFieldNode( nodeObject( node ), nodeObject( viewZNode ), nodeObject( focus ), nodeObject( aperture ), nodeObject( maxblur ) ) );
 
 addNodeElement( 'dof', dof );