NodeBuilder: Introduce `addFlowCodeHierarchy()` / `NodeBlock` (#29495)

* VolumeNodeMaterial: simplify a little

* cleanup

* NodeBuilder: Introduce `addFlowCodeHierarchy()`

examples/webgpu_volume_perlin.html

@@ -89,7 +89,7 @@
 
 				const geometry = new THREE.BoxGeometry( 1, 1, 1 );
 				const material = new THREE.VolumeNodeMaterial( {
-					side: THREE.BackSide,
+					side: THREE.BackSide
 				} );
 
 				material.base = new THREE.Color( 0x798aa0 );
@@ -103,7 +103,7 @@
 
 					If( mapValue.greaterThan( threshold ), () => {
 
-						const p = vec3().temp().assign( probe ).addAssign( 0.5 );
+						const p = vec3( probe ).add( 0.5 );
 
 						finalColor.rgb.assign( map.normal( p ).mul( 0.5 ).add( probe.mul( 1.5 ).add( 0.25 ) ) );
 						finalColor.a.assign( 1 );

src/materials/nodes/VolumeNodeMaterial.js

@@ -4,7 +4,7 @@ import { materialReference } from '../../nodes/accessors/MaterialReferenceNode.j
 import { modelWorldMatrixInverse } from '../../nodes/accessors/ModelNode.js';
 import { cameraPosition } from '../../nodes/accessors/Camera.js';
 import { positionGeometry } from '../../nodes/accessors/Position.js';
-import { Fn, varying, vec2, vec3, vec4 } from '../../nodes/tsl/TSLBase.js';
+import { Fn, varying, float, vec2, vec3, vec4 } from '../../nodes/tsl/TSLBase.js';
 import { min, max } from '../../nodes/math/MathNode.js';
 import { Loop, Break } from '../../nodes/utils/LoopNode.js';
 import { texture3D } from '../../nodes/accessors/Texture3DNode.js';
@@ -59,19 +59,19 @@ class VolumeNodeMaterial extends NodeMaterial {
 			const vDirection = varying( positionGeometry.sub( vOrigin ) );
 
 			const rayDir = vDirection.normalize();
-			const bounds = property( 'vec2', 'bounds' ).assign( hitBox( { orig: vOrigin, dir: rayDir } ) );
+			const bounds = vec2( hitBox( { orig: vOrigin, dir: rayDir } ) ).toVar();
 
 			bounds.x.greaterThan( bounds.y ).discard();
 
 			bounds.assign( vec2( max( bounds.x, 0.0 ), bounds.y ) );
 
-			const p = property( 'vec3', 'p' ).assign( vOrigin.add( bounds.x.mul( rayDir ) ) );
-			const inc = property( 'vec3', 'inc' ).assign( vec3( rayDir.abs().reciprocal() ) );
-			const delta = property( 'float', 'delta' ).assign( min( inc.x, min( inc.y, inc.z ) ) );
+			const p = vec3( vOrigin.add( bounds.x.mul( rayDir ) ) ).toVar();
+			const inc = vec3( rayDir.abs().reciprocal() ).toVar();
+			const delta = float( min( inc.x, min( inc.y, inc.z ) ) ).toVar( 'delta' ); // used 'delta' name in loop
 
 			delta.divAssign( materialReference( 'steps', 'float' ) );
 
-			const ac = property( 'vec4', 'ac' ).assign( vec4( materialReference( 'base', 'color' ), 0.0 ) );
+			const ac = vec4( materialReference( 'base', 'color' ), 0.0 ).toVar();
 
 			Loop( { type: 'float', start: bounds.x, end: bounds.y, update: '+= delta' }, () => {
 

src/nodes/accessors/StorageTextureNode.js

@@ -86,7 +86,7 @@ class StorageTextureNode extends TextureNode {
 
 		const snippet = builder.generateTextureStore( builder, textureProperty, uvSnippet, storeSnippet );
 
-		builder.addLineFlowCode( snippet );
+		builder.addLineFlowCode( snippet, this );
 
 	}
 

src/nodes/accessors/Texture3DNode.js

@@ -5,7 +5,7 @@ const normal = Fn( ( { texture, uv } ) => {
 
 	const epsilon = 0.0001;
 
-	const ret = vec3().temp();
+	const ret = vec3().toVar();
 
 	If( uv.x.lessThan( epsilon ), () => {
 

src/nodes/accessors/TextureNode.js

@@ -277,7 +277,7 @@ class TextureNode extends UniformNode {
 
 				const snippet = this.generateSnippet( builder, textureProperty, uvSnippet, levelSnippet, biasSnippet, depthSnippet, compareSnippet, gradSnippet );
 
-				builder.addLineFlowCode( `${propertyName} = ${snippet}` );
+				builder.addLineFlowCode( `${propertyName} = ${snippet}`, this );
 
 				nodeData.snippet = snippet;
 				nodeData.propertyName = propertyName;

src/nodes/code/ExpressionNode.js

@@ -24,7 +24,7 @@ class ExpressionNode extends Node {
 
 		if ( type === 'void' ) {
 
-			builder.addLineFlowCode( snippet );
+			builder.addLineFlowCode( snippet, this );
 
 		} else {
 

src/nodes/core/AssignNode.js

@@ -80,7 +80,7 @@ class AssignNode extends TempNode {
 			const sourceVar = builder.getVarFromNode( this, null, targetType );
 			const sourceProperty = builder.getPropertyName( sourceVar );
 
-			builder.addLineFlowCode( `${ sourceProperty } = ${ source }` );
+			builder.addLineFlowCode( `${ sourceProperty } = ${ source }`, this );
 
 			const targetRoot = targetNode.node.context( { assign: true } ).build( builder );
 
@@ -88,7 +88,7 @@ class AssignNode extends TempNode {
 
 				const component = targetNode.components[ i ];
 
-				builder.addLineFlowCode( `${ targetRoot }.${ component } = ${ sourceProperty }[ ${ i } ]` );
+				builder.addLineFlowCode( `${ targetRoot }.${ component } = ${ sourceProperty }[ ${ i } ]`, this );
 
 			}
 
@@ -104,7 +104,7 @@ class AssignNode extends TempNode {
 
 			if ( output === 'void' || sourceType === 'void' ) {
 
-				builder.addLineFlowCode( snippet );
+				builder.addLineFlowCode( snippet, this );
 
 				if ( output !== 'void' ) {
 

src/nodes/core/BypassNode.js

@@ -32,7 +32,7 @@ class BypassNode extends Node {
 
 		if ( snippet !== '' ) {
 
-			builder.addLineFlowCode( snippet );
+			builder.addLineFlowCode( snippet, this );
 
 		}
 

src/nodes/core/Node.js

@@ -361,6 +361,10 @@ class Node extends EventDispatcher {
 
 					nodeData.snippet = result;
 
+				} else if ( nodeData.flowCodes !== undefined && builder.context.nodeBlock !== undefined ) {
+
+					builder.addFlowCodeHierarchy( this, builder.context.nodeBlock );
+
 				}
 
 				result = builder.format( result, type, output );

src/nodes/core/NodeBuilder.js

@@ -941,10 +941,59 @@ class NodeBuilder {
 
 	}
 
-	addLineFlowCode( code ) {
+	addFlowCodeHierarchy( node, nodeBlock ) {
+
+		const { flowCodes, flowCodeBlock } = this.getDataFromNode( node );
+
+		let needsFlowCode = true;
+		let nodeBlockHierarchy = nodeBlock;
+
+		while ( nodeBlockHierarchy ) {
+
+			if ( flowCodeBlock.get( nodeBlockHierarchy ) === true ) {
+
+				needsFlowCode = false;
+				break;
+
+			}
+
+			nodeBlockHierarchy = this.getDataFromNode( nodeBlockHierarchy ).parentNodeBlock;
+
+		}
+
+		if ( needsFlowCode ) {
+
+			for ( const flowCode of flowCodes ) {
+
+				this.addLineFlowCode( flowCode );
+
+			}
+
+		}
+
+	}
+
+	addLineFlowCodeBlock( node, code, nodeBlock ) {
+
+		const nodeData = this.getDataFromNode( node );
+		const flowCodes = nodeData.flowCodes || ( nodeData.flowCodes = [] );
+		const codeBlock = nodeData.flowCodeBlock || ( nodeData.flowCodeBlock = new WeakMap() );
+
+		flowCodes.push( code );
+		codeBlock.set( nodeBlock, true );
+
+	}
+
+	addLineFlowCode( code, node = null ) {
 
 		if ( code === '' ) return this;
 
+		if ( node !== null && this.context.nodeBlock ) {
+
+			this.addLineFlowCodeBlock( node, code, this.context.nodeBlock );
+
+		}
+
 		code = this.tab + code;
 
 		if ( ! /;\s*$/.test( code ) ) {

src/nodes/core/OutputStructNode.js

@@ -48,7 +48,7 @@ class OutputStructNode extends Node {
 
 			const snippet = members[ i ].build( builder, output );
 
-			builder.addLineFlowCode( `${ structPrefix }m${ i } = ${ snippet }` );
+			builder.addLineFlowCode( `${ structPrefix }m${ i } = ${ snippet }`, this );
 
 		}
 

src/nodes/core/TempNode.js

@@ -42,7 +42,7 @@ class TempNode extends Node {
 				const nodeVar = builder.getVarFromNode( this, null, type );
 				const propertyName = builder.getPropertyName( nodeVar );
 
-				builder.addLineFlowCode( `${propertyName} = ${snippet}` );
+				builder.addLineFlowCode( `${propertyName} = ${snippet}`, this );
 
 				nodeData.snippet = snippet;
 				nodeData.propertyName = propertyName;

src/nodes/core/VarNode.js

@@ -44,7 +44,7 @@ class VarNode extends Node {
 
 		const snippet = node.build( builder, nodeVar.type );
 
-		builder.addLineFlowCode( `${propertyName} = ${snippet}` );
+		builder.addLineFlowCode( `${propertyName} = ${snippet}`, this );
 
 		return propertyName;
 

src/nodes/gpgpu/AtomicFunctionNode.js

@@ -54,11 +54,11 @@ class AtomicFunctionNode extends TempNode {
 
 			const varSnippet = this.storeNode.build( builder, inputType );
 
-			builder.addLineFlowCode( `${varSnippet} = ${methodSnippet}` );
+			builder.addLineFlowCode( `${varSnippet} = ${methodSnippet}`, this );
 
 		} else {
 
-			builder.addLineFlowCode( methodSnippet );
+			builder.addLineFlowCode( methodSnippet, this );
 
 		}
 

src/nodes/gpgpu/BarrierNode.js

@@ -22,7 +22,7 @@ class BarrierNode extends Node {
 
 		} else {
 
-			builder.addLineFlowCode( `${scope}Barrier()` );
+			builder.addLineFlowCode( `${scope}Barrier()`, this );
 
 		}
 

src/nodes/gpgpu/ComputeBuiltinNode.js

@@ -39,8 +39,6 @@ class ComputeBuiltinNode extends Node {
 
 	getBuiltinName( /*builder*/ ) {
 
-		console.log( this._builtinName );
-
 		return this._builtinName;
 
 	}

src/nodes/gpgpu/ComputeNode.js

@@ -72,7 +72,7 @@ class ComputeNode extends Node {
 
 			if ( snippet !== '' ) {
 
-				builder.addLineFlowCode( snippet );
+				builder.addLineFlowCode( snippet, this );
 
 			}
 

src/nodes/math/ConditionalNode.js

@@ -43,10 +43,23 @@ class ConditionalNode extends Node {
 
 	setup( builder ) {
 
+		const condNode = this.condNode.cache();
+		const ifNode = this.ifNode.cache();
+		const elseNode = this.elseNode ? this.elseNode.cache() : null;
+
+		//
+
+		const currentNodeBlock = builder.context.nodeBlock;
+
+		builder.getDataFromNode( ifNode ).parentNodeBlock = currentNodeBlock;
+		if ( elseNode !== null ) builder.getDataFromNode( elseNode ).parentNodeBlock = currentNodeBlock;
+
+		//
+
 		const properties = builder.getNodeProperties( this );
-		properties.condNode = this.condNode.cache();
-		properties.ifNode = this.ifNode.cache();
-		properties.elseNode = this.elseNode ? this.elseNode.cache() : null;
+		properties.condNode = condNode;
+		properties.ifNode = ifNode.context( { nodeBlock: ifNode } );
+		properties.elseNode = elseNode ? elseNode.context( { nodeBlock: elseNode } ) : null;
 
 	}
 

src/nodes/utils/FlipNode.js

@@ -34,7 +34,7 @@ class FlipNode extends TempNode {
 		const sourceCache = builder.getVarFromNode( this );
 		const sourceProperty = builder.getPropertyName( sourceCache );
 
-		builder.addLineFlowCode( sourceProperty + ' = ' + sourceSnippet );
+		builder.addLineFlowCode( sourceProperty + ' = ' + sourceSnippet, this );
 
 		const length = builder.getTypeLength( sourceType );
 		const snippetValues = [];

src/renderers/webgl-fallback/nodes/GLSLNodeBuilder.js

@@ -232,7 +232,7 @@ ${ flowData.code }
 
 				this.getVarFromNode( node, propertySizeName, 'uint' );
 
-				this.addLineFlowCode( `${ propertySizeName } = uint( textureSize( ${ textureName }, 0 ).x )` );
+				this.addLineFlowCode( `${ propertySizeName } = uint( textureSize( ${ textureName }, 0 ).x )`, storageArrayElementNode );
 
 				bufferNodeData.propertySizeName = propertySizeName;
 
@@ -262,7 +262,7 @@ ${ flowData.code }
 
 			}
 
-			this.addLineFlowCode( `${ propertyName } = ${prefix}(${ snippet })${channel}` );
+			this.addLineFlowCode( `${ propertyName } = ${prefix}(${ snippet })${channel}`, storageArrayElementNode );
 
 			elementNodeData.propertyName = propertyName;