diff --git a/examples/jsm/tsl/display/TRAAPassNode.js b/examples/jsm/tsl/display/TRAAPassNode.js index 97163d84c68d5b..7c94fc2e2d5cdf 100644 --- a/examples/jsm/tsl/display/TRAAPassNode.js +++ b/examples/jsm/tsl/display/TRAAPassNode.js @@ -140,6 +140,7 @@ class TRAAPassNode extends PassNode { renderer.clear(); renderer.render( scene, camera ); + renderer.setRenderTarget( null ); renderer.setMRT( null ); // every time when the dimensions change we need fresh history data. Copy the sample @@ -154,6 +155,11 @@ class TRAAPassNode extends PassNode { renderer.setRenderTarget( this._historyRenderTarget ); renderer.clear(); + renderer.setRenderTarget( this.renderTarget ); + renderer.clear(); + + renderer.setRenderTarget( null ); + renderer.copyTextureToTexture( this._sampleRenderTarget.texture, this._historyRenderTarget.texture ); renderer.copyTextureToTexture( this._sampleRenderTarget.texture, this.renderTarget.texture ); @@ -164,6 +170,7 @@ class TRAAPassNode extends PassNode { renderer.setRenderTarget( this.renderTarget ); _quadMesh.material = this._resolveMaterial; _quadMesh.render( renderer ); + renderer.setRenderTarget( null ); // update history diff --git a/examples/webgpu_postprocessing_traa.html b/examples/webgpu_postprocessing_traa.html index da75fab26c751c..e6f01a5ec8c9d6 100644 --- a/examples/webgpu_postprocessing_traa.html +++ b/examples/webgpu_postprocessing_traa.html @@ -26,7 +26,6 @@ import * as THREE from 'three'; import { mrt, output, velocity } from 'three/tsl'; import { traaPass } from 'three/addons/tsl/display/TRAAPassNode.js'; - import WebGPU from 'three/addons/capabilities/WebGPU.js'; import Stats from 'three/addons/libs/stats.module.js'; @@ -38,15 +37,7 @@ function init() { - if ( WebGPU.isAvailable() === false ) { - - document.body.appendChild( WebGPU.getErrorMessage() ); - - throw new Error( 'No WebGPU support' ); - - } - - renderer = new THREE.WebGPURenderer(); + renderer = new THREE.WebGPURenderer( { forceWebGL: true } ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); renderer.setAnimationLoop( animate ); diff --git a/src/renderers/webgl-fallback/WebGLBackend.js b/src/renderers/webgl-fallback/WebGLBackend.js index c37dd751ff6cbb..b8003f6eac9095 100644 --- a/src/renderers/webgl-fallback/WebGLBackend.js +++ b/src/renderers/webgl-fallback/WebGLBackend.js @@ -1281,9 +1281,9 @@ class WebGLBackend extends Backend { } - copyTextureToTexture( position, srcTexture, dstTexture, level ) { + copyTextureToTexture( srcTexture, dstTexture, srcRegion, dstPosition, level ) { - this.textureUtils.copyTextureToTexture( position, srcTexture, dstTexture, level ); + this.textureUtils.copyTextureToTexture( srcTexture, dstTexture, srcRegion, dstPosition, level ); } @@ -1355,6 +1355,7 @@ class WebGLBackend extends Backend { const texture = textures[ i ]; const textureData = this.get( texture ); textureData.renderTarget = descriptor.renderTarget; + textureData.cacheKey = cacheKey; // required for copyTextureToTexture() const attachment = gl.COLOR_ATTACHMENT0 + i; @@ -1370,6 +1371,8 @@ class WebGLBackend extends Backend { const textureData = this.get( descriptor.depthTexture ); const depthStyle = stencilBuffer ? gl.DEPTH_STENCIL_ATTACHMENT : gl.DEPTH_ATTACHMENT; + textureData.renderTarget = descriptor.renderTarget; + textureData.cacheKey = cacheKey; // required for copyTextureToTexture() gl.framebufferTexture2D( gl.FRAMEBUFFER, depthStyle, gl.TEXTURE_2D, textureData.textureGPU, 0 ); diff --git a/src/renderers/webgl-fallback/utils/WebGLTextureUtils.js b/src/renderers/webgl-fallback/utils/WebGLTextureUtils.js index cd58e2e1fc4024..94012f3b4609e7 100644 --- a/src/renderers/webgl-fallback/utils/WebGLTextureUtils.js +++ b/src/renderers/webgl-fallback/utils/WebGLTextureUtils.js @@ -659,20 +659,46 @@ class WebGLTextureUtils { gl.pixelStorei( gl.UNPACK_SKIP_PIXELS, minX ); gl.pixelStorei( gl.UNPACK_SKIP_ROWS, minY ); + if ( srcTexture.isRenderTargetTexture || srcTexture.isDepthTexture ) { - if ( srcTexture.isDataTexture ) { + const srcTextureData = backend.get( srcTexture ); + const dstTextureData = backend.get( dstTexture ); - gl.texSubImage2D( gl.TEXTURE_2D, level, dstX, dstY, width, height, glFormat, glType, image.data ); + const srcRenderContextData = backend.get( srcTextureData.renderTarget ); + const dstRenderContextData = backend.get( dstTextureData.renderTarget ); + + const srcFramebuffer = srcRenderContextData.framebuffers[ srcTextureData.cacheKey ]; + const dstFramebuffer = dstRenderContextData.framebuffers[ dstTextureData.cacheKey ]; + + state.bindFramebuffer( gl.READ_FRAMEBUFFER, srcFramebuffer ); + state.bindFramebuffer( gl.DRAW_FRAMEBUFFER, dstFramebuffer ); + + let mask = gl.COLOR_BUFFER_BIT; + + if ( srcTexture.isDepthTexture ) mask = gl.DEPTH_BUFFER_BIT; + + gl.blitFramebuffer( minX, minY, width, height, dstX, dstY, width, height, mask, gl.NEAREST ); + + state.bindFramebuffer( gl.READ_FRAMEBUFFER, null ); + state.bindFramebuffer( gl.DRAW_FRAMEBUFFER, null ); } else { - if ( srcTexture.isCompressedTexture ) { + if ( srcTexture.isDataTexture ) { - gl.compressedTexSubImage2D( gl.TEXTURE_2D, level, dstX, dstY, image.width, image.height, glFormat, image.data ); + gl.texSubImage2D( gl.TEXTURE_2D, level, dstX, dstY, width, height, glFormat, glType, image.data ); } else { - gl.texSubImage2D( gl.TEXTURE_2D, level, dstX, dstY, width, height, glFormat, glType, image ); + if ( srcTexture.isCompressedTexture ) { + + gl.compressedTexSubImage2D( gl.TEXTURE_2D, level, dstX, dstY, image.width, image.height, glFormat, image.data ); + + } else { + + gl.texSubImage2D( gl.TEXTURE_2D, level, dstX, dstY, width, height, glFormat, glType, image ); + + } }