パーティクルギャラクシー シェーダーデザイン

3本の渦状アームと1回のポイント描画

Particle Galaxyは、暗くほとんど空白のキャンバスと、淡いパーティクルの大きな集まりを中心にしたOpenDesign公式の例です。見出し「Fifty thousand points, one draw call.」は、技術的な前提をインターフェースの裏に隠さず、ビジュアルアイデンティティの一部にしています。

パーティクルフィールドと左下に固定されたタイトルは同じビューポートを共有しており、見出しはスクロールした先の別セクションではありません。淡い緑、青、薄い色の点が、3本のアームの間に広い暗がりを残します。トレードオフははっきりしています。抑えたフィールドは明るい文字の隣では静かに感じられますが、コントラストが低いため、フルサイズの画像をよく見る必要があります。

このデザインが向く場面

このデザインは、クリエイティブコーディングのランディングシーン、インタラクティブなテクノロジーショーケース、アートディレクションされたWebGLの習作に向いています。ビジュアルそのものが主役で、補足コピーを短く抑えられる場合に最も効果を発揮します。

静的なコントロールがないため、注意は変化するパーティクルフィールドに向かいます。一方で、この抑制は発見しやすさを制限します。提供されたマークアップには作者が用意したコントロールがなく、明示的な操作の手がかりではなく、動き、タイポグラフィ、コンパクトな統計ブロックで伝える設計です。

構成の仕組み

右上のブロックには、50,000 POINTS、1 DRAW CALL、変化するFPS推定値が表示されます。頂点シェーダーはgl_VertexIDから点の位置を求め、3本のアームに振り分け、角速度を変えて内側の点ほど速く回転させます。固定の傾きとゆっくり変化する全体の回転が、円盤の遠近感を形づくります。ソフトなポイントスプライトと加算合成が、緑、シアン、淡い色のパーティクルに輝きを与えます。

統計には大きな白い数字と、字間を空けた小さなラベルを使い、作品側にはずっとコントラストの低い緑、青、淡い色のパーティクルを使っています。この分離により、メタデータは銀河と競合せずに読み取れます。同時に知覚上のトレードオフも生じます。パフォーマンスのブロックはすぐに読める一方、パーティクルのアームはじっくり見る時間と、適切なディスプレイのコントラストを必要とします。

各キャプチャでは、点数と描画コールのラベルは同じまま、表示されるFPS値が異なります。この違いから、FPS欄はデバイスをまたいだ安定した性能の主張ではなく、変化するローカルの表示状態として読めます。

機能の範囲

WebGL2のソースはN = 50,000を定義し、描画フレームごとにPOINTSでgl.drawArraysを1回呼び出します。パーティクルの位置は、CPU側の位置バッファを更新するのではなく、頂点シェーダー内で計算されます。メインスレッドは引き続き、セットアップ、タイミング用ユニフォーム、リサイズ、描画を担当します。ポインター、キーボード、カメラ操作、パラメーターのコントロールはありません。これは銀河のように見えるプロシージャルなビジュアルであり、科学的な重力シミュレーションではありません。

ソースのコメントでは60fpsとされていますが、単独の静止キャプチャやローカルのFPSカウンターでは、性能が保証されるとは言えません。また、本番環境での展開、外部サービス連携、過去の生成プロセスを証明するものでもありません。点数と描画コール数はコード上の事実ですが、フレームレートの値は環境に依存する観測結果です。

カウンターが示すもの

点数の表示は設定されたN値に由来し、描画コールのラベルはレンダーループ内の1回のPOINTS描画と一致します。FPS値は、約半秒ごとの区間でrequestAnimationFrameの周期を推定したものです。これらの意味を分けておくことで、作品を根拠のないベンチマークにせず、有用な技術的文脈を保てます。