[2026/10/23]

[Web Tool] NEBULA — 数十万の粒子を手で払える GPU の星雲。PC・スマホ・Quest 3 対応

概要

NEBULA は、数十万の粒子でできた星雲を、手で触って遊ぶ、ブラウザの中だけで動くアプリです。粒子の計算は、すべて GPU の中で行います。払うと散って、離すと、ゆっくり元の形に戻ります。

PC ではマウスで、スマートフォンでは指で、Quest 3 ではコントローラーや手で触れます。ふだんの画面は、少なくしています。困ったときは、F1 キーを押すか、右下の HELP を押すと、使い方が出ます。

5つの形: 銀河、球雲、環、文字、渦
4つの配色: 星雲、WIRED、炎、氷
触り方: 払う、引き寄せる、渦を作る、中心から弾けさせる（バースト）
粒子数: 約 1.6 万個〜約 105 万個を、9 段階で選べます
自動ベンチ: 粒子数を段階的に上げて、FPS を測ります
VR / MR: Quest 3 のブラウザから入れます

開く

インストールは不要です。下のリンクから、そのまま開けます。

NEBULA

lain-lab.com の、数十万の粒子を手で払える GPU の星雲。PC・スマートフォン・Quest 3 で動きます。

lain-lab.com

GALLERYページ

GALLERYページからも開けます。

スクリーンショット

銀河（起動画面）

左下に、形と配色の切り替えだけが並びます。

形と配色の切り替え

VR 内の自動ベンチ

動画

音は入っていません。左が PC、右が Quest 3 の VR の様子です。

アプリの特徴

通信しません: 粒子の計算も描画も、ブラウザの中だけです。
CPU を使わずに、GPU だけで粒子を動かします: 数十万個を、毎フレーム更新します。Quest 3 では、約 26 万個（512×512）で、72Hz を保てました。
ふだんの画面は、シンプル: 左下の ‹ GALAXY › [COLOR] と、右下の HELP だけです。細かい説明は、F1 のヘルプに入れています。
同じ操作が、キー、画面のボタン、VR のボタンのどれでもできます
重ければ、粒子数を下げられます: 自動ベンチで、動く数を測れます。

まず試す

PC

NEBULA を開きます。
マウスを動かします。粒子が、払われて散ります。
左ボタンを押し続けます。粒子が、カーソルの周りに集まって、輪になります。
Space を押します。中心から、粒子が弾けます。
左下の › を押します（または、キーの 1〜5）。形が変わります。
[COLOR]（または T）を押します。配色が変わります。

スマートフォン

NEBULA を開きます。
指で、画面をなぞります。粒子が、払われて散ります。
左下の [PULL] を押して、オンにします。なぞった所へ、粒子が集まります。
2 本指で、ズームと回転ができます。

Quest 3

Quest のブラウザで、NEBULA を開きます。
画面の下に出る ENTER VR（または ENTER MR）を押します。
コントローラーの先端、または手で、粒子を払います。

画面の見方

場所	内容
左下	`‹ 形の名前 ›` で形を切り替え、`[COLOR]` で配色を切り替えます。スマートフォンでは、`[PULL]` と `[BURST]` も出ます。ふだんは薄く、触れると明るくなります
右下	`HELP`。押すと、使い方が出ます（`F1` でも開きます）
左上	`NEBULA` の表示と、形や配色を変えたときの名前
左下の上	`H` で出る、FPS などの計測表示
下の中央	`ENTER VR` / `ENTER MR`（対応するブラウザだけ）

使い方

1. PC（マウスとキー）

操作	内容
マウスを動かす	粒子を払います
左ボタンを押し続ける	引き寄せます（カーソルの周りを回る輪になります）
右ボタンのドラッグ	視点を回します
ホイール	ズームします
`1`〜`5`	形: 銀河 / 球雲 / 環 / 文字 / 渦
`T`	配色を切り替えます
`[` `]`	粒子数を減らす / 増やす
`Space`	バーストします（中心から弾けます）
`H`	FPS などの計測表示
`B` / `R`	自動ベンチを開始・中止 / 結果を表示
`G`	調整パネル
`F1` / `Esc`	ヘルプを開く / 閉じる

マウスは、画面に向かって、星雲の中心を通る平面の上の位置が、力の中心になります。

