---

name: webgl-particle-galaxy description: | A real-time particle galaxy — tens of thousands of additive-blended GPU points spiraling around a bright core, their orbits solved entirely in the vertex shader (from gl_VertexID), so the whole cloud draws in one call. Rendered as a single self-contained index.html. Use when the brief asks for a "particle field", "particle galaxy", "point cloud", "instanced points", "starfield", "GPU particles", or a swirling generative point system. OpenDesign serves this in powered-preview mode so the GPU stack actually runs. triggers:

• "particle"
• "particles"
• "particle galaxy"
• "point cloud"
• "instanced points"
• "starfield"
• "gpu particles"
• "粒子"
• "粒子星系" 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]

---

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.