WebGPURenderer: Use world space normal approach (#29312)

src/nodes/accessors/ModelNode.js

@@ -4,6 +4,7 @@ import { uniform } from '../core/UniformNode.js';
 
 import { Matrix4 } from '../../math/Matrix4.js';
 import { cameraViewMatrix } from './Camera.js';
+import { Matrix3 } from '../../math/Matrix3.js';
 
 class ModelNode extends Object3DNode {
 
@@ -36,6 +37,7 @@ export const modelWorldMatrix = /*@__PURE__*/ nodeImmutable( ModelNode, ModelNod
 export const modelPosition = /*@__PURE__*/ nodeImmutable( ModelNode, ModelNode.POSITION );
 export const modelScale = /*@__PURE__*/ nodeImmutable( ModelNode, ModelNode.SCALE );
 export const modelViewPosition = /*@__PURE__*/ nodeImmutable( ModelNode, ModelNode.VIEW_POSITION );
+export const modelNormalMatrix = /*@__PURE__*/ uniform( new Matrix3() ).onObjectUpdate( ( { object }, self ) => self.value.getNormalMatrix( object.matrixWorld ) );
 export const modelWorldMatrixInverse = /*@__PURE__*/ uniform( new Matrix4() ).onObjectUpdate( ( { object }, self ) => self.value.copy( object.matrixWorld ).invert() );
 export const modelViewMatrix = /*@__PURE__*/ cameraViewMatrix.mul( modelWorldMatrix ).toVar( 'modelViewMatrix' );
 
@@ -51,7 +53,7 @@ export const highPrecisionModelViewMatrix = /*@__PURE__*/ ( Fn( ( builder ) => {
 
 } ).once() )().toVar( 'highPrecisionModelViewMatrix' );
 
-export const highPrecisionModelNormalMatrix = /*@__PURE__*/ ( Fn( ( builder ) => {
+export const highPrecisionModelNormalViewMatrix = /*@__PURE__*/ ( Fn( ( builder ) => {
 
 	const isHighPrecisionModelViewMatrix = builder.context.isHighPrecisionModelViewMatrix;
 

src/nodes/accessors/Normal.js

@@ -1,6 +1,6 @@
 import { attribute } from '../core/AttributeNode.js';
 import { cameraViewMatrix } from './Camera.js';
-import { modelWorldMatrix } from './ModelNode.js';
+import { modelNormalMatrix, modelWorldMatrix } from './ModelNode.js';
 import { mat3, vec3 } from '../tsl/TSLBase.js';
 import { positionView } from './Position.js';
 import { Fn, varying } from '../tsl/TSLBase.js';
@@ -69,16 +69,20 @@ export const transformNormal = /*@__PURE__*/ Fn( ( [ normal, matrix = modelWorld
 
 } );
 
-export const transformNormalToView = /*@__PURE__*/ Fn( ( [ normal, matrix = modelWorldMatrix ], builder ) => {
+export const transformNormalToView = /*@__PURE__*/ Fn( ( [ normal ], builder ) => {
 
-	const modelNormalMatrix = builder.renderer.nodes.modelNormalMatrix;
+	const modelNormalViewMatrix = builder.renderer.nodes.modelNormalViewMatrix;
 
-	if ( modelNormalMatrix !== null ) {
+	if ( modelNormalViewMatrix !== null ) {
 
-		return modelNormalMatrix.transformDirection( normal );
+		return modelNormalViewMatrix.transformDirection( normal );
 
 	}
 
-	return cameraViewMatrix.transformDirection( transformNormal( normal, matrix ) );
+	//
+
+	const transformedNormal = modelNormalMatrix.mul( normal );
+
+	return cameraViewMatrix.transformDirection( transformedNormal );
 
 } );

src/renderers/common/Renderer.js

@@ -82,7 +82,7 @@ class Renderer {
 		this.nodes = {
 			library: new NodeLibrary(),
 			modelViewMatrix: null,
-			modelNormalMatrix: null
+			modelNormalViewMatrix: null
 		};
 
 		// internals