Add new render target types for 3D and array textures. (mrdoob#23498)

* Add new render target types for 3D and array textures.

* Rename data textures.

* Examples: Clean up.

* Remove options parameter from new render targets.

docs/api/en/textures/DataTexture2DArray.html → docs/api/en/textures/DataArrayTexture.html

@@ -66,7 +66,7 @@ <h2>Code Example</h2>
 
 		// used the buffer to create a [name]
 
-		const texture = new THREE.DataTexture2DArray( data, width, height, depth );
+		const texture = new THREE.DataArrayTexture( data, width, height, depth );
 		texture.needsUpdate = true;
 		</code>
 

docs/api/zh/textures/DataTexture2DArray.html

@@ -66,7 +66,7 @@ <h2>代码示例</h2>
 
 		// used the buffer to create a [name]
 
-		const texture = new THREE.DataTexture2DArray( data, width, height, depth );
+		const texture = new THREE.DataArrayTexture( data, width, height, depth );
 		texture.needsUpdate = true;
 		</code>
 

docs/list.json

@@ -311,9 +311,9 @@
 				"CanvasTexture": "api/en/textures/CanvasTexture",
 				"CompressedTexture": "api/en/textures/CompressedTexture",
 				"CubeTexture": "api/en/textures/CubeTexture",
+				"Data3DTexture": "api/en/textures/Data3DTexture",
+				"DataArrayTexture": "api/en/textures/DataArrayTexture",
 				"DataTexture": "api/en/textures/DataTexture",
-				"DataTexture2DArray": "api/en/textures/DataTexture2DArray",
-				"DataTexture3D": "api/en/textures/DataTexture3D",
 				"DepthTexture": "api/en/textures/DepthTexture",
 				"FramebufferTexture": "api/en/textures/FramebufferTexture",
 				"Source": "api/en/textures/Source",
@@ -810,9 +810,9 @@
 				"CanvasTexture": "api/zh/textures/CanvasTexture",
 				"CompressedTexture": "api/zh/textures/CompressedTexture",
 				"CubeTexture": "api/zh/textures/CubeTexture",
+				"DataArrayTexture": "api/zh/textures/DataArrayTexture",
+				"Data3DTexture": "api/zh/textures/Data3DTexture",
 				"DataTexture": "api/zh/textures/DataTexture",
-				"DataTexture2DArray": "api/zh/textures/DataTexture2DArray",
-				"DataTexture3D": "api/zh/textures/DataTexture3D",
 				"DepthTexture": "api/zh/textures/DepthTexture",
 				"FramebufferTexture": "api/zh/textures/FramebufferTexture",
 				"Source": "api/zh/textures/Source",

examples/js/loaders/LUT3dlLoader.js

@@ -110,7 +110,7 @@
 			texture.wrapT = THREE.ClampToEdgeWrapping;
 			texture.generateMipmaps = false;
 			texture.needsUpdate = true;
-			const texture3D = new THREE.DataTexture3D();
+			const texture3D = new THREE.Data3DTexture();
 			texture3D.image.data = data;
 			texture3D.image.width = size;
 			texture3D.image.height = size;

examples/js/loaders/LUTCubeLoader.js

@@ -109,7 +109,7 @@
 			texture.wrapT = THREE.ClampToEdgeWrapping;
 			texture.generateMipmaps = false;
 			texture.needsUpdate = true;
-			const texture3D = new THREE.DataTexture3D();
+			const texture3D = new THREE.Data3DTexture();
 			texture3D.image.data = data;
 			texture3D.image.width = size;
 			texture3D.image.height = size;

examples/js/loaders/VOXLoader.js

@@ -211,7 +211,7 @@
 
 	}
 
