use gsplat package

viewer/package.json

@@ -23,6 +23,7 @@
   "type": "module",
   "dependencies": {
     "@babylonjs/core": "^6.23.0",
-    "@babylonjs/loaders": "^6.23.0"
+    "@babylonjs/loaders": "^6.23.0",
+    "gsplat": "^0.1.0"
   }
 }

viewer/src/lib/splat.js/cameras/Camera.ts

@@ -1,45 +0,0 @@
-import { Object3D } from "../core/Object3D";
-import { Matrix3 } from "../math/Matrix3";
-import { Matrix4 } from "../math/Matrix4";
-import { Vector3 } from "../math/Vector3";
-
-class Camera extends Object3D {
-    fx: number;
-    fy: number;
-
-    near: number;
-    far: number;
-
-    projectionMatrix: Matrix4;
-
-    constructor(
-        position: Vector3 = new Vector3(0, 0, -5),
-        rotation: Matrix3 = new Matrix3(),
-        fx: number = 1132,
-        fy: number = 1132,
-        near: number = 0.1,
-        far: number = 100
-    ) {
-        super();
-
-        this.position = position;
-        this.rotation = rotation;
-        this.fx = fx;
-        this.fy = fy;
-        this.near = near;
-        this.far = far;
-        this.projectionMatrix = new Matrix4();
-    }
-
-    updateProjectionMatrix(width: number, height: number): void {
-        // prettier-ignore
-        this.projectionMatrix.set(
-            2 * this.fx / width, 0, 0, 0,
-            0, -2 * this.fy / height, 0, 0,
-            0, 0, this.far / (this.far - this.near), 1,
-            0, 0, -(this.far * this.near) / (this.far - this.near), 0
-        );
-    }
-}
-
-export { Camera };

viewer/src/lib/splat.js/controls/OrbitControls.ts

@@ -1,147 +0,0 @@
-import type { Camera } from "../cameras/Camera";
-import { Matrix3 } from "../math/Matrix3";
-import { Vector3 } from "../math/Vector3";
-
-class OrbitControls {
-    minBeta: number = (5 * Math.PI) / 180;
-    maxBeta: number = (85 * Math.PI) / 180;
-    minZoom: number = 0.1;
-    maxZoom: number = 30;
-    orbitSpeed: number = 1;
-    panSpeed: number = 1;
-    zoomSpeed: number = 1;
-    dampening: number = 0.3;
-
-    update: () => void;
-    dispose: () => void;
-
-    constructor(camera: Camera, domElement: HTMLElement) {
-        let target = new Vector3();
-        let alpha = 0;
-        let beta = 0;
-        let radius = 5;
-
-        let desiredTarget = target.clone();
-        let desiredAlpha = alpha;
-        let desiredBeta = beta;
-        let desiredRadius = radius;
-
-        let dragging = false;
-        let panning = false;
-        let lastX = 0;
-        let lastY = 0;
-
-        const computeZoomNorm = () => {
-            return 0.1 + (0.9 * (desiredRadius - this.minZoom)) / (this.maxZoom - this.minZoom);
-        };
-
-        const onPointerDown = (e: PointerEvent) => {
-            preventDefault(e);
-
-            dragging = true;
-            if (e.pointerType === "touch") {
-                panning = e.pointerId === 2;
-            } else {
-                panning = e.button === 2;
-            }
-            lastX = e.clientX;
-            lastY = e.clientY;
-            window.addEventListener("pointerup", onPointerUp);
-            window.addEventListener("pointercancel", onPointerUp);
-        };
-
-        const onPointerUp = (e: PointerEvent) => {
-            preventDefault(e);
-
-            dragging = false;
-            panning = false;
-            window.removeEventListener("pointerup", onPointerUp);
-            window.removeEventListener("pointercancel", onPointerUp);
-        };
-
-        const onPointerMove = (e: PointerEvent) => {
-            preventDefault(e);
-
-            if (!dragging) return;
-
-            const dx = e.clientX - lastX;
-            const dy = e.clientY - lastY;
-            const zoomNorm = computeZoomNorm();
-
-            if (panning) {
-                const panX = -dx * this.panSpeed * 0.01 * zoomNorm;
-                const panY = -dy * this.panSpeed * 0.01 * zoomNorm;
-                const R = camera.rotation.buffer;
-                const right = new Vector3(R[0], R[3], R[6]);
-                const up = new Vector3(R[1], R[4], R[7]);
-                desiredTarget.add(right.multiply(panX));
-                desiredTarget.add(up.multiply(panY));
-            } else {
-                desiredAlpha -= dx * this.orbitSpeed * 0.005;
-                desiredBeta += dy * this.orbitSpeed * 0.005;
-                desiredBeta = Math.min(Math.max(desiredBeta, this.minBeta), this.maxBeta);
-            }
-
-            lastX = e.clientX;
-            lastY = e.clientY;
-        };
-
-        const onWheel = (e: WheelEvent) => {
-            preventDefault(e);
-
-            const zoomNorm = computeZoomNorm();
-            desiredRadius += e.deltaY * this.zoomSpeed * 0.02 * zoomNorm;
-            desiredRadius = Math.min(Math.max(desiredRadius, this.minZoom), this.maxZoom);
-        };
-
-        const lerp = (a: number, b: number, t: number) => {
-            return (1 - t) * a + t * b;
-        };
-
-        this.update = () => {
-            alpha = lerp(alpha, desiredAlpha, this.dampening);
-            beta = lerp(beta, desiredBeta, this.dampening);
-            radius = lerp(radius, desiredRadius, this.dampening);
-            target = target.lerp(desiredTarget, this.dampening);
-
-            const x = target.x + radius * Math.sin(alpha) * Math.cos(beta);
-            const y = target.y - radius * Math.sin(beta);
-            const z = target.z - radius * Math.cos(alpha) * Math.cos(beta);
-            camera.position.set(x, y, z);
-
-            const direction = target.clone().subtract(camera.position).normalize();
-            const rx = Math.asin(-direction.y);
-            const ry = Math.atan2(direction.x, direction.z);
-            camera.rotation = Matrix3.RotationFromEuler(new Vector3(rx, ry, 0));
-        };
-
-        const preventDefault = (e: Event) => {
-            e.preventDefault();
-            e.stopPropagation();
-        };
-
-        this.dispose = () => {
-            domElement.removeEventListener("dragenter", preventDefault);
-            domElement.removeEventListener("dragover", preventDefault);
-            domElement.removeEventListener("dragleave", preventDefault);
-            domElement.removeEventListener("contextmenu", preventDefault);
-
-            domElement.removeEventListener("pointerdown", onPointerDown);
-            domElement.removeEventListener("pointermove", onPointerMove);
-            domElement.removeEventListener("wheel", onWheel);
-        };
-
-        domElement.addEventListener("dragenter", preventDefault);
-        domElement.addEventListener("dragover", preventDefault);
-        domElement.addEventListener("dragleave", preventDefault);
-        domElement.addEventListener("contextmenu", preventDefault);
-
-        domElement.addEventListener("pointerdown", onPointerDown);
-        domElement.addEventListener("pointermove", onPointerMove);
-        domElement.addEventListener("wheel", onWheel);
-
-        this.update();
-    }
-}
-
-export { OrbitControls };

