DavidHDev/react-bits · critical · Error

Unable to initialize WebGL render texture formats.

Error message

Unable to initialize WebGL render texture formats.

What it means

After a GL context is acquired, SplashCursor probes whether the GPU can render to half-float textures (RGBA16F/RG16F/R16F) via getSupportedFormat -> supportRenderTextureFormat, which does a texImage2D + framebuffer completeness check. If all probed formats fail framebuffer completeness, getSupportedFormat returns null for at least one of formatRGBA/formatRG/formatR and the fluid sim aborts, because its advection/dye buffers require float render targets.

Source

Thrown at src/ts-default/Animations/SplashCursor/SplashCursor.tsx:180

          gl,
          (gl as WebGL2RenderingContext).RG16F,
          (gl as WebGL2RenderingContext).RG,
          halfFloatTexType
        );
        formatR = getSupportedFormat(
          gl,
          (gl as WebGL2RenderingContext).R16F,
          (gl as WebGL2RenderingContext).RED,
          halfFloatTexType
        );
      } else {
        formatRGBA = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType);
        formatRG = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType);
        formatR = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType);
      }

      if (!formatRGBA || !formatRG || !formatR) {
        throw new Error('Unable to initialize WebGL render texture formats.');
      }

      return {
        gl,
        ext: {
          formatRGBA,
          formatRG,
          formatR,
          halfFloatTexType,
          supportLinearFiltering
        }
      };
    }

    function getSupportedFormat(
      gl: WebGLRenderingContext | WebGL2RenderingContext,
      internalFormat: number,
      format: number,

View on GitHub (pinned to c7109dccb4)

Solutions

1. Ensure a real hardware-accelerated WebGL2 context with EXT_color_buffer_float (check chrome://gpu for the extension).
2. Update GPU drivers / browser; many older Mesa and Android drivers gained float-render support in later versions.
3. On dev machines, force discrete GPU (disable power-saving integrated GPU) which usually has float color buffer support.
4. If unavoidable, degrade gracefully: detect null formats and render a non-fluid static cursor instead of letting the error throw.

Example fix

// before
if (!formatRGBA || !formatRG || !formatR) {
  throw new Error('Unable to initialize WebGL render texture formats.');
}

// after (graceful degradation at the caller)
try {
  const { gl, ext } = getWebGLContext(canvas);
} catch (e) {
  if (/render texture formats/.test(String(e))) return null; // fall back to plain cursor
  throw e;
}

// probe float render-target support without throwing
function supportsFloatRenderTargets(): boolean {
  const canvas = document.createElement('canvas');
  const gl = canvas.getContext('webgl2');
  if (!gl) return false;
  if (!gl.getExtension('EXT_color_buffer_float')) return false;
  const tex = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, tex);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.R16F, 4, 4, 0, gl.RED, gl.HALF_FLOAT, null);
  const fbo = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
  return gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE;
}

let ctx;
try {
  ctx = getWebGLContext(canvas);
} catch (e) {
  if (e instanceof Error && /render texture formats/.test(e.message)) {
    return null; // fall back to a non-fluid cursor
  }
  throw e;
}

When it happens

Trigger: At src/ts-default/Animations/SplashCursor/SplashCursor.tsx:179-181: formatRGBA, formatRG, or formatR is null after the isWebGL2 branch (lines 159-172) or the webgl1 branch (174-176). Null means the framebuffer for the half-float test was not FRAMEBUFFER_COMPLETE in supportRenderTextureFormat.

Common situations: WebGL2 contexts where EXT_color_buffer_float failed to enable (line 142) — common on older mobile GPUs, some Intel integrated chips, and software renderers; WebGL1 paths lacking OES_texture_half_float; drivers that expose the extension but still fail completeness (buggy Mesa/Android drivers); remote-desktop/VM GPU passthrough with limited float support.

Related errors

• Unable to initialize WebGL render texture formats.
• No WebGL 2 context!
• No WebGL 2 context!
• Unable to initialize WebGL.
• Failed to create WebGL buffer.

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