GrabPass functionality changes to support WebGPU and improve WebGL support

src/framework/graphics/scene-grab.js

@@ -1,7 +1,8 @@
 import {
+    DEVICETYPE_WEBGPU,
     ADDRESS_CLAMP_TO_EDGE,
     FILTER_NEAREST, FILTER_LINEAR, FILTER_LINEAR_MIPMAP_LINEAR,
-    PIXELFORMAT_DEPTHSTENCIL, PIXELFORMAT_RGBA8, PIXELFORMAT_RGB8
+    PIXELFORMAT_DEPTHSTENCIL, PIXELFORMAT_RGBA8
 } from '../../platform/graphics/constants.js';
 
 import { RenderTarget } from '../../platform/graphics/render-target.js';
@@ -42,15 +43,12 @@ class SceneGrab {
         // create depth layer
         this.layer = null;
 
-        // color buffer format
-        this.colorFormat = this.device.defaultFramebufferAlpha ? PIXELFORMAT_RGBA8 : PIXELFORMAT_RGB8;
-
         // create a depth layer, which is a default depth layer, but also a template used
         // to patch application created depth layers to behave as one
-        if (this.device.webgl2) {
-            this.initWebGl2();
+        if (this.device.webgl2 || this.device.deviceType === DEVICETYPE_WEBGPU) {
+            this.initMainPath();
         } else {
-            this.initWebGl1();
+            this.initFallbackPath();
         }
     }
 
@@ -77,10 +75,26 @@ class SceneGrab {
         });
     }
 