viewer/src/lib/splat.js/core/Object3D.ts

@@ -1,14 +0,0 @@
-import { Vector3 } from "../math/Vector3";
-import { Matrix3 } from "../math/Matrix3";
-
-class Object3D {
-    position: Vector3;
-    rotation: Matrix3;
-
-    constructor() {
-        this.position = new Vector3();
-        this.rotation = new Matrix3();
-    }
-}
-
-export { Object3D };

viewer/src/lib/splat.js/core/Scene.ts

@@ -1,22 +0,0 @@
-import { Object3D } from "./Object3D";
-
-class Scene extends Object3D {
-    data: Uint8Array;
-    vertexCount: number;
-
-    constructor() {
-        super();
-
-        this.data = new Uint8Array(0);
-        this.vertexCount = 0;
-    }
-
-    setData(data: Uint8Array): void {
-        this.data = data;
-
-        const rowLength = 3 * 4 + 3 * 4 + 4 + 4;
-        this.vertexCount = data.length / rowLength;
-    }
-}
-
-export { Scene };

viewer/src/lib/splat.js/index.ts

@@ -1,10 +0,0 @@
-export { Camera } from "./cameras/Camera";
-export { Renderer } from "./renderers/Renderer";
-export { Scene } from "./core/Scene";
-export { Loader } from "./loaders/Loader";
-export { WebGLRenderer } from "./renderers/WebGLRenderer";
-export { OrbitControls } from "./controls/OrbitControls";
-export { Quaternion } from "./math/Quaternion";
-export { Vector3 } from "./math/Vector3";
-export { Matrix4 } from "./math/Matrix4";
-export { Matrix3 } from "./math/Matrix3";

viewer/src/lib/splat.js/loaders/Loader.ts

@@ -1,34 +0,0 @@
-import type { Scene } from "../core/Scene";
-
-class Loader {
-    static async LoadAsync(url: string, scene: Scene, onProgress?: (progress: number) => void): Promise<void> {
-        const req = await fetch(url, {
-            mode: "cors",
-            credentials: "omit",
-        });
-
-        if (req.status != 200) {
-            throw new Error(req.status + " Unable to load " + req.url);
-        }
-
-        const reader = req.body!.getReader();
-        const contentLength = parseInt(req.headers.get("content-length") as string);
-        const data = new Uint8Array(contentLength);
-
-        let bytesRead = 0;
-
-        while (true) {
-            const { done, value } = await reader.read();
-            if (done) break;
-
-            data.set(value, bytesRead);
-            bytesRead += value.length;
-
-            onProgress?.(bytesRead / contentLength);
-        }
-
-        scene.setData(data);
-    }
-}
-
-export { Loader };

viewer/src/lib/splat.js/math/Matrix3.ts

@@ -1,82 +0,0 @@
-import type { Vector3 } from "./Vector3";
-
-class Matrix3 {
-    buffer: number[];
-
-    // prettier-ignore
-    constructor(n11: number = 1, n12: number = 0, n13: number = 0,
-        n21: number = 0, n22: number = 1, n23: number = 0,
-        n31: number = 0, n32: number = 0, n33: number = 1) {
-        this.buffer = new Array(9);
-
-        this.set(
-            n11, n12, n13,
-            n21, n22, n23,
-            n31, n32, n33
-        );
-    }
-
-    // prettier-ignore
-    set(n11: number, n12: number, n13: number,
-        n21: number, n22: number, n23: number,
-        n31: number, n32: number, n33: number): Matrix3 {
-        const e = this.buffer;
-
-        e[0] = n11; e[1] = n12; e[2] = n13;
-        e[3] = n21; e[4] = n22; e[5] = n23;
-        e[6] = n31; e[7] = n32; e[8] = n33;
-
-        return this;
-    }
-
-    multiply(m: Matrix3): Matrix3 {
-        const a = this.buffer;
-        const b = m.buffer;
-        return new Matrix3(
-            b[0] * a[0] + b[1] * a[3] + b[2] * a[6],
-            b[0] * a[1] + b[1] * a[4] + b[2] * a[7],
-            b[0] * a[2] + b[1] * a[5] + b[2] * a[8],
-            b[3] * a[0] + b[4] * a[3] + b[5] * a[6],
-            b[3] * a[1] + b[4] * a[4] + b[5] * a[7],
-            b[3] * a[2] + b[4] * a[5] + b[5] * a[8],
-            b[6] * a[0] + b[7] * a[3] + b[8] * a[6],
-            b[6] * a[1] + b[7] * a[4] + b[8] * a[7],
-            b[6] * a[2] + b[7] * a[5] + b[8] * a[8]
-        );
-    }
-
-    clone(): Matrix3 {
-        const e = this.buffer;
-        // prettier-ignore
-        return new Matrix3(
-            e[0], e[1], e[2],
-            e[3], e[4], e[5],
-            e[6], e[7], e[8]
-        );
-    }
-
-    static RotationFromEuler(m: Vector3): Matrix3 {
-        const cx = Math.cos(m.x);
-        const sx = Math.sin(m.x);
-        const cy = Math.cos(m.y);
-        const sy = Math.sin(m.y);
-        const cz = Math.cos(m.z);
-        const sz = Math.sin(m.z);
-
-        const rotationMatrix = [
-            cy * cz + sy * sx * sz,
-            -cy * sz + sy * sx * cz,
-            sy * cx,
-            cx * sz,
-            cx * cz,
-            -sx,
-            -sy * cz + cy * sx * sz,
-            sy * sz + cy * sx * cz,
-            cy * cx,
-        ];
-
-        return new Matrix3(...rotationMatrix);
-    }
-}
-
-export { Matrix3 };

