WebGPURenderer: Introduce RenderTarget3D and RenderTargetArray (#30155)

* WebGPURenderer: Introduce RenderTarget3D and RenderTargetArray

* Fix TextureHelperGPU

* revert WebGL3DRenderTarget.js

* cleanup

* simplify example

* cleanup

* revert screenshot

* improve example

* update example

* refactor renderContext to support renderTarget not rendered yet and fix clear in webgpubackend

* ignore example

* Fix flip UV of texture3D FBO in WebGL

* update screenshot

* use build in example

* cleanup example

* feedbacks clear/load

* small cleanup syntax

* Improved example

* rename example

* update puppeeteer

examples/files.json

@@ -408,6 +408,7 @@
 		"webgpu_procedural_texture",
 		"webgpu_reflection",
 		"webgpu_refraction",
+		"webgpu_rendertarget_2d-array_3d",
 		"webgpu_rtt",
 		"webgpu_sandbox",
 		"webgpu_shadertoy",

examples/jsm/helpers/TextureHelperGPU.js

@@ -1,29 +1,39 @@
 import {
+	NodeMaterial,
 	BoxGeometry,
 	BufferAttribute,
 	Mesh,
 	PlaneGeometry,
+	DoubleSide,
 	Vector3,
 } from 'three';
-import { NodeMaterial, texture as textureNode, cubeTexture, texture3D, float, vec4 } from 'three/tsl';
+import { texture as textureNode, cubeTexture, texture3D, float, vec4, attribute } from 'three/tsl';
 import { mergeGeometries } from '../utils/BufferGeometryUtils.js';
 
 class TextureHelper extends Mesh {
 
 	constructor( texture, width = 1, height = 1, depth = 1 ) {
 
 		const material = new NodeMaterial();
+		material.side = DoubleSide;
+		material.transparent = true;
 		material.name = 'TextureHelper';
 
 		let colorNode;
 
+		const uvw = attribute( 'uvw' );
+
 		if ( texture.isCubeTexture ) {
 
-			colorNode = cubeTexture( texture );
+			colorNode = cubeTexture( texture ).sample( uvw );
 
 		} else if ( texture.isData3DTexture || texture.isCompressed3DTexture ) {
 
-			colorNode = texture3D( texture );
+			colorNode = texture3D( texture ).sample( uvw );
+
+		} else if ( texture.isDataArrayTexture || texture.isCompressedArrayTexture ) {
+
+			colorNode = textureNode( texture ).sample( uvw.xy ).depth( uvw.z );
 
 		} else {
 
@@ -122,7 +132,7 @@ function createCubeGeometry( width, height, depth ) {
 	}
 
 	geometry.deleteAttribute( 'uv' );
-	geometry.setAttribute( 'uv', uvw );
+	geometry.setAttribute( 'uvw', uvw );
 
 	return geometry;
 
@@ -162,7 +172,7 @@ function createSliceGeometry( texture, width, height, depth ) {
 		}
 
 		geometry.deleteAttribute( 'uv' );
-		geometry.setAttribute( 'uv', uvw );
+		geometry.setAttribute( 'uvw', uvw );
 
 		geometries.push( geometry );
 

examples/tags.json

@@ -144,6 +144,7 @@
 	"webgpu_postprocessing_ssaa": [ "msaa", "multisampled" ],
 	"webgpu_refraction": [ "water" ],
 	"webgpu_rtt": [ "renderTarget", "texture" ],
+	"webgpu_rendertarget_2d-array_3d": [ "renderTarget", "2d-array", "3d" ],
 	"webgpu_sky": [ "sun" ],
 	"webgpu_tonemapping": [ "gltf" ],
 	"webgpu_tsl_compute_attractors_particles": [ "gpgpu" ],