WebGPURenderer: Fix textured backgrounds with ortho cameras.

[Mugen87]

Related issue: https://discourse.threejs.org/t/issue-with-webgpu-orthographic-camera-scene-background-texture/88190

Description

A user in the forum reported an issue that (flat) textured backgrounds do not work with orthographic cameras.

For reproduction: https://jsfiddle.net/3Lwgv08s/1/

I have fixed the issue by setting up a different material and background mesh configuration for environment maps/skyboxes or flat textures. This is the same approach we use in WebGLRenderer as well.

[github-actions]

📦 Bundle size

Full ESM build, minified and gzipped.

	Before	After	Diff
WebGL	356.18 86.47	356.18 86.47	+0 B +0 B
WebGPU	616.42 173.08	616.55 173.13	+122 B +47 B
WebGPU Nodes	615.03 172.83	615.15 172.88	+122 B +47 B

🌳 Bundle size after tree-shaking

Minimal build including a renderer, camera, empty scene, and dependencies.

	Before	After	Diff
WebGL	488.05 121.29	488.05 121.29	+0 B +0 B
WebGPU	688.66 188.99	688.78 189.04	+122 B +50 B
WebGPU Nodes	630.38 172.22	630.5 172.27	+122 B +49 B

[Mugen87]

I have fixed the issue by setting up a different material and background mesh configuration for environment maps/skyboxes or flat textures. This is the same approach we use in WebGLRenderer as well.

Unfortunately, this approach does not work. Because environment maps can be defined via nodes in many different ways, it is not sufficient to just check in Nodes.updateBackground() and set the isEnvironmentMapNode flag. Examples like webgpu_equirectangular load normal textures but define equirect uvs. Such setups must go in the environment map code path but it's not clear how to distinct such use cases from normal textures.

It seems we need a solution that works with a single type of background mesh and background material...

[Mugen87]

After some more testing, environment maps are affected as well when rendering a scene with an orthographic camera: https://jsfiddle.net/3ft8Lnsj/

However, this use case does not work with WebGLRenderer, too: https://jsfiddle.net/m8ft0Lru/

[Mugen87]

Scaling the geometry of the sphere background according to the ortho scale seems to do the trick 🎉 .