TSL: Overloaded `atan2` to `atan` (#30131)

* overloaded atan2

* update dependencies: `atan2` to `atan`

examples/webgpu_animation_retargeting.html

@@ -25,7 +25,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { color, screenUV, hue, reflector, time, Fn, vec2, length, atan2, float, sin, cos, vec3, sub, mul, pow, blendDodge, normalWorld } from 'three/tsl';
+			import { color, screenUV, hue, reflector, time, Fn, vec2, length, atan, float, sin, cos, vec3, sub, mul, pow, blendDodge, normalWorld } from 'three/tsl';
 
 			import Stats from 'three/addons/libs/stats.module.js';
 
@@ -63,7 +63,7 @@
 				// forked from https://www.shadertoy.com/view/7ly3D1
 
 				const suv = vec2( suv_immutable );
-				const uv = vec2( length( suv ), atan2( suv.y, suv.x ) );
+				const uv = vec2( length( suv ), atan( suv.y, suv.x ) );
 				const offset = float( float( .1 ).mul( sin( uv.y.mul( 10. ).sub( time.mul( .6 ) ) ) ).mul( cos( uv.y.mul( 48. ).add( time.mul( .3 ) ) ) ).mul( cos( uv.y.mul( 3.7 ).add( time ) ) ) );
 				const rays = vec3( vec3( sin( uv.y.mul( 150. ).add( time ) ).mul( .5 ).add( .5 ) ).mul( vec3( sin( uv.y.mul( 80. ).sub( time.mul( 0.6 ) ) ).mul( .5 ).add( .5 ) ) ).mul( vec3( sin( uv.y.mul( 45. ).add( time.mul( 0.8 ) ) ).mul( .5 ).add( .5 ) ) ).mul( vec3( sub( 1., cos( uv.y.add( mul( 22., time ).sub( pow( uv.x.add( offset ), .3 ).mul( 60. ) ) ) ) ) ) ).mul( vec3( uv.x.mul( 2. ) ) ) );
 

examples/webgpu_tsl_angular_slicing.html

@@ -28,7 +28,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { If, PI2, atan2, color, frontFacing, output, positionLocal, Fn, uniform, vec4 } from 'three/tsl';
+			import { If, PI2, atan, color, frontFacing, output, positionLocal, Fn, uniform, vec4 } from 'three/tsl';
 
 			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
@@ -80,7 +80,7 @@
 			
 				const inAngle = Fn( ( [ position, angleStart, angleArc ] ) => {
 
-					const angle = atan2( position.y, position.x ).sub( angleStart ).mod( PI2 ).toVar();
+					const angle = atan( position.y, position.x ).sub( angleStart ).mod( PI2 ).toVar();
 					return angle.greaterThan( 0 ).and( angle.lessThan( angleArc ) );
 
 				} );

examples/webgpu_tsl_vfx_linkedparticles.html

@@ -28,7 +28,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { atan2, 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 } from 'three/tsl';
 			import { bloom } from 'three/addons/tsl/display/BloomNode.js';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
@@ -127,7 +127,7 @@
 				particleMaterial.depthWrite = false;
 				particleMaterial.positionNode = particlePositions.toAttribute();
 				particleMaterial.scaleNode = vec2( particleSize );
-				particleMaterial.rotationNode = atan2( particleVelocities.toAttribute().y, particleVelocities.toAttribute().x );
+				particleMaterial.rotationNode = atan( particleVelocities.toAttribute().y, particleVelocities.toAttribute().x );
 
 				particleMaterial.colorNode = /*#__PURE__*/ Fn( () => {
 
@@ -396,7 +396,7 @@
 
 			}
 
-			function onWindowResize( e ) {
+			function onWindowResize() {
 
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
@@ -419,11 +419,11 @@
 
 			}
 
-			async function animate() {
+			function animate() {
 
 				// compute particles
-				await renderer.computeAsync( updateParticles );
-				await renderer.computeAsync( spawnParticles );
+				renderer.compute( updateParticles );
+				renderer.compute( spawnParticles );
 
 				// update particle index for next spawn
 				spawnIndex.value = ( spawnIndex.value + nbToSpawn.value ) % nbParticles;
@@ -448,7 +448,7 @@
 
 				controls.update();
 
-				postProcessing.renderAsync();
+				postProcessing.render();
 
 			}
 

examples/webgpu_tsl_vfx_tornado.html

@@ -28,7 +28,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { luminance, cos, float, min, time, atan2, uniform, pass, PI, PI2, color, positionLocal, oneMinus, sin, texture, Fn, uv, vec2, vec3, vec4 } from 'three/tsl';
+			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 { bloom } from 'three/addons/tsl/display/BloomNode.js';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
@@ -58,7 +58,7 @@
 
 					const centeredUv = uv.sub( 0.5 ).toVar();
 					const distanceToCenter = centeredUv.length();
-					const angle = atan2( centeredUv.y, centeredUv.x );
+					const angle = atan( centeredUv.y, centeredUv.x );
 					const radialUv = vec2( angle.add( PI ).div( PI2 ), distanceToCenter ).toVar();
 					radialUv.mulAssign( multiplier );
 					radialUv.x.addAssign( rotation );
@@ -79,7 +79,7 @@
 
 				const twistedCylinder = Fn( ( [ position, parabolStrength, parabolOffset, parabolAmplitude, time ] ) => {
 
-					const angle = atan2( position.z, position.x ).toVar();
+					const angle = atan( position.z, position.x ).toVar();
 					const elevation = position.y;
 
 					// parabol

src/nodes/math/MathNode.js

@@ -1,6 +1,7 @@
 import TempNode from '../core/TempNode.js';
 import { sub, mul, div } from './OperatorNode.js';
 import { addMethodChaining, nodeObject, nodeProxy, float, vec2, vec3, vec4, Fn } from '../tsl/TSLCore.js';
+import { WebGLCoordinateSystem, WebGPUCoordinateSystem } from '../../constants.js';
 
 /** @module MathNode **/
 
@@ -140,7 +141,7 @@ class MathNode extends TempNode {
 
 	generate( builder, output ) {
 
-		const method = this.method;
+		let method = this.method;
 
 		const type = this.getNodeType( builder );
 		const inputType = this.getInputType( builder );
@@ -149,7 +150,7 @@ class MathNode extends TempNode {
 		const b = this.bNode;
 		const c = this.cNode;
 
-		const isWebGL = builder.renderer.isWebGLRenderer === true;
+		const coordinateSystem = builder.renderer.coordinateSystem;
 
 		if ( method === MathNode.TRANSFORM_DIRECTION ) {
 
@@ -200,14 +201,14 @@ class MathNode extends TempNode {
 					b.build( builder, type )
 				);
 
-			} else if ( isWebGL && method === MathNode.STEP ) {
+			} else if ( coordinateSystem === WebGLCoordinateSystem && method === MathNode.STEP ) {
 
 				params.push(
 					a.build( builder, builder.getTypeLength( a.getNodeType( builder ) ) === 1 ? 'float' : inputType ),
 					b.build( builder, inputType )
 				);
 
-			} else if ( ( isWebGL && ( method === MathNode.MIN || method === MathNode.MAX ) ) || method === MathNode.MOD ) {
+			} else if ( ( coordinateSystem === WebGLCoordinateSystem && ( method === MathNode.MIN || method === MathNode.MAX ) ) || method === MathNode.MOD ) {
 
 				params.push(
 					a.build( builder, inputType ),
@@ -232,6 +233,12 @@ class MathNode extends TempNode {
 
 			} else {
 
+				if ( coordinateSystem === WebGPUCoordinateSystem && method === MathNode.ATAN && b !== null ) {
+
+					method = 'atan2';
+
+				}
+
 				params.push( a.build( builder, inputType ) );
 				if ( b !== null ) params.push( b.build( builder, inputType ) );
 				if ( c !== null ) params.push( c.build( builder, inputType ) );
@@ -302,7 +309,6 @@ MathNode.TRANSPOSE = 'transpose';
 
 MathNode.BITCAST = 'bitcast';
 MathNode.EQUALS = 'equals';
-MathNode.ATAN2 = 'atan2';
 MathNode.MIN = 'min';
 MathNode.MAX = 'max';
 MathNode.MOD = 'mod';
@@ -665,16 +671,6 @@ export const bitcast = /*@__PURE__*/ nodeProxy( MathNode, MathNode.BITCAST );
  */
 export const equals = /*@__PURE__*/ nodeProxy( MathNode, MathNode.EQUALS );
 
-/**
- * Returns the arc-tangent of the quotient of its parameters.
- *
- * @function
- * @param {Node | Number} x - The y parameter.
- * @param {Node | Number} y - The x parameter.
- * @returns {Node}
- */
-export const atan2 = /*@__PURE__*/ nodeProxy( MathNode, MathNode.ATAN2 );
-
 /**
  * Returns the lesser of two values.
  *
@@ -932,6 +928,21 @@ export const mixElement = ( t, e1, e2 ) => mix( e1, e2, t );
  */
 export const smoothstepElement = ( x, low, high ) => smoothstep( low, high, x );
 
+/**
+ * Returns the arc-tangent of the quotient of its parameters.
+ *
+ * @function
+ * @param {Node | Number} y - The y parameter.
+ * @param {Node | Number} x - The x parameter.
+ * @returns {Node}
+ */
+export const atan2 = ( y, x ) => { // @deprecated, r172
+
+	console.warn( 'THREE.TSL: "atan2" is overloaded. Use "atan" instead.' );
+	return atan( y, x );
+
+};
+
 addMethodChaining( 'all', all );
 addMethodChaining( 'any', any );
 addMethodChaining( 'equals', equals );

src/nodes/utils/EquirectUVNode.js

@@ -45,7 +45,7 @@ class EquirectUVNode extends TempNode {
 
 		const dir = this.dirNode;
 
-		const u = dir.z.atan2( dir.x ).mul( 1 / ( Math.PI * 2 ) ).add( 0.5 );
+		const u = dir.z.atan( dir.x ).mul( 1 / ( Math.PI * 2 ) ).add( 0.5 );
 		const v = dir.y.clamp( - 1.0, 1.0 ).asin().mul( 1 / Math.PI ).add( 0.5 );
 
 		return vec2( u, v );

src/nodes/utils/FunctionOverloadingNode.js

@@ -1,5 +1,5 @@
 import Node from '../core/Node.js';
-import { nodeProxy } from '../tsl/TSLBase.js';
+import { nodeProxy } from '../tsl/TSLCore.js';
 
 /** @module FunctionOverloadingNode **/
 

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

@@ -9,7 +9,6 @@ import { NoColorSpace, ByteType, ShortType, RGBAIntegerFormat, RGBIntegerFormat,
 import { DataTexture } from '../../../textures/DataTexture.js';
 
 const glslMethods = {
-	atan2: 'atan',
 	textureDimensions: 'textureSize',
 	equals: 'equal'
 };