Skip to content

Commit 8faa068

Browse files
authored
TSL: Fix inconsistent chaining for .step() (Parameter order) (#31241)
* fix inconsistent chaining for `step` and `smoothstep` * update examples * Update webgpu_tsl_vfx_tornado.html
1 parent 88cf6d0 commit 8faa068

File tree

5 files changed

+23
-14
lines changed

5 files changed

+23
-14
lines changed

examples/webgpu_tsl_halftone.html

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -145,10 +145,8 @@
145145

146146
// mask
147147

148-
const mask = gridUv
149-
.sub( 0.5 )
150-
.length()
151-
.step( orientationStrength.mul( radius ).mul( 0.5 ) )
148+
const mask = orientationStrength.mul( radius ).mul( 0.5 )
149+
.step( gridUv.sub( 0.5 ).length() )
152150
.mul( mix( mixLow, mixHigh, orientationStrength ) );
153151

154152
return vec4( color, mask );

examples/webgpu_tsl_vfx_flames.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@
121121
const gradientColor = texture( gradient.texture, vec2( shape.remap( 0, 1, 0, 1 ), 0 ) );
122122

123123
// output
124-
const color = mix( gradientColor, vec3( 1 ), shape.step( 0.8 ).oneMinus() );
124+
const color = mix( gradientColor, vec3( 1 ), shape.step( 0.8 ) );
125125
const alpha = shape.smoothstep( 0, 0.3 );
126126
return vec4( color.rgb, alpha );
127127

@@ -162,7 +162,7 @@
162162
const cellularNoise = texture( cellularTexture, cellularUv, 0 ).r.oneMinus().smoothstep( 0.25, 1 );
163163

164164
// shape
165-
const shape = mainUv.sub( 0.5 ).mul( vec2( 6, 1 ) ).length().step( 0.5 );
165+
const shape = step( mainUv.sub( 0.5 ).mul( vec2( 6, 1 ) ).length(), 0.5 );
166166
shape.assign( shape.mul( cellularNoise ) );
167167
shape.mulAssign( gradient3 );
168168
shape.assign( step( 0.01, shape ) );

examples/webgpu_tsl_vfx_linkedparticles.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
<script type="module">
2929

3030
import * as THREE from 'three';
31-
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';
31+
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';
3232
import { bloom } from 'three/addons/tsl/display/BloomNode.js';
3333

3434
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
@@ -147,7 +147,7 @@
147147

148148
particleMaterial.opacityNode = /*#__PURE__*/ Fn( () => {
149149

150-
const circle = uv().xy.sub( 0.5 ).length().step( 0.5 );
150+
const circle = step( uv().xy.sub( 0.5 ).length(), 0.5 );
151151
const life = particlePositions.toAttribute().w;
152152

153153
return circle.mul( life );

examples/webgpu_tsl_vfx_tornado.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
<script type="module">
2929

3030
import * as THREE from 'three';
31-
import { luminance, cos, float, min, time, atan, uniform, pass, PI, PI2, color, positionLocal, oneMinus, sin, texture, Fn, uv, vec2, vec3, vec4 } from 'three/tsl';
31+
import { luminance, cos, min, time, atan, uniform, pass, PI, PI2, color, positionLocal, sin, texture, Fn, uv, vec2, vec3, vec4 } from 'three/tsl';
3232
import { bloom } from 'three/addons/tsl/display/BloomNode.js';
3333

3434
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
@@ -145,7 +145,7 @@
145145
// outer fade
146146
const distanceToCenter = uv().sub( 0.5 ).toVar();
147147
const outerFade = min(
148-
oneMinus( distanceToCenter.length() ).smoothstep( 0.5, 0.9 ),
148+
distanceToCenter.length().oneMinus().smoothstep( 0.5, 0.9 ),
149149
distanceToCenter.length().smoothstep( 0, 0.2 )
150150
);
151151

@@ -154,7 +154,7 @@
154154

155155
// output
156156
return vec4(
157-
emissiveColor.mul( float( 0.2 ).step( effect ) ).mul( 3 ), // Emissive
157+
emissiveColor.mul( effect.step( 0.2 ) ).mul( 3 ), // Emissive
158158
effect.smoothstep( 0, 0.01 ) // Alpha
159159
);
160160

@@ -200,7 +200,7 @@
200200
// outer fade
201201
const outerFade = min(
202202
uv().y.smoothstep( 0, 0.1 ),
203-
oneMinus( uv().y ).smoothstep( 0, 0.4 )
203+
uv().y.oneMinus().smoothstep( 0, 0.4 )
204204
);
205205

206206
// effect
@@ -251,7 +251,7 @@
251251
// outer fade
252252
const outerFade = min(
253253
uv().y.smoothstep( 0, 0.2 ),
254-
oneMinus( uv().y ).smoothstep( 0, 0.4 )
254+
uv().y.oneMinus().smoothstep( 0, 0.4 )
255255
);
256256

257257
// effect

src/nodes/math/MathNode.js

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1042,6 +1042,17 @@ export const mixElement = ( t, e1, e2 ) => mix( e1, e2, t );
10421042
*/
10431043
export const smoothstepElement = ( x, low, high ) => smoothstep( low, high, x );
10441044

1045+
/**
1046+
* Alias for `step()` with a different parameter order.
1047+
*
1048+
* @tsl
1049+
* @function
1050+
* @param {Node | number} x - The source value for interpolation.
1051+
* @param {Node | number} edge - The edge value.
1052+
* @returns {Node}
1053+
*/
1054+
export const stepElement = ( x, edge ) => step( edge, x );
1055+
10451056
/**
10461057
* Returns the arc-tangent of the quotient of its parameters.
10471058
*
@@ -1104,7 +1115,7 @@ addMethodChaining( 'fwidth', fwidth );
11041115
addMethodChaining( 'atan2', atan2 );
11051116
addMethodChaining( 'min', min );
11061117
addMethodChaining( 'max', max );
1107-
addMethodChaining( 'step', step );
1118+
addMethodChaining( 'step', stepElement );
11081119
addMethodChaining( 'reflect', reflect );
11091120
addMethodChaining( 'distance', distance );
11101121
addMethodChaining( 'dot', dot );

0 commit comments

Comments
 (0)