DavidHDev/react-bits · error · Error

Failed to create WebGL texture.

Error message

Failed to create WebGL texture.

What it means

Tailwind variant of error 5. createAndSetupTexture throws when gl.createTexture() returns null — lost context or exhausted texture pool — during InfiniteMenu texture setup.

Source

Thrown at src/ts-tailwind/Components/InfiniteMenu/InfiniteMenu.tsx:472

    gl.bufferData(gl.ARRAY_BUFFER, sizeOrData, usage);
  } else {
    gl.bufferData(gl.ARRAY_BUFFER, sizeOrData, usage);
  }

  gl.bindBuffer(gl.ARRAY_BUFFER, null);
  return buf;
}

function createAndSetupTexture(
  gl: WebGL2RenderingContext,
  minFilter: number,
  magFilter: number,
  wrapS: number,
  wrapT: number
): WebGLTexture {
  const texture = gl.createTexture();
  if (!texture) {
    throw new Error('Failed to create WebGL texture.');
  }
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, wrapS);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, wrapT);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, minFilter);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, magFilter);
  return texture;
}

type UpdateCallback = (deltaTime: number) => void;

class ArcballControl {
  private canvas: HTMLCanvasElement;
  private updateCallback: UpdateCallback;

  public isPointerDown = false;
  public orientation = quat.create();
  public pointerRotation = quat.create();

View on GitHub (pinned to c7109dccb4)

Solutions

1. Listen for 'webglcontextlost'/'webglcontextrestored' and defer allocation while lost.
2. Dispose textures on unmount with gl.deleteTexture.
3. Cap the number of live WebGL/InfiniteMenu instances on the page.
4. Render a fallback path if allocation persistently fails.

Example fix

// before
const texture = gl.createTexture();
if (!texture) throw new Error('Failed to create WebGL texture.');

// after
useEffect(() => () => { if (texture) gl.deleteTexture(texture); }, []);

function contextHealthy(gl: WebGL2RenderingContext): boolean {
  return !gl.isContextLost();
}

function canCreateTexture(gl: WebGL2RenderingContext): boolean {
  const probe = gl.createTexture();
  if (probe) { gl.deleteTexture(probe); return true; }
  return false;
}

canvas.addEventListener('webglcontextlost', (e) => e.preventDefault());
try { return createAndSetupTexture(gl, minFilter, magFilter, wrapS, wrapT); }
catch (e) {
  if (e instanceof Error && /WebGL texture/.test(e.message)) return null;
  throw e;
}

When it happens

Trigger: gl.createTexture() returns null at src/ts-tailwind/Components/InfiniteMenu/InfiniteMenu.tsx:467 inside createAndSetupTexture, called from init() or resize.

Common situations: webglcontextlost without restoration; many simultaneous WebGL components exhausting the texture pool; GPU process crash; leaked textures from unmount without gl.deleteTexture; mobile/embedded GPUs with tight limits.

Related errors

• Failed to create WebGL texture.
• Failed to create WebGL buffer.
• Failed to create WebGL buffer.
• No WebGL 2 context!
• No WebGL 2 context!

AI-assisted analysis of DavidHDev/react-bits@c7109dccb4 (2026-08-13). Data as JSON: /api/errors/e74f54000b142921. Report an issue: GitHub.