FluentButtonMaterial "${this.name}" failed to load blob text

Error message

FluentButtonMaterial "${this.name}" failed to load blob texture "${this._blobTextureUrl}"${textureErrorMessage ? `: ${textureErrorMessage}` : ""}. Check FluentButtonMaterial.BLOB_TEXTURE_URL and asset availability.

What it means

FluentButtonMaterial requires a blob texture (from FluentButtonMaterial.BLOB_TEXTURE_URL) to be ready before rendering. When the texture reports a loading error or an errorObject, the material throws during isReadyForSubMesh instead of rendering with a broken texture. The error names the material, URL, and underlying texture error.

Source

Thrown at packages/dev/gui/src/3D/materials/fluentButton/fluentButtonMaterial.pure.ts:320

        const drawWrapper = subMesh._drawWrapper;

        if (this.isFrozen) {
            if (drawWrapper.effect && drawWrapper._wasPreviouslyReady) {
                return true;
            }
        }

        if (!subMesh.materialDefines) {
            subMesh.materialDefines = new FluentButtonMaterialDefines();
        }

        const defines = <FluentButtonMaterialDefines>subMesh.materialDefines;
        const scene = this.getScene();

        const blobTextureError = this._blobTexture.errorObject;
        if (this._blobTexture.loadingError || blobTextureError) {
            const textureErrorMessage = blobTextureError?.message || (blobTextureError?.exception instanceof Error ? blobTextureError.exception.message : undefined);
            throw new Error(
                `FluentButtonMaterial "${this.name}" failed to load blob texture "${this._blobTextureUrl}"${textureErrorMessage ? `: ${textureErrorMessage}` : ""}. Check FluentButtonMaterial.BLOB_TEXTURE_URL and asset availability.`,
                { cause: blobTextureError?.exception }
            );
        }

        if (!this._blobTexture.isReady()) {
            return false;
        }

        if (this._isReadyForSubMesh(subMesh)) {
            return true;
        }

        const engine = scene.getEngine();

        // Attribs
        PrepareDefinesForAttributes(mesh, defines, true, false);

View on GitHub (pinned to 0592b347b8)

Solutions

Verify FluentButtonMaterial.BLOB_TEXTURE_URL points to a reachable, correctly-served blob texture; fix the URL or host the asset locally.
Check DevTools/network tab for the texture request failing (404/CORS/403) and fix server config or move the asset into the project.
Preload the texture yourself and check texture.isReady()/errorObject before adding meshes using this material.
Use an onError handler on the Texture to capture the failure early and substitute a fallback texture.
Ensure the asset is included in your bundler/deployment output (copy as static asset).

Example fix

// before
FluentButtonMaterial.BLOB_TEXTURE_URL = "https://assets.example.com/fluent/blobs.png"; // 404
// after
FluentButtonMaterial.BLOB_TEXTURE_URL = new URL("./assets/fluentBlobTexture.png", import.meta.url).href; // bundled, verified asset

Defensive patterns

Strategy: try-catch

Validate before calling

const tex = new Texture(FluentButtonMaterial.BLOB_TEXTURE_URL, scene);
await new Promise((res, rej) => { tex.onLoadObservable.addOnce(res); tex.onErrorObservable.addOnce(rej); });
if (tex.errorObject) throw new Error(`Blob texture unavailable: ${tex.errorObject.message}`);

Type guard

function isBlobTextureReady(t: Texture): t is Texture & { isReady(): true } {
  return t.isReady() && !t.loadingError && t.errorObject == null;
}

Try / catch

try {
  scene.render(); // material becomes ready
} catch (e) {
  if (e instanceof Error && e.message.includes("failed to load blob texture")) {
    FluentButtonMaterial.BLOB_TEXTURE_URL = FALLBACK_LOCAL_URL;
    material.markDirty();
  } else throw e;
}

Prevention

Verify BLOB_TEXTURE_URL resolves to a bundled, deployed asset (test with curl/fetch)
Add Texture onError handlers to surface failures before render
Prefer same-origin or CORS-enabled texture hosting
Include texture assets in your bundler copy config and CI deployment checks

When it happens

Trigger: Assigning a submesh using FluentButtonMaterial whose _blobTexture failed to load: wrong/unreachable BLOB_TEXTURE_URL, network/CDN failure, missing asset in the bundle, CORS-blocked fetch, or malformed image file.

Common situations: Deploying without copying the blob texture asset; hardcoding a URL that 404s; loading the material in an offline/Electron app with no network; asset pipeline renaming the texture; CORS misconfiguration when textures come from another domain.

Related errors

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