TSL: Fix inconsistent chaining for .step() (Parameter order) (#31241)

* fix inconsistent chaining for `step` and `smoothstep`

* update examples

* Update webgpu_tsl_vfx_tornado.html

Author: sunag

examples/webgpu_tsl_halftone.html

@@ -145,10 +145,8 @@
 
 					// mask
 
-					const mask = gridUv
-						.sub( 0.5 )
-						.length()
-						.step( orientationStrength.mul( radius ).mul( 0.5 ) )
+					const mask = orientationStrength.mul( radius ).mul( 0.5 )
+						.step( gridUv.sub( 0.5 ).length() )
 						.mul( mix( mixLow, mixHigh, orientationStrength ) );
 
 					return vec4( color, mask );

examples/webgpu_tsl_vfx_flames.html

@@ -121,7 +121,7 @@
 					const gradientColor = texture( gradient.texture, vec2( shape.remap( 0, 1, 0, 1 ), 0 ) );
 
 					// output
-					const color = mix( gradientColor, vec3( 1 ), shape.step( 0.8 ).oneMinus() );
+					const color = mix( gradientColor, vec3( 1 ), shape.step( 0.8 ) );
 					const alpha = shape.smoothstep( 0, 0.3 );
 					return vec4( color.rgb, alpha );
 
@@ -162,7 +162,7 @@
 					const cellularNoise = texture( cellularTexture, cellularUv, 0 ).r.oneMinus().smoothstep( 0.25, 1 );
 
 					// shape
-					const shape = mainUv.sub( 0.5 ).mul( vec2( 6, 1 ) ).length().step( 0.5 );
+					const shape = step( mainUv.sub( 0.5 ).mul( vec2( 6, 1 ) ).length(), 0.5 );
 					shape.assign( shape.mul( cellularNoise ) );
 					shape.mulAssign( gradient3 );
 					shape.assign( step( 0.01, shape ) );

examples/webgpu_tsl_vfx_linkedparticles.html

@@ -28,7 +28,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { atan, cos, float, max, min, mix, PI, PI2, sin, vec2, vec3, color, Fn, hash, hue, If, instanceIndex, Loop, mx_fractal_noise_float, mx_fractal_noise_vec3, pass, pcurve, storage, deltaTime, time, uv, uniform } from 'three/tsl';
+			import { atan, cos, float, max, min, mix, PI, PI2, sin, vec2, vec3, color, Fn, hash, hue, If, instanceIndex, Loop, mx_fractal_noise_float, mx_fractal_noise_vec3, pass, pcurve, storage, deltaTime, time, uv, uniform, step } from 'three/tsl';
 			import { bloom } from 'three/addons/tsl/display/BloomNode.js';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
@@ -147,7 +147,7 @@
 
 				particleMaterial.opacityNode = /*#__PURE__*/ Fn( () => {
 
-					const circle = uv().xy.sub( 0.5 ).length().step( 0.5 );
+					const circle = step( uv().xy.sub( 0.5 ).length(), 0.5 );
 					const life = particlePositions.toAttribute().w;
 
 					return circle.mul( life );

examples/webgpu_tsl_vfx_tornado.html

@@ -28,7 +28,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { luminance, cos, float, min, time, atan, uniform, pass, PI, PI2, color, positionLocal, oneMinus, sin, texture, Fn, uv, vec2, vec3, vec4 } from 'three/tsl';
+			import { luminance, cos, min, time, atan, uniform, pass, PI, PI2, color, positionLocal, sin, texture, Fn, uv, vec2, vec3, vec4 } from 'three/tsl';
 			import { bloom } from 'three/addons/tsl/display/BloomNode.js';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
@@ -145,7 +145,7 @@
 					// outer fade
 					const distanceToCenter = uv().sub( 0.5 ).toVar();
 					const outerFade = min(
-						oneMinus( distanceToCenter.length() ).smoothstep( 0.5, 0.9 ),
+						distanceToCenter.length().oneMinus().smoothstep( 0.5, 0.9 ),
 						distanceToCenter.length().smoothstep( 0, 0.2 )
 					);
 
@@ -154,7 +154,7 @@
 
 					// output
 					return vec4(
-						emissiveColor.mul( float( 0.2 ).step( effect ) ).mul( 3 ), // Emissive
+						emissiveColor.mul( effect.step( 0.2 ) ).mul( 3 ), // Emissive
 						effect.smoothstep( 0, 0.01 ) // Alpha
 					);
 
@@ -200,7 +200,7 @@
 					// outer fade
 					const outerFade = min(
 						uv().y.smoothstep( 0, 0.1 ),
-						oneMinus( uv().y ).smoothstep( 0, 0.4 )
+						uv().y.oneMinus().smoothstep( 0, 0.4 )
 					);
 
 					// effect
@@ -251,7 +251,7 @@
 					// outer fade
 					const outerFade = min(
 						uv().y.smoothstep( 0, 0.2 ),
-						oneMinus( uv().y ).smoothstep( 0, 0.4 )
+						uv().y.oneMinus().smoothstep( 0, 0.4 )
 					);
 
 					// effect

src/nodes/math/MathNode.js

@@ -1042,6 +1042,17 @@ export const mixElement = ( t, e1, e2 ) => mix( e1, e2, t );
  */
 export const smoothstepElement = ( x, low, high ) => smoothstep( low, high, x );
 
+/**
+ * Alias for `step()` with a different parameter order.
+ *
+ * @tsl
+ * @function
+ * @param {Node | number} x - The source value for interpolation.
+ * @param {Node | number} edge - The edge value.
+ * @returns {Node}
+ */
+export const stepElement = ( x, edge ) => step( edge, x );
+
 /**
  * Returns the arc-tangent of the quotient of its parameters.
  *
@@ -1104,7 +1115,7 @@ addMethodChaining( 'fwidth', fwidth );
 addMethodChaining( 'atan2', atan2 );
 addMethodChaining( 'min', min );
 addMethodChaining( 'max', max );
-addMethodChaining( 'step', step );
+addMethodChaining( 'step', stepElement );
 addMethodChaining( 'reflect', reflect );
 addMethodChaining( 'distance', distance );
 addMethodChaining( 'dot', dot );