point-cloud-tools/gsplat.js.html.template at main · SpectacularAI/point-cloud-tools · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>3DGS rendered with gsplat.js</title>
        <style>
        body,
        html {
          margin: 0;
          padding: 0;
          overflow: hidden;
        }

        canvas {
          width: 100vw;
          height: 100vh;
        }
        </style>
    </head>
    <body>
        <canvas id="canvas"></canvas>
        <div id="data" data-base64="CORS_SUCKS"></div>

        <script type="module">
        import * as SPLAT from "https://cdn.jsdelivr.net/npm/gsplat@1.2.3";

        const canvas = document.getElementById("canvas");
        const dataContainer = document.getElementById('data');

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

        function base64ToUint8Array(base64) {
            var raw = window.atob(base64);
            var uint8Array = new Uint8Array(raw.length);
            for (var i = 0; i < raw.length; i++) {
                uint8Array[i] = raw.charCodeAt(i);
            }
            return uint8Array;
        }

        async function main() {
            const base64Data = dataContainer.dataset.base64;
            const binaryData = base64ToUint8Array(base64Data);
            const splat = new SPLAT.Splat(SPLAT.SplatData.Deserialize(binaryData));
            scene.addObject(splat);

            const handleResize = () => {
                renderer.setSize(window.innerWidth, window.innerHeight);
            };

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

                requestAnimationFrame(frame);
            };

            handleResize();
            window.addEventListener("resize", handleResize);

            requestAnimationFrame(frame);
        }

        main();

        </script>
    </body>
</html>