viewer/src/lib/splat.js/math/Matrix4.ts

@@ -1,69 +0,0 @@
-class Matrix4 {
-    buffer: number[];
-
-    // prettier-ignore
-    constructor(n11: number = 1, n12: number = 0, n13: number = 0, n14: number = 0, 
-                n21: number = 0, n22: number = 1, n23: number = 0, n24: number = 0, 
-                n31: number = 0, n32: number = 0, n33: number = 1, n34: number = 0, 
-                n41: number = 0, n42: number = 0, n43: number = 0, n44: number = 1) {
-        this.buffer = new Array(16);
-
-        this.set(
-            n11, n12, n13, n14, 
-            n21, n22, n23, n24, 
-            n31, n32, n33, n34, 
-            n41, n42, n43, n44
-        );
-    }
-
-    // prettier-ignore
-    set(n11: number, n12: number, n13: number, n14: number,
-        n21: number, n22: number, n23: number, n24: number,
-        n31: number, n32: number, n33: number, n34: number,
-        n41: number, n42: number, n43: number, n44: number) : Matrix4 {
-        const e = this.buffer;
-
-        e[0] = n11; e[1] = n12; e[2] = n13; e[3] = n14;
-        e[4] = n21; e[5] = n22; e[6] = n23; e[7] = n24;
-        e[8] = n31; e[9] = n32; e[10] = n33; e[11] = n34;
-        e[12] = n41; e[13] = n42; e[14] = n43; e[15] = n44;
-
-        return this;
-    }
-
-    multiply(m: Matrix4): Matrix4 {
-        const a = this.buffer;
-        const b = m.buffer;
-        return new Matrix4(
-            b[0] * a[0] + b[1] * a[4] + b[2] * a[8] + b[3] * a[12],
-            b[0] * a[1] + b[1] * a[5] + b[2] * a[9] + b[3] * a[13],
-            b[0] * a[2] + b[1] * a[6] + b[2] * a[10] + b[3] * a[14],
-            b[0] * a[3] + b[1] * a[7] + b[2] * a[11] + b[3] * a[15],
-            b[4] * a[0] + b[5] * a[4] + b[6] * a[8] + b[7] * a[12],
-            b[4] * a[1] + b[5] * a[5] + b[6] * a[9] + b[7] * a[13],
-            b[4] * a[2] + b[5] * a[6] + b[6] * a[10] + b[7] * a[14],
-            b[4] * a[3] + b[5] * a[7] + b[6] * a[11] + b[7] * a[15],
-            b[8] * a[0] + b[9] * a[4] + b[10] * a[8] + b[11] * a[12],
-            b[8] * a[1] + b[9] * a[5] + b[10] * a[9] + b[11] * a[13],
-            b[8] * a[2] + b[9] * a[6] + b[10] * a[10] + b[11] * a[14],
-            b[8] * a[3] + b[9] * a[7] + b[10] * a[11] + b[11] * a[15],
-            b[12] * a[0] + b[13] * a[4] + b[14] * a[8] + b[15] * a[12],
-            b[12] * a[1] + b[13] * a[5] + b[14] * a[9] + b[15] * a[13],
-            b[12] * a[2] + b[13] * a[6] + b[14] * a[10] + b[15] * a[14],
-            b[12] * a[3] + b[13] * a[7] + b[14] * a[11] + b[15] * a[15]
-        );
-    }
-
-    clone(): Matrix4 {
-        const e = this.buffer;
-        // prettier-ignore
-        return new Matrix4(
-            e[0], e[1], e[2], e[3], 
-            e[4], e[5], e[6], e[7], 
-            e[8], e[9], e[10], e[11], 
-            e[12], e[13], e[14], e[15]
-        );
-    }
-}
-
-export { Matrix4 };

viewer/src/lib/splat.js/math/Quaternion.ts

