@onerjs/core 8.27.3 → 8.27.4

package/Misc/screenshotTools.d.ts

@@ -2,6 +2,7 @@ import type { Camera } from "../Cameras/camera.js";
 import { RenderTargetTexture } from "../Materials/Textures/renderTargetTexture.js";
 import type { IScreenshotSize } from "./interfaces/screenshotSize.js";
 import type { AbstractEngine } from "../Engines/abstractEngine.js";
+import type { FrameGraph } from "../FrameGraph/frameGraph.js";
 /**
  * Captures a screenshot of the current rendering
  * Please note that simultaneous screenshots are not supported: you must wait until one screenshot is complete before taking another.
@@ -40,10 +41,11 @@ export declare function CreateScreenshot(engine: AbstractEngine, camera: Camera,
  * @param quality The quality of the image if lossy mimeType is used (e.g. image/jpeg, image/webp). See {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob | HTMLCanvasElement.toBlob()}'s `quality` parameter.
  * @param useFill fill the screenshot dimensions with the render canvas and clip any overflow. If false, fit the canvas within the screenshot, as in letterboxing.
  * @param clearWithSceneColor If true, the screenshot canvas will be cleared with the scene clear color before copying the render.
+ * @param forceDownload force the system to download the image
  * @returns screenshot as a string of base64-encoded characters. This string can be assigned
  * to the src parameter of an <img> to display it
  */
-export declare function CreateScreenshotAsync(engine: AbstractEngine, camera: Camera, size: IScreenshotSize | number, mimeType?: string, quality?: number, useFill?: boolean, clearWithSceneColor?: boolean): Promise<string>;
+export declare function CreateScreenshotAsync(engine: AbstractEngine, camera: Camera, size: IScreenshotSize | number, mimeType?: string, quality?: number, useFill?: boolean, clearWithSceneColor?: boolean, forceDownload?: boolean): Promise<string>;
 /**
  * Captures and automatically downloads a screenshot of the current rendering for a specific size. This will render the entire canvas but will generate a blink (due to canvas resize)
  * If screenshot image data is needed, use {@link CreateScreenshotAsync} instead.
@@ -113,12 +115,41 @@ export declare function CreateScreenshotUsingRenderTarget(engine: AbstractEngine
  * to the src parameter of an <img> to display it
  */
 export declare function CreateScreenshotUsingRenderTargetAsync(engine: AbstractEngine, camera: Camera, size: IScreenshotSize | number, mimeType?: string, samples?: number, antialiasing?: boolean, fileName?: string, renderSprites?: boolean, enableStencilBuffer?: boolean, useLayerMask?: boolean, quality?: number, customizeTexture?: (texture: RenderTargetTexture) => void, customDumpData?: (width: number, height: number, data: ArrayBufferView, successCallback?: (data: string | ArrayBuffer) => void, mimeType?: string, fileName?: string, invertY?: boolean, toArrayBuffer?: boolean, quality?: number) => void): Promise<string>;
