WebGPURenderer: Prevent translation of skybox. (#32537)

Author: Mugen87

src/renderers/common/Background.js

@@ -106,7 +106,12 @@ class Background extends DataMap {
 
 				// compute vertex position
 				const modifiedPosition = isOrtho.select( positionLocal.mul( orthoScale ), positionLocal );
-				let viewProj = cameraProjectionMatrix.mul( modelViewMatrix.mul( vec4( modifiedPosition, 1.0 ) ) );
+
+				// by using a w component of 0, the skybox will not translate when the camera moves through the scene
+				const viewPosition = modelViewMatrix.mul( vec4( modifiedPosition, 0.0 ) );
+
+				// we force w=1.0 here to prevent the w_clip=0 divide-by-zero error for ortho cameras.
+				let viewProj = cameraProjectionMatrix.mul( vec4( viewPosition.xyz, 1.0 ) );
 
 				// force background to far plane so it does not occlude objects
 				viewProj = viewProj.setZ( viewProj.w );
@@ -127,12 +132,6 @@ class Background extends DataMap {
 				backgroundMesh.frustumCulled = false;
 				backgroundMesh.name = 'Background.mesh';
 
-				backgroundMesh.onBeforeRender = function ( renderer, scene, camera ) {
-
-					this.matrixWorld.copyPosition( camera.matrixWorld );
-
-				};
-
 				function onBackgroundDispose() {
 
 					background.removeEventListener( 'dispose', onBackgroundDispose );