@@ -1,73 +0,0 @@
-import { Matrix3 } from "./Matrix3";
-import type { Vector3 } from "./Vector3";
-
-class Quaternion {
-    x: number;
-    y: number;
-    z: number;
-    w: number;
-
-    constructor(x: number = 0, y: number = 0, z: number = 0, w: number = 1) {
-        this.x = x;
-        this.y = y;
-        this.z = z;
-        this.w = w;
-    }
-
-    set(x: number, y: number, z: number, w: number): Quaternion {
-        this.x = x;
-        this.y = y;
-        this.z = z;
-        this.w = w;
-
-        return this;
-    }    
-
-    flat(): number[] {
-        return [this.x, this.y, this.z, this.w];
-    }
-
-    clone(): Quaternion {
-        return new Quaternion(this.x, this.y, this.z, this.w);
-    }
-
-    toRotationMatrix(): Matrix3 {
-        const xx = this.x * this.x;
-        const xy = this.x * this.y;
-        const xz = this.x * this.z;
-        const xw = this.x * this.w;
-        const yy = this.y * this.y;
-        const yz = this.y * this.z;
-        const yw = this.y * this.w;
-        const zz = this.z * this.z;
-        const zw = this.z * this.w;
-
-        const m = new Matrix3();
-        // prettier-ignore
-        m.set(
-            1 - 2 * (yy + zz), 2 * (xy - zw), 2 * (xz + yw),
-            2 * (xy + zw), 1 - 2 * (xx + zz), 2 * (yz - xw),
-            2 * (xz - yw), 2 * (yz + xw), 1 - 2 * (xx + yy)
-        )
-
-        return m;
-    }
-
-    static FromEuler(m: Vector3) {
-        const cy = Math.cos(m.y / 2);
-        const sy = Math.sin(m.y / 2);
-        const cp = Math.cos(m.x / 2);
-        const sp = Math.sin(m.x / 2);
-        const cr = Math.cos(m.z / 2);
-        const sr = Math.sin(m.z / 2);
-
-        const w = cy * cp * cr + sy * sp * sr;
-        const x = cy * cp * sr - sy * sp * cr;
-        const y = sy * cp * sr + cy * sp * cr;
-        const z = sy * cp * cr - cy * sp * sr;
-
-        return new Quaternion(x, y, z, w);
-    }
-}
-
-export { Quaternion };

viewer/src/lib/splat.js/math/Vector3.ts

@@ -1,98 +0,0 @@
-class Vector3 {
-    x: number;
-    y: number;
-    z: number;
-
-    constructor(x: number = 0, y: number = 0, z: number = 0) {
-        this.x = x;
-        this.y = y;
-        this.z = z;
-    }
-
-    set(x: number, y: number, z: number): Vector3 {
-        this.x = x;
-        this.y = y;
-        this.z = z;
-
-        return this;
-    }
-
-    add(v: Vector3): Vector3;
-    add(v: number): Vector3;
-    add(v: Vector3 | number): Vector3 {
-        if (typeof v === "number") {
-            this.x += v;
-            this.y += v;
-            this.z += v;
-        } else {
-            this.x += v.x;
-            this.y += v.y;
-            this.z += v.z;
-        }
-
-        return this;
-    }
-
-    subtract(v: Vector3): Vector3;
-    subtract(v: number): Vector3;
-    subtract(v: Vector3 | number): Vector3 {
-        if (typeof v === "number") {
-            this.x -= v;
-            this.y -= v;
-            this.z -= v;
-        } else {
-            this.x -= v.x;
-            this.y -= v.y;
-            this.z -= v.z;
-        }
-
-        return this;
-    }
-
-    multiply(v: Vector3): Vector3;
-    multiply(v: number): Vector3;
-    multiply(v: Vector3 | number): Vector3 {
-        if (typeof v === "number") {
-            this.x *= v;
-            this.y *= v;
-            this.z *= v;
-        } else {
-            this.x *= v.x;
-            this.y *= v.y;
-            this.z *= v.z;
-        }
-
-        return this;
-    }
-
-    lerp(v: Vector3, t: number): Vector3 {
-        this.x += (v.x - this.x) * t;
-        this.y += (v.y - this.y) * t;
-        this.z += (v.z - this.z) * t;
-
-        return this;
-    }
-
-    length(): number {
-        return Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z);
-    }
-
-    normalize(): Vector3 {
-        const length = this.length();
-        this.x /= length;
-        this.y /= length;
-        this.z /= length;
-
-        return this;
-    }
-
-    flat(): number[] {
-        return [this.x, this.y, this.z];
-    }
-
-    clone(): Vector3 {
-        return new Vector3(this.x, this.y, this.z);
-    }
-}
-
-export { Vector3 };

viewer/src/lib/splat.js/renderers/Renderer.ts

@@ -1,9 +0,0 @@
-import type { Camera } from "../cameras/Camera";
-import type { Scene } from "../core/Scene";
-
-class Renderer {
-    render(scene: Scene, camera: Camera): void {}
-    dispose(): void {}
-}
-
-export { Renderer };

viewer/src/lib/splat.js/renderers/WebGLRenderer.ts

