WebGPU background has an unnecessary precision issue

[SebastianTusk]

Description

Having large scale scenes (in my case earth orbit scale) leads to background jittering. This can be mitigated by enabling Renderer.highPrecision. But this is unnecessary with a small change in the way the background is rendered.

Solution

The solution would be to ignore the camera position instead of moving the background mesh to the camera location. This would also avoid copying of the camera position in backgroundMesh.onBeforeRender.

Example code that can also be used as a drop-in instead of the default background.

const backgroundTexture = await new HDRLoader().loadAsync( "background.hdr" );
backgroundTexture.mapping = EquirectangularReflectionMapping;

const backgroundNode = texture(backgroundTexture, equirectUV());
const backgroundMeshNode = context( vec4( backgroundNode ).mul( backgroundIntensity ), {
    // @TODO: Add Texture2D support using node context
    getUV: () => backgroundRotation.mul( normalWorldGeometry ),
    getTextureLevel: () => backgroundBlurriness
} );

const positionView = modelViewMatrix.mul( vec4(positionLocal.xyz, 0) ).xyz;
const modelViewProjection = cameraProjectionMatrix.mul( vec4(positionView, 0) );
const viewProj = modelViewProjection.setZ( modelViewProjection.w );

const nodeMaterial = new NodeMaterial();
nodeMaterial.name = 'Background.material';
nodeMaterial.side = BackSide;
// nodeMaterial.depthTest = false;
nodeMaterial.depthWrite = false;
nodeMaterial.allowOverride = false;
nodeMaterial.fog = false;
nodeMaterial.lights = false;
nodeMaterial.vertexNode = viewProj;
nodeMaterial.colorNode = backgroundMeshNode;

const backgroundMesh = new Mesh( new SphereGeometry( 1, 32, 32 ), nodeMaterial );
backgroundMesh.frustumCulled = false;
backgroundMesh.name = 'Background.mesh';

/*backgroundMesh.onBeforeRender = function ( renderer, scene, camera ) {

    this.matrixWorld.copyPosition( camera.matrixWorld );

};*/

this.ar.scene.add(backgroundMesh);

Alternatives

Renderer.highPrecision

Additional context

No response

[Dhruv-2403]

Hey @Mugen87 , may you please assign me this issue , I pretty much like to work on this issue??

[Dhruv-2403]

Hey @Mugen87 , may you please review my pr as if any error or issue exists may you pleaase tell me??

[Dhruv-2403]

Hey @Mugen87 , why i am hidden as spam, actually sir i have commited and remove the backgroundMesh.onBeforeRender callback as it is producing error

[Mugen87]

Having large scale scenes (in my case earth orbit scale) leads to background jittering.

Please demonstrate the issue with a live example. Use https://jsfiddle.net/xno7bmw0/ as a starter template.

[Mugen87]

Closing until the issue has been demonstrated.

[SebastianTusk]

Here is the issue demonstrated: https://jsfiddle.net/6pLzgda1/1/

[Mugen87]

Your suggested change works great! I've tested it and it fixes the fiddle. I'll file a PR.

[Mugen87]

Sorry, I had to revert the PR singe the suggested change is incompatible with orthographic cameras: https://jsfiddle.net/3Lwgv08s/1/