-	class VOXDataTexture3D extends THREE.DataTexture3D {
+	class VOXData3DTexture extends THREE.Data3DTexture {
 
 		constructor( chunk ) {
 
@@ -242,7 +242,7 @@
 
 	}
 
-	THREE.VOXDataTexture3D = VOXDataTexture3D;
+	THREE.VOXData3DTexture = VOXData3DTexture;
 	THREE.VOXLoader = VOXLoader;
 	THREE.VOXMesh = VOXMesh;
 

examples/js/postprocessing/LUTPass.js

@@ -124,7 +124,7 @@
 
 				if ( v ) {
 
-					const is3dTextureDefine = v.isDataTexture3D ? 1 : 0;
+					const is3dTextureDefine = v.isData3DTexture ? 1 : 0;
 
 					if ( is3dTextureDefine !== material.defines.USE_3DTEXTURE ) {
 
@@ -135,7 +135,7 @@
 
 					material.uniforms.lutSize.value = v.image.width;
 
-					if ( v.isDataTexture3D ) {
+					if ( v.isData3DTexture ) {
 
 						material.uniforms.lut3d.value = v;
 

examples/jsm/loaders/LUT3dlLoader.js

@@ -4,7 +4,7 @@ import {
 	Loader,
 	FileLoader,
 	DataTexture,
-	DataTexture3D,
+	Data3DTexture,
 	RGBAFormat,
 	UnsignedByteType,
 	ClampToEdgeWrapping,
@@ -125,7 +125,7 @@ export class LUT3dlLoader extends Loader {
 		texture.generateMipmaps = false;
 		texture.needsUpdate = true;
 
-		const texture3D = new DataTexture3D();
+		const texture3D = new Data3DTexture();
 		texture3D.image.data = data;
 		texture3D.image.width = size;
 		texture3D.image.height = size;

examples/jsm/loaders/LUTCubeLoader.js

@@ -5,7 +5,7 @@ import {
 	FileLoader,
 	Vector3,
 	DataTexture,
-	DataTexture3D,
+	Data3DTexture,
 	UnsignedByteType,
 	ClampToEdgeWrapping,
 	LinearFilter,
@@ -125,7 +125,7 @@ export class LUTCubeLoader extends Loader {
 		texture.generateMipmaps = false;
 		texture.needsUpdate = true;
 
-		const texture3D = new DataTexture3D();
+		const texture3D = new Data3DTexture();
 		texture3D.image.data = data;
 		texture3D.image.width = size;
 		texture3D.image.height = size;

examples/jsm/loaders/VOXLoader.js

@@ -1,6 +1,6 @@
 import {
 	BufferGeometry,
-	DataTexture3D,
+	Data3DTexture,
 	FileLoader,
 	Float32BufferAttribute,
 	Loader,
@@ -266,7 +266,7 @@ class VOXMesh extends Mesh {
 
 }
 
-class VOXDataTexture3D extends DataTexture3D {
+class VOXData3DTexture extends Data3DTexture {
 
 	constructor( chunk ) {
 
@@ -302,4 +302,4 @@ class VOXDataTexture3D extends DataTexture3D {
 
 }
 
-export { VOXLoader, VOXMesh, VOXDataTexture3D };
+export { VOXLoader, VOXMesh, VOXData3DTexture };

examples/jsm/postprocessing/LUTPass.js

@@ -117,7 +117,7 @@ class LUTPass extends ShaderPass {
 
 			if ( v ) {
 
-				const is3dTextureDefine = v.isDataTexture3D ? 1 : 0;
+				const is3dTextureDefine = v.isData3DTexture ? 1 : 0;
 				if ( is3dTextureDefine !== material.defines.USE_3DTEXTURE ) {
 
 					material.defines.USE_3DTEXTURE = is3dTextureDefine;
@@ -126,7 +126,7 @@ class LUTPass extends ShaderPass {
 				}
 
 				material.uniforms.lutSize.value = v.image.width;
-				if ( v.isDataTexture3D ) {
+				if ( v.isData3DTexture ) {
 
 					material.uniforms.lut3d.value = v;
 

examples/jsm/renderers/webgpu/WebGPUTextures.js

@@ -349,7 +349,7 @@ class WebGPUTextures {
 
 		// transfer texture data
 
-		if ( texture.isDataTexture || texture.isDataTexture2DArray || texture.isDataTexture3D ) {
+		if ( texture.isDataTexture || texture.isDataArrayTexture || texture.isData3DTexture ) {
 
 			this._copyBufferToTexture( image, format, textureGPU );
 
@@ -528,7 +528,7 @@ class WebGPUTextures {
 
 		let dimension;
 
-		if ( texture.isDataTexture3D ) {
+		if ( texture.isData3DTexture ) {
 
 			dimension = GPUTextureDimension.ThreeD;
 

examples/webgl2_materials_texture2darray.html

@@ -107,7 +107,7 @@
 						const zip = unzipSync( new Uint8Array( data ) );
 						const array = new Uint8Array( zip[ 'head256x256x109' ].buffer );
 
-						const texture = new THREE.DataTexture2DArray( array, 256, 256, 109 );
+						const texture = new THREE.DataArrayTexture( array, 256, 256, 109 );
 						texture.format = THREE.RedFormat;
 						texture.needsUpdate = true;
 

examples/webgl2_materials_texture3d.html

@@ -97,7 +97,7 @@
 				// THREEJS will select R32F (33326) based on the THREE.RedFormat and THREE.FloatType.
 				// Also see https://www.khronos.org/registry/webgl/specs/latest/2.0/#TEXTURE_TYPES_FORMATS_FROM_DOM_ELEMENTS_TABLE
 				// TODO: look the dtype up in the volume metadata
-				const texture = new THREE.DataTexture3D( volume.data, volume.xLength, volume.yLength, volume.zLength );
+				const texture = new THREE.Data3DTexture( volume.data, volume.xLength, volume.yLength, volume.zLength );
 				texture.format = THREE.RedFormat;
 				texture.type = THREE.FloatType;
 				texture.minFilter = texture.magFilter = THREE.LinearFilter;

examples/webgl2_materials_texture3d_partialupdate.html

@@ -75,7 +75,7 @@
 
 				}
 
-				return new THREE.DataTexture3D( data, size, size, size );
+				return new THREE.Data3DTexture( data, size, size, size );
 
 			}
 
@@ -115,7 +115,7 @@
 
 				// Texture
 
-				const texture = new THREE.DataTexture3D(
+				const texture = new THREE.Data3DTexture(
 					new Uint8Array( INITIAL_CLOUD_SIZE * INITIAL_CLOUD_SIZE * INITIAL_CLOUD_SIZE ).fill( 0 ),
 					INITIAL_CLOUD_SIZE,
 					INITIAL_CLOUD_SIZE,

examples/webgl2_rendertarget_texture2darray.html

@@ -138,13 +138,8 @@
 			const postProcessScene = new THREE.Scene();
 			const postProcessCamera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
 
-			const renderTargetTexture = new THREE.DataTexture2DArray();
-			renderTargetTexture.format = THREE.RedFormat;
-			renderTargetTexture.type = THREE.UnsignedByteType;
-
-			const renderTarget = new THREE.WebGLRenderTarget( DIMENSIONS.width, DIMENSIONS.height );
-			renderTarget.depth = DIMENSIONS.depth;
-			renderTarget.setTexture( renderTargetTexture );
+			const renderTarget = new THREE.WebGLArrayRenderTarget( DIMENSIONS.width, DIMENSIONS.height, DIMENSIONS.depth );
+			renderTarget.texture.format = THREE.RedFormat;
 
 			const postProcessMaterial = new THREE.ShaderMaterial( {
 				uniforms: {
@@ -207,7 +202,7 @@
 						var zip = unzipSync( new Uint8Array( data ) );
 						const array = new Uint8Array( zip[ 'head256x256x109' ].buffer );
 
-						const texture = new THREE.DataTexture2DArray( array, DIMENSIONS.width, DIMENSIONS.height, DIMENSIONS.depth );
+						const texture = new THREE.DataArrayTexture( array, DIMENSIONS.width, DIMENSIONS.height, DIMENSIONS.depth );
 						texture.format = THREE.RedFormat;
 						texture.needsUpdate = true;
 
@@ -282,8 +277,7 @@
 
 			function render() {
 
-				// Step 1 - Render the input DataTexture2DArray into a
-				// DataTexture2DArray render target.
+				// Step 1 - Render the input DataArrayTexture into render target
 				renderTo2DArray();
 
 				// Step 2 - Renders the scene containing the plane with a material

examples/webgl2_volume_cloud.html

@@ -104,7 +104,7 @@
 
 				}
 
-				const texture = new THREE.DataTexture3D( data, size, size, size );
+				const texture = new THREE.Data3DTexture( data, size, size, size );
 				texture.format = THREE.RedFormat;
 				texture.minFilter = THREE.LinearFilter;
 				texture.magFilter = THREE.LinearFilter;

examples/webgl2_volume_instancing.html

@@ -27,7 +27,7 @@
 		<script type="module">
 			import * as THREE from 'three';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
-			import { VOXLoader, VOXDataTexture3D } from './jsm/loaders/VOXLoader.js';
+			import { VOXLoader, VOXData3DTexture } from './jsm/loaders/VOXLoader.js';
 
 			import WebGL from './jsm/capabilities/WebGL.js';
 
@@ -182,7 +182,7 @@
 						const material = new THREE.RawShaderMaterial( {
 							glslVersion: THREE.GLSL3,
 							uniforms: {
-								map: { value: new VOXDataTexture3D( chunk ) },
+								map: { value: new VOXData3DTexture( chunk ) },
 								cameraPos: { value: new THREE.Vector3() }
 							},
 							vertexShader,

examples/webgl2_volume_perlin.html

@@ -85,7 +85,7 @@
 
 				}
 
-				const texture = new THREE.DataTexture3D( data, size, size, size );
+				const texture = new THREE.Data3DTexture( data, size, size, size );
 				texture.format = THREE.RedFormat;
 				texture.minFilter = THREE.LinearFilter;
 				texture.magFilter = THREE.LinearFilter;

src/Three.Legacy.js

@@ -77,6 +77,8 @@ import { ImageUtils } from './extras/ImageUtils.js';
 import { Shape } from './extras/core/Shape.js';
 import { CubeCamera } from './cameras/CubeCamera.js';
 import { Scene } from './scenes/Scene.js';
+import { DataArrayTexture } from './textures/DataArrayTexture.js';
+import { Data3DTexture } from './textures/Data3DTexture.js';
 
 export { MathUtils as Math };
 
@@ -1994,3 +1996,17 @@ export function WebGLMultisampleRenderTarget( width, height, options ) {
 	return renderTarget;
 
 }
+
+export function DataTexture2DArray( data, width, height, depth ) {
+
+	console.warn( 'THREE.DataTexture2DArray has been renamed to DataArrayTexture.' );
+	return new DataArrayTexture( data, width, height, depth );
+
+}
+
+export function DataTexture3D( data, width, height, depth ) {
+
+	console.warn( 'THREE.DataTexture3D has been renamed to Data3DTexture.' );
+	return new Data3DTexture( data, width, height, depth );
+
+}

src/Three.js

@@ -1,5 +1,7 @@
 import { REVISION } from './constants.js';
 
+export { WebGLArrayRenderTarget } from './renderers/WebGLArrayRenderTarget.js';
+export { WebGL3DRenderTarget } from './renderers/WebGL3DRenderTarget.js';
 export { WebGLMultipleRenderTargets } from './renderers/WebGLMultipleRenderTargets.js';
 export { WebGLCubeRenderTarget } from './renderers/WebGLCubeRenderTarget.js';
 export { WebGLRenderTarget } from './renderers/WebGLRenderTarget.js';
@@ -27,8 +29,8 @@ export { Group } from './objects/Group.js';
 export { VideoTexture } from './textures/VideoTexture.js';
 export { FramebufferTexture } from './textures/FramebufferTexture.js';
 export { DataTexture } from './textures/DataTexture.js';
-export { DataTexture2DArray } from './textures/DataTexture2DArray.js';
-export { DataTexture3D } from './textures/DataTexture3D.js';
+export { DataArrayTexture } from './textures/DataArrayTexture.js';
+export { Data3DTexture } from './textures/Data3DTexture.js';
 export { CompressedTexture } from './textures/CompressedTexture.js';
 export { CubeTexture } from './textures/CubeTexture.js';
 export { CanvasTexture } from './textures/CanvasTexture.js';

src/renderers/WebGL3DRenderTarget.js

@@ -0,0 +1,22 @@
+import { WebGLRenderTarget } from './WebGLRenderTarget.js';
+import { Data3DTexture } from '../textures/Data3DTexture.js';
+
+class WebGL3DRenderTarget extends WebGLRenderTarget {
+
+	constructor( width, height, depth ) {
+
+		super( width, height );
+
+		this.depth = depth;
+
+		this.texture = new Data3DTexture( null, width, height, depth );
+
+		this.texture.isRenderTargetTexture = true;
+
+	}
+
+}
+
+WebGL3DRenderTarget.prototype.isWebGL3DRenderTarget = true;
+
+export { WebGL3DRenderTarget };

src/renderers/WebGLArrayRenderTarget.js

@@ -0,0 +1,22 @@
+import { WebGLRenderTarget } from './WebGLRenderTarget.js';
+import { DataArrayTexture } from '../textures/DataArrayTexture.js';
+
+class WebGLArrayRenderTarget extends WebGLRenderTarget {
+
+	constructor( width, height, depth ) {
+
+		super( width, height );
+
+		this.depth = depth;
+
+		this.texture = new DataArrayTexture( null, width, height, depth );
+
+		this.texture.isRenderTargetTexture = true;
+
+	}
+
+}
+
+WebGLArrayRenderTarget.prototype.isWebGLArrayRenderTarget = true;
+
+export { WebGLArrayRenderTarget };