three.jsと同様の機能に加え、3DガウススプラッティングもサポートしたオープンソースのJavaScriptライブラリ・「gsplat.js」

gsplat.js

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

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

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

https://qiita.com/RyeWiskey/items/9ccc862db91e38e8bbc9

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