WebGPURenderer: Refactor env map rotation. (#33232)

examples/webgpu_postprocessing_dof_basic.html

@@ -92,7 +92,7 @@
 				const hdrLoader = new UltraHDRLoader();
 				const envMap = await hdrLoader.loadAsync( 'textures/equirectangular/spruit_sunrise_2k.hdr.jpg' );
 				envMap.mapping = THREE.EquirectangularReflectionMapping;
-				scene.environmentRotation.y = Math.PI * 0.5;
+				scene.environmentRotation.y = Math.PI * - 0.5;
 				scene.environment = envMap;
 
 				// renderer

src/nodes/accessors/CubeTextureNode.js

@@ -124,13 +124,19 @@ class CubeTextureNode extends TextureNode {
 
 		}
 
+		// rotate first
+
+		uvNode = materialEnvRotation.mul( uvNode );
+
+		// flip
+
 		if ( builder.renderer.coordinateSystem === WebGPUCoordinateSystem || ! texture.isRenderTargetTexture ) {
 
 			uvNode = vec3( uvNode.x.negate(), uvNode.yz );
 
 		}
 
-		return materialEnvRotation.mul( uvNode );
+		return uvNode;
 
 	}
 

src/nodes/accessors/MaterialProperties.js

@@ -1,8 +1,6 @@
-import { Euler } from '../../math/Euler.js';
 import { Matrix4 } from '../../math/Matrix4.js';
 import { uniform } from '../core/UniformNode.js';
 
-const _e1 = /*@__PURE__*/ new Euler();
 const _m1 = /*@__PURE__*/ new Matrix4();
 
 /**
@@ -44,9 +42,8 @@ export const materialEnvRotation = /*@__PURE__*/ uniform( new Matrix4() ).onRefe
 
 	if ( rotation ) {
 
-		_e1.copy( rotation );
-
-		_m1.makeRotationFromEuler( _e1 );
+		// note: since the matrix is orthonormal, we can use the more-efficient transpose() in lieu of invert()
+		_m1.makeRotationFromEuler( rotation ).transpose();
 
 	} else {
 

src/nodes/accessors/SceneProperties.js

@@ -1,10 +1,8 @@
 import { UVMapping } from '../../constants.js';
-import { Euler } from '../../math/Euler.js';
 import { Matrix4 } from '../../math/Matrix4.js';
 import { renderGroup } from '../core/UniformGroupNode.js';
 import { uniform } from '../tsl/TSLBase.js';
 
-const _e1 = /*@__PURE__*/ new Euler();
 const _m1 = /*@__PURE__*/ new Matrix4();
 
 /**
@@ -35,12 +33,8 @@ export const backgroundRotation = /*@__PURE__*/ uniform( new Matrix4() ).setGrou
 
 	if ( background !== null && background.isTexture && background.mapping !== UVMapping ) {
 
-		_e1.copy( scene.backgroundRotation );
-
-		// accommodate left-handed frame
-		_e1.x *= - 1; _e1.y *= - 1; _e1.z *= - 1;
-
-		_m1.makeRotationFromEuler( _e1 );
+		// note: since the matrix is orthonormal, we can use the more-efficient transpose() in lieu of invert()
+		_m1.makeRotationFromEuler( scene.backgroundRotation ).transpose();
 
 	} else {