Skip to content

Commit

Permalink
Core: WebGLRenderTarget extends RenderTarget (#26468)
Browse files Browse the repository at this point in the history
* Core: Add RenderTarget

* WebGPU: Update examples.
  • Loading branch information
sunag committed Jul 25, 2023
1 parent 7b7cef6 commit 22e0a8c
Show file tree
Hide file tree
Showing 7 changed files with 129 additions and 131 deletions.
15 changes: 0 additions & 15 deletions examples/jsm/renderers/common/RenderTarget.js

This file was deleted.

3 changes: 1 addition & 2 deletions examples/jsm/renderers/webgpu/nodes/WGSLNodeBuilder.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { NoColorSpace } from 'three';
import { RenderTarget, NoColorSpace } from 'three';

import UniformsGroup from '../../common/UniformsGroup.js';
import {
Expand All @@ -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';
Expand Down
3 changes: 1 addition & 2 deletions examples/webgpu_depth_texture.html
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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 );
Expand Down
3 changes: 1 addition & 2 deletions examples/webgpu_rtt.html
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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 );
Expand Down
1 change: 1 addition & 0 deletions src/Three.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
122 changes: 122 additions & 0 deletions src/core/RenderTarget.js
Original file line number Diff line number Diff line change
@@ -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 };
113 changes: 3 additions & 110 deletions src/renderers/WebGLRenderTarget.js
Original file line number Diff line number Diff line change
@@ -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' } );

}

}
Expand Down

0 comments on commit 22e0a8c

Please sign in to comment.