@@ -1,225 +0,0 @@
-import type { Camera } from "../cameras/Camera";
-import type { Scene } from "../core/Scene";
-import type { Renderer } from "./Renderer";
-
-import { createWorker } from "./webgl/utils/worker";
-
-import { vertex } from "./webgl/shaders/vertex.glsl";
-import { frag } from "./webgl/shaders/frag.glsl";
-import { Matrix4 } from "../math/Matrix4";
-
-export class WebGLRenderer implements Renderer {
-    render: (scene: Scene, camera: Camera) => void;
-    dispose: () => void;
-
-    constructor(canvas: HTMLCanvasElement) {
-        const gl = (canvas.getContext("webgl") || canvas.getContext("experimental-webgl")) as WebGLRenderingContext;
-        const ext = gl.getExtension("ANGLE_instanced_arrays") as ANGLE_instanced_arrays;
-
-        let activeScene: Scene;
-        let activeCamera: Camera;
-
-        let worker: Worker;
-        let vertexCount = 0;
-
-        let vertexShader: WebGLShader;
-        let fragmentShader: WebGLShader;
-        let program: WebGLProgram;
-
-        let u_projection: WebGLUniformLocation;
-        let u_viewport: WebGLUniformLocation;
-        let u_focal: WebGLUniformLocation;
-        let u_view: WebGLUniformLocation;
-
-        let positionAttribute: number;
-        let centerAttribute: number;
-        let colorAttribute: number;
-        let covAAttribute: number;
-        let covBAttribute: number;
-
-        let vertexBuffer: WebGLBuffer;
-        let centerBuffer: WebGLBuffer;
-        let colorBuffer: WebGLBuffer;
-        let covABuffer: WebGLBuffer;
-        let covBBuffer: WebGLBuffer;
-
-        let initialized = false;
-
-        const getViewMatrix = (camera: Camera) => {
-            const R = camera.rotation.buffer;
-            const t = camera.position.flat();
-            const camToWorld = [
-                [R[0], R[1], R[2], 0],
-                [R[3], R[4], R[5], 0],
-                [R[6], R[7], R[8], 0],
-                [
-                    -t[0] * R[0] - t[1] * R[3] - t[2] * R[6],
-                    -t[0] * R[1] - t[1] * R[4] - t[2] * R[7],
-                    -t[0] * R[2] - t[1] * R[5] - t[2] * R[8],
-                    1,
-                ],
-            ].flat();
-            return new Matrix4(...camToWorld);
-        };
-
-        const initWebGL = () => {
-            worker = new Worker(
-                URL.createObjectURL(
-                    new Blob(["(", createWorker.toString(), ")(self)"], { type: "application/javascript" })
-                )
-            );
-
-            canvas.width = innerWidth;
-            canvas.height = innerHeight;
-
-            gl.viewport(0, 0, canvas.width, canvas.height);
-            activeCamera.updateProjectionMatrix(canvas.width, canvas.height);
-
-            vertexShader = gl.createShader(gl.VERTEX_SHADER) as WebGLShader;
-            gl.shaderSource(vertexShader, vertex);
-            gl.compileShader(vertexShader);
-            if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
-                console.error(gl.getShaderInfoLog(vertexShader));
-            }
-
-            fragmentShader = gl.createShader(gl.FRAGMENT_SHADER) as WebGLShader;
-            gl.shaderSource(fragmentShader, frag);
-            gl.compileShader(fragmentShader);
-            if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
-                console.error(gl.getShaderInfoLog(fragmentShader));
-            }
-
-            program = gl.createProgram() as WebGLProgram;
-            gl.attachShader(program, vertexShader);
-            gl.attachShader(program, fragmentShader);
-            gl.linkProgram(program);
-            gl.useProgram(program);
-            if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-                console.error(gl.getProgramInfoLog(program));
-            }
-
-            gl.disable(gl.DEPTH_TEST);
-            gl.enable(gl.BLEND);
-            gl.blendFuncSeparate(gl.ONE_MINUS_DST_ALPHA, gl.ONE, gl.ONE_MINUS_DST_ALPHA, gl.ONE);
-            gl.blendEquationSeparate(gl.FUNC_ADD, gl.FUNC_ADD);
-
-            const viewMatrix = getViewMatrix(activeCamera);
-
-            u_projection = gl.getUniformLocation(program, "projection") as WebGLUniformLocation;
-            gl.uniformMatrix4fv(u_projection, false, activeCamera.projectionMatrix.buffer);
-
-            u_viewport = gl.getUniformLocation(program, "viewport") as WebGLUniformLocation;
-            gl.uniform2fv(u_viewport, new Float32Array([canvas.width, canvas.height]));
-
-            u_focal = gl.getUniformLocation(program, "focal") as WebGLUniformLocation;
-            gl.uniform2fv(u_focal, new Float32Array([activeCamera.fx, activeCamera.fy]));
-
-            u_view = gl.getUniformLocation(program, "view") as WebGLUniformLocation;
-            gl.uniformMatrix4fv(u_view, false, viewMatrix.buffer);
-
-            const triangleVertices = new Float32Array([-2, -2, 2, -2, 2, 2, -2, 2]);
-            vertexBuffer = gl.createBuffer() as WebGLBuffer;
-            gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
-            gl.bufferData(gl.ARRAY_BUFFER, triangleVertices, gl.STATIC_DRAW);
-
-            positionAttribute = gl.getAttribLocation(program, "position");
-            gl.enableVertexAttribArray(positionAttribute);
-            gl.vertexAttribPointer(positionAttribute, 2, gl.FLOAT, false, 0, 0);
-
-            centerBuffer = gl.createBuffer() as WebGLBuffer;
-            centerAttribute = gl.getAttribLocation(program, "center");
-            gl.enableVertexAttribArray(centerAttribute);
-            gl.bindBuffer(gl.ARRAY_BUFFER, centerBuffer);
-            gl.vertexAttribPointer(centerAttribute, 3, gl.FLOAT, false, 0, 0);
-            ext.vertexAttribDivisorANGLE(centerAttribute, 1);
-
-            colorBuffer = gl.createBuffer() as WebGLBuffer;
-            colorAttribute = gl.getAttribLocation(program, "color");
-            gl.enableVertexAttribArray(colorAttribute);
-            gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
-            gl.vertexAttribPointer(colorAttribute, 4, gl.FLOAT, false, 0, 0);
-            ext.vertexAttribDivisorANGLE(colorAttribute, 1);
-
-            covABuffer = gl.createBuffer() as WebGLBuffer;
-            covAAttribute = gl.getAttribLocation(program, "covA");
-            gl.enableVertexAttribArray(covAAttribute);
-            gl.bindBuffer(gl.ARRAY_BUFFER, covABuffer);
-            gl.vertexAttribPointer(covAAttribute, 3, gl.FLOAT, false, 0, 0);
-            ext.vertexAttribDivisorANGLE(covAAttribute, 1);
-
-            covBBuffer = gl.createBuffer() as WebGLBuffer;
-            covBAttribute = gl.getAttribLocation(program, "covB");
-            gl.enableVertexAttribArray(covBAttribute);
-            gl.bindBuffer(gl.ARRAY_BUFFER, covBBuffer);
-            gl.vertexAttribPointer(covBAttribute, 3, gl.FLOAT, false, 0, 0);
-            ext.vertexAttribDivisorANGLE(covBAttribute, 1);
-
-            worker.onmessage = (e) => {
-                if (e.data.center) {
-                    let { covA, covB, center, color } = e.data;
-                    vertexCount = center.length / 3;
-
-                    gl.bindBuffer(gl.ARRAY_BUFFER, centerBuffer);
-                    gl.bufferData(gl.ARRAY_BUFFER, center, gl.DYNAMIC_DRAW);
-
-                    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
-                    gl.bufferData(gl.ARRAY_BUFFER, color, gl.DYNAMIC_DRAW);
-
-                    gl.bindBuffer(gl.ARRAY_BUFFER, covABuffer);
-                    gl.bufferData(gl.ARRAY_BUFFER, covA, gl.DYNAMIC_DRAW);
-
-                    gl.bindBuffer(gl.ARRAY_BUFFER, covBBuffer);
-                    gl.bufferData(gl.ARRAY_BUFFER, covB, gl.DYNAMIC_DRAW);
-                }
-            };
-
-            worker.postMessage({
-                buffer: activeScene.data.buffer,
-                vertexCount: activeScene.vertexCount,
-            });
-
-            initialized = true;
-        };
-
-        this.render = (scene: Scene, camera: Camera) => {
-            if (scene !== activeScene || camera !== activeCamera) {
-                if (initialized) {
-                    this.dispose();
-                }
-
-                activeScene = scene;
-                activeCamera = camera;
-
-                initWebGL();
-            }
-
-            activeCamera.updateProjectionMatrix(canvas.width, canvas.height);
-            const viewMatrix = getViewMatrix(activeCamera);
-            const viewProj = activeCamera.projectionMatrix.multiply(viewMatrix);
-            worker.postMessage({ view: viewProj.buffer });
-
-            if (vertexCount > 0) {
-                gl.uniformMatrix4fv(u_view, false, viewMatrix.buffer);
-                ext.drawArraysInstancedANGLE(gl.TRIANGLE_FAN, 0, 4, vertexCount);
-            } else {
-                gl.clear(gl.COLOR_BUFFER_BIT);
-            }
-        };
-
-        this.dispose = () => {
-            gl.deleteShader(vertexShader);
-            gl.deleteShader(fragmentShader);
-            gl.deleteProgram(program);
-
-            gl.deleteBuffer(vertexBuffer);
-            gl.deleteBuffer(centerBuffer);
-            gl.deleteBuffer(colorBuffer);
-            gl.deleteBuffer(covABuffer);
-            gl.deleteBuffer(covBBuffer);
-
-            worker.terminate();
-
-            initialized = false;
-        };
-    }
-}

