webgl
WebGL
WebGL on a live page runs on hardware you don't control: contexts get evicted and lost, GPUs are blocklisted or switched off, displays run at 120Hz and fractional scales, and server rendering imports the module where there is no window. So the fallback is part of the product, the loop runs only while something visible changes, and the cost per pixel decides the resolution. Sources: [flornkm, webgl-components] for widgets and the GPU probe (MIT), [React Doctor, improve-threejs] for the Three.js and R3F audit (Modified MIT), and [webdown-a, 3d-site] for 3D launch pages, each corrected against the Khronos WebGL spec, MDN, threejs.org and the R3F docs where they disagree. Whether a canvas is the right tool at all is in web-performance BROWSER.md; WebGL in code-made video (drawn from seek(t), rendered in software) is in seek-engine SHADERS.md, and the rules that differ are listed in WIDGETS.md.
Apply only the routes and checks for the selected job. Read a linked skill's named file from its installed folder when available, or from the linked source. Report an unavailable required reference instead of inventing it. [skill-authoring, DISTRIBUTION.md#composing-skills]
| The job | Read |
|---|---|
A shader widget rendered many times per page: the live page vs video split, one shared context, the frame loop, fragment cost, glass and dispersion optics, transparency, DPR, texture cache, image decoding, context loss and restore, failIfMajorPerformanceCaveat, fallbacks, "use client" and SSR, reduced motion and ARIA, deterministic identity, verifying without eyes, nonblank-canvas proof and test-suite WebGL disabling |
WIDGETS.md |
Auditing a Three.js or R3F app: severity by render loop, the six-step workflow, P1 to P3 findings, the corrected args rule, disposal and renderer.info, the ten-row visual rubric and its causes, outputColorSpace, resize and setPixelRatio, PerformanceMonitor |
THREEJS-AND-R3F.md |
A scroll-driven 3D launch page: where the owner's landing page differs, content and scene systems, failure layers, data schemas, shell and nav, visual system, the scene contract, GLTFLoader, DRACOLoader, KTX2Loader.detectSupport, HDRLoader, budgets, quality tiers, asset manifest, glTF export checklist, the blueprint, canvas checks |
LAUNCH-SITES.md |
| Which branch this machine takes (strict context, software rasterizer, context cap, blit orientation), as JSON | scripts/gpu-probe.html |
| Licence notices for the copied script and text | scripts/LICENSE-webgl-components.txt, LICENSE-react-doctor.txt |
Select the branch before applying its checks: repeated shader widgets use WIDGETS.md, a Three.js/R3F scene audit uses THREEJS-AND-R3F.md, and a 3D launch page uses LAUNCH-SITES.md. Widget-specific shared-context, fallback-prop and probe requirements do not automatically become requirements for every scene audit. [flornkm, webgl-components; React Doctor, improve-threejs; webdown-a, 3d-site]