BabylonJS/Babylon.js · error

Unsupported data for createImageBitmap.

Error message

Unsupported data for createImageBitmap.

What it means

ThinNativeEngine's createImageBitmap implementation supports Image-like objects and Blob inputs only; anything else (string URLs, HTMLImageElement substitutes, typed arrays) falls through to this throw because the native engine has no generic decoder here.

Source

Thrown at packages/dev/core/src/Engines/thinNativeEngine.pure.ts:2315

     * @param image source for image
     * @param options An object that sets options for the image's extraction.
     * @returns ImageBitmap
     */
    public override async createImageBitmap(image: ImageBitmapSource, options?: ImageBitmapOptions): Promise<ImageBitmap> {
        // Back-compat: Because of the previous Blob hack, this could be an array of BlobParts.
        if (Array.isArray(image)) {
            const arr = <Array<ArrayBuffer>>image;
            if (arr.length) {
                return this._engine.createImageBitmap(arr[0]);
            }
        }

        if (image instanceof Blob) {
            const data = await image.arrayBuffer();
            return this._engine.createImageBitmap(data);
        }

        throw new Error("Unsupported data for createImageBitmap.");
    }

    /**
     * Resize an image and returns the image data as an uint8array
     * @param image image to resize
     * @param bufferWidth destination buffer width
     * @param bufferHeight destination buffer height
     * @returns an uint8array containing RGBA values of bufferWidth * bufferHeight size
     */
    public override resizeImageBitmap(image: ImageBitmap, bufferWidth: number, bufferHeight: number): Uint8Array {
        return this._engine.resizeImageBitmap(image, bufferWidth, bufferHeight);
    }

    /** @internal */
    public override _createHardwareTexture(): IHardwareTextureWrapper {
        return new NativeHardwareTexture(this._createTexture() as NativeTexture, this._engine);
    }

View on GitHub (pinned to 0592b347b8)

Solutions

1. Convert the input to a Blob first (e.g. new Blob([uint8array], { type: "image/png" })).
2. For a URL, fetch it into a Blob before calling createImageBitmap.
3. Decode the image manually and use createTexture/raw texture APIs with the pixel data instead.

Example fix

// before
const bmp = await engine.createImageBitmap("file:///tex.png");

// after
const resp = await fetch("file:///tex.png");
const bmp = await engine.createImageBitmap(await resp.blob());

if (!(image instanceof Blob)) {
  throw new TypeError("Native createImageBitmap accepts Blob inputs; convert first.");
}

const isImageBitmapInput = (v: unknown): v is Blob => typeof Blob !== "undefined" && v instanceof Blob;

try {
  return await engine.createImageBitmap(input);
} catch (e) {
  if (e.message.includes("Unsupported data for createImageBitmap")) {
    const blob = input instanceof Blob ? input : new Blob([await toArrayBuffer(input)], { type: "image/png" });
    return await engine.createImageBitmap(blob);
  } else throw e;
}

When it happens

Trigger: Calling engine.createImageBitmap(data) where data is neither an ImageBitmap-compatible source handled above the check nor a Blob — e.g. a string URL, an ArrayBuffer, or a Uint8Array.

Common situations: Code ported from WebGL Babylon.js that passed image URLs or raw byte arrays to createImageBitmap and now runs on Babylon Native.

Related errors

• Unsupported buffer type
• updateWrappedNativeTexture: target InternalTexture was not p
• Loading textures from IInternalTextureLoader not yet impleme
• Could not load a native texture.
• updateWrappedNativeTexture: new handle dimensions (${newWidt

AI-assisted analysis of BabylonJS/Babylon.js@0592b347b8 (2026-08-30). Data as JSON: /api/errors/126d12b03b2e5413. Report an issue: GitHub.