webgl-particle-galaxy

name: webgl-particle-galaxydescription: |  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.