Examples: Properly transform normal vectors (#34015)

examples/jsm/tsl/display/RecurrentDenoiseNode.js

@@ -606,7 +606,7 @@ class RecurrentDenoiseNode extends TempNode {
 			const runDenoise = () => {
 
 				const viewNormal = sampleNormal( uvCoord ).toConst();
-				const worldNormal = viewNormal.transformDirection( this._viewMatrix ).toConst();
+				const worldNormal = viewNormal.transformNormalByInverseViewMatrix( this._viewMatrix ).toConst();
 				const texel = sampleTexture( uvCoord ).max( 0 ).toConst();
 
 				const viewPosition = getViewPosition( uvCoord, depth, this._cameraProjectionMatrixInverse ).toConst();
@@ -796,7 +796,7 @@ class RecurrentDenoiseNode extends TempNode {
 					if ( this.mode === 'specular' ) kernelDiff.addAssign( ( abs( roughness.sub( sampleRoughnessMetalness( sampleUv ).g ) ).mul( this.roughnessPhi ) ) );
 
 					const nViewNormal = sampleNormal( sampleUv );
-					const nWorldNormal = nViewNormal.transformDirection( this._viewMatrix );
+					const nWorldNormal = nViewNormal.transformNormalByInverseViewMatrix( this._viewMatrix );
 					const distToPlane = planeDistance( viewPosition, nViewPosition, viewNormal );
 
 					// Geometric edge stopping (depth and normal)

examples/jsm/tsl/display/TemporalReprojectNode.js

@@ -256,7 +256,7 @@ const sampleBilinearTap = Fn( ( [
 	const reprojDepth = textureLoad( previousDepthNode, tapCoord ).r;
 	const reprojViewPos = getViewPosition( vec2( tapCoord ).add( 0.5 ).div( resolution ), reprojDepth, previousProjectionMatrixInverse );
 	const reprojWorldPos = previousCameraWorldMatrix.mul( vec4( reprojViewPos, 1.0 ) ).xyz;
-	const reprojWorldNorm = unpackRGBToNormal( textureLoad( previousNormalNode, tapCoord ).rgb ).transformDirection( previousCameraViewMatrix );
+	const reprojWorldNorm = unpackRGBToNormal( textureLoad( previousNormalNode, tapCoord ).rgb ).transformNormalByInverseViewMatrix( previousCameraViewMatrix );
 
 	const planeDiff = abs( dot( reprojWorldPos.sub( worldPosition ), worldNormal ) ).toVar();
 	planeDiff.divAssign( abs( reprojViewPos.z ) );
@@ -794,7 +794,7 @@ class TemporalReprojectNode extends TempNode {
 
 			// Shared 3×3 beauty fetch: feeds both the variance-clip box and the SSR ray-length stats.
 			const neighborhood = collectNeighborhood( this.beautyNode, beautyTexel, inputColor, this.flickerSuppression );
-			const worldNormal = viewNormal.transformDirection( cameraUniforms.viewMatrix ).toVar();
+			const worldNormal = viewNormal.transformNormalByInverseViewMatrix( cameraUniforms.viewMatrix ).toVar();
 
 			const viewPosition = getViewPosition( uvNode, depth, cameraUniforms.projectionMatrixInverse ).toVar();
 			const worldPosition = cameraUniforms.worldMatrix.mul( vec4( viewPosition, 1.0 ) ).xyz.toVar();

examples/webgpu_compute_rasterizer_ibl.html

@@ -1219,7 +1219,7 @@
 					const hwShadedMaterial = new THREE.MeshStandardNodeMaterial();
 					hwShadedMaterial.positionNode = hwPosition;
 					hwShadedMaterial.colorNode = sampleMapHW( sourceMaterial.map );
-					hwShadedMaterial.normalNode = applyNormalMap( hwNormal, normalize( vTangent ), sampleMapHW( sourceMaterial.normalMap ) ).transformDirection( cameraViewMatrix );
+					hwShadedMaterial.normalNode = applyNormalMap( hwNormal, normalize( vTangent ), sampleMapHW( sourceMaterial.normalMap ) ).transformNormalByViewMatrix( cameraViewMatrix );
 					const metalRoughHW = sampleMapHW( sourceMaterial.roughnessMap ); // glTF packs roughness (g) and metalness (b) in one texture
 					hwShadedMaterial.roughnessNode = sqrt( metalRoughHW.g.mul( metalRoughHW.g ).add( hwKernelRoughness ) );
 					hwShadedMaterial.metalnessNode = metalRoughHW.b;
@@ -1441,7 +1441,7 @@
 						normal_interp,
 						computeTangent( w0, w1, w2, t_uv0, t_uv1, t_uv2, normal_interp ),
 						sampleMap( sourceMaterial.normalMap )
-					).transformDirection( cameraViewMatrix );
+					).transformNormalByViewMatrix( cameraViewMatrix );
 					const metalRough = sampleMap( sourceMaterial.roughnessMap ); // glTF packs roughness (g) and metalness (b) in one texture
 					resolveShadedMaterial.roughnessNode = sqrt( metalRough.g.mul( metalRough.g ).add( kernelRoughness ) );
 					resolveShadedMaterial.metalnessNode = metalRough.b;