Particle Galaxy Shader Design

Three Spiral Arms, One Point Draw

Particle Galaxy is an official OpenDesign example centered on a dark, nearly empty canvas and a large field of faint particles. The authored heading, “Fifty thousand points, one draw call.”, makes the technical premise part of the visual identity rather than hiding it behind interface chrome.

The particle field and fixed lower-left title share one viewport; the headline is not a separate below-the-fold section. Faint green, blue, and pale points leave broad dark gaps between three arms. The visual tradeoff is clear: the restrained field feels quiet beside the bright type, but its low contrast asks for a close look at the full-size image.

Where This Design Fits

This design is suited to a creative-coding landing scene, an interactive technology showcase, or an art-directed WebGL study. Its value is strongest when the visual itself is the subject and supporting copy can remain short.

The absence of static controls keeps attention on the changing particle field. That restraint also limits discoverability: the supplied markup shows no authored controls, so the design communicates through motion, typography, and the compact statistics block rather than through explicit interaction affordances.

How The Composition Works

The upper-right block shows 50,000 POINTS, 1 DRAW CALL, and a changing FPS estimate. The vertex shader derives point positions from gl_VertexID, distributes them among three arms, and varies their angular speed so inner points rotate faster. A fixed tilt and slowly changing overall spin shape the disk's perspective. Soft point sprites and additive blending give the green, cyan, and pale particles their glow.

The statistics use large white numerals and smaller spaced labels, while the artwork uses much lower-contrast green, blue, and pale particles. This separation makes the metadata scannable without competing with the galaxy. It also creates a perceptual tradeoff: the performance block is immediately legible, while the particle arms require a longer look and suitable display contrast.

The captures show different displayed FPS values while retaining the same point count and draw-call labels. That variation makes the FPS field read as a changing local display state, not a stable claim about performance across devices.

Capability Boundary

The WebGL2 source defines N = 50,000 and calls gl.drawArrays with POINTS once per rendered frame. Particle positions are calculated in the vertex shader rather than updated through a CPU position buffer. The main thread still handles setup, timing uniforms, resizing, and drawing. There are no pointer, keyboard, camera-steering, or parameter controls. This is a procedural galaxy-like visual, not a scientific gravitational simulation.

The source comments claim 60fps, but isolated still captures and the local FPS counter do not establish guaranteed performance. They also do not prove production deployment, connected services, or a historical generation process. The point and draw-call counts are code facts; the frame-rate reading is an environment-dependent observation.

What the Counters Describe

The point-count display comes from the configured N value, and the draw-call label agrees with the single POINTS draw in the render loop. The FPS value estimates requestAnimationFrame cadence over roughly half-second windows. Keeping these meanings separate preserves useful technical context without turning the artwork into an unsupported benchmark.