diff --git a/examples/jsm/renderers/webgl/WebGLBackend.js b/examples/jsm/renderers/webgl/WebGLBackend.js index 600fb2f9ce7d1f..dcab743032b1a2 100644 --- a/examples/jsm/renderers/webgl/WebGLBackend.js +++ b/examples/jsm/renderers/webgl/WebGLBackend.js @@ -54,6 +54,8 @@ class WebGLBackend extends Backend { // + this._setFramebuffer( renderContext ); + let clear = 0; if ( renderContext.clearColor ) clear |= gl.COLOR_BUFFER_BIT; @@ -62,7 +64,7 @@ class WebGLBackend extends Backend { const clearColor = renderContext.clearColorValue; - gl.clearColor( clearColor.x, clearColor.y, clearColor.z, clearColor.a ); + gl.clearColor( clearColor.r, clearColor.g, clearColor.b, clearColor.a ); gl.clear( clear ); // @@ -618,6 +620,57 @@ class WebGLBackend extends Backend { } + _setFramebuffer( renderContext ) { + + const { gl } = this; + + if ( renderContext.textures !== null ) { + + const renderContextData = this.get( renderContext ); + + let fb = renderContextData.framebuffer; + + if ( fb === undefined ) { + + fb = gl.createFramebuffer(); + + gl.bindFramebuffer( gl.FRAMEBUFFER, fb ); + + const textures = renderContext.textures; + + for ( let i = 0; i < textures.length; i++ ) { + + const texture = textures[ i ]; + const { textureGPU } = this.get( texture ); + + gl.framebufferTexture2D( gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0 + i, gl.TEXTURE_2D, textureGPU, 0 ); + + } + + if ( renderContext.depthTexture !== null ) { + + const { textureGPU } = this.get( renderContext.depthTexture ); + + gl.framebufferTexture2D( gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, textureGPU, 0 ); + + } + + renderContextData.framebuffer = fb; + + } else { + + gl.bindFramebuffer( gl.FRAMEBUFFER, fb ); + + } + + } else { + + gl.bindFramebuffer( gl.FRAMEBUFFER, null ); + + } + + } + } export default WebGLBackend; diff --git a/examples/jsm/renderers/webgl/utils/WebGLTextureUtils.js b/examples/jsm/renderers/webgl/utils/WebGLTextureUtils.js index 6a6e800a554508..760f2243c07583 100644 --- a/examples/jsm/renderers/webgl/utils/WebGLTextureUtils.js +++ b/examples/jsm/renderers/webgl/utils/WebGLTextureUtils.js @@ -140,6 +140,19 @@ class WebGLTextureUtils { } + if ( glFormat === gl.DEPTH_COMPONENT ) { + + if ( glType === gl.UNSIGNED_INT ) internalFormat = gl.DEPTH_COMPONENT24; + if ( glType === gl.FLOAT ) internalFormat = gl.DEPTH_COMPONENT32F; + + } + + if ( glFormat === gl.DEPTH_STENCIL ) { + + if ( glType === gl.UNSIGNED_INT_24_8 ) internalFormat = gl.DEPTH24_STENCIL8; + + } + if ( internalFormat === gl.R16F || internalFormat === gl.R32F || internalFormat === gl.RG16F || internalFormat === gl.RG32F || internalFormat === gl.RGBA16F || internalFormat === gl.RGBA32F ) { diff --git a/examples/screenshots/webgpu_depth_texture.jpg b/examples/screenshots/webgpu_depth_texture.jpg index 001fe203e0b94e..338ef4c8ac5bc5 100644 Binary files a/examples/screenshots/webgpu_depth_texture.jpg and b/examples/screenshots/webgpu_depth_texture.jpg differ diff --git a/examples/screenshots/webgpu_lights_custom.jpg b/examples/screenshots/webgpu_lights_custom.jpg index 2ef0d5160cb13e..380394266c5c62 100644 Binary files a/examples/screenshots/webgpu_lights_custom.jpg and b/examples/screenshots/webgpu_lights_custom.jpg differ diff --git a/examples/screenshots/webgpu_rtt.jpg b/examples/screenshots/webgpu_rtt.jpg index 001fe203e0b94e..31b8c4b5323106 100644 Binary files a/examples/screenshots/webgpu_rtt.jpg and b/examples/screenshots/webgpu_rtt.jpg differ diff --git a/examples/webgpu_depth_texture.html b/examples/webgpu_depth_texture.html index c2c251821fdbdc..4a171cecb6141f 100644 --- a/examples/webgpu_depth_texture.html +++ b/examples/webgpu_depth_texture.html @@ -29,6 +29,8 @@ import { texture, MeshBasicNodeMaterial } from 'three/nodes'; 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' ); } diff --git a/examples/webgpu_rtt.html b/examples/webgpu_rtt.html index d8d72d180ca01b..84abc9df139a64 100644 --- a/examples/webgpu_rtt.html +++ b/examples/webgpu_rtt.html @@ -29,6 +29,8 @@ import { texture, uniform, vec2, MeshBasicNodeMaterial } from 'three/nodes'; 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'; let camera, scene, renderer; @@ -44,11 +46,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' ); } diff --git a/test/e2e/puppeteer.js b/test/e2e/puppeteer.js index ac567d010e5ad9..2a5aa6402eb949 100644 --- a/test/e2e/puppeteer.js +++ b/test/e2e/puppeteer.js @@ -116,7 +116,6 @@ const exceptionList = [ 'webgpu_compute_texture', 'webgpu_compute_texture_pingpong', 'webgpu_cubemap_dynamic', - 'webgpu_depth_texture', 'webgpu_instance_mesh', 'webgpu_lines_fat', 'webgpu_loader_gltf', @@ -129,7 +128,6 @@ const exceptionList = [ "webgpu_multiple_rendertargets", 'webgpu_occlusion', 'webgpu_particles', - 'webgpu_rtt', 'webgpu_sandbox', 'webgpu_shadowmap', 'webgpu_skinning',