deprecate WebGLMRTs

examples/webgl2_multiple_rendertargets.html

@@ -134,24 +134,24 @@
 
 				// Create a multi render target with Float buffers
 
-				renderTarget = new THREE.WebGLMultipleRenderTargets(
+				renderTarget = new THREE.WebGLRenderTarget(
 					window.innerWidth * window.devicePixelRatio,
 					window.innerHeight * window.devicePixelRatio,
-					2
+					{ count : 2 }
 				);
 
-				for ( let i = 0, il = renderTarget.texture.length; i < il; i ++ ) {
+				for ( let i = 0, il = renderTarget.textures.length; i < il; i ++ ) {
 
-					renderTarget.texture[ i ].minFilter = THREE.NearestFilter;
-					renderTarget.texture[ i ].magFilter = THREE.NearestFilter;
-					renderTarget.texture[ i ].type = THREE.FloatType;
+					renderTarget.textures[ i ].minFilter = THREE.NearestFilter;
+					renderTarget.textures[ i ].magFilter = THREE.NearestFilter;
+					renderTarget.textures[ i ].type = THREE.FloatType;
 
 				}
 
 				// Name our G-Buffer attachments for debugging
 
-				renderTarget.texture[ 0 ].name = 'diffuse';
-				renderTarget.texture[ 1 ].name = 'normal';
+				renderTarget.textures[ 0 ].name = 'diffuse';
+				renderTarget.textures[ 1 ].name = 'normal';
 
 				// Scene setup
 
@@ -199,8 +199,8 @@
 						vertexShader: document.querySelector( '#render-vert' ).textContent.trim(),
 						fragmentShader: document.querySelector( '#render-frag' ).textContent.trim(),
 						uniforms: {
-							tDiffuse: { value: renderTarget.texture[ 0 ] },
-							tNormal: { value: renderTarget.texture[ 1 ] },
+							tDiffuse: { value: renderTarget.textures[ 0 ] },
+							tNormal: { value: renderTarget.textures[ 1 ] },
 						},
 						glslVersion: THREE.GLSL3
 					} )

examples/webgl_depth_texture.html

@@ -27,15 +27,16 @@
 		<script id="post-frag" type="x-shader/x-fragment">
 			#include <packing>
 
+			precision highp sampler2DArray;
 			varying vec2 vUv;
 			uniform sampler2D tDiffuse;
-			uniform sampler2D tDepth;
+			uniform sampler2DArray tDepth;
 			uniform float cameraNear;
 			uniform float cameraFar;
 
 
-			float readDepth( sampler2D depthSampler, vec2 coord ) {
-				float fragCoordZ = texture2D( depthSampler, coord ).x;
+			float readDepth( sampler2DArray depthSampler, vec2 coord ) {
+				float fragCoordZ = texture( depthSampler, vec3(coord, 0.5) ).x;
 				float viewZ = perspectiveDepthToViewZ( fragCoordZ, cameraNear, cameraFar );
 				return viewZToOrthographicDepth( viewZ, cameraNear, cameraFar );
 			}
@@ -149,7 +150,7 @@
 				target.texture.generateMipmaps = false;
 				target.stencilBuffer = ( format === THREE.DepthStencilFormat ) ? true : false;
 				target.depthBuffer = true;
-				target.depthTexture = new THREE.DepthTexture();
+				target.depthTexture = new THREE.DataTexture2DArray();
 				target.depthTexture.format = format;
 				target.depthTexture.type = type;
 
@@ -212,7 +213,7 @@
 				camera.updateProjectionMatrix();
 
 				const dpr = renderer.getPixelRatio();
-				target.setSize( window.innerWidth * dpr, window.innerHeight * dpr );
+				target.setSize( Math.floor( window.innerWidth * dpr ), Math.floor( window.innerHeight * dpr ) );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 			}

src/cameras/CubeCamera.js

