DavidHDev/react-bits · critical · Error

Unable to initialize WebGL render texture formats.

Error message

Unable to initialize WebGL render texture formats.

What it means

Tailwind variant of error 3. After a context is obtained, the half-float render-target probe (getSupportedFormat -> supportRenderTextureFormat checking framebuffer completeness) returns null for at least one of RGBA/RG/R, so the fluid simulation cannot allocate its dye/velocity buffers and aborts.

Source

Thrown at src/ts-tailwind/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 hardware-accelerated WebGL2 context with EXT_color_buffer_float (check chrome://gpu).
2. Update GPU drivers/browser — float color buffer support improved in later driver versions.
3. Prefer discrete GPU on dual-GPU laptops.
4. Degrade gracefully: catch the throw and render a plain (non-fluid) cursor fallback.

Example fix

// before
const { gl, ext } = getWebGLContext(canvas);

// after
let ctx;
try { ctx = getWebGLContext(canvas); }
catch (e) {
  if (/render texture formats/.test(String(e))) return null; // static fallback
  throw e;
}

function supportsFloatRenderTargets(): boolean {
  const canvas = document.createElement('canvas');
  const gl = canvas.getContext('webgl2');
  if (!gl || !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;
}

try { ctx = getWebGLContext(canvas); }
catch (e) {
  if (e instanceof Error && /render texture formats/.test(e.message)) return null;
  throw e;
}

When it happens

Trigger: formatRGBA, formatRG, or formatR is null at src/ts-tailwind/Animations/SplashCursor/SplashCursor.tsx:179-181, because the half-float texImage2D/framebuffer test was not FRAMEBUFFER_COMPLETE (often due to EXT_color_buffer_float missing at line 142).

Common situations: WebGL2 contexts without EXT_color_buffer_float (older mobile/Intel GPUs, software renderers, VMs); WebGL1 paths missing OES_texture_half_float; drivers that advertise the extension but fail framebuffer completeness; remote-desktop/limited GPU passthrough.

Related errors

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

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