Show HN: WebGLでリアルタイム3Dガウシアンスプラッティング

 (antimatter15.com)
4 ポイント 投稿者 GN⁺ 2023-09-12 | 1件のコメント | WhatsAppで共有
  • ブラウザで 3D Gaussian Splatシーン をそのまま開いて操作できるWebGLビューアで、実装コードはGitHubで公開されている
  • キーボード、マウス、トラックパッド、タッチ、ゲームパッドまで対応し、デスクトップとモバイル の入力環境を幅広くカバー
  • カメラ操作は移動、軌道回転、チルト、ロールに分かれており、入力デバイスごとに同じシーン探索を異なる方法で行える
  • 数字キーと -、+、p により、プリロード済みのカメラビュー切り替え、カメラの巡回、デフォルトアニメーションの再開が可能
  • .ply ファイルをドラッグ＆ドロップして .splat に変換し、cameras.json でカメラ設定を読み込める

WebGL 3D Gaussian Splat Viewer

  • WebGL 3D Gaussian Splat Viewer はKevin Kwokが制作した3D Gaussian Splatビューア
  • コードは Github で公開されている

入力デバイス別の操作

  • キーボード移動

    • 左右矢印: 左右移動
    • 上下矢印: 前後移動
    • Space: ジャンプ

  • カメラ角度

    • a / d: カメラを左右に回転
    • w / s: カメラを上下にチルト
    • q / e: カメラを反時計回り/時計回りにロール
    • i / k, j / l: 軌道回転

  • トラックパッド

    • スクロール: 上下左右の軌道回転
    • ピンチ: 前後移動
    • Ctrl + スクロール: 前後移動
    • Shift + スクロール: 上下移動または左右移動

  • マウス

    • クリック後にドラッグ: 軌道回転
    • 右クリック、または Ctrl/Cmd キーを押しながら上下にドラッグ: 移動

  • タッチ

    • 1本指: 軌道回転
    • 2本指ピンチ: 前後移動
    • 2本指回転: カメラを時計回り/反時計回りに回転
    • 2本指パン: 左右および上下移動

  • ゲームパッド

    • 接続されたゲームコントローラーがあれば動作

カメラとファイル処理

  • カメラビュー制御

    • 0-9: プリロード済みカメラビューのいずれかに切り替え
    • - または +: 読み込まれたカメラを巡回
    • p: デフォルトアニメーションを再開

  • ドラッグ＆ドロップ

    • .ply ファイル: .splat に変換
    • cameras.json: カメラを読み込み

関連記事