viewer/src/lib/splat.js/renderers/webgl/shaders/frag.glsl.ts

@@ -1,13 +0,0 @@
-export const frag = /* glsl */ `
-precision mediump float;
-
-varying vec4 vColor;
-varying vec2 vPosition;
-
-void main () {    
-    float A = -dot(vPosition, vPosition);
-    if (A < -4.0) discard;
-    float B = exp(A) * vColor.a;
-    gl_FragColor = vec4(B * vColor.rgb, B);
-}
-`;

viewer/src/lib/splat.js/renderers/webgl/shaders/vertex.glsl.ts

@@ -1,75 +0,0 @@
-export const vertex = /* glsl */ `
-precision mediump float;
-attribute vec2 position;
-
-attribute vec4 color;
-attribute vec3 center;
-attribute vec3 covA;
-attribute vec3 covB;
-
-uniform mat4 projection, view;
-uniform vec2 focal;
-uniform vec2 viewport;
-
-varying vec4 vColor;
-varying vec2 vPosition;
-
-mat3 transpose(mat3 m) {
-    return mat3(
-        m[0][0], m[1][0], m[2][0],
-        m[0][1], m[1][1], m[2][1],
-        m[0][2], m[1][2], m[2][2]
-    );
-}
-
-void main () {
-    vec4 camspace = view * vec4(center, 1);
-    vec4 pos2d = projection * camspace;
-
-    float bounds = 1.2 * pos2d.w;
-    if (pos2d.z < -pos2d.w || pos2d.x < -bounds || pos2d.x > bounds
-        || pos2d.y < -bounds || pos2d.y > bounds) {
-        gl_Position = vec4(0.0, 0.0, 2.0, 1.0);
-        return;
-    }
-
-    mat3 Vrk = mat3(
-        covA.x, covA.y, covA.z, 
-        covA.y, covB.x, covB.y,
-        covA.z, covB.y, covB.z
-    );
-
-    mat3 J = mat3(
-        focal.x / camspace.z, 0., -(focal.x * camspace.x) / (camspace.z * camspace.z), 
-        0., -focal.y / camspace.z, (focal.y * camspace.y) / (camspace.z * camspace.z), 
-        0., 0., 0.
-    );
-
-    mat3 W = transpose(mat3(view));
-    mat3 T = W * J;
-    mat3 cov = transpose(T) * Vrk * T;
-    
-    vec2 vCenter = vec2(pos2d) / pos2d.w;
-
-    float diagonal1 = cov[0][0] + 0.3;
-    float offDiagonal = cov[0][1];
-    float diagonal2 = cov[1][1] + 0.3;
-
-    float mid = 0.5 * (diagonal1 + diagonal2);
-    float radius = length(vec2((diagonal1 - diagonal2) / 2.0, offDiagonal));
-    float lambda1 = mid + radius;
-    float lambda2 = max(mid - radius, 0.1);
-    vec2 diagonalVector = normalize(vec2(offDiagonal, lambda1 - diagonal1));
-    vec2 v1 = min(sqrt(2.0 * lambda1), 1024.0) * diagonalVector;
-    vec2 v2 = min(sqrt(2.0 * lambda2), 1024.0) * vec2(diagonalVector.y, -diagonalVector.x);
-
-    vColor = color;
-    vPosition = position;
-
-    gl_Position = vec4(
-        vCenter 
-        + position.x * v1 / viewport * 2.0 
-        + position.y * v2 / viewport * 2.0, 0.0, 1.0
-    );
-}
-`;

viewer/src/lib/splat.js/renderers/webgl/utils/worker.ts