2. スマートフォン・タブレット（タッチ）

操作	内容
1 本指でなぞる	粒子を払います
`[PULL]` をオンにして、なぞる	粒子を引き寄せます
`[BURST]`	バーストします
2 本指	ズームと回転

指は、ホバー（触れずに近づける）ができないので、引き寄せは、[PULL] のオン・オフで切り替えます。

3. Quest 3（VR / MR）

操作	内容
コントローラーの先端	粒子を払います
トリガー	引き寄せます
グリップ	渦を作ります
手の指先	粒子を払います
人差し指と親指のピンチ	引き寄せます
中指と親指のピンチ	渦を作ります
手前の光る玉に触れる	形 / 配色 / 品質 / 計測 / ベンチを切り替えます

コントローラーのボタンは、次のとおりです。

ボタン	内容
右 A	形を切り替えます
右 B	配色を切り替えます
左 X	品質（粒子数）を切り替えます
左 Y	計測表示を出します
右スティックの押し込み	バーストします
左スティックの押し込み	自動ベンチを開始・中止します

VR は、最初に、軽い設定（約 6.5 万個）で始まります。計測表示を見ながら、品質を上げてください。MR では、背景が、パススルーの映像になります。

手の操作（ハンドトラッキング）、中指のピンチ、MR の見た目は、実機で確認できていません。 動かなかったり、触り心地が合わなかったりする場合があります。

4. 形と配色

形	内容
銀河（GALAXY）	中心の丸い塊と、2 本の腕
球雲（SPHERE）	薄い殻と、内部のもや
環（RING）	ねじれた、平たいリボン
文字（TEXT）	文字の形。URL で、好きな文字に変えられます
渦（VORTEX）	アトラクタ（Aizawa）の流れに乗って、粒子が渦を巻きます

配色は、星雲、WIRED、炎、氷の 4 つです。

形、配色、粒子数、調整パネルの値は、このブラウザに保存されます。次に開いたときも、同じ状態で始まります。

5. 粒子数と、重いとき

[ ]（VR は左 X）で、粒子数を変えます。辺の長さを、128、192、256、320、384、512、640、768、1024 の 9 段階で選べます。粒子数は、辺の 2 乗です。

辺	粒子数（約）
128	1.6 万
256	6.6 万
512	26 万
768	59 万
1024	105 万

