API
API|
@babylonjs/core|
ScreenshotTools

Variable ScreenshotToolsConst

ScreenshotTools: {
    CreateScreenshot: (
        engine: AbstractEngine,
        camera: Camera,
        size: number | IScreenshotSize,
        successCallback?: (data: string) => void,
        mimeType?: string,
        forceDownload?: boolean,
        quality?: number,
        useFill?: boolean,
        clearWithSceneColor?: boolean,
    ) => void;
    CreateScreenshotAsync: (
        engine: AbstractEngine,
        camera: Camera,
        size: number | IScreenshotSize,
        mimeType?: string,
        quality?: number,
        useFill?: boolean,
        clearWithSceneColor?: boolean,
        forceDownload?: boolean,
    ) => Promise<string>;
    CreateScreenshotForFrameGraphAsync: (
        frameGraph: FrameGraph,
        camera: Camera,
        size: number | IScreenshotSize,
        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>;
    CreateScreenshotUsingRenderTarget: (
        engine: AbstractEngine,
        camera: Camera,
        size: number | IScreenshotSize,
        successCallback?: (data: string) => void,
        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,
        timeoutInMilliseconds?: number,
        timeoutErrorCallback?: () => void,
    ) => void;
    CreateScreenshotUsingRenderTargetAsync: (
        engine: AbstractEngine,
        camera: Camera,
        size: number | IScreenshotSize,
        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>;
    CreateScreenshotWithResizeAsync: (
        engine: AbstractEngine,
        camera: Camera,
        width: number,
        height: number,
        mimeType?: string,
        quality?: number,
        useFill?: boolean,
    ) => Promise<void>;
} = ...

Class containing a set of static utilities functions for screenshots

Type Declaration

  • CreateScreenshot: (
        engine: AbstractEngine,
        camera: Camera,
        size: number | IScreenshotSize,
        successCallback?: (data: string) => void,
        mimeType?: string,
        forceDownload?: boolean,
        quality?: number,
        useFill?: boolean,
        clearWithSceneColor?: boolean,
    ) => void

    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.

    https://doc.babylonjs.com/features/featuresDeepDive/scene/renderToPNG

    defines the rendering engine

    defines the source camera. If the camera is not the scene's active camera, CreateScreenshotUsingRenderTarget will be used instead, and useFill will be ignored

    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

    defines the callback receives a single parameter which contains the screenshot as a string of base64-encoded characters. This string can be assigned to the src parameter of an to display it

    defines the MIME type of the screenshot image (default: image/png). Check your browser for supported MIME types

    force the system to download the image even if a successCallback is provided

    The quality of the image if lossy mimeType is used (e.g. image/jpeg, image/webp). See HTMLCanvasElement.toBlob()'s quality parameter.

    fill the screenshot dimensions with the render canvas and clip any overflow. If false, fit the canvas within the screenshot, as in letterboxing.

  • CreateScreenshotAsync: (
        engine: AbstractEngine,
        camera: Camera,
        size: number | IScreenshotSize,
        mimeType?: string,
        quality?: number,
        useFill?: boolean,
        clearWithSceneColor?: boolean,
        forceDownload?: boolean,
    ) => Promise<string>

    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.

    https://doc.babylonjs.com/features/featuresDeepDive/scene/renderToPNG

    defines the rendering engine

    defines the source camera. If the camera is not the scene's active camera, CreateScreenshotUsingRenderTarget will be used instead, and useFill will be ignored

    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

    defines the MIME type of the screenshot image (default: image/png). Check your browser for supported MIME types

    The quality of the image if lossy mimeType is used (e.g. image/jpeg, image/webp). See HTMLCanvasElement.toBlob()'s quality parameter.

    fill the screenshot dimensions with the render canvas and clip any overflow. If false, fit the canvas within the screenshot, as in letterboxing.

    force the system to download the image

    screenshot as a string of base64-encoded characters. This string can be assigned to the src parameter of an to display it

  • CreateScreenshotForFrameGraphAsync: (
        frameGraph: FrameGraph,
        camera: Camera,
        size: number | IScreenshotSize,
        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>

    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.

    The frame graph to use for rendering

    The camera to use for rendering

    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

    The MIME type of the screenshot image (default: image/png). Check your browser for supported MIME types

    Texture samples (default: 1)

    Whether antialiasing should be turned on or not (default: false)

    A name for for the downloaded file.

    The quality of the image if lossy mimeType is used (e.g. image/jpeg, image/webp). See HTMLCanvasElement.toBlob()'s quality parameter.

    The function to use to dump the data. If not provided, the default DumpData function will be used.

    If true, the screenshot will be automatically downloaded as a file instead of being returned as a string: in this case, null is returned.

    screenshot as a string of base64-encoded characters. This string can be assigned to the src parameter of an to display it. If automaticDownload is true, null is returned instead

  • CreateScreenshotUsingRenderTarget: (
        engine: AbstractEngine,
        camera: Camera,
        size: number | IScreenshotSize,
        successCallback?: (data: string) => void,
        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,
        timeoutInMilliseconds?: number,
        timeoutErrorCallback?: () => void,
    ) => void

    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.

    https://doc.babylonjs.com/features/featuresDeepDive/scene/renderToPNG

    The engine to use for rendering

    The camera to use for rendering

    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

    The callback receives a single parameter which contains the screenshot as a string of base64-encoded characters. This string can be assigned to the src parameter of an to display it

    The MIME type of the screenshot image (default: image/png). Check your browser for supported MIME types

    Texture samples (default: 1)

    Whether antialiasing should be turned on or not (default: false)

    A name for for the downloaded file.

    Whether the sprites should be rendered or not (default: false)

    Whether the stencil buffer should be enabled or not (default: false)

    The quality of the image if lossy mimeType is used (e.g. image/jpeg, image/webp). See HTMLCanvasElement.toBlob()'s quality parameter.

  • CreateScreenshotUsingRenderTargetAsync: (
        engine: AbstractEngine,
        camera: Camera,
        size: number | IScreenshotSize,
        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 camera. Please note that simultaneous screenshots are not supported: you must wait until one screenshot is complete before taking another.

    https://doc.babylonjs.com/features/featuresDeepDive/scene/renderToPNG

    The engine to use for rendering

    The camera to use for rendering

    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

    The MIME type of the screenshot image (default: image/png). Check your browser for supported MIME types

    Texture samples (default: 1)

    Whether antialiasing should be turned on or not (default: false)

    A name for for the downloaded file.

    Whether the sprites should be rendered or not (default: false)

    The quality of the image if lossy mimeType is used (e.g. image/jpeg, image/webp). See HTMLCanvasElement.toBlob()'s quality parameter.

    screenshot as a string of base64-encoded characters. This string can be assigned to the src parameter of an to display it

  • CreateScreenshotWithResizeAsync: (
        engine: AbstractEngine,
        camera: Camera,
        width: number,
        height: number,
        mimeType?: string,
        quality?: number,
        useFill?: boolean,
    ) => Promise<void>

    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 CreateScreenshotAsync instead. Please note that simultaneous screenshots are not supported: you must wait until one screenshot is complete before taking another.

    https://doc.babylonjs.com/features/featuresDeepDive/scene/renderToPNG

    defines the rendering engine

    defines the source camera. If the camera is not the scene's active camera, CreateScreenshotUsingRenderTarget will be used instead, and useFill will be ignored

    defines the expected width

    defines the expected height

    defines the MIME type of the screenshot image (default: image/png). Check your browser for supported MIME types

    The quality of the image if lossy mimeType is used (e.g. image/jpeg, image/webp). See HTMLCanvasElement.toBlob()'s quality parameter.

    fill the screenshot dimensions with the render canvas and clip any overflow. If false, fit the canvas within the screenshot, as in letterboxing.

    promise that resolves once the screenshot is taken