More work on readPixels and dump framebuffer

src/Engines/webgpuEngine.ts

@@ -2031,7 +2031,13 @@ export class WebGPUEngine extends Engine {
     }
 
     public readPixels(x: number, y: number, width: number, height: number, hasAlpha = true): Promise<ArrayBufferView> {
-        return this._textureHelper.readPixels(this._swapChainTexture, x, y, width, height, this._options.swapChainFormat!);
+        const gpuTexture = this._currentRenderTargetPassInfos.colorAttachmentGPUTextures ? this._currentRenderTargetPassInfos.colorAttachmentGPUTextures[0].underlyingResource : this._swapChainTexture;
+        const gpuTextureFormat = this._currentRenderTargetPassInfos.colorAttachmentGPUTextures ? this._currentRenderTargetPassInfos.colorAttachmentGPUTextures[0].format : this._options.swapChainFormat!;
+        if (!gpuTexture) {
+            // we are calling readPixels before the end of the first frame and no RTT is bound, so this._swapChainTexture is not setup yet!
+            return Promise.resolve(new Uint8Array(0));
+        }
+        return this._textureHelper.readPixels(gpuTexture, x, y, width, height, gpuTextureFormat);
     }
 
     /** @hidden */

src/Misc/screenshotTools.ts

@@ -34,8 +34,6 @@ export class ScreenshotTools {
     public static CreateScreenshot(engine: Engine, camera: Camera, size: IScreenshotSize | number, successCallback?: (data: string) => void, mimeType: string = "image/png"): void {
         const { height, width } = ScreenshotTools._getScreenshotSize(engine, camera, size);
 
-        // TODO WEBGPU use engine.readPixels to get the back buffer
-
         if (!(height && width)) {
             Logger.Error("Invalid 'size' parameter !");
             return;
@@ -61,12 +59,14 @@ export class ScreenshotTools {
         var offsetX = Math.max(0, width - newWidth) / 2;
         var offsetY = Math.max(0, height - newHeight) / 2;
 
-        var renderingCanvas = engine.getRenderingCanvas();
-        if (renderContext && renderingCanvas) {
-            renderContext.drawImage(renderingCanvas, offsetX, offsetY, newWidth, newHeight);
-        }
+        engine.onEndFrameObservable.addOnce(() => {
+            var renderingCanvas = engine.getRenderingCanvas();
+            if (renderContext && renderingCanvas) {
+                renderContext.drawImage(renderingCanvas, offsetX, offsetY, newWidth, newHeight);
+            }
 
-        Tools.EncodeScreenshotCanvasData(successCallback, mimeType);
+            Tools.EncodeScreenshotCanvasData(successCallback, mimeType);
+        });
     }
 
     /**

src/Misc/tools.ts

@@ -574,41 +574,13 @@ export class Tools {
      * @param mimeType defines the mime type of the result
      * @param fileName defines the filename to download. If present, the result will automatically be downloaded
      */
-    public static DumpFramebuffer(width: number, height: number, engine: Engine, successCallback?: (data: string) => void, mimeType: string = "image/png", fileName?: string) {
+    public static async DumpFramebuffer(width: number, height: number, engine: Engine, successCallback?: (data: string) => void, mimeType: string = "image/png", fileName?: string) {
         // Read the contents of the framebuffer
-        var numberOfChannelsByLine = width * 4;
-        var halfHeight = height / 2;
+        let bufferView = await engine.readPixels(0, 0, width, height);
 
-        engine.onEndFrameObservable.addOnce(async () => {
-            let bufferView = await engine.readPixels(0, 0, width, height);
+        const data = new Uint8Array(bufferView.buffer);
 
-            const data = new Uint8Array(bufferView.buffer);
-
-            // To flip image on Y axis.
-            for (var i = 0; i < halfHeight; i++) {
-                for (var j = 0; j < numberOfChannelsByLine; j++) {
-                    var currentCell = j + i * numberOfChannelsByLine;
-                    var targetLine = height - i - 1;
-                    var targetCell = j + targetLine * numberOfChannelsByLine;
-
-                    var temp = data[currentCell];
-                    data[currentCell] = data[targetCell];
-                    data[targetCell] = temp;
-                }
-            }
-
-            // TODO WEBGPU Add a feature in ThinEngine.Features for that instead of testing isWebGPU?
-            if (engine.isWebGPU) {
-                // flip red and blue channels as swap chain is in BGRA format
-                for (var i = 0; i < width * height * 4; i += 4) {
-                    var temp = data[i + 0];
-                    data[i + 0] = data[i + 2];
-                    data[i + 2] = temp;
-                }
-            }
-
-            Tools.DumpData(width, height, data, successCallback, mimeType, fileName);
-        });
+        Tools.DumpData(width, height, data, successCallback, mimeType, fileName, true);
     }
 
     /**