webgl-particle-galaxy

Imported from nexu-io/open-design (plugins/_official/examples/webgl-particle-galaxy/SKILL.md). Install upstream with npx skills add nexu-io/open-design --skill webgl-particle-galaxy. Copyright stays with the author.

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.