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,15 +51,15 @@ 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';
 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/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/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 );