{"record":{"id":"f643226eeb28c38b","repo":"DavidHDev/react-bits","slug":"unable-to-initialize-webgl-render-texture-formats-f64322","errorCode":null,"errorMessage":"Unable to initialize WebGL render texture formats.","messagePattern":"Unable to initialize WebGL render texture formats\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"critical","filePath":"src/ts-tailwind/Animations/SplashCursor/SplashCursor.tsx","lineNumber":180,"sourceCode":"          gl,\n          (gl as WebGL2RenderingContext).RG16F,\n          (gl as WebGL2RenderingContext).RG,\n          halfFloatTexType\n        );\n        formatR = getSupportedFormat(\n          gl,\n          (gl as WebGL2RenderingContext).R16F,\n          (gl as WebGL2RenderingContext).RED,\n          halfFloatTexType\n        );\n      } else {\n        formatRGBA = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType);\n        formatRG = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType);\n        formatR = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType);\n      }\n\n      if (!formatRGBA || !formatRG || !formatR) {\n        throw new Error('Unable to initialize WebGL render texture formats.');\n      }\n\n      return {\n        gl,\n        ext: {\n          formatRGBA,\n          formatRG,\n          formatR,\n          halfFloatTexType,\n          supportLinearFiltering\n        }\n      };\n    }\n\n    function getSupportedFormat(\n      gl: WebGLRenderingContext | WebGL2RenderingContext,\n      internalFormat: number,\n      format: number,","sourceCodeStart":162,"sourceCodeEnd":198,"githubUrl":"https://github.com/DavidHDev/react-bits/blob/c7109dccb42e06592d1d9bc50bc87204697240e2/src/ts-tailwind/Animations/SplashCursor/SplashCursor.tsx#L162-L198","documentation":"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.","triggerScenarios":"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).","commonSituations":"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.","solutions":["Ensure a hardware-accelerated WebGL2 context with EXT_color_buffer_float (check chrome://gpu).","Update GPU drivers/browser — float color buffer support improved in later driver versions.","Prefer discrete GPU on dual-GPU laptops.","Degrade gracefully: catch the throw and render a plain (non-fluid) cursor fallback."],"exampleFix":"// before\nconst { gl, ext } = getWebGLContext(canvas);\n\n// after\nlet ctx;\ntry { ctx = getWebGLContext(canvas); }\ncatch (e) {\n  if (/render texture formats/.test(String(e))) return null; // static fallback\n  throw e;\n}","handlingStrategy":"try-catch","validationCode":"function supportsFloatRenderTargets(): boolean {\n  const canvas = document.createElement('canvas');\n  const gl = canvas.getContext('webgl2');\n  if (!gl || !gl.getExtension('EXT_color_buffer_float')) return false;\n  const tex = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, tex);\n  gl.texImage2D(gl.TEXTURE_2D, 0, gl.R16F, 4, 4, 0, gl.RED, gl.HALF_FLOAT, null);\n  const fbo = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);\n  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);\n  return gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE;\n}","typeGuard":null,"tryCatchPattern":"try { ctx = getWebGLContext(canvas); }\ncatch (e) {\n  if (e instanceof Error && /render texture formats/.test(e.message)) return null;\n  throw e;\n}","preventionTips":["Probe EXT_color_buffer_float + framebuffer completeness before mounting.","Prefer discrete/hardware-accelerated WebGL2 for fluid sims.","Update GPU drivers for float color buffer support.","Wrap getWebGLContext in try/catch and degrade to a static cursor."],"tags":["webgl2","gpu","float-texture","framebuffer","extension","tailwind","splashcursor"],"backgroundTag":null,"analyzedSha":"c7109dccb42e06592d1d9bc50bc87204697240e2","analyzedAt":"2026-08-13T02:32:07.327Z","schemaVersion":2},"datasetVersion":"2026-08-13T04:17:16.726Z"}