WebGPURenderer: support depth buffer copies in WebGLBackend.copyFramebufferToTexture (#27083)

Co-authored-by: aardgoose <[email protected]>

examples/jsm/nodes/display/ViewportDepthTextureNode.js

@@ -2,7 +2,7 @@ import ViewportTextureNode from './ViewportTextureNode.js';
 import { addNodeClass } from '../core/Node.js';
 import { addNodeElement, nodeProxy } from '../shadernode/ShaderNode.js';
 import { viewportTopLeft } from './ViewportNode.js';
-import { DepthTexture, LinearMipmapLinearFilter, DepthFormat, UnsignedIntType } from 'three';
+import { DepthTexture, NearestMipmapNearestFilter, DepthFormat, UnsignedIntType } from 'three';
 
 let sharedDepthbuffer = null;
 
@@ -13,7 +13,7 @@ class ViewportDepthTextureNode extends ViewportTextureNode {
 		if ( sharedDepthbuffer === null ) {
 
 			sharedDepthbuffer = new DepthTexture();
-			sharedDepthbuffer.minFilter = LinearMipmapLinearFilter;
+			sharedDepthbuffer.minFilter = NearestMipmapNearestFilter;
 			sharedDepthbuffer.type = UnsignedIntType;
 			sharedDepthbuffer.format = DepthFormat;
 

examples/jsm/renderers/webgl/WebGLBackend.js

@@ -864,20 +864,42 @@ class WebGLBackend extends Backend {
 
 	}
 
-	copyFramebufferToTexture( texture /*, renderContext */ ) {
+	copyFramebufferToTexture( texture, renderContext ) {
 
 		const { gl } = this;
 
 		const { textureGPU } = this.get( texture );
 
-		gl.bindFramebuffer( gl.FRAMEBUFFER, null );
-		gl.bindTexture( gl.TEXTURE_2D, textureGPU );
+		const width = texture.image.width;
+		const height = texture.image.height;
 
-		gl.copyTexSubImage2D( gl.TEXTURE_2D, 0, 0, 0, 0, 0, texture.image.width, texture.image.height );
+		gl.bindFramebuffer( gl.READ_FRAMEBUFFER, null );
 
-		if ( texture.generateMipmaps ) gl.generateMipmap( gl.TEXTURE_2D );
+		if ( texture.isDepthTexture ) {
 
-		gl.bindTexture( gl.TEXTURE_2D, null );
+			const fb = gl.createFramebuffer();
+
+			gl.bindFramebuffer( gl.DRAW_FRAMEBUFFER, fb );
+
+			gl.framebufferTexture2D( gl.DRAW_FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, textureGPU, 0 );
+
+			gl.blitFramebuffer( 0, 0, width, height, 0, 0, width, height, gl.DEPTH_BUFFER_BIT, gl.NEAREST );
+
+			gl.deleteFramebuffer( fb );
+
+
+		} else {
+
+			gl.bindTexture( gl.TEXTURE_2D, textureGPU );
+			gl.copyTexSubImage2D( gl.TEXTURE_2D, 0, 0, 0, 0, 0, width, height );
+
+			gl.bindTexture( gl.TEXTURE_2D, null );
+
+		}
+
+		if ( texture.generateMipmaps ) this.generateMipmaps( texture );
+
+		this._setFramebuffer( renderContext );
 
 	}
 

examples/jsm/renderers/webgl/utils/WebGLTextureUtils.js

@@ -142,7 +142,7 @@ class WebGLTextureUtils {
 
 		if ( glFormat === gl.DEPTH_COMPONENT ) {
 
-			if ( glType === gl.UNSIGNED_INT ) internalFormat = gl.DEPTH_COMPONENT24;
+			if ( glType === gl.UNSIGNED_INT ) internalFormat = gl.DEPTH24_STENCIL8;
 			if ( glType === gl.FLOAT ) internalFormat = gl.DEPTH_COMPONENT32F;
 
 		}

examples/webgpu_backdrop.html

@@ -30,6 +30,8 @@
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
 			import WebGPU from 'three/addons/capabilities/WebGPU.js';
+			import WebGL from 'three/addons/capabilities/WebGL.js';
+
 			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
@@ -42,11 +44,11 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false ) {
+				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
 
 					document.body.appendChild( WebGPU.getErrorMessage() );
 
-					throw new Error( 'No WebGPU support' );
+					throw new Error( 'No WebGPU or WebGL2 support' );
 
 				}
 

examples/webgpu_backdrop_area.html

@@ -32,6 +32,8 @@
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
 			import WebGPU from 'three/addons/capabilities/WebGPU.js';
+			import WebGL from 'three/addons/capabilities/WebGL.js';
+
 			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
@@ -43,11 +45,11 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false ) {
+				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
 
 					document.body.appendChild( WebGPU.getErrorMessage() );
 
-					throw new Error( 'No WebGPU support' );
+					throw new Error( 'No WebGPU or WebGL2 support' );
 
 				}
 

test/e2e/puppeteer.js

@@ -107,8 +107,6 @@ const exceptionList = [
 	'physics_rapier_instancing',
 
 	// Awaiting for WebGPU support
-	'webgpu_backdrop',
-	'webgpu_backdrop_area',
 	'webgpu_clearcoat',
 	'webgpu_compute_audio',
 	'webgpu_compute_particles',