WebGPURenderer: CubeRenderTarget and CubeCamera

[sunag]

Description

This update is a continuation of this PR ( #26140 ) which includes the coordinate system for WebGPU. This approach allows CubeCamera to get the .coordinateSystem from the Renderer and update the settings if necessary. The update also makes some improvements to RTT regarding cache usage in case the application need to change many times the Tone Mapping and Color Space.

three.js.webgpu.-.dynamic.cube.reflection.-.Google.Chrome.2023-05-27.06-27-14.1.mp4

• Added CubeRenderTarget.fromEquirectangularTexture()
• CubeCamera: Introduce Coordinate System
• WebGPURenderer: Added CubeRenderTarget support
• NodeMaterial: Fixing currently colorSpace and environment
• ToneMappingNode: Fix caching
• Renderer Nodes: cleanup
• Examples: Added webgpu_cubemap_dynamic

[github-actions]

📦 Bundle size

Full ESM build, minified and gzipped.

Filesize dev	Filesize PR	Diff
643.4 kB (159.4 kB)	644.1 kB (159.5 kB)	+645 B

🌳 Bundle size after tree-shaking

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

Filesize dev	Filesize PR	Diff
433.5 kB (105 kB)	434.1 kB (105.1 kB)	+643 B

[sunag]

@mrdoob I'm already very close to the IBL expected result in WebGPU for Equirectangular Textures.

WebGPU	WebGL

Textures

One thing has been bugging me for a while, it seems we have a texture configuration policy in three.js. Texture settings are often tweaked overriding the defined settings automatically. I'll give you an example:

three.js/examples/webgl_loader_gltf.html

Lines 54 to 61 in 129635b

	new RGBELoader()
	.setPath( 'textures/equirectangular/' )
	.load( 'royal_esplanade_1k.hdr', function ( texture ) {
	texture.mapping = THREE.EquirectangularReflectionMapping;
	scene.background = texture;
	scene.environment = texture;

The settings are:

texture.minFilter = THREE.LinearFilter;
texture.generateMipmaps = false;
//texture.needsPMREMUpdate = false;

Texture settings are converted to

texture.minFilter = THREE.LinearMipmapLinearFilter;
texture.generateMipmaps = true;
//texture.needsPMREMUpdate = true;

This is something I'm going to implement it texture configuration policy in the WebGPU to maintain backwards compatibility I think... I don't know if we can change that at this point, or if there is one description to this somewhere that I haven't noticed.

/cc @mrdoob @Mugen87 @LeviPesin

[mrdoob]

Is this the line you're referring to?

three.js/src/renderers/WebGLCubeRenderTarget.js

Line 123 in 129635b

if ( texture.minFilter === LinearMipmapLinearFilter ) texture.minFilter = LinearFilter;

[sunag]

I think that would be it:

three.js/src/renderers/webgl/WebGLCubeUVMaps.js

Line 46 in 129635b

if ( ( isEquirectMap && image && image.height > 0 ) || ( isCubeMap && image && isCubeTextureComplete( image ) ) ) {

Both Equirectangular*Mapping and Cube*Mapping are converted to PMREM, as normally IBL relies on mipmaps whether prefiltered or not, the descriptions I wrote in the previous post about replace the settings automatically I think it's closer to the original intention or expectation since the user would not have access to the PMREM texture. I think that we could say that Equirectangular*Mapping and Cube*Mapping are the predominant settings.