@@ -1,254 +0,0 @@
-export function createWorker(self: Worker) {
-    let buffer: ArrayBuffer;
-    let vertexCount = 0;
-    let viewProj: Float32Array;
-    // 6*4 + 4 + 4 = 8*4
-    // XYZ - Position (Float32)
-    // XYZ - Scale (Float32)
-    // RGBA - colors (uint8)
-    // IJKL - quaternion/rot (uint8)
-    const rowLength = 3 * 4 + 3 * 4 + 4 + 4;
-    let depthIndex = new Uint32Array();
-
-    function processPlyBuffer(inputBuffer: ArrayBuffer) {
-        const ubuf = new Uint8Array(inputBuffer);
-        // 10KB ought to be enough for a header...
-        const header = new TextDecoder().decode(ubuf.slice(0, 1024 * 10));
-        const header_end = "end_header\n";
-        const header_end_index = header.indexOf(header_end);
-        if (header_end_index < 0) throw new Error("Unable to read .ply file header");
-        const vertexCount = parseInt(/element vertex (\d+)\n/.exec(header)![1]);
-        console.log("Vertex Count", vertexCount);
-        let row_offset: number = 0;
-        let offsets: { [key: string]: number } = {};
-        let types: { [key: string]: string } = {};
-        const TYPE_MAP: { [key: string]: string } = {
-            double: "getFloat64",
-            int: "getInt32",
-            uint: "getUint32",
-            float: "getFloat32",
-            short: "getInt16",
-            ushort: "getUint16",
-            uchar: "getUint8",
-        };
-        for (let prop of header
-            .slice(0, header_end_index)
-            .split("\n")
-            .filter((k) => k.startsWith("property "))) {
-            const [_p, type, name] = prop.split(" ");
-            const arrayType = TYPE_MAP[type] || "getInt8";
-            types[name] = arrayType;
-            offsets[name] = row_offset;
-            row_offset += parseInt(arrayType.replace(/[^\d]/g, "")) / 8;
-        }
-
-        let dataView = new DataView(inputBuffer, header_end_index + header_end.length);
-        let row: number = 0;
-        const attrs: any = new Proxy(
-            {},
-            {
-                get(_target, prop: string) {
-                    if (!types[prop]) throw new Error(prop + " not found");
-                    const type = types[prop] as keyof DataView;
-                    const dataViewMethod = dataView[type] as any;
-                    return dataViewMethod(row * row_offset + offsets[prop], true);
-                },
-            }
-        );
-
-        // 6*4 + 4 + 4 = 8*4
-        // XYZ - Position (Float32)
-        // XYZ - Scale (Float32)
-        // RGBA - colors (uint8)
-        // IJKL - quaternion/rot (uint8)
-        const rowLength = 3 * 4 + 3 * 4 + 4 + 4;
-        const buffer = new ArrayBuffer(rowLength * vertexCount);
-
-        for (let j = 0; j < vertexCount; j++) {
-            row = j;
-
-            const position = new Float32Array(buffer, j * rowLength, 3);
-            const scales = new Float32Array(buffer, j * rowLength + 4 * 3, 3);
-            const rgba = new Uint8ClampedArray(buffer, j * rowLength + 4 * 3 + 4 * 3, 4);
-            const rot = new Uint8ClampedArray(buffer, j * rowLength + 4 * 3 + 4 * 3 + 4, 4);
-
-            if (types["scale_0"]) {
-                const qlen = Math.sqrt(attrs.rot_0 ** 2 + attrs.rot_1 ** 2 + attrs.rot_2 ** 2 + attrs.rot_3 ** 2);
-
-                rot[0] = (attrs.rot_0 / qlen) * 128 + 128;
-                rot[1] = (attrs.rot_1 / qlen) * 128 + 128;
-                rot[2] = (attrs.rot_2 / qlen) * 128 + 128;
-                rot[3] = (attrs.rot_3 / qlen) * 128 + 128;
-
-                scales[0] = Math.exp(attrs.scale_0);
-                scales[1] = Math.exp(attrs.scale_1);
-                scales[2] = Math.exp(attrs.scale_2);
-            } else {
-                scales[0] = 0.01;
-                scales[1] = 0.01;
-                scales[2] = 0.01;
-
-                rot[0] = 255;
-                rot[1] = 0;
-                rot[2] = 0;
-                rot[3] = 0;
-            }
-
-            position[0] = attrs.x;
-            position[1] = attrs.y;
-            position[2] = attrs.z;
-
-            if (types["f_dc_0"]) {
-                const SH_C0 = 0.28209479177387814;
-                rgba[0] = (0.5 + SH_C0 * attrs.f_dc_0) * 255;
-                rgba[1] = (0.5 + SH_C0 * attrs.f_dc_1) * 255;
-                rgba[2] = (0.5 + SH_C0 * attrs.f_dc_2) * 255;
-            } else {
-                rgba[0] = attrs.red;
-                rgba[1] = attrs.green;
-                rgba[2] = attrs.blue;
-            }
-            if (types["opacity"]) {
-                rgba[3] = (1 / (1 + Math.exp(-attrs.opacity))) * 255;
-            } else {
-                rgba[3] = 255;
-            }
-        }
-        return buffer;
-    }
-
-    const runSort = (viewProj: Float32Array) => {
-        if (!buffer) return;
-
-        const f_buffer = new Float32Array(buffer);
-        const u_buffer = new Uint8Array(buffer);
-
-        const covA = new Float32Array(3 * vertexCount);
-        const covB = new Float32Array(3 * vertexCount);
-
-        const center = new Float32Array(3 * vertexCount);
-        const color = new Float32Array(4 * vertexCount);
-
-        let maxDepth = -Infinity;
-        let minDepth = Infinity;
-        let sizeList = new Int32Array(vertexCount);
-        for (let i = 0; i < vertexCount; i++) {
-            let depth =
-                ((viewProj[2] * f_buffer[8 * i + 0] +
-                    viewProj[6] * f_buffer[8 * i + 1] +
-                    viewProj[10] * f_buffer[8 * i + 2]) *
-                    4096) |
-                0;
-            sizeList[i] = depth;
-            if (depth > maxDepth) maxDepth = depth;
-            if (depth < minDepth) minDepth = depth;
-        }
-
-        // This is a 16 bit single-pass counting sort
-        let depthInv = (256 * 256) / (maxDepth - minDepth);
-        let counts0 = new Uint32Array(256 * 256);
-        for (let i = 0; i < vertexCount; i++) {
-            sizeList[i] = ((sizeList[i] - minDepth) * depthInv) | 0;
-            counts0[sizeList[i]]++;
-        }
-        let starts0 = new Uint32Array(256 * 256);
-        for (let i = 1; i < 256 * 256; i++) starts0[i] = starts0[i - 1] + counts0[i - 1];
-        depthIndex = new Uint32Array(vertexCount);
-        for (let i = 0; i < vertexCount; i++) depthIndex[starts0[sizeList[i]]++] = i;
-
-        for (let j = 0; j < vertexCount; j++) {
-            const i = depthIndex[j];
-
-            center[3 * j + 0] = f_buffer[8 * i + 0];
-            center[3 * j + 1] = f_buffer[8 * i + 1];
-            center[3 * j + 2] = f_buffer[8 * i + 2];
-
-            color[4 * j + 0] = u_buffer[32 * i + 24 + 0] / 255;
-            color[4 * j + 1] = u_buffer[32 * i + 24 + 1] / 255;
-            color[4 * j + 2] = u_buffer[32 * i + 24 + 2] / 255;
-            color[4 * j + 3] = u_buffer[32 * i + 24 + 3] / 255;
-
-            let scale = [f_buffer[8 * i + 3 + 0], f_buffer[8 * i + 3 + 1], f_buffer[8 * i + 3 + 2]];
-            let rot = [
-                (u_buffer[32 * i + 28 + 0] - 128) / 128,
-                (u_buffer[32 * i + 28 + 1] - 128) / 128,
-                (u_buffer[32 * i + 28 + 2] - 128) / 128,
-                (u_buffer[32 * i + 28 + 3] - 128) / 128,
-            ];
-
-            const R = [
-                1.0 - 2.0 * (rot[2] * rot[2] + rot[3] * rot[3]),
-                2.0 * (rot[1] * rot[2] + rot[0] * rot[3]),
-                2.0 * (rot[1] * rot[3] - rot[0] * rot[2]),
-
-                2.0 * (rot[1] * rot[2] - rot[0] * rot[3]),
-                1.0 - 2.0 * (rot[1] * rot[1] + rot[3] * rot[3]),
-                2.0 * (rot[2] * rot[3] + rot[0] * rot[1]),
-
-                2.0 * (rot[1] * rot[3] + rot[0] * rot[2]),
-                2.0 * (rot[2] * rot[3] - rot[0] * rot[1]),
-                1.0 - 2.0 * (rot[1] * rot[1] + rot[2] * rot[2]),
-            ];
-
-            // Compute the matrix product of S and R (M = S * R)
-            const M = [
-                scale[0] * R[0],
-                scale[0] * R[1],
-                scale[0] * R[2],
-                scale[1] * R[3],
-                scale[1] * R[4],
-                scale[1] * R[5],
-                scale[2] * R[6],
-                scale[2] * R[7],
-                scale[2] * R[8],
-            ];
-
-            covA[3 * j + 0] = M[0] * M[0] + M[3] * M[3] + M[6] * M[6];
-            covA[3 * j + 1] = M[0] * M[1] + M[3] * M[4] + M[6] * M[7];
-            covA[3 * j + 2] = M[0] * M[2] + M[3] * M[5] + M[6] * M[8];
-            covB[3 * j + 0] = M[1] * M[1] + M[4] * M[4] + M[7] * M[7];
-            covB[3 * j + 1] = M[1] * M[2] + M[4] * M[5] + M[7] * M[8];
-            covB[3 * j + 2] = M[2] * M[2] + M[5] * M[5] + M[8] * M[8];
-        }
-
-        self.postMessage({ covA, center, color, covB, viewProj }, [
-            covA.buffer,
-            center.buffer,
-            color.buffer,
-            covB.buffer,
-        ]);
-    };
-
-    const throttledSort = () => {
-        if (!sortRunning) {
-            sortRunning = true;
-            let lastView = viewProj;
-            runSort(lastView);
-            setTimeout(() => {
-                sortRunning = false;
-                if (lastView !== viewProj) {
-                    throttledSort();
-                }
-            }, 0);
-        }
-    };
-
-    let sortRunning: boolean = false;
-    self.onmessage = (e) => {
-        if (e.data.ply) {
-            vertexCount = 0;
-            runSort(viewProj);
-            buffer = processPlyBuffer(e.data.ply);
-            vertexCount = Math.floor(buffer.byteLength / rowLength);
-            postMessage({ buffer: buffer });
-        } else if (e.data.buffer) {
-            buffer = e.data.buffer;
-            vertexCount = e.data.vertexCount;
-        } else if (e.data.vertexCount) {
-            vertexCount = e.data.vertexCount;
-        } else if (e.data.view) {
-            viewProj = e.data.view;
-            throttledSort();
-        }
-    };
-}

viewer/src/routes/viewer/[slug]/SplatViewer.ts

@@ -1,10 +1,10 @@
 import type { IViewer } from "./IViewer";
-import * as SPLAT from "$lib/splat.js";
+import * as SPLAT from "gsplat";
 
 export class SplatViewer implements IViewer {
     canvas: HTMLCanvasElement;
 
-    renderer: SPLAT.Renderer;
+    renderer: SPLAT.WebGLRenderer;
     scene: SPLAT.Scene;
     camera: SPLAT.Camera;
     controls: SPLAT.OrbitControls;