Skip to content

Commit 22e0a8c

Browse files
authored
Core: WebGLRenderTarget extends RenderTarget (mrdoob#26468)
* Core: Add RenderTarget * WebGPU: Update examples.
1 parent 7b7cef6 commit 22e0a8c

File tree

7 files changed

+129
-131
lines changed

7 files changed

+129
-131
lines changed

examples/jsm/renderers/common/RenderTarget.js

Lines changed: 0 additions & 15 deletions
This file was deleted.

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { NoColorSpace } from 'three';
1+
import { RenderTarget, NoColorSpace } from 'three';
22

33
import UniformsGroup from '../../common/UniformsGroup.js';
44
import {
@@ -12,7 +12,6 @@ import UniformBuffer from '../../common/UniformBuffer.js';
1212
import StorageBuffer from '../../common/StorageBuffer.js';
1313
import { getVectorLength, getStrideLength } from '../../common/BufferUtils.js';
1414

15-
import RenderTarget from '../../common/RenderTarget.js';
1615
import CubeRenderTarget from '../../common/CubeRenderTarget.js';
1716

1817
import { NodeBuilder, CodeNode, NodeMaterial } from '../../../nodes/Nodes.js';

examples/webgpu_depth_texture.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@
3030

3131
import WebGPU from 'three/addons/capabilities/WebGPU.js';
3232
import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
33-
import RenderTarget from 'three/addons/renderers/common/RenderTarget.js';
3433

3534
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
3635

@@ -94,7 +93,7 @@
9493
const depthTexture = new THREE.DepthTexture();
9594
depthTexture.type = THREE.FloatType;
9695

97-
renderTarget = new RenderTarget( window.innerWidth * dpr, window.innerHeight * dpr );
96+
renderTarget = new THREE.RenderTarget( window.innerWidth * dpr, window.innerHeight * dpr );
9897
renderTarget.depthTexture = depthTexture;
9998

10099
window.addEventListener( 'resize', onWindowResize );

examples/webgpu_rtt.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@
3030

3131
import WebGPU from 'three/addons/capabilities/WebGPU.js';
3232
import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
33-
import RenderTarget from 'three/addons/renderers/common/RenderTarget.js';
3433

3534
let camera, scene, renderer;
3635
const mouse = new THREE.Vector2();
@@ -81,7 +80,7 @@
8180
renderer.setAnimationLoop( animate );
8281
document.body.appendChild( renderer.domElement );
8382

84-
renderTarget = new RenderTarget( window.innerWidth * dpr, window.innerHeight * dpr );
83+
renderTarget = new THREE.RenderTarget( window.innerWidth * dpr, window.innerHeight * dpr );
8584

8685
window.addEventListener( 'mousemove', onWindowMouseMove );
8786
window.addEventListener( 'resize', onWindowResize );

src/Three.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ export { AnimationObjectGroup } from './animation/AnimationObjectGroup.js';
9292
export { AnimationMixer } from './animation/AnimationMixer.js';
9393
export { AnimationClip } from './animation/AnimationClip.js';
9494
export { AnimationAction } from './animation/AnimationAction.js';
95+
export { RenderTarget } from './core/RenderTarget.js';
9596
export { Uniform } from './core/Uniform.js';
9697
export { UniformsGroup } from './core/UniformsGroup.js';
9798
export { InstancedBufferGeometry } from './core/InstancedBufferGeometry.js';

src/core/RenderTarget.js

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
import { EventDispatcher } from './EventDispatcher.js';
2+
import { Texture } from '../textures/Texture.js';
3+
import { LinearFilter, NoColorSpace, SRGBColorSpace, sRGBEncoding } from '../constants.js';
4+
import { Vector4 } from '../math/Vector4.js';
5+
import { Source } from '../textures/Source.js';
6+
import { warnOnce } from '../utils.js';
7+
8+
/*
9+
In options, we can specify:
10+
* Texture parameters for an auto-generated target texture
11+
* depthBuffer/stencilBuffer: Booleans to indicate if we should generate these buffers
12+
*/
13+
class RenderTarget extends EventDispatcher {
14+
15+
constructor( width = 1, height = 1, options = {} ) {
16+
17+
super();
18+
19+
this.isRenderTarget = true;
20+
21+
this.width = width;
22+
this.height = height;
23+
this.depth = 1;
24+
25+
this.scissor = new Vector4( 0, 0, width, height );
26+
this.scissorTest = false;
27+
28+
this.viewport = new Vector4( 0, 0, width, height );
29+
30+
const image = { width: width, height: height, depth: 1 };
31+
32+
if ( options.encoding !== undefined ) {
33+
34+
// @deprecated, r152
35+
warnOnce( 'THREE.WebGLRenderTarget: option.encoding has been replaced by option.colorSpace.' );
36+
options.colorSpace = options.encoding === sRGBEncoding ? SRGBColorSpace : NoColorSpace;
37+
38+
}
39+
40+
this.texture = new Texture( image, options.mapping, options.wrapS, options.wrapT, options.magFilter, options.minFilter, options.format, options.type, options.anisotropy, options.colorSpace );
41+
this.texture.isRenderTargetTexture = true;
42+
43+
this.texture.flipY = false;
44+
this.texture.generateMipmaps = options.generateMipmaps !== undefined ? options.generateMipmaps : false;
45+
this.texture.internalFormat = options.internalFormat !== undefined ? options.internalFormat : null;
46+
this.texture.minFilter = options.minFilter !== undefined ? options.minFilter : LinearFilter;
47+
48+
this.depthBuffer = options.depthBuffer !== undefined ? options.depthBuffer : true;
49+
this.stencilBuffer = options.stencilBuffer !== undefined ? options.stencilBuffer : false;
50+
51+
this.depthTexture = options.depthTexture !== undefined ? options.depthTexture : null;
52+
53+
this.samples = options.samples !== undefined ? options.samples : 0;
54+
55+
}
56+
57+
setSize( width, height, depth = 1 ) {
58+
59+
if ( this.width !== width || this.height !== height || this.depth !== depth ) {
60+
61+
this.width = width;
62+
this.height = height;
63+
this.depth = depth;
64+
65+
this.texture.image.width = width;
66+
this.texture.image.height = height;
67+
this.texture.image.depth = depth;
68+
69+
this.dispose();
70+
71+
}
72+
73+
this.viewport.set( 0, 0, width, height );
74+
this.scissor.set( 0, 0, width, height );
75+
76+
}
77+
78+
clone() {
79+
80+
return new this.constructor().copy( this );
81+
82+
}
83+
84+
copy( source ) {
85+
86+
this.width = source.width;
87+
this.height = source.height;
88+
this.depth = source.depth;
89+
90+
this.scissor.copy( source.scissor );
91+
this.scissorTest = source.scissorTest;
92+
93+
this.viewport.copy( source.viewport );
94+
95+
this.texture = source.texture.clone();
96+
this.texture.isRenderTargetTexture = true;
97+
98+
// ensure image object is not shared, see #20328
99+
100+
const image = Object.assign( {}, source.texture.image );
101+
this.texture.source = new Source( image );
102+
103+
this.depthBuffer = source.depthBuffer;
104+
this.stencilBuffer = source.stencilBuffer;
105+
106+
if ( source.depthTexture !== null ) this.depthTexture = source.depthTexture.clone();
107+
108+
this.samples = source.samples;
109+
110+
return this;
111+
112+
}
113+
114+
dispose() {
115+
116+
this.dispatchEvent( { type: 'dispose' } );
117+
118+
}
119+
120+
}
121+
122+
export { RenderTarget };

src/renderers/WebGLRenderTarget.js

Lines changed: 3 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,120 +1,13 @@
1-
import { EventDispatcher } from '../core/EventDispatcher.js';
2-
import { Texture } from '../textures/Texture.js';
3-
import { LinearFilter, NoColorSpace, SRGBColorSpace, sRGBEncoding } from '../constants.js';
4-
import { Vector4 } from '../math/Vector4.js';
5-
import { Source } from '../textures/Source.js';
6-
import { warnOnce } from '../utils.js';
1+
import { RenderTarget } from '../core/RenderTarget.js';
72

8-
/*
9-
In options, we can specify:
10-
* Texture parameters for an auto-generated target texture
11-
* depthBuffer/stencilBuffer: Booleans to indicate if we should generate these buffers
12-
*/
13-
class WebGLRenderTarget extends EventDispatcher {
3+
class WebGLRenderTarget extends RenderTarget {
144

155
constructor( width = 1, height = 1, options = {} ) {
166

17-
super();
7+
super( width, height, options );
188

199
this.isWebGLRenderTarget = true;
2010

21-
this.width = width;
22-
this.height = height;
23-
this.depth = 1;
24-
25-
this.scissor = new Vector4( 0, 0, width, height );
26-
this.scissorTest = false;
27-
28-
this.viewport = new Vector4( 0, 0, width, height );
29-
30-
const image = { width: width, height: height, depth: 1 };
31-
32-
if ( options.encoding !== undefined ) {
33-
34-
// @deprecated, r152
35-
warnOnce( 'THREE.WebGLRenderTarget: option.encoding has been replaced by option.colorSpace.' );
36-
options.colorSpace = options.encoding === sRGBEncoding ? SRGBColorSpace : NoColorSpace;
37-
38-
}
39-
40-
this.texture = new Texture( image, options.mapping, options.wrapS, options.wrapT, options.magFilter, options.minFilter, options.format, options.type, options.anisotropy, options.colorSpace );
41-
this.texture.isRenderTargetTexture = true;
42-
43-
this.texture.flipY = false;
44-
this.texture.generateMipmaps = options.generateMipmaps !== undefined ? options.generateMipmaps : false;
45-
this.texture.internalFormat = options.internalFormat !== undefined ? options.internalFormat : null;
46-
this.texture.minFilter = options.minFilter !== undefined ? options.minFilter : LinearFilter;
47-
48-
this.depthBuffer = options.depthBuffer !== undefined ? options.depthBuffer : true;
49-
this.stencilBuffer = options.stencilBuffer !== undefined ? options.stencilBuffer : false;
50-
51-
this.depthTexture = options.depthTexture !== undefined ? options.depthTexture : null;
52-
53-
this.samples = options.samples !== undefined ? options.samples : 0;
54-
55-
}
56-
57-
setSize( width, height, depth = 1 ) {
58-
59-
if ( this.width !== width || this.height !== height || this.depth !== depth ) {
60-
61-
this.width = width;
62-
this.height = height;
63-
this.depth = depth;
64-
65-
this.texture.image.width = width;
66-
this.texture.image.height = height;
67-
this.texture.image.depth = depth;
68-
69-
this.dispose();
70-
71-
}
72-
73-
this.viewport.set( 0, 0, width, height );
74-
this.scissor.set( 0, 0, width, height );
75-
76-
}
77-
78-
clone() {
79-
80-
return new this.constructor().copy( this );
81-
82-
}
83-
84-
copy( source ) {
85-
86-
this.width = source.width;
87-
this.height = source.height;
88-
this.depth = source.depth;
89-
90-
this.scissor.copy( source.scissor );
91-
this.scissorTest = source.scissorTest;
92-
93-
this.viewport.copy( source.viewport );
94-
95-
this.texture = source.texture.clone();
96-
this.texture.isRenderTargetTexture = true;
97-
98-
// ensure image object is not shared, see #20328
99-
100-
const image = Object.assign( {}, source.texture.image );
101-
this.texture.source = new Source( image );
102-
103-
this.depthBuffer = source.depthBuffer;
104-
this.stencilBuffer = source.stencilBuffer;
105-
106-
if ( source.depthTexture !== null ) this.depthTexture = source.depthTexture.clone();
107-
108-
this.samples = source.samples;
109-
110-
return this;
111-
112-
}
113-
114-
dispose() {
115-
116-
this.dispatchEvent( { type: 'dispose' } );
117-
11811
}
11912

12013
}

0 commit comments

Comments
 (0)