Three.jsユーザー注目！ 高度な3D Gaussian Splattingレンダラー Spark が登場！
引用元：https://news.ycombinator.com/item?id=44249565
A-Frameの共同制作者で、Web 3Dを長くやってるよ！新しい技術はワクワクするね！SparkはGaussian splatをTHREE.jsに簡単に組み込めるオープンソースライブラリで、友達と作ったんだ。みんなに使ってもらって、次にどんな機能が欲しいか聞きたいな。https://aframe.io/
デモすごいね！古いiPhoneでもちゃんと動いたよ。3D詳しくない素人なんだけど、「Gaussian Splatting」が何かGitHubとかに説明あると嬉しいな。Wikipediaの説明だけでも、どういうのに使えるか想像できてワクワクするよ！高性能な煙とか作れるの？いいね！
ありがとう。うん、FAQは絶対に追加しないとね。
フードスキャンデモ（”Interactivity”の例）すごすぎ！特にMel’s Steak Sandwichのパンの穴の表現とか！内蔵グラフィックのノートPCでも、あのクオリティでパフォーマンス良いのは驚きだよ。この技術って今、主にどんなとこで使われてるの？
ハンドヘルドとかドローンで色々なものをスキャンしてる人たちのコミュニティがあるんだよ。Tipatatさんがフードスキャンをデモに使わせてくれたんだ。kotohibiさんの花のscanも良い感じだよ。https://superspl.at/user?id=kotohibi
へー、自分で作るにはどんなデバイスがいるの？
フードスキャンはPixel phoneで撮った写真で、postshot(https://www.jawset.com/)で処理してsplatにしてるんだよ。
興味があるんだけど、こうやって作ったsplatって、どれくらい寸法が正確なの？測ったりできるのかな？
全然正確じゃないよ。物理的な測定（Lidarとか、写ってる物の実際のサイズが分かってる場合）と組み合わせないとダメなんだ。写ってる車とか木とか、よくある物からサイズを推定するAIを使うと面白いかもね。
最先端ってわけじゃないと思うけど、”scaniverse”っていうアプリは、スマホを物の周りで1分くらいかざすだけで、すごく良いsplatを作れるんだよ。
うん、Splatを生成できるスマホアプリはいくつかあるよ。Luma 3D captureとかね。
それに、あの詳細度なのに転送サイズがそんな悪くないんだよね、80MBくらいだし。（皮肉じゃなくて、ホントすごいわ。）
そうだね。Clams and CaviarとかPad Thaiみたいな個別のスキャンだと、2MB以下のものもあるよ。
これもいいね。BabylonJSもGaussian Splatのサポートがしっかりしてるよ：
https://doc.babylonjs.com/features/featuresDeepDive/mesh/gau…
BabylonJSとOPのAframe（[1]）はライセンスとかGitHubスター数は似てるけど、Aframeは新しい感じでもっとゲームとかVR寄りみたいだね。
Babylon、Aframe、Three.js、PlayCanvas（[2]）を使ったことある人、どう違うか教えて？
俺の理解だと、PlayCanvasが一番成熟してて高機能・高性能だけど商用？Babylonが高機能な3Dエンジンで、Three.jsは結構素の状態って感じかな。アニメーションとかテクスチャとか良いものはあるけど、基本的には自分でキットを組み立てる感じ。
どれかで良い経験（または悪い経験）ある？
OP、デモは超安定してていいね！Aframeのアピールポイントは？
“gaussian splat”の未来はどうなると思う？可視化とか“デジタルツイン”（産業用途）以外にも使える？近い将来、編集したりアニメーションつけたりできるようになる？言い換えれば、いつ（または）クリエイティブとかゲーム分野で使えるようになる？
[1] https://github.com/aframevr/aframe
[2] https://playcanvas.com/
A-FrameはTHREE.jsの上に構築されたエンティティコンポーネントシステムで、DOMをシーングラフの宣言的なレイヤーとして使うんだ。Web開発者が慣れてる標準的なAPIやツールで操作できるよ。最初はWeb開発者を3Dに引き込むのが目標だったけど、それ以上の成功を収めたんだ。参入障壁が超低い（下のhello world参照）のに機能性を犠牲にしてないから、プログラミングや3Dを学ぶ人たち（たくさんの学校や大学のカリキュラムの一部になってる）にすごく人気になったし、先進的なシナリオでも使われてるよ（moonrider.xyzは月間10万MAUくらい（ピーク時は30万MAU）で、これまでに最も人気のあるWebXRコンテンツはA-Frameで作られてる）。
Sparkの目標の一つは、3D Gaussian Splattingの応用を探ることなんだ。まだ全部の答えは持ってないけど、すでに説得力のあるユースケースがどんどん出てきてるね。例えばフォトグラメトリやスキャンで、スプラットは細かいディテールを魅力的かつ比較的小さく表現できる（デモのインタラクティビティを見て：https://sparkjs.dev/examples/interactivity/index.html）。ビデオキャプチャのすごい例もあるし（https://www.4dv.ai/）。圧縮、ストリーミング、リライティング、生成モデル、LODとか、もっと良くなって新しい応用が出てくるのが楽しみだよ…
A-Frame hello worldhtml<br> ＜html＞<br> ＜head＞<br> ＜script src=”https://aframe.io/releases/1.7.1/aframe.min.js”＞＜/script＞<br> ＜/head＞<br> ＜body＞<br> ＜a-scene＞<br> ＜a-box position=”-1 0.5 -3” rotation=”0 45 0” color=”#4CC3D9”＞＜/a-box＞<br> ＜/a-scene＞<br> ＜/body＞<br>＜/html＞
PlayCanvasが商用って言うのは、ちょっと誤解を招くかな。PlayCanvas Engine（Three.jsやBabylon.jsみたいなもの）は無料のオープンソース（MIT）だよ。クールな3DGS技術とかはEngineにあるんだ。Engineをラップして宣言的なインターフェースを使いたい人向けのフレームワークが2つあって、PlayCanvas Web ComponentsとPlayCanvas React。これもどっちも無料のオープンソース（MIT）だよ。PlayCanvas Editor（ブラウザベースのUnityみたいなやつ）だけが、プライベートプロジェクトを作りたい人向けの有料プランがあるんだ。
PlayCanvas Engine: https://github.com/playcanvas/engine
PlayCanvas Web Components: https://github.com/playcanvas/web-components
PlayCanvas React: https://github.com/playcanvas/react
BabylonJSでテストしたけど、互換性のある機能はブラウザに依存する部分があるね。
良い点：1. Blenderプラグインでベイク済みメッシュアニメーションをストリームアセットとしてエクスポートできるのはクール。2. プロシージャルテクスチャとディスプレイスメントマップで、それっぽいゲーム内オーシャン/水が作れる（調整は必要）。3. 遠景オブジェクトに2Dスプライトを簡単に入れ替えられる（Paper Marioみたいに）。
悪い点：1. GPU VRAMを他のエンジンより速く消費する（ダイナミックペイントとかエイリアス複製するとすぐ肥大化）。2. JSはCPUサイクル食うけど、Physics/CollisionにはWASMサポートがあって悪くない。3. 全リソースがエンドユーザーに公開されちゃう（単純なチーター/クローナーを想定）。
醜い点：1. 90%のデバイスでモバイルGPUサポートがパッチワーク状態。2. ベイク済みライティングは期待値次第（GPU煙VFXに色付けてボリューム散乱を誤魔化した）。3. ブラウザゲームは、ブラウザメモリの無駄遣いとセキュリティサンドボックスの問題（ブラウザゲームでオーディオ同期はずっとダメ）を合わせた最悪な状態。
個人的な感想だけど、サーバーホスト型のトランザクションゲーム（カードゲームとかボードゲームとかは合うかも）にしか勧めないかな。そうでなく、パフォーマンスが良くて見た目も悪くないものが欲しいなら、Unreal Engineを使って、効率的なシェーダーテクニックを極めた人を雇うのが一番だよ。=3
個人的にはBabylonJSを5年使ってるけど、マジ大好きだよ。プログラミングしやすいし（今までで一番キレイなAPI！）、3Dランタイムも超軽いから、Androidスマホでもデモがちゃんと動くんだ。
Webブラウザは余計なオーバーヘッドが多くて、四半期ごとのポリシー変更に振り回されるんだよね。ほとんどのiOSデバイスはApple独自のJavaScript VMを使わされるし、BabylonとかもAppleやGoogleに機能制限（NERF’d）されたりするんだ。Appleはビジネス上の都合、Googleはデバイスのばらつきが原因だね。Babylonは良いとこも多いけど、エンドユーザーへのデプロイの制限は認めざるを得ないよ。Mozilla、Apple、Microsoftのアップデートごとにパッチ当てなきゃいけないなんてザラだし。プラットフォーム固有のコーデック、メディア同期、インターフェース周りのややこしさに影響されないものをデプロイするのは大変なんだ。これってUnityとかGoDot、Unrealだと全然問題にならないのにね。App Storeはいつも取り分を欲しがって、都合の良い言い訳を見つけてはポリシーを変えようとするし。モバイルでやるなら、これは入場料みたいなもんだね…YMMV =3
僕の趣味のWebアプリプロジェクトの一部にwavetableを使いたいんだけど、他の遅延に敏感なコンポーネントが影響受けないように、ブラウザに負担をかけたくないんだ。wavetableの例はこれらだよ。
https://audiolabs-erlangen.de/media/pages/resources/MIR/2024…
https://images.squarespace-cdn.com/content/v1/5ee5aa63c3a410…
Three.jsでサクッと試作したんだけど、僕は3DもWeb開発も素人だから、何かおすすめのJS／TSパッケージとか、アドバイスがあったら嬉しいな。
個人的には、DSPのコードをVMの中でやるのはおすすめしないな。固定レート（16bit 44.1kHz stereoとか）で、ロスレス非圧縮のコーデックを使うといいよ（GPU／ハードウェアコーデックやサウンドカード固有の癖を避けられる）。それと、オーディオをGPUの24fps＋のアニメーションと同期させようとしないこと（https://en.wikipedia.org/wiki/Globally_asynchronous_locally_… ）。10Hzくらいでノンブロッキングのfifoストリームコピーをポーリングして、表示を「ごまかす」方が良いかも。wasmでバッファを静的に確保して、ソフトウェアミキサーで単一の出力ストリームに混ぜてローカル再生するのがいいよ（https://en.wikipedia.org/wiki/Clock_domain_crossing ）。GCが邪魔しないようにね。GCは困りものだけど、wasmなら現代のCPUでI／O転送を十分に速くできるはず。頑張ってね =3
リポジトリリンク、こっちの方がもっと分かりやすいかも → https://github.com/sparkjsdev/spark
すごくすごくクールだね。今のパフォーマンスボトルネックについて何か分かってる？特に動的なシーンについて。粒子シミュレーションのデモは苦戦してるみたいだけど、カメラを回転させると劇的に改善するから、静的な背景の方が意外と重いのかな。ボトルネックとは対照的に、プロシージャルなSierpinski pyramidは素晴らしい出来だね。
シーン内のスプラットの数と分布がパフォーマンスに影響するんだ。君の場合、おそらくスプラットが少ない方向にカメラを向けたんだと思うよ。一貫したパフォーマンスを実現するためには、まだやることがたくさんあるね。次はLODシステムを検討する予定だよ。
個人的には、Gaussian Splattingがデモ以上のものになるか、かなり懐疑的だよ。ファイルが大きすぎるんだ。ステーキサンドイッチなんて12MBもあるし（あくまで一例だけど）。去年のSiggraphでも、Gaussian Splattingを使ったMatterportのポートみたいなのがあったんだけど、2LDKの部屋を見るのに1.5GBストリーミングが必要だったんだよ。クールなデモではあるけどね。
ありがとう！12MBのステーキサンドイッチは、たくさんある例の中でも一番大きいやつなんだ。残りは10MB以下だし、その中でも1〜3MBでかなり魅力的なものがいくつかあるよ（例えば、Iberico Sandwich 1MB、Clams and Caviar 1.8MBとか）。SOGSみたいな、もっと洗練された圧縮方法も出てきてるんだ。これは30MBもあるよ！→ https://vincentwoo.com/3d/sutro_tower/
このファイルサイズのでかさって、ハードな物体を表現するのにSplatsがいっぱいいるから？Gaussianってエッジがないから、Splatsって概念的に問題あるんじゃない？みんな3σとかでカットしてるけど、実際の物にはハードエッジがあるじゃん。1σでカットしてハードエッジの楕円みたいにしたらどうかな？ぼやけたSplatsたくさんより、ハードエッジの楕円少ない方がうまくいくんじゃない？
面白いアイデアだね！SparkのmaxStdDevパラメータで試せるよ。ハードで平らな人工物には3DGSは確かに合わないと思う。でも、毛皮とか葉っぱとか、有機的なリアルなものには向いてるよ。Polygonよりずっとフォトリアルに、ファイルサイズも小さくできる。モバイルでリアルタイムで動くのにみんな驚いたんだ。
Sparkなら両方使えるのがいい！Scanした3DGSの世界にハードエッジのPolygon Modelも混ぜられるよ。
なるほど、説明ありがとう！それぞれの得意なところがよく分かったよ。生のScanデータから3DGSを作るのって結構複雑そうだね。Algorithmはシンプルで標準なの？それとも、結構調整が必要？ハードエッジな楕円に対応させるのも大変そうだし、楕円とふわふわSplatsを混ぜて出力するのはもっと大変そう。でも、それができたら表現力めっちゃ上がりそうだね。
もっとコメントを表示（1）
今は無料で簡単に作れるツールがいっぱいあるよ！PostshotとかBrushを見てみて。スマホで動画撮ってPostshotに入れるだけで、数分後にはSparkで使えるフォトリアルな3DGS Modelができちゃう！3DGSは研究中だけど、基本はもう標準化されてきてるよ。
最近、Triangle Splattingっていう面白い研究発表とCodeが出たよ。これ興味あるかもね！見てみて！→ https://trianglesplatting.github.io/
そのLinkありがとう！めっちゃ面白かったよ。
SOGSっていう圧縮技術はうまくいくよ。100万個のGaussianとSpherical Harmonicsで約14MBにできるんだ。PlayCanvasのBlogにいい記事があるよ！→ https://blog.playcanvas.com/playcanvas-adopts-sogs-for-20x-3…
ファイルサイズが大きいのは、だいたいSpherical Harmonicsの値を保存するためだよ。これは解決できる問題だよ。
いい仕事だね！でも、俺のノートPCのFirefoxでNvidia RTX A3000 GPUだとパフォーマンス結構悪いな。Shaderコアいっぱいで熱くなるくらいなのに。
特にどのDemoか、例でかな？
スマホで草とか茂みとか土とかのGaussian Splatsをキャプチャして、1メートル四方の地面のパッチや、茂みがある場所の1メートル立方体を抜き出せる？
それで、草のブロックを繰り返し置いて、たまに土や茂みを配置した”Minecraftっぽい”世界を作れるかな？
何千ものブロックをレンダリングするには、かなり強力なハードウェアが必要になりそうだね。
そういうプロトタイプは間違いなく作れるよ。見てみたいな、すごくクールになりそう。
これめっちゃクールじゃん！ウェブブラウザからウェブページを開いたらVRで動くの？もしそうなら、さらにヤバいね！
うん、VRで動くよ！近いうちにデモを公開する予定だよ。
Sparkの開発中に作ったWebXRデモがあるんだ。Quest 3かVision Proで3DGSが動くのを見られるよ。
https://lofiworlds.ai
ハンドトラッキングを有効にすると、Gaussian splatsを“触る”ことができるから、ぜひ試してみてね（手首をタップするとスポットライトハンドモードを切り替えられるよ）。
ちょっと名前がかぶりすぎてるね。Apache Spark、SPARK (Ada)、sparklines、SPARQLが既にあるし。
SPARCも忘れないでね。https://en.wikipedia.org/wiki/SPARC
PartCADはCADモデルをThree.jsにエクスポートできるよ。
build123dやcadqueryモデル向けのOCP CAD viewer拡張機能も、例えばThree.jsで作られてるんだ。
https://github.com/bernhard-42/vscode-ocp-cad-viewer
PartCADには3Dパーツのライブラリがあって、別のレンダラーをテストするのに役立つかもね。
OCP CAD viewerは、Three.jsで作られてるから、オプションでこのGaussian splattingレンダラーを使うこともできるかも。
すごいね！A-FrameとかGoogleの＜model-viewer＞みたいなWeb Components APIになる予定ある？
https://modelviewer.dev/
A-Frame対応はすぐだよ！
これ見たかったな〜！iPhone 16で表示ブロックされちゃったんだ。
証明書エラーか、ブロックされたカテゴリって出てるよ。悲しい…。
あれ？変だな。俺のiPhoneでは問題ないよ。
Safari以外のブラウザ使ってる？何か特別な設定してる？
フロントページのインタラクティブデモ、Pixel 7でめちゃくちゃスムーズに動いてヤバかった！
レンダリングってどうやってるの？インスタンスをソート（基数ソート？）してる？ソートは複数フレームで分割？それともビンソート？パフォーマンスには満足？
そうだよ、Sparkはインスタンス化されたクアッドを各ガウススプラットに合わせてレンダリングしてる。
ソートはね、1) GPUで全スプラットの距離計算、2) float16sとしてCPUに読み戻し、3) 1パスバケットソートで背面から前面への順序を得るって感じ。
新しいデバイスならほぼ毎フレーム、1フレーム遅延くらいでWeb Workerで並列実行できるから、ソート自体の性能影響は最小限。
だからSparkは、各スプラットが毎フレーム個別に動くフルダイナミック3DGSもいけるんだ！
古いAndroidだと数フレーム遅延することもあるけど、それも並列だから全体のレンダリングには影響ないよ。
メモリ帯域幅とか共有メモリが増えれば、ソートはほとんど解決済みの問題になると思うな。
1パスバケットソートって言うけど、バケットもソートしてるんだよね？
俺はGPUでスプラットの基数ソートを毎フレーム実装したんだけど、まだ性能に納得できてないんだ。基数ソート（＋プレフィックススキャン）って複雑で専用のコンピュートシェーダーがいっぱい必要でさ…調整に戻らないと。
float16sへの切り替えも考えてるけど、100万以上のスプラットだと半精度で精度が足りなくなるかもって躊躇してるんだ。
float16sは意図的にソート精度を速度のために犠牲にしてるんだ。
Z方向の範囲が大きいシーンだとZファイティングが多くなるだろうから、最高精度を目指すならおすすめしないかな！
でも将来的には高精度用に2パスソート（基数が大きい／バケット数が多い基数ソートみたいな）を追加する可能性は高いよ（ユーザーが選べるように）。
でもCPUでソートを実装するのはGPUよりずっとシンプルだよ。
GPUからCPUへの読み戻しと最低1フレームの遅延（ほとんど知覚できないけど）を許容するなら可能性が広がるね。
halfs（float16s）の代わりにwords（16bit整数）を使うの検討してみたら？
そうすれば、選んだ範囲で65kの全精度を使えるよ（32bit floatをwordsに再マッピングすることで）。
毎フレーム、または遅延させて調整することも可能かも。
うん、そうだね、float16だと解像度は0x7C00バケットだけになっちゃうんだよね。対数エンコーディングにして2^16バケットに広げれば、範囲を2倍にできるよ！
他のレンダラーがやってるみたいに、フレームごとに範囲を動的に調整することもできるね。
いいね！半透明な表面の例はある？例えばガラスの球体に入ったおもちゃのクリスマスツリーみたいな、簡単な反射や屈折が計算されたやつとか？
今すぐには思いつかないな。https://superspl.at/ でみんながスキャンしたやつを見てみてよ！そこに載ってるものはSparkでも全部レンダリングできるはずだから。
https://superspl.at/view?id=8c35f06d はすごく綺麗にレンダリングされたよ。このSpark、びっくりするくらい速いね！650MBのシーンが120 fpsでレンダリングできたんだ。
もっとコメントを表示（2）
なんだか方向性が二極化してるみたいだね。極端な写実主義と、極端にミニマルなピクセルアート。僕は後者のほうが好きなんだけど、君のプロジェクトは写実主義の分野ですごく重要そうだね。
ありがとう！Sparkは両方に対応できるんだよ！あんまり探求されてない分野なんだけど、Blenderなんかで作った“伝統的な”アセットをsplatsに変換するっていう使い方もあるんだ。高周波ディテールみたいな一部のシナリオでは、視覚的に良い結果が出るよ。ホームページのカルーセルにある毛皮っぽいロゴを見てみて。
これはすごいね、ありがとう！R3Fで頂点シェーダーやフラグメントシェーダーをいじるのに何時間も費やして、結局諦めたんだ。数学がただただ面倒なんだよね。
R3F向けのテンプレートがあるから、役に立つかもね：https://github.com/sparkjsdev/spark-react-r3f
これと.objのレンダリングって何が違うの？Gaussian Splattingは別のフォーマットを作るの？
objは伝統的なジオメトリ（頂点、三角形）だよ。Gaussian Splatsは3D情報を表現する別の方法なんだ（単純化すると、ビュー依存の色を持つ楕円体の点群だよ）。
デモすごいね！これ絶対ピュアなJavaScriptだけじゃないでしょ。WebGPU使ってる？
WebGL APIはOpenGL ESがベースで、CPUで3Dロジック書くのが楽だった呼び出しはなくなったんだ。その分GPUで計算するように強制されるから、JavaScriptで動いててもあんまり関係ないんだよね。THREE.jsはその上に良い抽象化レイヤーを追加してる感じ。
SparkはJavaScriptで実行時に計算グラフを作って、CPUじゃなくてGPUでコンパイルして動かせるんだって！
https://sparkjs.dev/docs/dyno-overview/
WebGL2は最高のグラフィックAPIじゃないけど、JavaScriptでGPUの計算やレンダリングを使えるようにして、Webブラウザ経由でどんなデバイスでも動くようにできるのは、個人的にはかなりすごいと思うよ！
WebGL2だけだよ。
triangle splatsのサポートを拡張する予定はある？
確実に検討してるよ。まだ具体的な予定はないけどね。
めっちゃクール！ローンチおめでとう:))
動画スタイルの3D gaussian splatsにも対応する可能性ある？
うん、もうデモは動いてるよ。あの3D gaussian動画（4Dって呼ぶ人もいるけど）はすごく大きいから、どう配布して良い体験を提供できるか考えてるところなんだ。
聞いて嬉しい！で、これってどうやって記録してるの？まさか複数のカメラでたくさん動画撮ってシンクするの？って思ったんだけど。
今の4DGSはまさにその通りだよ！複数のカメラで同時に撮って、各瞬間を3DGSにするんだ。将来はカメラ1台でAI＼MLが3D Gaussianの動きを推定するようになるかもね！
やあ、@dmarcos！ローンチおめでとう！GitHub accelerator仲間のvinnieより。
ちょっと待って、これってWorld Labsが先週出したForge (https://forge.dev)の名前を変えたの？「友達と作ったやつ」なの？それともWorld LabsのCEOが言ってたみたいに「World Labsチームの成果をOSSで出すよ」なの？
https://x.com/drfeifei/status/1929617676810572234
そうだよ。World Labsの開発者の一人と協力して作ったんだ。新しいレンダリング技術を探求して、3D Gaussian Splattingをもっと広めるのが目的なの。製品とは関係ないよ。
他のレンダラー＼ツールと名前がかぶっちゃったから、名前を変えたんだよ。
