gsplat.js

gsplat.jsはthree.jsと同様の機能に加え、3DガウススプラッティングもサポートしたオープンソースのJavaScriptライブラリです。基本的には3Dガウススプラッティングライブラリとして提供しているみたいです。

上記は動作サンプルの1つですが、メモリに問題なければ更にリアルな描写のサンプルがHugging Faceにあります。

3Dガウススプラッティングとは何か？については以下をご参照下さい。

3D Gaussian SplattingはNeRFをこえるかトレンドになるか？複数視点の画像から3D空間を再現する最新手法論文解説！ - Qiita

...

qiita.com

流れとしては、gsplat.jsコンポーネントをインポート、.splatファイルを読み込み、レンダリングループ開始、という感じみたいです。

import * as SPLAT from "gsplat";

const scene = new SPLAT.Scene();
const camera = new SPLAT.Camera();
const renderer = new SPLAT.WebGLRenderer();
const controls = new SPLAT.OrbitControls(camera, renderer.domElement);

async function main() {
    const url = "https://huggingface.co/datasets/dylanebert/3dgs/resolve/main/bonsai/bonsai-7k.splat";

    await SPLAT.Loader.LoadAsync(url, scene, () => {});

    const frame = () => {
        controls.update();
        renderer.render(scene, camera);

        requestAnimationFrame(frame);
    };

    requestAnimationFrame(frame);
}

main();

.plyファイルもサポートしているそうですが、.splatの方が基本的には読み込みが早いみたいなのでコンバーター等を使って.splatに変換すると良いとの事です。

gsplat.js