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

mrdoob · Feb 15, 2022 · a1024a9 · a1024a9
1 parent 766b95b
commit a1024a9
Show file tree

Hide file tree

Showing 11 changed files with 59 additions and 54 deletions.
diff --git a/examples/webgl2_materials_texture2darray.html b/examples/webgl2_materials_texture2darray.html
@@ -107,8 +107,7 @@
 						const zip = unzipSync( new Uint8Array( data ) );
 						const array = new Uint8Array( zip[ 'head256x256x109' ].buffer );
 
-						const texture = new THREE.DataTexture2DArray( array, 256, 256, 109 );
-						texture.format = THREE.RedFormat;
+						const texture = new THREE.DataTexture2DArray( array, 256, 256, 109, THREE.RedFormat );
 						texture.needsUpdate = true;
 
 						const material = new THREE.ShaderMaterial( {

diff --git a/examples/webgl2_rendertarget_texture2darray.html b/examples/webgl2_rendertarget_texture2darray.html
@@ -138,13 +138,10 @@
 			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.WebGL2DArrayRenderTarget( DIMENSIONS.width, DIMENSIONS.height, DIMENSIONS.depth, {
+				format: THREE.RedFormat,
+				type: THREE.UnsignedByteType
+			} );
 
 			const postProcessMaterial = new THREE.ShaderMaterial( {
 				uniforms: {

diff --git a/src/Three.js b/src/Three.js
@@ -1,5 +1,7 @@
 import { REVISION } from './constants.js';
 
+export { WebGL2DArrayRenderTarget } from './renderers/WebGL2DArrayRenderTarget.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';

diff --git a/src/renderers/WebGL2DArrayRenderTarget.js b/src/renderers/WebGL2DArrayRenderTarget.js
@@ -0,0 +1,21 @@
+import { WebGLRenderTarget } from './WebGLRenderTarget.js';
+import { DataTexture2DArray } from '../textures/DataTexture2DArray.js';
+
+class WebGL2DArrayRenderTarget extends WebGLRenderTarget {
+
+	constructor( width, height, depth, options = {} ) {
+
+		super( width, height, options );
+
+		this.depth = depth;
+
+		this.texture = new DataTexture2DArray( null, width, height, depth, options.format, options.type, options.mapping, options.wrapS, options.wrapT, options.wrapR, options.magFilter, options.minFilter, options.anisotropy, options.encoding );
+		this.texture.isRenderTargetTexture = true;
+
+	}
+
+}
+
+WebGL2DArrayRenderTarget.prototype.isWebGL2DArrayRenderTarget = true;
+
+export { WebGL2DArrayRenderTarget };
diff --git a/src/renderers/WebGL3DRenderTarget.js b/src/renderers/WebGL3DRenderTarget.js
@@ -0,0 +1,21 @@
+import { WebGLRenderTarget } from './WebGLRenderTarget.js';
+import { DataTexture3D } from '../textures/DataTexture3D.js';
+
+class WebGL3DRenderTarget extends WebGLRenderTarget {
+
+	constructor( width, height, depth, options = {} ) {
+
+		super( width, height, options );
+
+		this.depth = depth;
+
+		this.texture = new DataTexture3D( null, width, height, depth, options.format, options.type, options.mapping, options.wrapS, options.wrapT, options.wrapR, options.magFilter, options.minFilter, options.anisotropy, options.encoding );
+		this.texture.isRenderTargetTexture = true;
+
+	}
+
+}
+
+WebGL3DRenderTarget.prototype.isWebGL3DRenderTarget = true;
+
+export { WebGL3DRenderTarget };
diff --git a/src/renderers/WebGLRenderTarget.js b/src/renderers/WebGLRenderTarget.js
@@ -41,18 +41,6 @@ class WebGLRenderTarget extends EventDispatcher {
 
 	}
 
-	setTexture( texture ) {
-
-		texture.image = {
-			width: this.width,
-			height: this.height,
-			depth: this.depth
-		};
-
-		this.texture = texture;
-
-	}
-
 	setSize( width, height, depth = 1 ) {
 
 		if ( this.width !== width || this.height !== height || this.depth !== depth ) {

diff --git a/src/renderers/webgl/WebGLMorphtargets.js b/src/renderers/webgl/WebGLMorphtargets.js
@@ -81,9 +81,7 @@ function WebGLMorphtargets( gl, capabilities, textures ) {
 
 				const buffer = new Float32Array( width * height * 4 * numberOfMorphTargets );
 
-				const texture = new DataTexture2DArray( buffer, width, height, numberOfMorphTargets );
-				texture.format = RGBAFormat; // using RGBA since RGB might be emulated (and is thus slower)
-				texture.type = FloatType;
+				const texture = new DataTexture2DArray( buffer, width, height, numberOfMorphTargets, RGBAFormat, FloatType );
 				texture.needsUpdate = true;
 
 				// fill buffer

diff --git a/src/renderers/webgl/WebGLTextures.js b/src/renderers/webgl/WebGLTextures.js
@@ -1492,7 +1492,6 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, utils,
 
 		const isCube = ( renderTarget.isWebGLCubeRenderTarget === true );
 		const isMultipleRenderTargets = ( renderTarget.isWebGLMultipleRenderTargets === true );
-		const isRenderTarget3D = texture.isDataTexture3D || texture.isDataTexture2DArray;
 		const supportsMips = isPowerOfTwo( renderTarget ) || isWebGL2;
 
 		// Setup framebuffer
@@ -1615,18 +1614,15 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, utils,
 
 			let glTextureType = _gl.TEXTURE_2D;
 
-			if ( isRenderTarget3D ) {
-
-				// Render targets containing layers, i.e: Texture 3D and 2d arrays
+			if ( renderTarget.isWebGL3DRenderTarget || renderTarget.isWebGL2DArrayRenderTarget ) {
 
 				if ( isWebGL2 ) {
 
-					const isTexture3D = texture.isDataTexture3D;
-					glTextureType = isTexture3D ? _gl.TEXTURE_3D : _gl.TEXTURE_2D_ARRAY;
+					glTextureType = renderTarget.isWebGL3DRenderTarget ? _gl.TEXTURE_3D : _gl.TEXTURE_2D_ARRAY;
 
 				} else {
 
-					console.warn( 'THREE.DataTexture3D and THREE.DataTexture2DArray only supported with WebGL2.' );
+					console.error( 'THREE.WebGLTextures: THREE.DataTexture3D and THREE.DataTexture2DArray only supported with WebGL2.' );
 
 				}
 

diff --git a/src/textures/DataTexture.js b/src/textures/DataTexture.js
@@ -9,9 +9,6 @@ class DataTexture extends Texture {
 
 		this.image = { data: data, width: width, height: height };
 
-		this.magFilter = magFilter;
-		this.minFilter = minFilter;
-
 		this.generateMipmaps = false;
 		this.flipY = false;
 		this.unpackAlignment = 1;

diff --git a/src/textures/DataTexture2DArray.js b/src/textures/DataTexture2DArray.js
@@ -3,16 +3,13 @@ import { ClampToEdgeWrapping, NearestFilter } from '../constants.js';
 
 class DataTexture2DArray extends Texture {
 
-	constructor( data = null, width = 1, height = 1, depth = 1 ) {
+	constructor( data = null, width = 1, height = 1, depth = 1, format, type, mapping, wrapS, wrapT, wrapR = ClampToEdgeWrapping, magFilter = NearestFilter, minFilter = NearestFilter, anisotropy, encoding ) {
 
-		super( null );
+		super( null, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, encoding );
 
 		this.image = { data, width, height, depth };
 
-		this.magFilter = NearestFilter;
-		this.minFilter = NearestFilter;
-
-		this.wrapR = ClampToEdgeWrapping;
+		this.wrapR = wrapR;
 
 		this.generateMipmaps = false;
 		this.flipY = false;

diff --git a/src/textures/DataTexture3D.js b/src/textures/DataTexture3D.js
@@ -3,24 +3,13 @@ import { ClampToEdgeWrapping, NearestFilter } from '../constants.js';
 
 class DataTexture3D extends Texture {
 
-	constructor( data = null, width = 1, height = 1, depth = 1 ) {
+	constructor( data = null, width = 1, height = 1, depth = 1, format, type, mapping, wrapS, wrapT, wrapR = ClampToEdgeWrapping, magFilter = NearestFilter, minFilter = NearestFilter, anisotropy, encoding ) {
 
-		// We're going to add .setXXX() methods for setting properties later.
-		// Users can still set in DataTexture3D directly.
-		//
-		//	const texture = new THREE.DataTexture3D( data, width, height, depth );
-		// 	texture.anisotropy = 16;
-		//
-		// See #14839
-
-		super( null );
+		super( null, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, encoding );
 
 		this.image = { data, width, height, depth };
 
-		this.magFilter = NearestFilter;
-		this.minFilter = NearestFilter;
-
-		this.wrapR = ClampToEdgeWrapping;
+		this.wrapR = wrapR;
 
 		this.generateMipmaps = false;
 		this.flipY = false;