webgl-particle-galaxy

# Particle Galaxy Skill Produce a single self-contained `index.html` that renders a real-time particle system full-screen, with a clean typographic overlay on top. The signature move: **compute each particle's position on the GPU** so the CPU never loops over particles. ## Why this is a powered artifact OpenDesign detects `getContext('webgl2')` and renders this file in **powered preview** — a cross-origin-isolated iframe with `allow-same-origin`. The full GPU pipeline is available; you do not need to work around the opaque sandbox. ## Resource map ``` webgl-particle-galaxy/ ├── SKILL.md ← you're reading this └── example.html ← a working 50,000-point WebGL2 galaxy (READ FIRST) ``` ## Workflow ### Step 0 — Read the reference Read `example.html` end to end. Note the shape: **no vertex buffer** — the vertex shader reads `gl_VertexID`, hashes it into a stable per-particle seed, and derives a log-spiral orbit with an inner-fast rotation curve. Points are drawn with `gl.drawArrays(gl.POINTS, 0, N)` in one call, additive-blended (`blendFunc(ONE, ONE)` with premultiplied color) so overlapping points glow. ### Step 1 — Pick the motion Choose a field the vertex shader can express cheaply from `gl_VertexID` + `uTime`: - **Spiral galaxy** (default): log-spiral arms, rotation curve `speed ≈ k / (r + ε)`, thin disk. - **Attractor / flow**: curl or a strange-attractor step baked as a closed-form function of time. - **Explosion / reform**: interpolate between a seeded start and a target shape on a looping clock. ### Step 2 — Build `index.html` - One file, zero external requests. Bind a VAO even with no attributes (some drivers require it). - Point size in the vertex shader (`gl_PointSize`), clamped and DPR-aware; soft round sprites via `gl_PointCoord` + a gaussian falloff in the fragment shader. - Additive blending on a dark clear color; premultiply the fragment color so `blendFunc(ONE, ONE)` reads as glow, not double-exposure. - Compile shaders with error logging (`getShaderInfoLog` / `getProgramInfoLog`) so a typo fails loudly. ### Step 3 — Overlay + brand - Map the accent colors to the active DESIGN.md when one is present; otherwise a restrained dark palette with one vivid accent (the reference uses lime `#63fe13` for the arms and a white-blue core). - Headline ≤ 15ch plus one supporting line. Never bury the particles behind the text. ### Step 4 — Self-review (P0) - [ ] Renders continuously at ~60fps; the FPS badge updates. - [ ] Tens of thousands of points in a **single** draw call (no per-particle CPU loop). - [ ] No WebGL console errors; program links cleanly. - [ ] Resizes crisply on window resize (no stretching / blur). - [ ] Degrades to a message (not a blank page) if `webgl2` is unavailable.