PC の初期値は、512（約 26 万個）です。動きがカクカクするときは、[ で、粒子数を下げてください。H で出る計測表示で、FPS を見ながら調整できます。

6. 自動ベンチ

「この端末で、何個まで動くか」を、自動で測ります。

B キーを押します（VR は、左スティックの押し込みか、光る玉）。
粒子数を、128、256、384、512、768、1024 と上げながら、各段階で約 6 秒ずつ測ります。
終わると、段階ごとの FPS と、判定の表が出ます。

判定は、基準の FPS に対する割合で、++（97% 以上）、+（85% 以上）、~（65% 以上）、-- です。基準は、VR ではそのときの表示のレート、PC では、最も良かった段階です。FPS が、基準の半分を下回ったら、そこで打ち切ります。

結果は、「コピー」で、Markdown の表として、コピーできます。R キーで、前回の結果を、もう一度出せます。測っている間は、粒子数を変えられません。

7. 調整パネル

G キーで、調整パネルが開きます。値は、このブラウザに保存されます。

項目	内容
粒の大きさ	粒 1 つの大きさ
明るさ	全体の明るさ
元の形に戻る力	払われたあと、元の形に戻る強さ
減衰	大きいほど、早く止まります
揺らぎ	粒子の自然な揺れ
払う力 / 引き寄せる力 / 渦の力	それぞれの強さ
力場の半径	触れたときに、粒子が反応する範囲

「リセット」で、初期値に戻ります。「URL をコピー」で、今の値が入った URL を、ほかの端末へ持ち出せます。

8. URL パラメータ

URL の最後に付けると、起動の設定を変えられます。

パラメータ	内容
`?n=512`	PC の粒子数の辺（粒子数は辺の 2 乗）
`?nx=256`	VR の粒子数の辺
`?text=好きな文字`	「文字」の形で表示する文字
`?demo=1`	触らなくても、自動で払って動かします
`?half=1`	半精度で計算します（古い GPU 向け）
`?fb=0.8`	VR の解像度の倍率
`?foveation=0.5`	VR の中心視野の最適化
`?t=size:0.006,spring:5`	調整値を指定します
`?bench=1`	開いた直後（VR は入った直後）に、自動ベンチを始めます
`?hz=90`	VR のフレームレートを要求します（Quest は 72 / 80 / 90 / 120）

対応していないもの

内容	扱い
数十万の粒子が、スマートフォンや古い PC で滑らかに動くこと	保証しません。粒子数を下げてください。粒子数を、自動で下げる機能は、入っていません
音	出ません
Quest 以外の VR 機器での動作	確認していません
実機のスマートフォン・タブレットでの動作	確認していません（画面の幅を狭めたテストと、タッチ操作の模擬だけです）
Safari、Firefox での動作	確認していません
ハンドトラッキング、中指ピンチの渦	Quest の実機では、確認していません
MR（パススルー）の見た目	確認していません
90Hz、120Hz	確認していません

注意事項

動作の確認は、PC の Chrome と、Quest 3 のコントローラーで行いました。ほかの環境では、確認していません。
粒子数を上げると、GPU に大きな負荷がかかります。端末が熱くなったり、バッテリーを多く使ったりします。
ブラウザの設定で、保存データを消すと、形・配色・粒子数・調整値は、初期の状態に戻ります。

よくある質問 (FAQ)

Q. 通信されますか。
A. されません。処理は、ブラウザの中だけです。保存するのは、形、配色、粒子数、調整値だけで、このブラウザの中にだけ残ります。

Q. 動きがカクカクします。
A. 粒子数が、端末に対して多い可能性があります。[ で下げてください。B キーの自動ベンチで、動く数を測れます。

Q. 画面が、真っ黒のままです。
A. GPU の計算に対応していないブラウザ、または、ハードウェアアクセラレーションが切れている可能性があります。画面の下に、赤い枠でエラーが出ていないか、確かめてください。出ていれば、その内容が、原因を知る手がかりです。?half=1 を付けて、開き直すのも、試してください。

Q. ENTER VR が、出てきません。
A. このボタンは、そのブラウザが、VR に対応しているときだけ出ます。Quest のブラウザで開いているか、確かめてください。WebXR は、https のページ（または自分の PC の localhost）でだけ、動きます。

Q. VR で、手で触れません。
A. 手の操作は、実機での確認が済んでいません。コントローラーを使うか、手前の光る玉で、形などを切り替えてください。Quest の設定で、ハンドトラッキングが、オンになっているかも、確かめてください。

Q. 粒子が、動かなくなりました。
A. 形を、いちど切り替えてみてください。それでも直らなければ、ページを、再読み込みしてください。

Q. 文字を変えたいです。
A. URL の最後に、?text=好きな文字 を付けて開いてください。形は、「文字」を選びます。

Q. 設定が、元に戻ります。
A. 調整パネルの「リセット」を押した場合は、初期値に戻ります。ブラウザの保存データを消した場合も、同じです。

Q. 左下の表示が、見づらいです。
A. ふだんは、映像を邪魔しないように、薄くしています。マウスを乗せる（スマートフォンでは、触れる）と、はっきり見えます。

技術記事

作り方（GPGPU の仕組み、5つの形、力場、VR 対応、自動ベンチ、詰まったこと）は、技術記事にまとめています。

[Astro] #189 GPUだけで数十万粒子を動かす NEBULA — マウスとQuest 3の手で払う星雲

数十万の粒子を GPU の中だけで動かし、マウス・タッチ・Quest 3 で払える星雲を、GPGPU の構成から、VR 対応、自動ベンチまで作った記録です。

lain-lab.com

更新履歴

バージョン	日付	内容
v1.0	2026/10/24	初回公開（5つの形、4つの配色、マウス・タッチ・Quest 3 の操作、粒子数の切り替え、自動ベンチ、調整パネル、F1 ヘルプ）

クレジット

描画と物理計算は、Three.js（r186）の、GPUComputationRenderer と OrbitControls を使っています（MIT ライセンス）
粒子の形、力場、シェーダー、自動ベンチ、画面は、自作です

NEBULA は、個人の制作物です。