webgl-experience

name webgl-experience description A full-screen, real-time WebGL/WebGL2 experience — animated shaders, 3D scenes, generative visuals, particle fields — rendered live on the GPU with a typographic overlay. Produced as a single self-contained `index.html`. Use when the brief asks for a "WebGL", "shader", "3D", "generative", "GPU", "interactive canvas", "hero animation", or "real-time visual" experience. OpenDesign serves this in powered-preview mode so the GPU stack actually runs. triggers ["webgl","webgl2","shader","3d scene","generative art","gpu","raymarch","particle field","interactive canvas","着色器","webgl 效果"] od {"mode":"prototype","platform":"web","scenario":"design","preview":{"type":"html","entry":"index.html","reload":"debounce-100"},"design_system":{"requires":false,"sections":["color","typography"]},"craft":{"requires":["animation-discipline"]}} WebGL Experience Skill Produce a single self-contained index.html that renders a real-time WebGL (or WebGL2) visual full-screen, with a clean typographic overlay on top. Why this is a powered artifact OpenDesign detects getContext('webgl2') / new Worker / SharedArrayBuffer and renders this file in powered preview — a cross-origin-isolated iframe with allow-same-origin . That means real Web Workers, SharedArrayBuffer , WASM, and the full GPU pipeline are available. You do not need to work around the opaque sandbox. Prefer webgl2 for modern features; fall back to webgl when the effect allows. Resource map webgl-experience/ ├── SKILL.md ← you're reading this └── example.html ← a working WebGL2 aurora-field reference (READ FIRST) Workflow Step 0 — Read the reference Read example.html end to end. Note the shape: one full-viewport <canvas> , a fragment-shader draw loop on a fullscreen triangle, a DPR-aware resize, and a requestAnimationFrame tick. The overlay ( kicker → h1 → sub ) is pure HTML/CSS layered above the canvas via z-index . Step 1 — Choose the visual Pick ONE technique that fits the brief: Fragment-shader field (default): domain-warped fbm noise, flow fields, plasma, gradients. Cheapest, always 60fps. Raymarched scene : SDF spheres/boxes with soft shadows for a 3D hero. Instanced geometry : thousands of points/quads driven by a vertex shader. Post-processed image : sample a data-URI texture and distort/dither it. Step 2 — Build index.html Keep it one file, zero external requests (inline the shader source; embed any texture as a data: URI). Powered mode allows CDN loads, but self-contained previews are faster and portable. Always: alpha:false , DPR clamped to 2, viewport on resize, and a guard that shows a graceful message if the context is null. Compile shaders with error logging ( getShaderInfoLog ) so a typo fails loudly, not silently black. Step 3 — Overlay + brand Map the two :root -level accent colors to the active DESIGN.md when one is present; otherwise use a restrained dark palette with a single vivid accent (the reference uses lime #63fe13 ). Headline ≤ 14ch, one supporting line. Never cover the whole canvas — the visual is the hero. Step 4 — Self-review (P0) Renders continuously at ~60fps; the FPS badge updates. No WebGL console errors; getError() clean after first frame. Resizes crisply on window resize (no stretching / blur). Readable overlay contrast over the brightest frame. Degrades to a message (not a blank page) if webgl2 is unavailable.