+/**
+ * Generates an image screenshot from the specified frame graph and camera
+ * Please note:
+ *  - that the frame graph must write to the back buffer color for this to work! This is because the back buffer color is replaced by the texture of the screenshot during the operation.
+ *  - the camera is set as the camera for the main object renderer of the frame graph during the operation, and restored afterwards.
+ *    This will only work if the frame graph has a main object renderer (isMainObjectRenderer is true for one of its object renderers)
+ *  - that simultaneous screenshots are not supported: you must wait until one screenshot is complete before taking another.
+ * @param frameGraph The frame graph to use for rendering
+ * @param camera The camera to use for rendering
+ * @param size This parameter can be set to a single number or to an object with the
+ * following (optional) properties: precision, width, height. If a single number is passed,
+ * it will be used for both width and height. If an object is passed, the screenshot size
+ * will be derived from the parameters. The precision property is a multiplier allowing
+ * rendering at a higher or lower resolution
+ * @param mimeType The MIME type of the screenshot image (default: image/png).
+ * Check your browser for supported MIME types
+ * @param samples Texture samples (default: 1)
+ * @param antialiasing Whether antialiasing should be turned on or not (default: false)
+ * @param fileName A name for for the downloaded file.
+ * @param quality The quality of the image if lossy mimeType is used (e.g. image/jpeg, image/webp). See {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob | HTMLCanvasElement.toBlob()}'s `quality` parameter.
+ * @param customDumpData The function to use to dump the data. If not provided, the default DumpData function will be used.
+ * @param automaticDownload If true, the screenshot will be automatically downloaded as a file instead of being returned as a string: in this case, null is returned.
+ * @param numberOfFramesToRender If provided, the number of frames to render before taking the screenshot.
+ * If not provided, the screenshot will be taken after the next frame, or after 32 frames if the frame graph has at least one history texture.
+ * @returns screenshot as a string of base64-encoded characters. This string can be assigned
+ * to the src parameter of an <img> to display it. If automaticDownload is true, null is returned instead
+ */
+export declare function CreateScreenshotForFrameGraphAsync(frameGraph: FrameGraph, camera: Camera, size: IScreenshotSize | number, mimeType?: string, samples?: number, antialiasing?: boolean, fileName?: string, quality?: number, customDumpData?: (width: number, height: number, data: ArrayBufferView, successCallback?: (data: string | ArrayBuffer) => void, mimeType?: string, fileName?: string, invertY?: boolean, toArrayBuffer?: boolean, quality?: number) => void, automaticDownload?: boolean, numberOfFramesToRender?: number): Promise<string | ArrayBuffer | null>;
 /**
  * Class containing a set of static utilities functions for screenshots
  */
 export declare const ScreenshotTools: {
     /**
      * Captures a screenshot of the current rendering
+     * Please note that simultaneous screenshots are not supported: you must wait until one screenshot is complete before taking another.
      * @see https://doc.babylonjs.com/features/featuresDeepDive/scene/renderToPNG
      * @param engine defines the rendering engine
      * @param camera defines the source camera. If the camera is not the scene's active camera, {@link CreateScreenshotUsingRenderTarget} will be used instead, and `useFill` will be ignored
@@ -139,6 +170,7 @@ export declare const ScreenshotTools: {
     CreateScreenshot: typeof CreateScreenshot;
     /**
      * Captures a screenshot of the current rendering
+     * Please note that simultaneous screenshots are not supported: you must wait until one screenshot is complete before taking another.
      * @see https://doc.babylonjs.com/features/featuresDeepDive/scene/renderToPNG
      * @param engine defines the rendering engine
      * @param camera defines the source camera. If the camera is not the scene's active camera, {@link CreateScreenshotUsingRenderTarget} will be used instead, and `useFill` will be ignored
@@ -151,6 +183,7 @@ export declare const ScreenshotTools: {
      * Check your browser for supported MIME types
      * @param quality The quality of the image if lossy mimeType is used (e.g. image/jpeg, image/webp). See {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob | HTMLCanvasElement.toBlob()}'s `quality` parameter.
      * @param useFill fill the screenshot dimensions with the render canvas and clip any overflow. If false, fit the canvas within the screenshot, as in letterboxing.
+     * @param forceDownload force the system to download the image
      * @returns screenshot as a string of base64-encoded characters. This string can be assigned
      * to the src parameter of an <img> to display it
      */
@@ -158,6 +191,7 @@ export declare const ScreenshotTools: {
     /**
      * Captures and automatically downloads a screenshot of the current rendering for a specific size. This will render the entire canvas but will generate a blink (due to canvas resize)
      * If screenshot image data is needed, use {@link CreateScreenshotAsync} instead.
+     * Please note that simultaneous screenshots are not supported: you must wait until one screenshot is complete before taking another.
      * @see https://doc.babylonjs.com/features/featuresDeepDive/scene/renderToPNG
      * @param engine defines the rendering engine
      * @param camera defines the source camera. If the camera is not the scene's active camera, {@link CreateScreenshotUsingRenderTarget} will be used instead, and `useFill` will be ignored
@@ -172,6 +206,7 @@ export declare const ScreenshotTools: {
     CreateScreenshotWithResizeAsync: typeof CreateScreenshotWithResizeAsync;
     /**
      * Generates an image screenshot from the specified camera.
+     * Please note that simultaneous screenshots are not supported: you must wait until one screenshot is complete before taking another.
      * @see https://doc.babylonjs.com/features/featuresDeepDive/scene/renderToPNG
      * @param engine The engine to use for rendering
      * @param camera The camera to use for rendering
@@ -195,6 +230,7 @@ export declare const ScreenshotTools: {
     CreateScreenshotUsingRenderTarget: typeof CreateScreenshotUsingRenderTarget;
     /**
      * Generates an image screenshot from the specified camera.
+     * Please note that simultaneous screenshots are not supported: you must wait until one screenshot is complete before taking another.
      * @see https://doc.babylonjs.com/features/featuresDeepDive/scene/renderToPNG
      * @param engine The engine to use for rendering
      * @param camera The camera to use for rendering
@@ -214,4 +250,30 @@ export declare const ScreenshotTools: {
      * to the src parameter of an <img> to display it
      */
     CreateScreenshotUsingRenderTargetAsync: typeof CreateScreenshotUsingRenderTargetAsync;
+    /**
+     * Generates an image screenshot from the specified frame graph and camera
+     * Please note:
+     *  - that the frame graph must write to the back buffer color for this to work! This is because the back buffer color is replaced by the texture of the screenshot during the operation.
+     *  - the camera is set as the camera for the main object renderer of the frame graph during the operation, and restored afterwards.
+     *    This will only work if the frame graph has a main object renderer (isMainObjectRenderer is true for one of its object renderers)
+     *  - that simultaneous screenshots are not supported: you must wait until one screenshot is complete before taking another.
+     * @param frameGraph The frame graph to use for rendering
+     * @param camera The camera to use for rendering
+     * @param size This parameter can be set to a single number or to an object with the
+     * following (optional) properties: precision, width, height. If a single number is passed,
+     * it will be used for both width and height. If an object is passed, the screenshot size
+     * will be derived from the parameters. The precision property is a multiplier allowing
+     * rendering at a higher or lower resolution
+     * @param mimeType The MIME type of the screenshot image (default: image/png).
+     * Check your browser for supported MIME types
+     * @param samples Texture samples (default: 1)
+     * @param antialiasing Whether antialiasing should be turned on or not (default: false)
+     * @param fileName A name for for the downloaded file.
+     * @param quality The quality of the image if lossy mimeType is used (e.g. image/jpeg, image/webp). See {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob | HTMLCanvasElement.toBlob()}'s `quality` parameter.
+     * @param customDumpData The function to use to dump the data. If not provided, the default DumpData function will be used.
+     * @param automaticDownload If true, the screenshot will be automatically downloaded as a file instead of being returned as a string: in this case, null is returned.
+     * @returns screenshot as a string of base64-encoded characters. This string can be assigned
+     * to the src parameter of an <img> to display it. If automaticDownload is true, null is returned instead
+     */
+    CreateScreenshotForFrameGraphAsync: typeof CreateScreenshotForFrameGraphAsync;
 };

package/Misc/screenshotTools.js

@@ -7,6 +7,10 @@ import { Tools } from "./tools.js";
 import { DumpData } from "./dumpTools.js";
 import { ApplyPostProcess } from "./textureTools.js";
 import { _RetryWithInterval } from "./timingTools.js";
+import { backbufferColorTextureHandle } from "../FrameGraph/frameGraphTypes.js";
+import { FrameGraphFXAATask } from "../FrameGraph/Tasks/PostProcesses/fxaaTask.js";
+import { FrameGraphPassTask } from "../FrameGraph/Tasks/PostProcesses/passTask.js";
+import { FrameGraphUtils } from "../FrameGraph/frameGraphUtils.js";
 let screenshotCanvas = null;
 /**
  * Captures a screenshot of the current rendering
@@ -36,7 +40,14 @@ export function CreateScreenshot(engine, camera, size, successCallback, mimeType
         return;
     }
     const scene = camera.getScene();
-    if (scene.activeCamera !== camera && !scene.frameGraph) {
+    let useRenderTarget = scene.activeCamera !== camera;
+    if (scene.frameGraph) {
+        const mainObjectRendererTask = FrameGraphUtils.FindMainObjectRenderer(scene.frameGraph);
+        if (mainObjectRendererTask) {
+            useRenderTarget = mainObjectRendererTask.camera !== camera;
+        }
+    }
+    if (useRenderTarget) {
         CreateScreenshotUsingRenderTarget(engine, camera, size, (data) => {
             if (forceDownload) {
                 const blob = new Blob([data]);
@@ -109,10 +120,11 @@ export function CreateScreenshot(engine, camera, size, successCallback, mimeType
  * @param quality The quality of the image if lossy mimeType is used (e.g. image/jpeg, image/webp). See {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob | HTMLCanvasElement.toBlob()}'s `quality` parameter.
  * @param useFill fill the screenshot dimensions with the render canvas and clip any overflow. If false, fit the canvas within the screenshot, as in letterboxing.
  * @param clearWithSceneColor If true, the screenshot canvas will be cleared with the scene clear color before copying the render.
+ * @param forceDownload force the system to download the image
  * @returns screenshot as a string of base64-encoded characters. This string can be assigned
  * to the src parameter of an <img> to display it
  */
-export async function CreateScreenshotAsync(engine, camera, size, mimeType = "image/png", quality, useFill = false, clearWithSceneColor = false) {
+export async function CreateScreenshotAsync(engine, camera, size, mimeType = "image/png", quality, useFill = false, clearWithSceneColor = false, forceDownload = false) {
     return await new Promise((resolve, reject) => {
         CreateScreenshot(engine, camera, size, (data) => {
             if (typeof data !== "undefined") {
@@ -121,7 +133,7 @@ export async function CreateScreenshotAsync(engine, camera, size, mimeType = "im
             else {
                 reject(new Error("Data is undefined"));
             }
-        }, mimeType, undefined, quality, useFill, clearWithSceneColor);
+        }, mimeType, forceDownload, quality, useFill, clearWithSceneColor);
     });
 }
 /**
@@ -173,6 +185,16 @@ export async function CreateScreenshotWithResizeAsync(engine, camera, width, hei
  * @param customDumpData The function to use to dump the data. If not provided, the default DumpData function will be used.
  */
 export function CreateScreenshotUsingRenderTarget(engine, camera, size, successCallback, mimeType = "image/png", samples = 1, antialiasing = false, fileName, renderSprites = false, enableStencilBuffer = false, useLayerMask = true, quality, customizeTexture, customDumpData) {
+    const scene = camera.getScene();
+    if (scene.frameGraph) {
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises, github/no-then
+        CreateScreenshotForFrameGraphAsync(scene.frameGraph, camera, size, mimeType, samples, antialiasing, fileName, quality, customDumpData, !successCallback).then((data) => {
+            if (successCallback) {
+                successCallback(data);
+            }
+        });
+        return;
+    }
     const { height, width, finalWidth, finalHeight } = GetScreenshotSize(engine, camera, size);
     const targetTextureSize = { width, height };
     if (!(height && width)) {
@@ -203,7 +225,6 @@ export function CreateScreenshotUsingRenderTarget(engine, camera, size, successC
     if (engine.onResizeObservable.hasObservers()) {
         engine.onResizeObservable.notifyObservers(engine);
     }
-    const scene = camera.getScene();
     // At this point size can be a number, or an object (according to engine.prototype.createRenderTargetTexture method)
     const texture = new RenderTargetTexture("screenShot", targetTextureSize, scene, false, false, 0, false, Texture.BILINEAR_SAMPLINGMODE, undefined, enableStencilBuffer, undefined, undefined, undefined, samples);
     texture.renderList = scene.meshes.slice();
@@ -344,6 +365,156 @@ export async function CreateScreenshotUsingRenderTargetAsync(engine, camera, siz
         }, mimeType, samples, antialiasing, fileName, renderSprites, enableStencilBuffer, useLayerMask, quality, customizeTexture, customDumpData);
     });
 }
+/**
+ * Generates an image screenshot from the specified frame graph and camera
+ * Please note:
+ *  - that the frame graph must write to the back buffer color for this to work! This is because the back buffer color is replaced by the texture of the screenshot during the operation.
+ *  - the camera is set as the camera for the main object renderer of the frame graph during the operation, and restored afterwards.
+ *    This will only work if the frame graph has a main object renderer (isMainObjectRenderer is true for one of its object renderers)
+ *  - that simultaneous screenshots are not supported: you must wait until one screenshot is complete before taking another.
+ * @param frameGraph The frame graph to use for rendering
+ * @param camera The camera to use for rendering
+ * @param size This parameter can be set to a single number or to an object with the
+ * following (optional) properties: precision, width, height. If a single number is passed,
+ * it will be used for both width and height. If an object is passed, the screenshot size
+ * will be derived from the parameters. The precision property is a multiplier allowing
+ * rendering at a higher or lower resolution
+ * @param mimeType The MIME type of the screenshot image (default: image/png).
+ * Check your browser for supported MIME types
+ * @param samples Texture samples (default: 1)
+ * @param antialiasing Whether antialiasing should be turned on or not (default: false)
+ * @param fileName A name for for the downloaded file.
+ * @param quality The quality of the image if lossy mimeType is used (e.g. image/jpeg, image/webp). See {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob | HTMLCanvasElement.toBlob()}'s `quality` parameter.
+ * @param customDumpData The function to use to dump the data. If not provided, the default DumpData function will be used.
+ * @param automaticDownload If true, the screenshot will be automatically downloaded as a file instead of being returned as a string: in this case, null is returned.
+ * @param numberOfFramesToRender If provided, the number of frames to render before taking the screenshot.
+ * If not provided, the screenshot will be taken after the next frame, or after 32 frames if the frame graph has at least one history texture.
+ * @returns screenshot as a string of base64-encoded characters. This string can be assigned
+ * to the src parameter of an <img> to display it. If automaticDownload is true, null is returned instead
+ */
+export async function CreateScreenshotForFrameGraphAsync(frameGraph, camera, size, mimeType = "image/png", samples = 1, antialiasing = false, fileName, quality, customDumpData, automaticDownload = false, numberOfFramesToRender) {
+    const engine = frameGraph.engine;
+    const textureManager = frameGraph.textureManager;
+    const { height, width, finalWidth, finalHeight } = GetScreenshotSize(engine, camera, size);
+    const targetTextureSize = { width, height };
+    const dumpDataFunc = customDumpData || DumpData;
+    const tasks = frameGraph.tasks;
+    const currentTaskListLength = tasks.length;
+    const pausedExecution = frameGraph.pausedExecution;
+    const currentParallelShaderCompile = engine.getCaps().parallelShaderCompile;
+    textureManager.setBackBufferTextures(0, 0, {
+        size: targetTextureSize,
+        options: {
+            createMipMaps: false,
+            samples,
+            types: [0],
+            formats: [5],
+            useSRGBBuffers: [false],
+            creationFlags: [0],
+            labels: ["screenshot color"],
+        },
+        sizeIsPercentage: false,
+    }, {
+        size: targetTextureSize,
+        options: {
+            createMipMaps: false,
+            samples,
+            types: [0],
+            formats: [engine.isStencilEnable ? 13 : 14],
+            useSRGBBuffers: [false],
+            creationFlags: [0],
+            labels: ["screenshot depth"],
+        },
+        sizeIsPercentage: false,
+    });
+    let outputTextureHandle = backbufferColorTextureHandle;
+    if (antialiasing) {
+        const task = new FrameGraphFXAATask("fxaa", frameGraph);
+        task.sourceTexture = outputTextureHandle;
+        outputTextureHandle = task.outputTexture;
+        frameGraph.addTask(task);
+    }
+    if (finalWidth !== width || finalHeight !== height) {
+        const task = new FrameGraphPassTask("pass", frameGraph);
+        task.sourceTexture = outputTextureHandle;
+        task.targetTexture = frameGraph.textureManager.createRenderTargetTexture("pass_output", {
+            size: { width: finalWidth, height: finalHeight },
+            options: {
+                createMipMaps: false,
+                types: [0],
+                formats: [5],
+                samples: 1,
+                labels: ["screenshot_final_texture"],
+                useSRGBBuffers: [false],
+            },
+            sizeIsPercentage: false,
+        });
+        outputTextureHandle = task.outputTexture;
+        frameGraph.addTask(task);
+    }
+    const mainObjectRendererTask = FrameGraphUtils.FindMainObjectRenderer(frameGraph);
+    let currentCamera = null;
+    if (mainObjectRendererTask) {
+        currentCamera = mainObjectRendererTask.camera;
+        mainObjectRendererTask.camera = camera;
+    }
+    /**
+     * We need to disable parallel shader compile before running frameGraph.whenReadyAsync because of WebGL.
+     * In some cases, when whenReadyAsync is not ready the first time readiness is checked, the execute call will
+     * not render correctly. Disabling parallel shader compile fixes the problem. This does not happen with WebGPU.
+     *
+     * That's what happens in this PG: http://playground.babylonjs.com/#GAGVQO#16
+     *
+     * The FXAA task is injected in the frame graph (because antialiasing==true), and whenReadyAsync checks the readiness
+     * of the FXAA task for the first time, it returns false because the shader is not yet imported/compiled.
+     * If you uncomment line 2 in the PG, the FXAA shader will be preloaded/compiled before the screenshot is taken and
+     * whenReadyAsync won't have to check readiness twice. In that case, disabling parallel shader compile won't be necessary to have a correct screenshot.
+     *
+     * Same problem in: http://playground.babylonjs.com/#Z6C5EF#3
+     *
+     * TODO: find a better solution for this problem?
+     */
+    engine.getCaps().parallelShaderCompile = undefined;
+    frameGraph.build();
+    // We don't want the frame graph to render while waiting for whenReadyAsync to complete
+    frameGraph.pausedExecution = true;
+    await frameGraph.whenReadyAsync();
+    // eslint-disable-next-line require-atomic-updates
+    frameGraph.pausedExecution = false;
+    const numberOfFrames = numberOfFramesToRender ?? (textureManager.hasHistoryTextures ? 32 : 1);
+    for (let i = 0; i < numberOfFrames; ++i) {
+        frameGraph.execute();
+    }
+    // eslint-disable-next-line require-atomic-updates
+    frameGraph.pausedExecution = true;
+    engine.getCaps().parallelShaderCompile = currentParallelShaderCompile;
+    for (let i = currentTaskListLength; i < tasks.length; ++i) {
+        frameGraph.tasks[i].dispose();
+    }
+    // eslint-disable-next-line require-atomic-updates
+    frameGraph.tasks.length = currentTaskListLength;
+    if (mainObjectRendererTask && currentCamera) {
+        mainObjectRendererTask.camera = currentCamera;
+    }
+    const texture = frameGraph.textureManager.getTextureFromHandle(outputTextureHandle);
+    texture.incrementReferences();
+    textureManager.resetBackBufferTextures();
+    frameGraph.build();
+    await frameGraph.whenReadyAsync();
+    // eslint-disable-next-line require-atomic-updates
+    frameGraph.pausedExecution = pausedExecution;
+    // eslint-disable-next-line @typescript-eslint/return-await
+    return new Promise((resolve) => {
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises, github/no-then
+        engine._readTexturePixels(texture, finalWidth, finalHeight, -1, 0, null, true, false, 0, 0).then(async (data) => {
+            texture.dispose();
+            dumpDataFunc(finalWidth, finalHeight, data, automaticDownload ? undefined : (data) => resolve(data), mimeType, fileName, true, undefined, quality);
+            if (automaticDownload) {
+                resolve(null);
+            }
+        });
+    });
+}
 /**
  * Gets height and width for screenshot size
  * @param engine The engine to use for rendering
@@ -431,6 +602,7 @@ function GetScreenshotSize(engine, camera, size) {
 export const ScreenshotTools = {
     /**
      * Captures a screenshot of the current rendering
+     * Please note that simultaneous screenshots are not supported: you must wait until one screenshot is complete before taking another.
      * @see https://doc.babylonjs.com/features/featuresDeepDive/scene/renderToPNG
      * @param engine defines the rendering engine
      * @param camera defines the source camera. If the camera is not the scene's active camera, {@link CreateScreenshotUsingRenderTarget} will be used instead, and `useFill` will be ignored
@@ -451,6 +623,7 @@ export const ScreenshotTools = {
     CreateScreenshot,
     /**
      * Captures a screenshot of the current rendering
+     * Please note that simultaneous screenshots are not supported: you must wait until one screenshot is complete before taking another.
      * @see https://doc.babylonjs.com/features/featuresDeepDive/scene/renderToPNG
      * @param engine defines the rendering engine
      * @param camera defines the source camera. If the camera is not the scene's active camera, {@link CreateScreenshotUsingRenderTarget} will be used instead, and `useFill` will be ignored
@@ -463,6 +636,7 @@ export const ScreenshotTools = {
      * Check your browser for supported MIME types
      * @param quality The quality of the image if lossy mimeType is used (e.g. image/jpeg, image/webp). See {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob | HTMLCanvasElement.toBlob()}'s `quality` parameter.
      * @param useFill fill the screenshot dimensions with the render canvas and clip any overflow. If false, fit the canvas within the screenshot, as in letterboxing.
+     * @param forceDownload force the system to download the image
      * @returns screenshot as a string of base64-encoded characters. This string can be assigned
      * to the src parameter of an <img> to display it
      */
@@ -470,6 +644,7 @@ export const ScreenshotTools = {
     /**
      * Captures and automatically downloads a screenshot of the current rendering for a specific size. This will render the entire canvas but will generate a blink (due to canvas resize)
      * If screenshot image data is needed, use {@link CreateScreenshotAsync} instead.
+     * Please note that simultaneous screenshots are not supported: you must wait until one screenshot is complete before taking another.
      * @see https://doc.babylonjs.com/features/featuresDeepDive/scene/renderToPNG
      * @param engine defines the rendering engine
      * @param camera defines the source camera. If the camera is not the scene's active camera, {@link CreateScreenshotUsingRenderTarget} will be used instead, and `useFill` will be ignored
@@ -484,6 +659,7 @@ export const ScreenshotTools = {
     CreateScreenshotWithResizeAsync,
     /**
      * Generates an image screenshot from the specified camera.
+     * Please note that simultaneous screenshots are not supported: you must wait until one screenshot is complete before taking another.
      * @see https://doc.babylonjs.com/features/featuresDeepDive/scene/renderToPNG
      * @param engine The engine to use for rendering
      * @param camera The camera to use for rendering
@@ -507,6 +683,7 @@ export const ScreenshotTools = {
     CreateScreenshotUsingRenderTarget,
     /**
      * Generates an image screenshot from the specified camera.
+     * Please note that simultaneous screenshots are not supported: you must wait until one screenshot is complete before taking another.
      * @see https://doc.babylonjs.com/features/featuresDeepDive/scene/renderToPNG
      * @param engine The engine to use for rendering
      * @param camera The camera to use for rendering
@@ -526,6 +703,32 @@ export const ScreenshotTools = {
      * to the src parameter of an <img> to display it
      */
     CreateScreenshotUsingRenderTargetAsync,
+    /**
+     * Generates an image screenshot from the specified frame graph and camera
+     * Please note:
+     *  - that the frame graph must write to the back buffer color for this to work! This is because the back buffer color is replaced by the texture of the screenshot during the operation.
+     *  - the camera is set as the camera for the main object renderer of the frame graph during the operation, and restored afterwards.
+     *    This will only work if the frame graph has a main object renderer (isMainObjectRenderer is true for one of its object renderers)
+     *  - that simultaneous screenshots are not supported: you must wait until one screenshot is complete before taking another.
+     * @param frameGraph The frame graph to use for rendering
+     * @param camera The camera to use for rendering
+     * @param size This parameter can be set to a single number or to an object with the
+     * following (optional) properties: precision, width, height. If a single number is passed,
+     * it will be used for both width and height. If an object is passed, the screenshot size
+     * will be derived from the parameters. The precision property is a multiplier allowing
+     * rendering at a higher or lower resolution
+     * @param mimeType The MIME type of the screenshot image (default: image/png).
+     * Check your browser for supported MIME types
+     * @param samples Texture samples (default: 1)
+     * @param antialiasing Whether antialiasing should be turned on or not (default: false)
+     * @param fileName A name for for the downloaded file.
+     * @param quality The quality of the image if lossy mimeType is used (e.g. image/jpeg, image/webp). See {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob | HTMLCanvasElement.toBlob()}'s `quality` parameter.
+     * @param customDumpData The function to use to dump the data. If not provided, the default DumpData function will be used.
+     * @param automaticDownload If true, the screenshot will be automatically downloaded as a file instead of being returned as a string: in this case, null is returned.
+     * @returns screenshot as a string of base64-encoded characters. This string can be assigned
+     * to the src parameter of an <img> to display it. If automaticDownload is true, null is returned instead
+     */
+    CreateScreenshotForFrameGraphAsync,
 };
 /**
  * This will be executed automatically for UMD and es5.