WebGPURenderer: Update `Packing`, `Hash`, `Discard` (#29188)

* PackingNode: Move to TSL approach

* update webgpu_mrt

* DiscardNode: Move to TSL approach

* HashNode: Move to TSL approach

* no references to discard() without chaining

* Update DiscardNode.js

* Update DiscardNode.js

* renames

examples/webgpu_mrt.html

@@ -26,7 +26,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { output, transformedNormalWorld, pass, step, diffuseColor, emissive, viewportUV, mix, mrt, Fn } from 'three/tsl';
+			import { output, transformedNormalView, pass, step, diffuseColor, emissive, directionToColor, viewportUV, mix, mrt, Fn } from 'three/tsl';
 
 			import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
 
@@ -84,7 +84,7 @@
 				const scenePass = pass( scene, camera, { minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter } );
 				scenePass.setMRT( mrt( {
 					output: output,
-					normal: transformedNormalWorld.directionToColor(),
+					normal: directionToColor( transformedNormalView ),
 					diffuse: diffuseColor,
 					emissive: emissive
 				} ) );

src/nodes/Nodes.js

@@ -42,7 +42,7 @@ export { default as MathNode, PI, PI2, EPSILON, INFINITY, radians, degrees, exp,
 
 export { default as OperatorNode, add, sub, mul, div, modInt, equal, lessThan, greaterThan, lessThanEqual, greaterThanEqual, and, or, not, xor, bitAnd, bitNot, bitOr, bitXor, shiftLeft, shiftRight, remainder } from './math/OperatorNode.js';
 export { default as CondNode, select, cond } from './math/CondNode.js';
-export { default as HashNode, hash } from './math/HashNode.js';
+export * from './math/Hash.js';
 
 // math utils
 export { parabola, gain, pcurve, sinc } from './math/MathUtils.js';
@@ -51,7 +51,7 @@ export { triNoise3D } from './math/TriNoise3D.js';
 // utils
 export { default as ArrayElementNode } from './utils/ArrayElementNode.js';
 export { default as ConvertNode } from './utils/ConvertNode.js';
-export { default as DiscardNode, discard, Return } from './utils/DiscardNode.js';
+export * from './utils/Discard.js';
 export { default as EquirectUVNode, equirectUV } from './utils/EquirectUVNode.js';
 export { default as FunctionOverloadingNode, overloadingFn } from './utils/FunctionOverloadingNode.js';
 export { default as JoinNode } from './utils/JoinNode.js';
@@ -59,7 +59,7 @@ export { default as LoopNode, Loop, Continue, Break } from './utils/LoopNode.js'
 export { default as MatcapUVNode, matcapUV } from './utils/MatcapUVNode.js';
 export { default as MaxMipLevelNode, maxMipLevel } from './utils/MaxMipLevelNode.js';
 export { default as OscNode, oscSine, oscSquare, oscTriangle, oscSawtooth } from './utils/OscNode.js';
-export { default as PackingNode, directionToColor, colorToDirection } from './utils/PackingNode.js';
+export * from './utils/Packing.js';
 export { default as RemapNode, remap, remapClamp } from './utils/RemapNode.js';
 export * from './utils/UVUtils.js';
 export * from './utils/SpriteUtils.js';

src/nodes/materials/MeshNormalNodeMaterial.js

@@ -1,6 +1,6 @@
 import NodeMaterial, { addNodeMaterial } from './NodeMaterial.js';
 import { diffuseColor } from '../core/PropertyNode.js';
-import { directionToColor } from '../utils/PackingNode.js';
+import { directionToColor } from '../utils/Packing.js';
 import { materialOpacity } from '../accessors/MaterialNode.js';
 import { transformedNormalView } from '../accessors/NormalNode.js';
 import { float, vec4 } from '../shadernode/ShaderNode.js';

src/nodes/math/Hash.js

@@ -0,0 +1,15 @@
+import { Fn, addNodeElement } from '../shadernode/ShaderNode.js';
+
+export const hash = Fn( ( [ seed ] ) => {
+
+	// Taken from https://www.shadertoy.com/view/XlGcRh, originally from pcg-random.org
+
+	const state = seed.toUint().mul( 747796405 ).add( 2891336453 );
+	const word = state.shiftRight( state.shiftRight( 28 ).add( 4 ) ).bitXor( state ).mul( 277803737 );
+	const result = word.shiftRight( 22 ).bitXor( word );
+
+	return result.toFloat().mul( 1 / 2 ** 32 ); // Convert to range [0, 1)
+
+} );
+
+addNodeElement( 'hash', hash );

src/nodes/math/HashNode.js

@@ -1,34 +0,0 @@
-import Node, { addNodeClass } from '../core/Node.js';
-import { addNodeElement, nodeProxy } from '../shadernode/ShaderNode.js';
-
-class HashNode extends Node {
-
-	constructor( seedNode ) {
-
-		super();
-
-		this.seedNode = seedNode;
-
-	}
-
-	setup( /*builder*/ ) {
-
-		// Taken from https://www.shadertoy.com/view/XlGcRh, originally from pcg-random.org
-
-		const state = this.seedNode.toUint().mul( 747796405 ).add( 2891336453 );
-		const word = state.shiftRight( state.shiftRight( 28 ).add( 4 ) ).bitXor( state ).mul( 277803737 );
-		const result = word.shiftRight( 22 ).bitXor( word );
-
-		return result.toFloat().mul( 1 / 2 ** 32 ); // Convert to range [0, 1)
-
-	}
-
-}
-
-export default HashNode;
-
-export const hash = nodeProxy( HashNode );
-
-addNodeElement( 'hash', hash );
-
-addNodeClass( 'HashNode', HashNode );

src/nodes/utils/Discard.js

@@ -0,0 +1,8 @@
+import { select } from '../math/CondNode.js';
+import { expression } from '../code/ExpressionNode.js';
+import { addNodeElement } from '../shadernode/ShaderNode.js';
+
+export const Discard = ( conditional ) => ( conditional ? select( conditional, expression( 'discard' ) ) : expression( 'discard' ) ).append();
+export const Return = () => expression( 'return' ).append();
+
+addNodeElement( 'discard', Discard );

src/nodes/utils/DiscardNode.js

@@ -1,28 +0,0 @@
-import CondNode from '../math/CondNode.js';
-import { expression } from '../code/ExpressionNode.js';
-import { addNodeClass } from '../core/Node.js';
-import { addNodeElement, nodeProxy } from '../shadernode/ShaderNode.js';
-
-let discardExpression;
-
-class DiscardNode extends CondNode {
-
-	constructor( condNode ) {
-
-		discardExpression = discardExpression || expression( 'discard' );
-
-		super( condNode, discardExpression );
-
-	}
-
-}
-
-export default DiscardNode;
-
-export const inlineDiscard = nodeProxy( DiscardNode );
-export const discard = ( condNode ) => inlineDiscard( condNode ).append();
-export const Return = () => expression( 'return' ).append();
-
-addNodeElement( 'discard', discard ); // @TODO: Check... this cause a little confusing using in chaining
-
-addNodeClass( 'DiscardNode', DiscardNode );

src/nodes/utils/Packing.js

@@ -0,0 +1,4 @@
+import { nodeObject } from '../shadernode/ShaderNode.js';
+
+export const directionToColor = ( node ) => nodeObject( node ).mul( 0.5 ).add( 0.5 );
+export const colorToDirection = ( node ) => nodeObject( node ).mul( 2.0 ).sub( 1 );

src/nodes/utils/PackingNode.js

@@ -1,55 +0,0 @@
-import TempNode from '../core/TempNode.js';
-import { addNodeClass } from '../core/Node.js';
-import { addNodeElement, nodeProxy } from '../shadernode/ShaderNode.js';
-
-class PackingNode extends TempNode {
-
-	constructor( scope, node ) {
-
-		super();
-
-		this.scope = scope;
-		this.node = node;
-
-	}
-
-	getNodeType( builder ) {
-
-		return this.node.getNodeType( builder );
-
-	}
-
-	setup() {
-
-		const { scope, node } = this;
-
-		let result = null;
-
-		if ( scope === PackingNode.DIRECTION_TO_COLOR ) {
-
-			result = node.mul( 0.5 ).add( 0.5 );
-
-		} else if ( scope === PackingNode.COLOR_TO_DIRECTION ) {
-
-			result = node.mul( 2.0 ).sub( 1 );
-
-		}
-
-		return result;
-
-	}
-
-}
-
-PackingNode.DIRECTION_TO_COLOR = 'directionToColor';
-PackingNode.COLOR_TO_DIRECTION = 'colorToDirection';
-
-export default PackingNode;
-
-export const directionToColor = nodeProxy( PackingNode, PackingNode.DIRECTION_TO_COLOR );
-export const colorToDirection = nodeProxy( PackingNode, PackingNode.COLOR_TO_DIRECTION );
-
-addNodeElement( 'directionToColor', directionToColor );
-addNodeElement( 'colorToDirection', colorToDirection );
-
-addNodeClass( 'PackingNode', PackingNode );