Core: WebGLRenderTarget extends RenderTarget (#26468)

* Core: Add RenderTarget

* WebGPU: Update examples.

examples/jsm/renderers/common/RenderTarget.js

@@ -1,15 +0,0 @@
-import { WebGLRenderTarget } from 'three';
-
-// @TODO: Consider rename WebGLRenderTarget to just RenderTarget
-
-class RenderTarget extends WebGLRenderTarget {
-
-	constructor( width, height, options = {} ) {
-
-		super( width, height, options );
-
-	}
-
-}
-
-export default RenderTarget;

examples/jsm/renderers/webgpu/nodes/WGSLNodeBuilder.js

@@ -1,4 +1,4 @@
-import { NoColorSpace } from 'three';
+import { RenderTarget, NoColorSpace } from 'three';
 
 import UniformsGroup from '../../common/UniformsGroup.js';
 import {
@@ -12,7 +12,6 @@ import UniformBuffer from '../../common/UniformBuffer.js';
 import StorageBuffer from '../../common/StorageBuffer.js';
 import { getVectorLength, getStrideLength } from '../../common/BufferUtils.js';
 
-import RenderTarget from '../../common/RenderTarget.js';
 import CubeRenderTarget from '../../common/CubeRenderTarget.js';
 
 import { NodeBuilder, CodeNode, NodeMaterial } from '../../../nodes/Nodes.js';

examples/webgpu_depth_texture.html

@@ -30,7 +30,6 @@
 
 			import WebGPU from 'three/addons/capabilities/WebGPU.js';
 			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-			import RenderTarget from 'three/addons/renderers/common/RenderTarget.js';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
@@ -94,7 +93,7 @@
 				const depthTexture = new THREE.DepthTexture();
 				depthTexture.type = THREE.FloatType;
 
-				renderTarget = new RenderTarget( window.innerWidth * dpr, window.innerHeight * dpr );
+				renderTarget = new THREE.RenderTarget( window.innerWidth * dpr, window.innerHeight * dpr );
 				renderTarget.depthTexture = depthTexture;
 
 				window.addEventListener( 'resize', onWindowResize );

examples/webgpu_rtt.html

@@ -30,7 +30,6 @@
 
 			import WebGPU from 'three/addons/capabilities/WebGPU.js';
 			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-			import RenderTarget from 'three/addons/renderers/common/RenderTarget.js';
 
 			let camera, scene, renderer;
 			const mouse = new THREE.Vector2();
@@ -81,7 +80,7 @@
 				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
-				renderTarget = new RenderTarget( window.innerWidth * dpr, window.innerHeight * dpr );
+				renderTarget = new THREE.RenderTarget( window.innerWidth * dpr, window.innerHeight * dpr );
 
 				window.addEventListener( 'mousemove', onWindowMouseMove );
 				window.addEventListener( 'resize', onWindowResize );

src/Three.js

@@ -92,6 +92,7 @@ export { AnimationObjectGroup } from './animation/AnimationObjectGroup.js';
 export { AnimationMixer } from './animation/AnimationMixer.js';
 export { AnimationClip } from './animation/AnimationClip.js';
 export { AnimationAction } from './animation/AnimationAction.js';
+export { RenderTarget } from './core/RenderTarget.js';
 export { Uniform } from './core/Uniform.js';
 export { UniformsGroup } from './core/UniformsGroup.js';
 export { InstancedBufferGeometry } from './core/InstancedBufferGeometry.js';

src/core/RenderTarget.js

@@ -0,0 +1,122 @@
+import { EventDispatcher } from './EventDispatcher.js';
+import { Texture } from '../textures/Texture.js';
+import { LinearFilter, NoColorSpace, SRGBColorSpace, sRGBEncoding } from '../constants.js';
+import { Vector4 } from '../math/Vector4.js';
+import { Source } from '../textures/Source.js';
+import { warnOnce } from '../utils.js';
+
+/*
+ In options, we can specify:
+ * Texture parameters for an auto-generated target texture
+ * depthBuffer/stencilBuffer: Booleans to indicate if we should generate these buffers
+*/
+class RenderTarget extends EventDispatcher {
+
+	constructor( width = 1, height = 1, options = {} ) {
+
+		super();
+
+		this.isRenderTarget = true;
+
+		this.width = width;
+		this.height = height;
+		this.depth = 1;
+
+		this.scissor = new Vector4( 0, 0, width, height );
+		this.scissorTest = false;
+
+		this.viewport = new Vector4( 0, 0, width, height );
+
+		const image = { width: width, height: height, depth: 1 };
+
+		if ( options.encoding !== undefined ) {
+
+			// @deprecated, r152
+			warnOnce( 'THREE.WebGLRenderTarget: option.encoding has been replaced by option.colorSpace.' );
+			options.colorSpace = options.encoding === sRGBEncoding ? SRGBColorSpace : NoColorSpace;
+
+		}
+
+		this.texture = new Texture( image, options.mapping, options.wrapS, options.wrapT, options.magFilter, options.minFilter, options.format, options.type, options.anisotropy, options.colorSpace );
+		this.texture.isRenderTargetTexture = true;
+
+		this.texture.flipY = false;
+		this.texture.generateMipmaps = options.generateMipmaps !== undefined ? options.generateMipmaps : false;
+		this.texture.internalFormat = options.internalFormat !== undefined ? options.internalFormat : null;
+		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;
+
+		this.samples = options.samples !== undefined ? options.samples : 0;
+
+	}
+
+	setSize( width, height, depth = 1 ) {
+
+		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;
+
+			this.dispose();
+
+		}
+
+		this.viewport.set( 0, 0, width, height );
+		this.scissor.set( 0, 0, width, height );
+
+	}
+
+	clone() {
+
+		return new this.constructor().copy( this );
+
+	}
+
+	copy( source ) {
+
+		this.width = source.width;
+		this.height = source.height;
+		this.depth = source.depth;
+
+		this.scissor.copy( source.scissor );
+		this.scissorTest = source.scissorTest;
+
+		this.viewport.copy( source.viewport );
+
+		this.texture = source.texture.clone();
+		this.texture.isRenderTargetTexture = true;
+
+		// ensure image object is not shared, see #20328
+
+		const image = Object.assign( {}, source.texture.image );
+		this.texture.source = new Source( image );
+
+		this.depthBuffer = source.depthBuffer;
+		this.stencilBuffer = source.stencilBuffer;
+
+		if ( source.depthTexture !== null ) this.depthTexture = source.depthTexture.clone();
+
+		this.samples = source.samples;
+
+		return this;
+
+	}
+
+	dispose() {
+
+		this.dispatchEvent( { type: 'dispose' } );
+
+	}
+
+}
+
+export { RenderTarget };

src/renderers/WebGLRenderTarget.js

@@ -1,120 +1,13 @@
-import { EventDispatcher } from '../core/EventDispatcher.js';
-import { Texture } from '../textures/Texture.js';
-import { LinearFilter, NoColorSpace, SRGBColorSpace, sRGBEncoding } from '../constants.js';
-import { Vector4 } from '../math/Vector4.js';
-import { Source } from '../textures/Source.js';
-import { warnOnce } from '../utils.js';
+import { RenderTarget } from '../core/RenderTarget.js';
 
-/*
- In options, we can specify:
- * Texture parameters for an auto-generated target texture
- * depthBuffer/stencilBuffer: Booleans to indicate if we should generate these buffers
-*/
-class WebGLRenderTarget extends EventDispatcher {
+class WebGLRenderTarget extends RenderTarget {
 
 	constructor( width = 1, height = 1, options = {} ) {
 
-		super();
+		super( width, height, options );
 
 		this.isWebGLRenderTarget = true;
 
-		this.width = width;
-		this.height = height;
-		this.depth = 1;
-
-		this.scissor = new Vector4( 0, 0, width, height );
-		this.scissorTest = false;
-
-		this.viewport = new Vector4( 0, 0, width, height );
-
-		const image = { width: width, height: height, depth: 1 };
-
-		if ( options.encoding !== undefined ) {
-
-			// @deprecated, r152
-			warnOnce( 'THREE.WebGLRenderTarget: option.encoding has been replaced by option.colorSpace.' );
-			options.colorSpace = options.encoding === sRGBEncoding ? SRGBColorSpace : NoColorSpace;
-
-		}
-
-		this.texture = new Texture( image, options.mapping, options.wrapS, options.wrapT, options.magFilter, options.minFilter, options.format, options.type, options.anisotropy, options.colorSpace );
-		this.texture.isRenderTargetTexture = true;
-
-		this.texture.flipY = false;
-		this.texture.generateMipmaps = options.generateMipmaps !== undefined ? options.generateMipmaps : false;
-		this.texture.internalFormat = options.internalFormat !== undefined ? options.internalFormat : null;
-		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;
-
-		this.samples = options.samples !== undefined ? options.samples : 0;
-
-	}
-
-	setSize( width, height, depth = 1 ) {
-
-		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;
-
-			this.dispose();
-
-		}
-
-		this.viewport.set( 0, 0, width, height );
-		this.scissor.set( 0, 0, width, height );
-
-	}
-
-	clone() {
-
-		return new this.constructor().copy( this );
-
-	}
-
-	copy( source ) {
-
-		this.width = source.width;
-		this.height = source.height;
-		this.depth = source.depth;
-
-		this.scissor.copy( source.scissor );
-		this.scissorTest = source.scissorTest;
-
-		this.viewport.copy( source.viewport );
-
-		this.texture = source.texture.clone();
-		this.texture.isRenderTargetTexture = true;
-
-		// ensure image object is not shared, see #20328
-
-		const image = Object.assign( {}, source.texture.image );
-		this.texture.source = new Source( image );
-
-		this.depthBuffer = source.depthBuffer;
-		this.stencilBuffer = source.stencilBuffer;
-
-		if ( source.depthTexture !== null ) this.depthTexture = source.depthTexture.clone();
-
-		this.samples = source.samples;
-
-		return this;
-
-	}
-
-	dispose() {
-
-		this.dispatchEvent( { type: 'dispose' } );
-
 	}
 
 }