Partikel-Galaxie als Shader-Design

Drei Spiralarme, ein Punkt-Draw

Particle Galaxy ist ein offizielles OpenDesign-Beispiel, das auf einer dunklen, nahezu leeren Canvas und einem großen Feld schwacher Partikel beruht. Die Überschrift „Fifty thousand points, one draw call.“ macht die technische Prämisse zum Teil der visuellen Identität, statt sie hinter Oberflächenelementen zu verstecken.

Das Partikelfeld und der fest platzierte Titel unten links teilen sich einen Viewport; die Überschrift ist kein separater Abschnitt unterhalb des sichtbaren Bereichs. Schwache grüne, blaue und helle Punkte lassen breite dunkle Lücken zwischen den drei Armen. Der visuelle Kompromiss ist klar: Das zurückhaltende Feld wirkt neben der hellen Schrift ruhig, doch der geringe Kontrast verlangt einen genauen Blick auf das Bild in voller Größe.

Wo dieses Design passt

Dieses Design eignet sich für eine Creative-Coding-Landingszene, eine interaktive Technologiepräsentation oder eine künstlerisch geleitete WebGL-Studie. Es wirkt am stärksten, wenn das Visuelle selbst das Thema ist und begleitender Text kurz bleiben kann.

Das Fehlen statischer Bedienelemente hält die Aufmerksamkeit auf dem sich verändernden Partikelfeld. Diese Zurückhaltung schränkt auch die Auffindbarkeit ein: Das gelieferte Markup zeigt keine vorgesehenen Steuerelemente, das Design kommuniziert also über Bewegung, Typografie und den kompakten Statistikblock statt über explizite Interaktionshinweise.

Wie die Komposition funktioniert

Der Block oben rechts zeigt 50,000 POINTS, 1 DRAW CALL und eine wechselnde FPS-Schätzung. Der Vertex-Shader leitet die Punktpositionen aus gl_VertexID ab, verteilt sie auf drei Arme und variiert ihre Winkelgeschwindigkeit, sodass innere Punkte schneller rotieren. Eine feste Neigung und eine langsam wechselnde Gesamtrotation prägen die Perspektive der Scheibe. Weiche Punkt-Sprites und additives Blending verleihen den grünen, cyanfarbenen und hellen Partikeln ihr Leuchten.

Die Statistik nutzt große weiße Ziffern und kleinere, weit gesetzte Labels, während das Artwork deutlich kontrastärmere grüne, blaue und helle Partikel verwendet. Diese Trennung macht die Metadaten gut erfassbar, ohne mit der Galaxie zu konkurrieren. Es entsteht auch ein Wahrnehmungskompromiss: Der Leistungsblock ist sofort lesbar, während die Partikelarme längeres Hinsehen und passenden Display-Kontrast erfordern.

Die Aufnahmen zeigen unterschiedliche angezeigte FPS-Werte bei gleichbleibender Punktzahl und gleichen Draw-Call-Labels. Diese Schwankung lässt das FPS-Feld als wechselnden lokalen Anzeigezustand erscheinen, nicht als stabile Aussage über die Leistung auf verschiedenen Geräten.

Funktionsgrenzen

Die WebGL2-Quelle definiert N = 50,000 und ruft gl.drawArrays mit POINTS einmal pro gerendertem Frame auf. Die Partikelpositionen werden im Vertex-Shader berechnet, nicht über einen CPU-Positionspuffer aktualisiert. Der Haupt-Thread übernimmt weiterhin Setup, Timing-Uniforms, Größenanpassung und Zeichnen. Es gibt keine Zeiger-, Tastatur-, Kamerasteuerungs- oder Parametersteuerung. Es handelt sich um eine prozedurale, galaxieartige Visualisierung, nicht um eine wissenschaftliche Gravitationssimulation.

Die Kommentare im Quellcode nennen 60 fps, doch einzelne Standbilder und der lokale FPS-Zähler belegen keine garantierte Leistung. Sie beweisen auch weder einen Produktiveinsatz noch angebundene Dienste oder einen historischen Entstehungsprozess. Punkt- und Draw-Call-Anzahl sind Codefakten; der Bildratenwert ist eine umgebungsabhängige Beobachtung.

Was die Zähler beschreiben

Die Anzeige der Punktanzahl stammt aus dem konfigurierten Wert N, und das Draw-Call-Label entspricht dem einzelnen POINTS-Draw in der Render-Schleife. Der FPS-Wert schätzt die requestAnimationFrame-Taktung über Fenster von etwa einer halben Sekunde. Werden diese Bedeutungen getrennt gehalten, bleibt nützlicher technischer Kontext erhalten, ohne das Artwork zu einem unbelegten Benchmark zu machen.