-    resizeCondition(target, source, device) {
-        const width = source?.width || device.width;
-        const height = source?.height || device.height;
-        return !target || width !== target.width || height !== target.height;
+    // texture format of the source texture the grab pass needs to copy
+    getSourceColorFormat(texture) {
+        // based on the RT the camera renders to, otherwise framebuffer
+        return texture?.format ?? this.device.framebufferFormat;
+    }
+
+    shouldReallocate(targetRT, sourceTexture, testFormat) {
+
+        // need to reallocate if format does not match
+        if (testFormat) {
+            const targetFormat = targetRT?.colorBuffer.format;
+            const sourceFormat = this.getSourceColorFormat(sourceTexture);
+            if (targetFormat !== sourceFormat)
+                return true;
+        }
+
+        // need to reallocate if dimensions don't match
+        const width = sourceTexture?.width || this.device.width;
+        const height = sourceTexture?.height || this.device.height;
+        return !targetRT || width !== targetRT.width || height !== targetRT.height;
     }
 
     allocateRenderTarget(renderTarget, sourceRenderTarget, device, format, isDepth, mipmaps, isDepthUniforms) {
@@ -126,7 +140,8 @@ class SceneGrab {
         }
     }
 
-    initWebGl2() {
+    // main path where both color and depth is copied from existing surface
+    initMainPath() {
 
         const app = this.application;
         const self = this;
@@ -156,21 +171,30 @@ class SceneGrab {
                 if (camera.renderSceneColorMap) {
 
                     // allocate / resize existing RT as needed
-                    if (self.resizeCondition(this.colorRenderTarget, camera.renderTarget?.colorBuffer, device)) {
+                    if (self.shouldReallocate(this.colorRenderTarget, camera.renderTarget?.colorBuffer, true)) {
                         self.releaseRenderTarget(this.colorRenderTarget);
-                        this.colorRenderTarget = self.allocateRenderTarget(this.colorRenderTarget, camera.renderTarget, device, this.colorFormat, false, true, false);
+                        const format = self.getSourceColorFormat(camera.renderTarget?.colorBuffer);
+                        this.colorRenderTarget = self.allocateRenderTarget(this.colorRenderTarget, camera.renderTarget, device, format, false, true, false);
                     }
 
                     // copy color from the current render target
                     DebugGraphics.pushGpuMarker(device, 'GRAB-COLOR');
 
-                    device.copyRenderTarget(device.renderTarget, this.colorRenderTarget, true, false);
-
-                    // generate mipmaps
-                    device.activeTexture(device.maxCombinedTextures - 1);
                     const colorBuffer = this.colorRenderTarget.colorBuffer;
-                    device.bindTexture(colorBuffer);
-                    device.gl.generateMipmap(colorBuffer.impl._glTarget);
+
+                    if (device.deviceType === DEVICETYPE_WEBGPU) {
+
+                        device.copyRenderTarget(camera.renderTarget, this.colorRenderTarget, true, false);
+
+                    } else {
+
+                        device.copyRenderTarget(device.renderTarget, this.colorRenderTarget, true, false);
+
+                        // generate mipmaps
+                        device.activeTexture(device.maxCombinedTextures - 1);
+                        device.bindTexture(colorBuffer);
+                        device.gl.generateMipmap(colorBuffer.impl._glTarget);
+                    }
 
                     DebugGraphics.popGpuMarker(device);
 
@@ -181,7 +205,7 @@ class SceneGrab {
                 if (camera.renderSceneDepthMap) {
 
                     // reallocate RT if needed
-                    if (self.resizeCondition(this.depthRenderTarget, camera.renderTarget?.depthBuffer, device)) {
+                    if (self.shouldReallocate(this.depthRenderTarget, camera.renderTarget?.depthBuffer)) {
                         self.releaseRenderTarget(this.depthRenderTarget);
                         this.depthRenderTarget = self.allocateRenderTarget(this.depthRenderTarget, camera.renderTarget, device, PIXELFORMAT_DEPTHSTENCIL, true, false, true);
                     }
@@ -201,7 +225,8 @@ class SceneGrab {
         });
     }
 
-    initWebGl1() {
+    // fallback path, where copy is not possible and the scene gets re-rendered
+    initFallbackPath() {
 
         const app = this.application;
         const self = this;
@@ -250,7 +275,7 @@ class SceneGrab {
                 if (camera.renderSceneDepthMap) {
 
                     // reallocate RT if needed
-                    if (!this.depthRenderTarget.depthBuffer || self.resizeCondition(this.depthRenderTarget, camera.renderTarget?.depthBuffer, device)) {
+                    if (!this.depthRenderTarget.depthBuffer || self.shouldReallocate(this.depthRenderTarget, camera.renderTarget?.depthBuffer)) {
                         this.depthRenderTarget.destroyTextureBuffers();
                         this.depthRenderTarget = self.allocateRenderTarget(this.depthRenderTarget, camera.renderTarget, device, PIXELFORMAT_RGBA8, false, false, true);
                     }
@@ -304,9 +329,10 @@ class SceneGrab {
                 if (camera.renderSceneColorMap) {
 
                     // reallocate RT if needed
-                    if (self.resizeCondition(this.colorRenderTarget, camera.renderTarget?.colorBuffer, device)) {
+                    if (self.shouldReallocate(this.colorRenderTarget, camera.renderTarget?.colorBuffer)) {
                         self.releaseRenderTarget(this.colorRenderTarget);
-                        this.colorRenderTarget = self.allocateRenderTarget(this.colorRenderTarget, camera.renderTarget, device, this.colorFormat, false, false, false);
+                        const format = self.getSourceColorFormat(camera.renderTarget?.colorBuffer);
+                        this.colorRenderTarget = self.allocateRenderTarget(this.colorRenderTarget, camera.renderTarget, device, format, false, false, false);
                     }
 
                     // copy out the color buffer

src/platform/graphics/constants.js

@@ -623,7 +623,19 @@ export const PIXELFORMAT_ATC_RGB = 29;
  */
 export const PIXELFORMAT_ATC_RGBA = 30;
 
-// only add compressed formats next
+/**
+ * 32-bit BGRA (8-bits for blue channel, 8 for green, 8 for red with 8-bit alpha).
+ *
+ * @type {number}
+ * @ignore
+ */
+export const PIXELFORMAT_BGRA8 = 31;
+
+// update this function when exposing additional compressed pixel formats
+export function isCompressedPixelFormat(format) {
+    return (format >= PIXELFORMAT_DXT1 && format <= PIXELFORMAT_DXT5) ||
+           (format >= PIXELFORMAT_ETC1 && format <= PIXELFORMAT_ATC_RGBA);
+}
 
 /**
  * List of distinct points.

src/platform/graphics/texture.js

@@ -3,6 +3,7 @@ import { TRACEID_TEXTURE_ALLOC, TRACEID_VRAM_TEXTURE } from '../../core/constant
 import { math } from '../../core/math/math.js';
 
 import {
+    isCompressedPixelFormat,
     ADDRESS_REPEAT,
     FILTER_LINEAR, FILTER_LINEAR_MIPMAP_LINEAR,
     FUNC_LESS,
@@ -244,10 +245,7 @@ class Texture {
             // #endif
         }
 
-        this._compressed = (this._format === PIXELFORMAT_DXT1 ||
-                            this._format === PIXELFORMAT_DXT3 ||
-                            this._format === PIXELFORMAT_DXT5 ||
-                            this._format >= PIXELFORMAT_ETC1);
+        this._compressed = isCompressedPixelFormat(this._format);
 
         // Mip levels
         this._invalid = false;

src/platform/graphics/webgl/webgl-graphics-device.js

@@ -13,7 +13,7 @@ import {
     FILTER_NEAREST, FILTER_LINEAR, FILTER_NEAREST_MIPMAP_NEAREST, FILTER_NEAREST_MIPMAP_LINEAR,
     FILTER_LINEAR_MIPMAP_NEAREST, FILTER_LINEAR_MIPMAP_LINEAR,
     FUNC_ALWAYS, FUNC_LESSEQUAL,
-    PIXELFORMAT_RGBA8, PIXELFORMAT_RGBA16F, PIXELFORMAT_RGBA32F,
+    PIXELFORMAT_RGB8, PIXELFORMAT_RGBA8, PIXELFORMAT_RGBA16F, PIXELFORMAT_RGBA32F,
     STENCILOP_KEEP,
     UNIFORMTYPE_BOOL, UNIFORMTYPE_INT, UNIFORMTYPE_FLOAT, UNIFORMTYPE_VEC2, UNIFORMTYPE_VEC3,
     UNIFORMTYPE_VEC4, UNIFORMTYPE_IVEC2, UNIFORMTYPE_IVEC3, UNIFORMTYPE_IVEC4, UNIFORMTYPE_BVEC2,
@@ -322,9 +322,6 @@ class WebglGraphicsDevice extends GraphicsDevice {
 
         this.defaultFramebuffer = null;
 
-        // true if the default framebuffer has alpha
-        this.defaultFramebufferAlpha = options.alpha;
-
         this.updateClientRect();
 
         // Add handlers for when the WebGL context is lost or restored
@@ -372,16 +369,19 @@ class WebglGraphicsDevice extends GraphicsDevice {
                 break;
             }
         }
+        this.gl = gl;
 
         if (!gl) {
             throw new Error("WebGL not supported");
         }
 
+        // pixel format of the framebuffer
+        const alphaBits = gl.getParameter(gl.ALPHA_BITS);
+        this.framebufferFormat = alphaBits ? PIXELFORMAT_RGBA8 : PIXELFORMAT_RGB8;
+
         const isChrome = platform.browser && !!window.chrome;
         const isMac = platform.browser && navigator.appVersion.indexOf("Mac") !== -1;
 
-        this.gl = gl;
-
         // enable temporary texture unit workaround on desktop safari
         this._tempEnableSafariTextureUnitWorkaround = platform.browser && !!window.safari;
 

src/platform/graphics/webgl/webgl-texture.js

@@ -7,7 +7,7 @@ import {
     PIXELFORMAT_DEPTHSTENCIL, PIXELFORMAT_111110F, PIXELFORMAT_SRGB, PIXELFORMAT_SRGBA, PIXELFORMAT_ETC1,
     PIXELFORMAT_ETC2_RGB, PIXELFORMAT_ETC2_RGBA, PIXELFORMAT_PVRTC_2BPP_RGB_1, PIXELFORMAT_PVRTC_2BPP_RGBA_1,
     PIXELFORMAT_PVRTC_4BPP_RGB_1, PIXELFORMAT_PVRTC_4BPP_RGBA_1, PIXELFORMAT_ASTC_4x4, PIXELFORMAT_ATC_RGB,
-    PIXELFORMAT_ATC_RGBA
+    PIXELFORMAT_ATC_RGBA, PIXELFORMAT_BGRA8
 } from '../constants.js';
 
 /**
@@ -269,6 +269,9 @@ class WebglTexture {
                 this._glInternalFormat = gl.SRGB8_ALPHA8;
                 this._glPixelType = gl.UNSIGNED_BYTE;
                 break;
+            case PIXELFORMAT_BGRA8:
+                Debug.error("BGRA8 texture format is not supported by WebGL.");
+                break;
         }
     }
 

src/platform/graphics/webgpu/webgpu-clear-renderer.js

@@ -0,0 +1,20 @@
+import { Debug } from "../../../core/debug.js";
+
+/**
+ * A WebGPU helper class implementing a viewport clear operation. When rendering to a texture,
+ * the whole surface can be cleared using loadOp, but if only a viewport needs to be cleared, or if
+ * it needs to be cleared later during the rendering, this need to be archieved by rendering a quad.
+ *
+ * @ignore
+ */
+class WebgpuClearRenderer {
+    clear(device, renderTarget, options) {
+
+        // this needs to handle (by rendering a quad):
+        // - clearing of a viewport
+        // - clearing of full render target in the middle of the render pass
+        Debug.logOnce("WebgpuGraphicsDevice.clear not implemented.");
+    }
+}
+
+export { WebgpuClearRenderer };