@@ -72,9 +72,13 @@ class CubeCamera extends Object3D {
 
 		renderer.xr.enabled = false;
 
-		const generateMipmaps = renderTarget.texture.generateMipmaps;
+		const generateMipmaps = new Array( renderTarget.textures.length );
+		for ( let i = 0, il = renderTarget.textures.length; i < il; i ++ ) {
 
-		renderTarget.texture.generateMipmaps = false;
+			generateMipmaps[ i ] = renderTarget.textures[ i ].generateMipmaps;
+			renderTarget.textures[ i ].generateMipmaps = false;
+
+		}
 
 		renderer.setRenderTarget( renderTarget, 0 );
 		renderer.render( scene, cameraPX );
@@ -91,7 +95,12 @@ class CubeCamera extends Object3D {
 		renderer.setRenderTarget( renderTarget, 4 );
 		renderer.render( scene, cameraPZ );
 
-		renderTarget.texture.generateMipmaps = generateMipmaps;
+
+		for ( let i = 0, il = renderTarget.textures.length; i < il; i ++ ) {
+
+			renderTarget.textures[ i ].generateMipmaps = generateMipmaps[ i ];
+
+		}
 
 		renderer.setRenderTarget( renderTarget, 5 );
 		renderer.render( scene, cameraNZ );

src/renderers/WebGLCubeRenderTarget.js

@@ -19,16 +19,21 @@ class WebGLCubeRenderTarget extends WebGLRenderTarget {
 
 		}
 
-		super( size, size, options );
-
 		options = options || {};
+		if ( options.texture === undefined ) {
+
+			options.texture = new CubeTexture( undefined, options.mapping, options.wrapS, options.wrapT, options.magFilter,
+				options.minFilter, options.format, options.type, options.anisotropy, options.encoding );
+
+		}
+
+		if ( options.texture._needsFlipEnvMap === undefined ) {
 
-		this.texture = new CubeTexture( undefined, options.mapping, options.wrapS, options.wrapT, options.magFilter, options.minFilter, options.format, options.type, options.anisotropy, options.encoding );
+			options.texture._needsFlipEnvMap = false;
 
-		this.texture.generateMipmaps = options.generateMipmaps !== undefined ? options.generateMipmaps : false;
-		this.texture.minFilter = options.minFilter !== undefined ? options.minFilter : LinearFilter;
+		}
 
-		this.texture._needsFlipEnvMap = false;
+		super( size, size, options );
 
 	}
 
@@ -127,9 +132,9 @@ class WebGLCubeRenderTarget extends WebGLRenderTarget {
 
 		const currentRenderTarget = renderer.getRenderTarget();
 
-		for ( let i = 0; i < 6; i ++ ) {
+		for ( let f = 0; f < 6; f ++ ) {
 
-			renderer.setRenderTarget( this, i );
+			renderer.setRenderTarget( this, f );
 
 			renderer.clear( color, depth, stencil );
 

src/renderers/WebGLMultipleRenderTargets.js

@@ -4,71 +4,14 @@ class WebGLMultipleRenderTargets extends WebGLRenderTarget {
 
 	constructor( width, height, count ) {
 
-		super( width, height );
-
-		const texture = this.texture;
-
-		this.texture = [];
-
-		for ( let i = 0; i < count; i ++ ) {
-
-			this.texture[ i ] = texture.clone();
-
-		}
+		console.warn( 'WebGLMultipleRenderTargets is deprecated, use WebGLRenderTarget(width, height, {count: count}) instead.' );
+		super( width, height, { count: count } );
 
 	}
 
-	setSize( width, height, depth = 1 ) {
-
-		if ( this.width !== width || this.height !== height || this.depth !== depth ) {
-
-			this.width = width;
-			this.height = height;
-			this.depth = depth;
-
-			for ( let i = 0, il = this.texture.length; i < il; i ++ ) {
-
-				this.texture[ i ].image.width = width;
-				this.texture[ i ].image.height = height;
-				this.texture[ i ].image.depth = depth;
-
-			}
-
-			this.dispose();
-
-		}
-
-		this.viewport.set( 0, 0, width, height );
-		this.scissor.set( 0, 0, width, height );
-
-		return this;
-
-	}
-
-	copy( source ) {
-
-		this.dispose();
-
-		this.width = source.width;
-		this.height = source.height;
-		this.depth = source.depth;
-
-		this.viewport.set( 0, 0, this.width, this.height );
-		this.scissor.set( 0, 0, this.width, this.height );
-
-		this.depthBuffer = source.depthBuffer;
-		this.stencilBuffer = source.stencilBuffer;
-		this.depthTexture = source.depthTexture;
-
-		this.texture.length = 0;
-
-		for ( let i = 0, il = source.texture.length; i < il; i ++ ) {
-
-			this.texture[ i ] = source.texture[ i ].clone();
-
-		}
+	get texture() {
 
-		return this;
+		return this.textures;
 
 	}
 

src/renderers/WebGLRenderTarget.js

@@ -10,55 +10,101 @@ import { Vector4 } from '../math/Vector4.js';
 */
 class WebGLRenderTarget extends EventDispatcher {
 
-	constructor( width, height, options = {} ) {
+	constructor( width, height, depth, options = {} ) {
+
+		if ( ! Number.isInteger( depth ) ) {
+
+			options = depth || options;
+			depth = 1;
+
+		}
 
 		super();
 
 		this.width = width;
 		this.height = height;
-		this.depth = 1;
+		this.depth = depth;
 
 		this.scissor = new Vector4( 0, 0, width, height );
 		this.scissorTest = false;
 
 		this.viewport = new Vector4( 0, 0, width, height );
 
-		this.texture = new Texture( undefined, options.mapping, options.wrapS, options.wrapT, options.magFilter, options.minFilter, options.format, options.type, options.anisotropy, options.encoding );
-
-		this.texture.image = { width: width, height: height, depth: 1 };
-
-		this.texture.generateMipmaps = options.generateMipmaps !== undefined ? options.generateMipmaps : false;
-		this.texture.minFilter = options.minFilter !== undefined ? options.minFilter : LinearFilter;
-
 		this.depthBuffer = options.depthBuffer !== undefined ? options.depthBuffer : true;
 		this.stencilBuffer = options.stencilBuffer !== undefined ? options.stencilBuffer : false;
 		this.depthTexture = options.depthTexture !== undefined ? options.depthTexture : null;
 
+		const count = options.count !== undefined ? options.count : 1;
+		const texture = options.texture !== undefined ? options.texture :
+			new Texture( undefined, options.mapping, options.wrapS, options.wrapT, options.magFilter,
+				options.minFilter, options.format, options.type, options.anisotropy, options.encoding );
+
+		texture.image = { width: width, height: height, depth: depth };
+		texture.generateMipmaps = options.generateMipmaps !== undefined ? options.generateMipmaps : false;
+		texture.minFilter = options.minFilter !== undefined ? options.minFilter : LinearFilter;
+
+		this.textures = [];
+		for ( let i = 0; i < count; i ++ ) {
+
+			this.textures[ i ] = texture.clone();
+
+		}
+
+	}
+
+	get texture() {
+
+		return this.textures[ 0 ];
+
+	}
+
+	set texture( value ) {
+
+		this.textures[ 0 ] = value;
+
+	}
+
+	setTexture( texture, attachment = 0 ) {
+
+		texture.image = {
+			width: this.width,
+			height: this.height,
+			depth: this.depth
+		};
+
+		this.textures[ attachment ] = texture;
+
 	}
 
-	setTexture( texture ) {
+	setDepthTexture( texture ) {
 
 		texture.image = {
 			width: this.width,
 			height: this.height,
 			depth: this.depth
 		};
 
-		this.texture = texture;
+		this.depthTexture = texture;
 
 	}
 
-	setSize( width, height, depth = 1 ) {
+	setSize( width, height, depth ) {
+
+		if ( depth === undefined ) depth = this.depth;
 
 		if ( this.width !== width || this.height !== height || this.depth !== depth ) {
 
 			this.width = width;
 			this.height = height;
 			this.depth = depth;
 
-			this.texture.image.width = width;
-			this.texture.image.height = height;
-			this.texture.image.depth = depth;
+			for ( let i = 0, il = this.textures.length; i < il; i ++ ) {
+
+				this.textures[ i ].image.width = width;
+				this.textures[ i ].image.height = height;
+				this.textures[ i ].image.depth = depth;
+
+			}
 
 			this.dispose();
 
@@ -67,6 +113,8 @@ class WebGLRenderTarget extends EventDispatcher {
 		this.viewport.set( 0, 0, width, height );
 		this.scissor.set( 0, 0, width, height );
 
+		return this;
+
 	}
 
 	clone() {
@@ -77,14 +125,22 @@ class WebGLRenderTarget extends EventDispatcher {
 
 	copy( source ) {
 
+		this.dispose();
+
 		this.width = source.width;
 		this.height = source.height;
 		this.depth = source.depth;
 
 		this.viewport.copy( source.viewport );
+		this.scissor.copy( source.scissor );
+
+		this.textures.length = 0;
+		for ( let i = 0, il = source.textures.length; i < il; i ++ ) {
 
-		this.texture = source.texture.clone();
-		this.texture.image = { ...this.texture.image }; // See #20328.
+			this.textures[ i ] = source.textures[ i ].clone();
+			this.textures[ i ].image = { ...this.textures[ i ].image }; // See #20328.
+
+		}
 
 		this.depthBuffer = source.depthBuffer;
 		this.stencilBuffer = source.stencilBuffer;