1件のコメント

 
GN⁺ 2023-09-12
Hacker News のコメント

  • 本当に素晴らしいが、操作方法が分かりにくい。
    一般的な WASD 移動とマウスによる視点回転ではなく、マウスドラッグで前後移動と特定地点の周囲の軌道回転を行い、A/D は左右移動、W/S は上下を見る動作になっている。
    操作一覧は README にある: https://github.com/antimatter15/splat#controls

    • 作者です。カメラ操作が使いにくくてすみません。より合理的な方式に変えるプルリクエストは喜んで受け付けます。
      もともとの意図は、方向キーだけで、その場で体の向きを変え、前後に歩くように移動できるようにすることでした。
    • N64 の FPS 操作、たとえば GoldenEye にかなり近い。
      方向キー/ジョイスティックで前後移動と左右回転という「主移動」を行い、WASD/C ボタンで左右移動と上下視点という「補助移動」を行う構造。
    • ちなみに、マウスだけを使う操作方式はかなり気に入った。
    • 正直に言うと、操作方法があまりに直感的でなくひどいので、レンダリングデモを鑑賞する前につまずいた。

  • 本当にすごい。自分も gaussian-splatting [0] を WebGPU に移植する作業をしている。
    これまで見た他の実装と同じく、この実装も透視投影で楕円体を投影するときに同じ間違いをしているようだ。まず 3D で共分散を計算してから 2D に投影する方式[1]だが、このアプローチは平行/正射影でしか正しくなく、透視投影に適用すると誤った結果になる。
    透視投影には追加の効果が 3 つある。視差による移動で投影された楕円の形が変わり、楕円体の回転が見かけの位置を変えて追加の平行移動を生むことがあり、円錐曲線は楕円だけでなく放物線・双曲線にもなり得る。
    最初の効果はこの行列[2]で手動補正しているようだが、後の 2 つの効果は、これまで見た実装では計算に入っていなかった。正しくやるには 3D 共分散を計算するのではなく、カメラ位置を頂点とする楕円体の境界円錐を求め、それをビュー平面と交差させる必要がある。その結果として得られる円錐曲線が、透視投影された楕円体の正確な輪郭になる。
    [0]: https://github.com/graphdeco-inria/gaussian-splatting
    [1]: https://github.com/antimatter15/splat/blob/3695c57e8828fedc2...
    [2]: https://github.com/antimatter15/splat/blob/3695c57e8828fedc2...

    • 一般に、ガウス分布はカメラ投影後にはもはや真のガウス分布ではない。ピンホールカメラの投影関数が z で割るため、非線形だからだ。
      ただし、ガウス分布が画像サイズに比べて小さければ、投影関数を線形化して近似できる。そのため Gaussian Splatting の論文では、式 5 のように投影関数のヤコビアンを使っている[0]。
      実際には、この近似は非常によく合う。3 つ目のリンクで言及されている行列がまさにそのヤコビアンであり、手動補正ではなく数学的に妥当なものだ。導出過程は [1] を参照。
      [0] https://repo-sam.inria.fr/fungraph/3d-gaussian-splatting/3d_...
      [1] https://math.stackexchange.com/a/4716514/43771
    • その通りだと思う。投影をデカルト座標での線形変換のように見なし、それでガウス分布を変換しているわけだ。
      別の見方をすれば、ガウス分布全体が固定された深度にあると仮定して投影を近似しているので、十分遠くにあれば機能しそうだ。
      ガウス分布の射影変換はかなり面倒そうだが、誰かがやっていそうではある。射影座標では可能に見えても、最後にデカルト座標へ投影する部分が厄介だ。
      ちなみに、輪郭だけを投影するのも間違い。全体の密度分布が変わり、それも輪郭に影響する。
    • gaussian splat 手法に詳しいわけではないが、本質的には頂点に内部データを持つ四角形メッシュではないかと思う。
      四角形の投影はすでに解決済みの問題だと思っていたが、単純な四角形の配列とどう違うのか、もう少し説明してもらえるだろうか？
    • フレームレートに影響を与えずに境界円錐の交差というアイデアを実装できるなら、WebGPU ではより滑らかになりそうだ。ただ、このような実装と同じ条件で比較した差を見ると興味深いだろう。

  • ズームアウトすると、本来存在しないはずの多角形のエッジがたくさん見える。
    滑らかな「塊」を描こうとしているのに、テクスチャ座標が少しずれているように見えるが、バグなのか、この手法の意図された部分なのか気になる。

    • 意図されたものです。
      基本的には準密な点群[1]で、点の代わりに、入力写真に合うよう色・角度・サイズが調整された塊がある構造です。そのため、特定の距離から見るように最適化されています。
      3D ベクタードローイングのように考えるとよいです。拡大しすぎたり一部を切り離したりすると、全体が少しおかしく見え始めます。
      [1]https://www.researchgate.net/publication/326621750/figure/fi...

  • これまで gaussian splatting は写真データに使われるものしか見たことがありません。
    他のグラフィックスデータにも使えるのでしょうか？ 言い換えると、ゲームに使われる可能性はありますか？

    • 状況によります。gaussian splatting のようなライトフィールド的なアプローチは、基本的には 3D 写真です。
      幾何的な位置と方向に応じた色だけを持ち、表面・材質・光の伝播一般、つまり発光・吸収・透過・反射・散乱といった概念はありません。言い換えると、事前計算された照明と静的なシーンしか扱えず、アニメーションは難しいということです。
      業界は、物理ベースレンダリング（PBR）やレイ／パストレーシングのように、より優れた動的ライティングを可能にする方式へ向かっているように見えます。
      また現時点では、空間効率が極端に低いです。従来のレンダリングエンジンなら数十 GB で済むシーンが、TB 単位になることもあります。ただし、さらに最適化が進めば改善する可能性はあります。
      例外的に gaussian splatting が面白くなり得るのは、プロシージャル／生成コンテンツ、場合によってはアニメーションまで含むコンテンツです。特に煙、火、雲、流れる水のように、現在はパーティクルシステムを使うボリューム効果にうまく合うかもしれません。
    • できない理由はありません。結局のところ、見栄えのする点群にすぎません。
      ボクセルの代わりにこれを基本エンジンとして使う、オープンワールドの Minecraft 風ゲームは容易に想像できます。

  • この手法はビデオにも動作するのでしょうか？
    INRIA の作業の README[1] を見ると、静的シーンごとにモデルを学習しているように見えますが、だとするとビデオは対象外なのでしょうか？
    [1] https://github.com/graphdeco-inria/gaussian-splatting

  • 今、何を見ているのでしょうか？

    • Gaussian splatting は、点の代わりに色付きの図形を使う点群を、格好よく呼んだ言い方です。
      昔からある方式ですが、点群に点が 100 万個あると、その 100 万個を芸術的に扱わなければならないため、あまり使われてきませんでした。
      3D の髪の毛に似ています。原理は単純で、髪の毛を 10 億本レンダリングすればよいのですが、実際に見栄えよく作るのは難しいのです。
      ここでは機械学習モデルに、四角形・円・三角形などの 100 万個の基本図形について、角度・色・形・大きさを調整させ、私たちが提供した写真のように見えるようにしています。
    • 基本的にはこの取り組みです: https://github.com/graphdeco-inria/gaussian-splatting — 3D シーンをレンダリングする、少し違ったアプローチです。

  • これは SIGGRAPH 2023 で Kerbl と Kopanas が提案した方法を使っているのでしょうか？
    https://repo-sam.inria.fr/fungraph/3d-gaussian-splatting/

    • その通りです。ただしこれは、最初に再構成を生成する最適化部分ではなく、splatting/レンダリング部分だけを実装したものです。

  • 本当にすごいです。点群も興味深いですが、これはずっと驚異的です。会社で使っている Lenovo ノート PC でも 60fps で動きます。

    • ミドルレンジのスマートフォンでも 36fps で動きます。予想外でした。
      ただし、特にカメラを動かすとアーティファクトがかなり見えます。

  • これを ThreeJS の中で動くようにできれば、Web 3D の歴史に足跡を残せそうです。

  • 3D ビューでこういうマウス操作は一度も経験したことがなかったので、しばらくかなり混乱しました。