working partial refactor

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

@@ -1,18 +1,46 @@
 import { Object3D } from "../core/Object3D";
+import { Matrix3 } from "../math/Matrix3";
 import { Matrix4 } from "../math/Matrix4";
+import { Quaternion } from "../math/Quaternion";
 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)) {
+    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 {}
+    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/cameras/PerspectiveCamera.ts

@@ -1,30 +0,0 @@
-import { Camera } from "./Camera";
-
-class PerspectiveCamera extends Camera {
-    fx: number;
-    fy: number;
-
-    near: number;
-    far: number;
-
-    constructor(fx: number = 1132, fy: number = 1132, near: number = 0.1, far: number = 100) {
-        super();
-
-        this.fx = fx;
-        this.fy = fy;
-        this.near = near;
-        this.far = far;
-    }
-
-    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.near * this.far / (this.far - this.near), 0
-        );
-    }
-}
-
-export { PerspectiveCamera };

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

@@ -0,0 +1,72 @@
+import type { Camera } from "../cameras/Camera";
+import { EventDispatcher } from "../core/EventDispatcher";
+import { Matrix3 } from "../math/Matrix3";
+import { Quaternion } from "../math/Quaternion";
+import { Vector3 } from "../math/Vector3";
+
+class OrbitControls extends EventDispatcher {
+    camera: Camera;
+    domElement: HTMLElement;
+
+    target: Vector3 = new Vector3();
+    alpha: number = 0;
+    beta: number = 0;
+    radius: number = 5;
+
+    desiredTarget: Vector3;
+    desiredAlpha: number;
+    desiredBeta: number;
+    desiredRadius: number;
+
+    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 = 10;
+
+    constructor(camera: Camera, domElement: HTMLElement) {
+        super();
+
+        this.camera = camera;
+        this.domElement = domElement;
+
+        this.desiredTarget = this.target.clone();
+        this.desiredAlpha = this.alpha;
+        this.desiredBeta = this.beta;
+        this.desiredRadius = this.radius;
+    }
+
+    lerp(a: number, b: number, t: number) {
+        return (1 - t) * a + t * b;
+    }
+
+    pan(dx: number, dy: number) {
+        const R = this.camera.rotation.buffer;
+        const right = new Vector3(R[0], R[3], R[6]);
+        const up = new Vector3(R[1], R[4], R[7]);
+        this.desiredTarget.add(right.multiply(dx));
+        this.desiredTarget.add(up.multiply(dy));
+    }
+
+    update(deltaTime: number) {
+        this.alpha = this.lerp(this.alpha, this.desiredAlpha, this.dampening * deltaTime);
+        this.beta = this.lerp(this.beta, this.desiredBeta, this.dampening * deltaTime);
+        this.radius = this.lerp(this.radius, this.desiredRadius, this.dampening * deltaTime);
+        this.target = this.target.lerp(this.desiredTarget, this.dampening * deltaTime);
+
+        const x = this.target.x + this.radius * Math.sin(this.alpha) * Math.cos(this.beta);
+        const y = this.target.y - this.radius * Math.sin(this.beta);
+        const z = this.target.z - this.radius * Math.cos(this.alpha) * Math.cos(this.beta);
+        this.camera.position.set(x, y, z);
+
+        const direction = this.target.clone().subtract(this.camera.position).normalize();
+        const rx = Math.asin(-direction.y);
+        const ry = Math.atan2(direction.x, direction.z);
+        this.camera.rotation = Matrix3.RotationFromEuler(new Vector3(rx, ry, 0));
+    }
+}
+
+export { OrbitControls };

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

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

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

@@ -11,10 +11,13 @@ class Scene extends Object3D {
         this.vertexCount = 0;
     }
 
-    setData(data: Uint8Array, vertexCount: number): void {
+    setData(data: Uint8Array): void {
         this.data = data;
-        this.vertexCount = vertexCount;
-        console.log("setData", vertexCount);
+
+        const rowLength = 3 * 4 + 3 * 4 + 4 + 4;
+        this.vertexCount = data.length / rowLength;
+
+        console.log("setData", this.vertexCount);
     }
 }
 

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

@@ -1,12 +1,15 @@
 export { Camera } from "./cameras/Camera";
-export { PerspectiveCamera } from "./cameras/PerspectiveCamera";
 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";
+
+export { createWorker } from "./renderers/webgl/utils/worker";
+export { getViewMatrix } from "./renderers/webgl/utils/transformations";
+export { vertex } from "./renderers/webgl/shaders/vertex.glsl";
+export { frag } from "./renderers/webgl/shaders/frag.glsl";

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

@@ -27,10 +27,7 @@ class Loader {
             onProgress?.(bytesRead / contentLength);
         }
 
-        const rowLength = 3 * 4 + 3 * 4 + 4 + 4;
-        const vertexCount = data.length / rowLength;
-
-        scene.setData(data, vertexCount);
+        scene.setData(data);
     }
 }
 

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

@@ -1,3 +1,5 @@
+import type { Vector3 } from "./Vector3";
+
 class Matrix3 {
     buffer: number[];
 
@@ -26,6 +28,55 @@ class Matrix3 {
 
         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 };
+export { Matrix3 };

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

@@ -53,6 +53,17 @@ class Matrix4 {
             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,3 +1,6 @@
+import { Matrix3 } from "./Matrix3";
+import type { Vector3 } from "./Vector3";
+
 class Quaternion {
     x: number;
     y: number;
@@ -18,11 +21,53 @@ class Quaternion {
         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

@@ -17,9 +17,82 @@ class Vector3 {
         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/WebGLRenderer.ts

@@ -1,5 +1,4 @@
 import type { Camera } from "../cameras/Camera";
-import type { PerspectiveCamera } from "../cameras/PerspectiveCamera";
 import type { Scene } from "../core/Scene";
 import type { Renderer } from "./Renderer";
 
@@ -8,204 +7,212 @@ import { createWorker } from "./webgl/utils/worker";
 
 import { vertex } from "./webgl/shaders/vertex.glsl";
 import { frag } from "./webgl/shaders/frag.glsl";
-import type { Matrix4 } from "../math/Matrix4";
 
 export class WebGLRenderer implements Renderer {
     canvas: HTMLCanvasElement;
 
-    render: (scene: Scene, camera: Camera) => void;
-    dispose: () => void;
+    activeCamera: Camera | null = null;
+    activeScene: Scene | null = null;
+    vertexCount: number = 0;
+
+    gl: WebGLRenderingContext | null = null;
+    ext: ANGLE_instanced_arrays | null = null;
+    worker: Worker | null = null;
+
+    projectionMatrix: number[] = [];
+    vertexShader: WebGLShader | null = null;
+    fragmentShader: WebGLShader | null = null;
+    program: WebGLProgram | null = null;
+    a_position: number = 0;
+    a_center: number = 0;
+    a_color: number = 0;
+    a_covA: number = 0;
+    a_covB: number = 0;
+    vertexBuffer: WebGLBuffer | null = null;
+    centerBuffer: WebGLBuffer | null = null;
+    colorBuffer: WebGLBuffer | null = null;
+    covABuffer: WebGLBuffer | null = null;
+    covBBuffer: WebGLBuffer | null = null;
 
     constructor(canvas?: HTMLCanvasElement) {
         this.canvas =
             canvas ?? (document.createElementNS("http://www.w3.org/1999/xhtml", "canvas") as HTMLCanvasElement);
+    }
 
-        const gl = (this.canvas.getContext("webgl") ||
+    initWebGL() {
+        this.gl = (this.canvas.getContext("webgl") ||
             this.canvas.getContext("experimental-webgl")) as WebGLRenderingContext;
+        this.ext = this.gl.getExtension("ANGLE_instanced_arrays") as ANGLE_instanced_arrays;
 
-        let ext: ANGLE_instanced_arrays;
-        let worker: Worker;
-        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 vertexLocation: number;
-        let centerLocation: number;
-        let colorLocation: number;
-        let covALocation: number;
-        let covBLocation: number;
-
-        let vertexBuffer: WebGLBuffer;
-        let centerBuffer: WebGLBuffer;
-        let colorBuffer: WebGLBuffer;
-        let covABuffer: WebGLBuffer;
-        let covBBuffer: WebGLBuffer;
-
-        function initGLContext(width: number, height: number, scene: Scene, camera: PerspectiveCamera) {
-            ext = gl.getExtension("ANGLE_instanced_arrays") as ANGLE_instanced_arrays;
-
-            worker = new Worker(
-                URL.createObjectURL(
-                    new Blob(["(", createWorker.toString(), ")(self)"], {
-                        type: "application/javascript",
-                    })
-                )
-            );
-
-            // Viewport
-            gl.viewport(0, 0, width, height);
-            camera.updateProjectionMatrix(width, height);
-
-            // Vertex shader
-            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));
-            }
-
-            // Fragment shader
-            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
-            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));
-            }
-
-            // Blending
-            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);
-
-            // Uniforms
-            u_projection = gl.getUniformLocation(program, "projection") as WebGLUniformLocation;
-            gl.uniformMatrix4fv(u_projection, false, camera.projectionMatrix.buffer);
-
-            u_viewport = gl.getUniformLocation(program, "viewport") as WebGLUniformLocation;
-            gl.uniform2fv(u_viewport, new Float32Array([width, height]));
-
-            u_focal = gl.getUniformLocation(program, "focal") as WebGLUniformLocation;
-            gl.uniform2fv(u_focal, new Float32Array([camera.fx, camera.fy]));
-
-            const viewMatrix = getViewMatrix(camera);
-            u_view = gl.getUniformLocation(program, "view") as WebGLUniformLocation;
-            gl.uniformMatrix4fv(u_view, false, viewMatrix.buffer);
-
-            // Vertex 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);
-
-            vertexLocation = gl.getAttribLocation(program, "position");
-            gl.enableVertexAttribArray(vertexLocation);
-            gl.vertexAttribPointer(vertexLocation, 2, gl.FLOAT, false, 0, 0);
-
-            // Center buffer
-            centerBuffer = gl.createBuffer() as WebGLBuffer;
-            centerLocation = gl.getAttribLocation(program, "center");
-
-            gl.enableVertexAttribArray(centerLocation);
-            gl.bindBuffer(gl.ARRAY_BUFFER, centerBuffer);
-            gl.vertexAttribPointer(centerLocation, 3, gl.FLOAT, false, 0, 0);
-            ext.vertexAttribDivisorANGLE(centerLocation, 1);
+        this.worker = new Worker(
+            URL.createObjectURL(
+                new Blob(["(", createWorker.toString(), ")(self)"], {
+                    type: "application/javascript",
+                })
+            )
+        );
 
-            // Color buffer
-            colorBuffer = gl.createBuffer() as WebGLBuffer;
-            colorLocation = gl.getAttribLocation(program, "color");
+        this.canvas.width = innerWidth;
+        this.canvas.height = innerHeight;
+        this.gl.viewport(0, 0, this.canvas.width, this.canvas.height);
 
-            gl.enableVertexAttribArray(colorLocation);
-            gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
-            gl.vertexAttribPointer(colorLocation, 4, gl.FLOAT, false, 0, 0);
-            ext.vertexAttribDivisorANGLE(colorLocation, 1);
+        this.activeCamera!.updateProjectionMatrix(this.canvas.width, this.canvas.height);
 
-            // Covariance A buffer
-            covABuffer = gl.createBuffer() as WebGLBuffer;
-            covALocation = gl.getAttribLocation(program, "covA");
+        let viewMatrix = getViewMatrix(this.activeCamera!);
 
-            gl.enableVertexAttribArray(covALocation);
-            gl.bindBuffer(gl.ARRAY_BUFFER, covABuffer);
-            gl.vertexAttribPointer(covALocation, 3, gl.FLOAT, false, 0, 0);
-            ext.vertexAttribDivisorANGLE(covALocation, 1);
-
-            // Covariance B buffer
-            covBBuffer = gl.createBuffer() as WebGLBuffer;
-            covBLocation = gl.getAttribLocation(program, "covB");
-
-            gl.enableVertexAttribArray(covBLocation);
-            gl.bindBuffer(gl.ARRAY_BUFFER, covBBuffer);
-            gl.vertexAttribPointer(covBLocation, 3, gl.FLOAT, false, 0, 0);
-            ext.vertexAttribDivisorANGLE(covBLocation, 1);
-
-            worker.onmessage = (e) => {
-                if (e.data.center) {
-                    let { covA, covB, center, color } = e.data;
-
-                    gl.bindBuffer(gl.ARRAY_BUFFER, centerBuffer);
-                    gl.bufferData(gl.ARRAY_BUFFER, center, gl.DYNAMIC_DRAW);
+        this.vertexShader = this.gl.createShader(this.gl.VERTEX_SHADER) as WebGLShader;
+        this.gl.shaderSource(this.vertexShader, vertex);
+        this.gl.compileShader(this.vertexShader);
+        if (!this.gl.getShaderParameter(this.vertexShader, this.gl.COMPILE_STATUS)) {
+            console.error(this.gl.getShaderInfoLog(this.vertexShader));
+        }
 
-                    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
-                    gl.bufferData(gl.ARRAY_BUFFER, color, gl.DYNAMIC_DRAW);
+        this.fragmentShader = this.gl.createShader(this.gl.FRAGMENT_SHADER) as WebGLShader;
+        this.gl.shaderSource(this.fragmentShader, frag);
+        this.gl.compileShader(this.fragmentShader);
+        if (!this.gl.getShaderParameter(this.fragmentShader, this.gl.COMPILE_STATUS)) {
+            console.error(this.gl.getShaderInfoLog(this.fragmentShader));
+        }
 
-                    gl.bindBuffer(gl.ARRAY_BUFFER, covABuffer);
-                    gl.bufferData(gl.ARRAY_BUFFER, covA, gl.DYNAMIC_DRAW);
+        this.program = this.gl.createProgram() as WebGLProgram;
+        this.gl.attachShader(this.program, this.vertexShader);
+        this.gl.attachShader(this.program, this.fragmentShader);
+        this.gl.linkProgram(this.program);
+        this.gl.useProgram(this.program);
 
-                    gl.bindBuffer(gl.ARRAY_BUFFER, covBBuffer);
-                    gl.bufferData(gl.ARRAY_BUFFER, covB, gl.DYNAMIC_DRAW);
-                }
-            };
+        if (!this.gl.getProgramParameter(this.program, this.gl.LINK_STATUS)) {
+            console.error(this.gl.getProgramInfoLog(this.program));
         }
 
-        let currentScene: Scene | null = null;
-        let currentCamera: Camera | null = null;
-
-        this.render = function (scene: Scene, camera: Camera) {
-            if (scene !== currentScene || camera !== currentCamera) {
-                const perspectiveCamera = camera as PerspectiveCamera;
-                if (perspectiveCamera == null) {
-                    throw new Error("Camera is not a PerspectiveCamera");
-                }
+        this.gl.disable(this.gl.DEPTH_TEST); // Disable depth testing
+
+        // Enable blending
+        this.gl.enable(this.gl.BLEND);
+
+        // Set blending function
+        this.gl.blendFuncSeparate(this.gl.ONE_MINUS_DST_ALPHA, this.gl.ONE, this.gl.ONE_MINUS_DST_ALPHA, this.gl.ONE);
+
+        // Set blending equation
+        this.gl.blendEquationSeparate(this.gl.FUNC_ADD, this.gl.FUNC_ADD);
+
+        // projection
+        const u_projection = this.gl.getUniformLocation(this.program, "projection");
+        this.gl.uniformMatrix4fv(u_projection, false, this.projectionMatrix);
+
+        // viewport
+        const u_viewport = this.gl.getUniformLocation(this.program, "viewport");
+        this.gl.uniform2fv(u_viewport, new Float32Array([this.canvas.width, this.canvas.height]));
+
+        // focal
+        const u_focal = this.gl.getUniformLocation(this.program, "focal");
+        this.gl.uniform2fv(u_focal, new Float32Array([this.activeCamera!.fx, this.activeCamera!.fy]));
+
+        // view
+        const u_view = this.gl.getUniformLocation(this.program, "view");
+        this.gl.uniformMatrix4fv(u_view, false, viewMatrix.buffer);
+
+        // positions
+        const triangleVertices = new Float32Array([-2, -2, 2, -2, 2, 2, -2, 2]);
+        this.vertexBuffer = this.gl.createBuffer();
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.vertexBuffer);
+        this.gl.bufferData(this.gl.ARRAY_BUFFER, triangleVertices, this.gl.STATIC_DRAW);
+
+        this.a_position = this.gl.getAttribLocation(this.program, "position");
+        this.gl.enableVertexAttribArray(this.a_position);
+        this.gl.vertexAttribPointer(this.a_position, 2, this.gl.FLOAT, false, 0, 0);
+
+        // center
+        this.centerBuffer = this.gl.createBuffer();
+        this.a_center = this.gl.getAttribLocation(this.program, "center");
+        this.gl.enableVertexAttribArray(this.a_center);
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.centerBuffer);
+        this.gl.vertexAttribPointer(this.a_center, 3, this.gl.FLOAT, false, 0, 0);
+        this.ext.vertexAttribDivisorANGLE(this.a_center, 1); // Use the extension here
+
+        // color
+        this.colorBuffer = this.gl.createBuffer();
+        this.a_color = this.gl.getAttribLocation(this.program, "color");
+        this.gl.enableVertexAttribArray(this.a_color);
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.colorBuffer);
+        this.gl.vertexAttribPointer(this.a_color, 4, this.gl.FLOAT, false, 0, 0);
+        this.ext.vertexAttribDivisorANGLE(this.a_color, 1); // Use the extension here
+
+        // cov
+        this.covABuffer = this.gl.createBuffer();
+        this.a_covA = this.gl.getAttribLocation(this.program, "covA");
+        this.gl.enableVertexAttribArray(this.a_covA);
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.covABuffer);
+        this.gl.vertexAttribPointer(this.a_covA, 3, this.gl.FLOAT, false, 0, 0);
+        this.ext.vertexAttribDivisorANGLE(this.a_covA, 1); // Use the extension here
+
+        this.covBBuffer = this.gl.createBuffer();
+        this.a_covB = this.gl.getAttribLocation(this.program, "covB");
+        this.gl.enableVertexAttribArray(this.a_covB);
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.covBBuffer);
+        this.gl.vertexAttribPointer(this.a_covB, 3, this.gl.FLOAT, false, 0, 0);
+        this.ext.vertexAttribDivisorANGLE(this.a_covB, 1); // Use the extension here
+
+        this.worker.onmessage = (e) => {
+            if (e.data.buffer) {
+                this.activeScene!.setData(new Uint8Array(e.data.buffer));
+                const blob = new Blob([this.activeScene!.data.buffer], {
+                    type: "application/octet-stream",
+                });
+                const link = document.createElement("a");
+                link.download = "model.splat";
+                link.href = URL.createObjectURL(blob);
+                document.body.appendChild(link);
+                link.click();
+            } else {
+                let { covA, covB, center, color } = e.data;
+                this.vertexCount = center.length / 3;
+
+                const gl = this.gl!;
+
+                gl.bindBuffer(gl.ARRAY_BUFFER, this.centerBuffer);
+                gl.bufferData(gl.ARRAY_BUFFER, center, gl.DYNAMIC_DRAW);
+
+                gl.bindBuffer(gl.ARRAY_BUFFER, this.colorBuffer);
+                gl.bufferData(gl.ARRAY_BUFFER, color, gl.DYNAMIC_DRAW);
+
+                gl.bindBuffer(gl.ARRAY_BUFFER, this.covABuffer);
+                gl.bufferData(gl.ARRAY_BUFFER, covA, gl.DYNAMIC_DRAW);
+
+                gl.bindBuffer(gl.ARRAY_BUFFER, this.covBBuffer);
+                gl.bufferData(gl.ARRAY_BUFFER, covB, gl.DYNAMIC_DRAW);
+            }
+        };
 
-                if (currentScene != null || currentCamera != null) {
-                    this.dispose();
-                }
+        this.frame = () => {
+            this.activeCamera!.updateProjectionMatrix(this.canvas.width, this.canvas.height);
 
-                currentScene = scene;
-                currentCamera = camera;
+            const viewProj = this.activeCamera!.projectionMatrix.multiply(viewMatrix);
+            this.worker!.postMessage({ view: viewProj.buffer });
 
-                initGLContext(this.canvas.width, this.canvas.height, scene, perspectiveCamera);
+            if (this.vertexCount > 0) {
+                this.gl!.uniformMatrix4fv(u_view, false, viewMatrix.buffer);
+                this.ext!.drawArraysInstancedANGLE(this.gl!.TRIANGLE_FAN, 0, 4, this.vertexCount);
+            } else {
+                this.gl!.clear(this.gl!.COLOR_BUFFER_BIT);
             }
         };
+    }
 
-        this.dispose = function () {
-            gl.deleteBuffer(vertexBuffer);
-            gl.deleteBuffer(centerBuffer);
-            gl.deleteBuffer(colorBuffer);
-            gl.deleteBuffer(covABuffer);
-            gl.deleteBuffer(covBBuffer);
+    frame: () => void = () => {};
 
-            gl.deleteShader(vertexShader);
-            gl.deleteShader(fragmentShader);
-            gl.deleteProgram(program);
+    render(scene: Scene, camera: Camera) {
+        if (this.activeScene !== scene || this.activeCamera !== camera) {
+            if (this.activeScene !== null && this.activeCamera !== null) {
+                this.dispose();
+            }
 
-            worker.terminate();
-        };
+            this.activeScene = scene;
+            this.activeCamera = camera;
+            this.initWebGL();
+        }
+
+        this.frame();
     }
+
+    dispose() {}
 }

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

@@ -1,77 +1,8 @@
 import type { Camera } from "$lib/splat.js/cameras/Camera";
-import { Vector3 } from "$lib/splat.js/math/Vector3";
-import { Matrix3 } from "$lib/splat.js/math/Matrix3";
 import { Matrix4 } from "$lib/splat.js/math/Matrix4";
-import type { Quaternion } from "$lib/splat.js/math/Quaternion";
-
-export function quaternionToEuler(q: Quaternion) {
-    return new Vector3(
-        Math.atan2(2 * (q.w * q.x + q.y * q.z), 1 - 2 * (q.x * q.x + q.y * q.y)),
-        Math.asin(2 * (q.w * q.y - q.z * q.x)),
-        Math.atan2(2 * (q.w * q.z + q.x * q.y), 1 - 2 * (q.y * q.y + q.z * q.z))
-    );
-}
-
-export function eulerToMatrix(v: Vector3) {
-    const x = v.x;
-    const y = v.y;
-    const z = v.z;
-
-    const cx = Math.cos(x);
-    const sx = Math.sin(x);
-    const cy = Math.cos(y);
-    const sy = Math.sin(y);
-    const cz = Math.cos(z);
-    const sz = Math.sin(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 Matrix4(...rotationMatrix);
-}
-
-export function quatToMatrix(q: Quaternion) {
-    const x = q.x;
-    const y = q.y;
-    const z = q.z;
-    const w = q.w;
-
-    const xx = x * x;
-    const xy = x * y;
-    const xz = x * z;
-    const xw = x * w;
-    const yy = y * y;
-    const yz = y * z;
-    const yw = y * w;
-    const zz = z * z;
-    const zw = z * w;
-
-    const rotationMatrix = [
-        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 new Matrix3(...rotationMatrix);
-}
 
 export function getViewMatrix(camera: Camera) {
-    const R = quatToMatrix(camera.rotation).buffer;
+    const R = camera.rotation.buffer;
     const t = camera.position.flat();
     const camToWorld = [
         [R[0], R[1], R[2], 0],

viewer/src/routes/viewer/[slug]/+page.svelte

@@ -3,7 +3,6 @@
     import type { IViewer } from "./IViewer";
     import { BabylonViewer } from "./BabylonViewer";
     import { SplatViewer } from "./SplatViewer";
-    // import { SplatViewer } from "./SplatViewer.Legacy";
 
     export let data: {
         scene: {

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

@@ -1,1021 +0,0 @@
-import type { IViewer } from "./IViewer";
-
-class OrbitCamera {
-    position: number[];
-    rotation: number[];
-    fy: number;
-    fx: number;
-    alpha: number;
-    beta: number;
-    radius: number;
-    target: number[];
-    desiredAlpha: number;
-    desiredBeta: number;
-    desiredRadius: number;
-    desiredTarget: number[];
-    damping: number;
-
-    minBeta = (5 * Math.PI) / 180;
-    maxBeta = (85 * Math.PI) / 180;
-    minZoom = 0.5;
-    maxZoom = 30;
-    orbitSpeed = 0.005;
-    panSpeed = 0.01;
-    zoomSpeed = 0.05;
-
-    constructor(alpha = 0, beta = 0, radius = 5, target = [0, 0, 0]) {
-        this.position = [0, 0, -radius];
-        this.rotation = [
-            [1, 0, 0],
-            [0, 1, 0],
-            [0, 0, 1],
-        ].flat();
-        this.fx = 1132;
-        this.fy = 1132;
-        this.alpha = alpha;
-        this.beta = beta;
-        this.radius = radius;
-        this.target = target;
-        this.desiredAlpha = alpha;
-        this.desiredBeta = beta;
-        this.desiredRadius = radius;
-        this.desiredTarget = target;
-        this.damping = 0.4;
-        this.updateCameraPositionAndRotation();
-    }
-
-    lerp(start: number, end: number, factor: number) {
-        return (1 - factor) * start + factor * end;
-    }
-
-    pan(dx: number, dy: number) {
-        const right = [this.rotation[0], this.rotation[3], this.rotation[6]];
-        const up = [this.rotation[1], this.rotation[4], this.rotation[7]];
-        for (let i = 0; i < 3; i++) {
-            this.desiredTarget[i] += right[i] * dx + up[i] * dy;
-        }
-    }
-
-    getZoomNorm(): number {
-        return 0.1 + (0.9 * (this.desiredRadius - this.minZoom)) / (this.maxZoom - this.minZoom);
-    }
-
-    update() {
-        this.alpha = this.lerp(this.alpha, this.desiredAlpha, this.damping);
-        this.beta = this.lerp(this.beta, this.desiredBeta, this.damping);
-        this.radius = this.lerp(this.radius, this.desiredRadius, this.damping);
-        for (let i = 0; i < 3; i++) {
-            this.target[i] = this.lerp(this.target[i], this.desiredTarget[i], this.damping);
-        }
-        this.updateCameraPositionAndRotation();
-    }
-
-    updateCameraPositionAndRotation() {
-        const x = this.target[0] + this.radius * Math.sin(this.alpha) * Math.cos(this.beta);
-        const y = this.target[1] - this.radius * Math.sin(this.beta);
-        const z = this.target[2] - this.radius * Math.cos(this.alpha) * Math.cos(this.beta);
-        this.position = [x, y, z];
-
-        const direction = normalize(subtract(this.target, this.position));
-        const eulerAngles = directionToEuler(direction);
-        this.rotation = eulerToRotationMatrix(eulerAngles[0], eulerAngles[1], eulerAngles[2]);
-    }
-}
-
-function directionToEuler(direction: number[]) {
-    const x = Math.asin(-direction[1]);
-    const y = Math.atan2(direction[0], direction[2]);
-    return [x, y, 0];
-}
-
-function eulerToRotationMatrix(x: number, y: number, z: number) {
-    const cx = Math.cos(x);
-    const sx = Math.sin(x);
-    const cy = Math.cos(y);
-    const sy = Math.sin(y);
-    const cz = Math.cos(z);
-    const sz = Math.sin(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 rotationMatrix;
-}
-
-function normalize(a: number[]) {
-    const len = Math.hypot(...a);
-    return a.map((v) => v / len);
-}
-
-function subtract(a: number[], b: number[]) {
-    return a.map((v, i) => v - b[i]);
-}
-
-function getProjectionMatrix(fx: number, fy: number, width: number, height: number) {
-    const znear = 0.2;
-    const zfar = 200;
-    return [
-        [(2 * fx) / width, 0, 0, 0],
-        [0, -(2 * fy) / height, 0, 0],
-        [0, 0, zfar / (zfar - znear), 1],
-        [0, 0, -(zfar * znear) / (zfar - znear), 0],
-    ].flat();
-}
-
-function getViewMatrix(camera: any) {
-    const R = camera.rotation.flat();
-    const t = camera.position;
-    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 camToWorld;
-}
-
-function multiply4(a: number[], b: number[]) {
-    return [
-        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],
-    ];
-}
-
-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();
-        }
-    };
-}
-
-function preventDefault(e: Event) {
-    e.preventDefault();
-    e.stopPropagation();
-}
-
-const vertexShaderSource = `
-    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
-		);
-  	}
-`;
-
-const fragmentShaderSource = `
-    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);
-    }
-`;
-
-export class SplatViewer implements IViewer {
-    canvas: HTMLCanvasElement;
-    gl: WebGLRenderingContext;
-    ext: ANGLE_instanced_arrays;
-    camera: OrbitCamera;
-
-    splatData: Uint8Array;
-    vertexCount: number;
-    worker: Worker;
-
-    projectionMatrix: number[];
-    vertexShader: WebGLShader;
-    fragmentShader: WebGLShader;
-    program: WebGLProgram;
-    a_position: number;
-    a_center: number;
-    a_color: number;
-    a_covA: number;
-    a_covB: number;
-    vertexBuffer: WebGLBuffer | null;
-    centerBuffer: WebGLBuffer | null;
-    colorBuffer: WebGLBuffer | null;
-    covABuffer: WebGLBuffer | null;
-    covBBuffer: WebGLBuffer | null;
-
-    dragging = false;
-    panning = false;
-    lastX: number = 0;
-    lastY: number = 0;
-
-    animationFrameId: number | null = null;
-    disposed: boolean = false;
-
-    constructor(canvas: HTMLCanvasElement) {
-        this.disposed = false;
-        this.canvas = canvas;
-        this.gl = this.initWebGL();
-        this.ext = this.gl.getExtension("ANGLE_instanced_arrays") as ANGLE_instanced_arrays;
-        this.camera = new OrbitCamera();
-
-        this.splatData = new Uint8Array();
-        this.vertexCount = 0;
-
-        this.worker = new Worker(
-            URL.createObjectURL(
-                new Blob(["(", createWorker.toString(), ")(self)"], {
-                    type: "application/javascript",
-                })
-            )
-        );
-
-        this.canvas.width = innerWidth;
-        this.canvas.height = innerHeight;
-        this.gl.viewport(0, 0, this.canvas.width, this.canvas.height);
-
-        this.projectionMatrix = getProjectionMatrix(
-            this.camera.fx,
-            this.camera.fy,
-            this.canvas.width,
-            this.canvas.height
-        );
-
-        let viewMatrix = getViewMatrix(this.camera);
-
-        this.vertexShader = this.gl.createShader(this.gl.VERTEX_SHADER) as WebGLShader;
-        this.gl.shaderSource(this.vertexShader, vertexShaderSource);
-        this.gl.compileShader(this.vertexShader);
-        if (!this.gl.getShaderParameter(this.vertexShader, this.gl.COMPILE_STATUS)) {
-            console.error(this.gl.getShaderInfoLog(this.vertexShader));
-        }
-
-        this.fragmentShader = this.gl.createShader(this.gl.FRAGMENT_SHADER) as WebGLShader;
-        this.gl.shaderSource(this.fragmentShader, fragmentShaderSource);
-        this.gl.compileShader(this.fragmentShader);
-        if (!this.gl.getShaderParameter(this.fragmentShader, this.gl.COMPILE_STATUS)) {
-            console.error(this.gl.getShaderInfoLog(this.fragmentShader));
-        }
-
-        this.program = this.gl.createProgram() as WebGLProgram;
-        this.gl.attachShader(this.program, this.vertexShader);
-        this.gl.attachShader(this.program, this.fragmentShader);
-        this.gl.linkProgram(this.program);
-        this.gl.useProgram(this.program);
-
-        if (!this.gl.getProgramParameter(this.program, this.gl.LINK_STATUS)) {
-            console.error(this.gl.getProgramInfoLog(this.program));
-        }
-
-        this.gl.disable(this.gl.DEPTH_TEST); // Disable depth testing
-
-        // Enable blending
-        this.gl.enable(this.gl.BLEND);
-
-        // Set blending function
-        this.gl.blendFuncSeparate(this.gl.ONE_MINUS_DST_ALPHA, this.gl.ONE, this.gl.ONE_MINUS_DST_ALPHA, this.gl.ONE);
-
-        // Set blending equation
-        this.gl.blendEquationSeparate(this.gl.FUNC_ADD, this.gl.FUNC_ADD);
-
-        // projection
-        const u_projection = this.gl.getUniformLocation(this.program, "projection");
-        this.gl.uniformMatrix4fv(u_projection, false, this.projectionMatrix);
-
-        // viewport
-        const u_viewport = this.gl.getUniformLocation(this.program, "viewport");
-        this.gl.uniform2fv(u_viewport, new Float32Array([this.canvas.width, this.canvas.height]));
-
-        // focal
-        const u_focal = this.gl.getUniformLocation(this.program, "focal");
-        this.gl.uniform2fv(u_focal, new Float32Array([this.camera.fx, this.camera.fy]));
-
-        // view
-        const u_view = this.gl.getUniformLocation(this.program, "view");
-        this.gl.uniformMatrix4fv(u_view, false, viewMatrix);
-
-        // positions
-        const triangleVertices = new Float32Array([-2, -2, 2, -2, 2, 2, -2, 2]);
-        this.vertexBuffer = this.gl.createBuffer();
-        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.vertexBuffer);
-        this.gl.bufferData(this.gl.ARRAY_BUFFER, triangleVertices, this.gl.STATIC_DRAW);
-
-        this.a_position = this.gl.getAttribLocation(this.program, "position");
-        this.gl.enableVertexAttribArray(this.a_position);
-        this.gl.vertexAttribPointer(this.a_position, 2, this.gl.FLOAT, false, 0, 0);
-
-        // center
-        this.centerBuffer = this.gl.createBuffer();
-        this.a_center = this.gl.getAttribLocation(this.program, "center");
-        this.gl.enableVertexAttribArray(this.a_center);
-        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.centerBuffer);
-        this.gl.vertexAttribPointer(this.a_center, 3, this.gl.FLOAT, false, 0, 0);
-        this.ext.vertexAttribDivisorANGLE(this.a_center, 1); // Use the extension here
-
-        // color
-        this.colorBuffer = this.gl.createBuffer();
-        this.a_color = this.gl.getAttribLocation(this.program, "color");
-        this.gl.enableVertexAttribArray(this.a_color);
-        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.colorBuffer);
-        this.gl.vertexAttribPointer(this.a_color, 4, this.gl.FLOAT, false, 0, 0);
-        this.ext.vertexAttribDivisorANGLE(this.a_color, 1); // Use the extension here
-
-        // cov
-        this.covABuffer = this.gl.createBuffer();
-        this.a_covA = this.gl.getAttribLocation(this.program, "covA");
-        this.gl.enableVertexAttribArray(this.a_covA);
-        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.covABuffer);
-        this.gl.vertexAttribPointer(this.a_covA, 3, this.gl.FLOAT, false, 0, 0);
-        this.ext.vertexAttribDivisorANGLE(this.a_covA, 1); // Use the extension here
-
-        this.covBBuffer = this.gl.createBuffer();
-        this.a_covB = this.gl.getAttribLocation(this.program, "covB");
-        this.gl.enableVertexAttribArray(this.a_covB);
-        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.covBBuffer);
-        this.gl.vertexAttribPointer(this.a_covB, 3, this.gl.FLOAT, false, 0, 0);
-        this.ext.vertexAttribDivisorANGLE(this.a_covB, 1); // Use the extension here
-
-        console.log(this.vertexBuffer, this.centerBuffer, this.colorBuffer, this.covABuffer, this.covBBuffer);
-
-        this.worker.onmessage = (e) => {
-            if (e.data.buffer) {
-                this.splatData = new Uint8Array(e.data.buffer);
-                const blob = new Blob([this.splatData.buffer], {
-                    type: "application/octet-stream",
-                });
-                const link = document.createElement("a");
-                link.download = "model.splat";
-                link.href = URL.createObjectURL(blob);
-                document.body.appendChild(link);
-                link.click();
-            } else {
-                let { covA, covB, center, color } = e.data;
-                vertexCount = center.length / 3;
-
-                this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.centerBuffer);
-                this.gl.bufferData(this.gl.ARRAY_BUFFER, center, this.gl.DYNAMIC_DRAW);
-
-                this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.colorBuffer);
-                this.gl.bufferData(this.gl.ARRAY_BUFFER, color, this.gl.DYNAMIC_DRAW);
-
-                this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.covABuffer);
-                this.gl.bufferData(this.gl.ARRAY_BUFFER, covA, this.gl.DYNAMIC_DRAW);
-
-                this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.covBBuffer);
-                this.gl.bufferData(this.gl.ARRAY_BUFFER, covB, this.gl.DYNAMIC_DRAW);
-            }
-        };
-
-        let vertexCount = 0;
-
-        const frame = () => {
-            this.camera.update();
-            viewMatrix = getViewMatrix(this.camera);
-
-            const viewProj = multiply4(this.projectionMatrix, viewMatrix);
-            this.worker.postMessage({ view: viewProj });
-
-            if (vertexCount > 0) {
-                this.gl.uniformMatrix4fv(u_view, false, viewMatrix);
-                this.ext.drawArraysInstancedANGLE(this.gl.TRIANGLE_FAN, 0, 4, vertexCount);
-            } else {
-                this.gl.clear(this.gl.COLOR_BUFFER_BIT);
-            }
-
-            if (!this.disposed) {
-                this.animationFrameId = requestAnimationFrame(frame);
-            }
-        };
-
-        this.animationFrameId = requestAnimationFrame(frame);
-
-        document.addEventListener("dragenter", preventDefault);
-        document.addEventListener("dragover", preventDefault);
-        document.addEventListener("dragleave", preventDefault);
-        document.addEventListener("contextmenu", preventDefault);
-
-        this.handleTouchStart = this.handleTouchStart.bind(this);
-        this.handleTouchEnd = this.handleTouchEnd.bind(this);
-        this.handleTouchMove = this.handleTouchMove.bind(this);
-        this.handleMouseDown = this.handleMouseDown.bind(this);
-        this.handleMouseUp = this.handleMouseUp.bind(this);
-        this.handleMouseMove = this.handleMouseMove.bind(this);
-        this.handleMouseWheel = this.handleMouseWheel.bind(this);
-        this.handleDrop = this.handleDrop.bind(this);
-        this.handleResize = this.handleResize.bind(this);
-
-        this.canvas.addEventListener("touchstart", this.handleTouchStart);
-        this.canvas.addEventListener("touchend", this.handleTouchEnd);
-        this.canvas.addEventListener("touchmove", this.handleTouchMove);
-        this.canvas.addEventListener("mousedown", this.handleMouseDown);
-        this.canvas.addEventListener("mouseup", this.handleMouseUp);
-        this.canvas.addEventListener("mousemove", this.handleMouseMove);
-        this.canvas.addEventListener("wheel", this.handleMouseWheel);
-        this.canvas.addEventListener("drop", this.handleDrop);
-
-        window.addEventListener("resize", this.handleResize);
-    }
-
-    initWebGL(): WebGLRenderingContext {
-        const gl = this.canvas.getContext("webgl") || this.canvas.getContext("experimental-webgl");
-        if (!gl) {
-            alert("WebGL is not supported on your browser!");
-        }
-        return gl as WebGLRenderingContext;
-    }
-
-    async loadScene(url: string, onProgress?: (progress: number) => void) {
-        const req = await fetch(url, {
-            mode: "cors",
-            credentials: "omit",
-        });
-        console.log(req);
-        if (req.status != 200) {
-            throw new Error(req.status + " Unable to load " + req.url);
-        }
-
-        const rowLength = 3 * 4 + 3 * 4 + 4 + 4;
-        const reader = req.body!.getReader();
-        this.splatData = new Uint8Array(req.headers.get("content-length") as any);
-
-        console.log("Vertex Count", this.splatData.length / rowLength);
-
-        let bytesRead = 0;
-        let lastVertexCount = -1;
-        let stopLoading = false;
-
-        while (true) {
-            const { done, value } = await reader.read();
-            if (done || stopLoading) break;
-
-            this.splatData.set(value, bytesRead);
-            bytesRead += value.length;
-
-            if (onProgress) {
-                onProgress(bytesRead / this.splatData.length);
-            }
-
-            if (this.vertexCount > lastVertexCount) {
-                this.worker.postMessage({
-                    buffer: this.splatData.buffer,
-                    vertexCount: Math.floor(bytesRead / rowLength),
-                });
-                lastVertexCount = this.vertexCount;
-            }
-        }
-        if (!stopLoading) {
-            this.worker.postMessage({
-                buffer: this.splatData.buffer,
-                vertexCount: Math.floor(bytesRead / rowLength),
-            });
-        }
-    }
-
-    handleTouchStart(e: TouchEvent) {
-        e.preventDefault();
-        this.dragging = true;
-        this.panning = e.touches.length === 2;
-        this.lastX = e.touches[0].clientX;
-        this.lastY = e.touches[0].clientY;
-    }
-
-    handleTouchEnd(e: TouchEvent) {
-        e.preventDefault();
-        this.dragging = false;
-        this.panning = false;
-    }
-
-    handleTouchMove(e: TouchEvent) {
-        e.preventDefault();
-        if (!this.dragging) return;
-        const dx = e.touches[0].clientX - this.lastX;
-        const dy = e.touches[0].clientY - this.lastY;
-        const zoomNorm = this.camera.getZoomNorm();
-
-        if (this.panning) {
-            this.camera.pan(-dx * this.camera.panSpeed * zoomNorm, -dy * this.camera.panSpeed * zoomNorm);
-        } else {
-            this.camera.desiredAlpha -= dx * this.camera.orbitSpeed;
-            this.camera.desiredBeta += dy * this.camera.orbitSpeed;
-            this.camera.desiredBeta = Math.min(
-                Math.max(this.camera.desiredBeta, this.camera.minBeta),
-                this.camera.maxBeta
-            );
-        }
-
-        this.lastX = e.touches[0].clientX;
-        this.lastY = e.touches[0].clientY;
-    }
-
-    handleMouseDown(e: MouseEvent) {
-        this.dragging = true;
-        this.panning = e.button === 2;
-        this.lastX = e.clientX;
-        this.lastY = e.clientY;
-    }
-
-    handleMouseUp(e: MouseEvent) {
-        this.dragging = false;
-        this.panning = false;
-    }
-
-    handleMouseMove(e: MouseEvent) {
-        if (!this.dragging) return;
-        const dx = e.clientX - this.lastX;
-        const dy = e.clientY - this.lastY;
-        const zoomNorm = this.camera.getZoomNorm();
-
-        if (this.panning) {
-            this.camera.pan(-dx * this.camera.panSpeed * zoomNorm, -dy * this.camera.panSpeed * zoomNorm);
-        } else {
-            this.camera.desiredAlpha -= dx * this.camera.orbitSpeed;
-            this.camera.desiredBeta += dy * this.camera.orbitSpeed;
-            this.camera.desiredBeta = Math.min(
-                Math.max(this.camera.desiredBeta, this.camera.minBeta),
-                this.camera.maxBeta
-            );
-        }
-
-        this.lastX = e.clientX;
-        this.lastY = e.clientY;
-    }
-
-    handleMouseWheel(e: WheelEvent) {
-        const zoomNorm = this.camera.getZoomNorm();
-        this.camera.desiredRadius += e.deltaY * this.camera.zoomSpeed * zoomNorm;
-        this.camera.desiredRadius = Math.min(
-            Math.max(this.camera.desiredRadius, this.camera.minZoom),
-            this.camera.maxZoom
-        );
-    }
-
-    handleDrop(e: DragEvent) {
-        e.preventDefault();
-        e.stopPropagation();
-        this.selectFile(e.dataTransfer!.files[0]);
-    }
-
-    selectFile(file: File) {
-        const reader = new FileReader();
-        reader.onload = () => {
-            this.splatData = new Uint8Array(reader.result as ArrayBuffer);
-            if (
-                this.splatData[0] !== 112 ||
-                this.splatData[1] !== 108 ||
-                this.splatData[2] !== 121 ||
-                this.splatData[3] !== 10
-            ) {
-                alert("Invalid file format");
-                return;
-            }
-            this.worker.postMessage({ ply: this.splatData.buffer });
-        };
-        reader.readAsArrayBuffer(file);
-    }
-
-    handleResize() {
-        this.canvas.width = innerWidth;
-        this.canvas.height = innerHeight;
-        this.gl.viewport(0, 0, this.canvas.width, this.canvas.height);
-
-        this.projectionMatrix = getProjectionMatrix(
-            this.camera.fx,
-            this.camera.fy,
-            this.canvas.width,
-            this.canvas.height
-        );
-
-        const u_projection = this.gl.getUniformLocation(this.program, "projection");
-        this.gl.uniformMatrix4fv(u_projection, false, this.projectionMatrix);
-
-        const u_viewport = this.gl.getUniformLocation(this.program, "viewport");
-        this.gl.uniform2fv(u_viewport, new Float32Array([this.canvas.width, this.canvas.height]));
-    }
-
-    dispose() {
-        this.worker.terminate();
-
-        this.gl.disableVertexAttribArray(this.a_position);
-        this.gl.disableVertexAttribArray(this.a_center);
-        this.gl.disableVertexAttribArray(this.a_color);
-        this.gl.disableVertexAttribArray(this.a_covA);
-        this.gl.disableVertexAttribArray(this.a_covB);
-
-        this.gl.deleteBuffer(this.vertexBuffer);
-        this.gl.deleteBuffer(this.centerBuffer);
-        this.gl.deleteBuffer(this.colorBuffer);
-        this.gl.deleteBuffer(this.covABuffer);
-        this.gl.deleteBuffer(this.covBBuffer);
-
-        this.gl.detachShader(this.program, this.vertexShader);
-        this.gl.detachShader(this.program, this.fragmentShader);
-        this.gl.deleteShader(this.vertexShader);
-        this.gl.deleteShader(this.fragmentShader);
-
-        this.gl.deleteProgram(this.program);
-
-        this.vertexBuffer = null;
-        this.centerBuffer = null;
-        this.colorBuffer = null;
-        this.covABuffer = null;
-        this.covBBuffer = null;
-
-        this.splatData = new Uint8Array();
-
-        if (this.animationFrameId) {
-            cancelAnimationFrame(this.animationFrameId);
-        }
-
-        this.disposed = true;
-
-        document.removeEventListener("dragenter", preventDefault);
-        document.removeEventListener("dragover", preventDefault);
-        document.removeEventListener("dragleave", preventDefault);
-        document.removeEventListener("contextmenu", preventDefault);
-
-        this.canvas.removeEventListener("touchstart", this.handleTouchStart);
-        this.canvas.removeEventListener("touchend", this.handleTouchEnd);
-        this.canvas.removeEventListener("touchmove", this.handleTouchMove);
-        this.canvas.removeEventListener("mousedown", this.handleMouseDown);
-        this.canvas.removeEventListener("mouseup", this.handleMouseUp);
-        this.canvas.removeEventListener("mousemove", this.handleMouseMove);
-        this.canvas.removeEventListener("wheel", this.handleMouseWheel);
-        this.canvas.removeEventListener("drop", this.handleDrop);
-
-        window.removeEventListener("resize", this.handleResize);
-    }
-
-    async capture(): Promise<string | null> {
-        return new Promise((resolve) => {
-            requestAnimationFrame(() => {
-                const offscreenCanvas = document.createElement("canvas");
-                offscreenCanvas.width = 512;
-                offscreenCanvas.height = 512;
-                const offscreenContext = offscreenCanvas.getContext("2d")!;
-
-                const x = (this.canvas.width - offscreenCanvas.width) / 2;
-                const y = (this.canvas.height - offscreenCanvas.height) / 2;
-
-                offscreenContext.drawImage(
-                    this.canvas,
-                    x,
-                    y,
-                    offscreenCanvas.width,
-                    offscreenCanvas.height,
-                    0,
-                    0,
-                    offscreenCanvas.width,
-                    offscreenCanvas.height
-                );
-                const dataURL = offscreenCanvas.toDataURL("image/png");
-                offscreenCanvas.remove();
-
-                resolve(dataURL);
-            });
-        });
-    }
-
-    getStats(): { name: string; value: any }[] {
-        return [];
-    }
-}

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

@@ -2,38 +2,515 @@ import type { IViewer } from "./IViewer";
 import * as SPLAT from "$lib/splat.js";
 
 export class SplatViewer implements IViewer {
-    scene: SPLAT.Scene;
+    canvas: HTMLCanvasElement;
+    gl: WebGLRenderingContext;
+    ext: ANGLE_instanced_arrays;
     camera: SPLAT.Camera;
-    renderer: SPLAT.Renderer;
+    orbitControls: SPLAT.OrbitControls;
+
+    splatData: Uint8Array;
+    vertexCount: number;
+    worker: Worker;
+
+    vertexShader: WebGLShader;
+    fragmentShader: WebGLShader;
+    program: WebGLProgram;
+    a_position: number;
+    a_center: number;
+    a_color: number;
+    a_covA: number;
+    a_covB: number;
+    vertexBuffer: WebGLBuffer | null;
+    centerBuffer: WebGLBuffer | null;
+    colorBuffer: WebGLBuffer | null;
+    covABuffer: WebGLBuffer | null;
+    covBBuffer: WebGLBuffer | null;
+
+    dragging = false;
+    panning = false;
+    lastX: number = 0;
+    lastY: number = 0;
+
+    animationFrameId: number | null = null;
     disposed: boolean = false;
 
     constructor(canvas: HTMLCanvasElement) {
-        this.scene = new SPLAT.Scene();
-        this.camera = new SPLAT.PerspectiveCamera();
-        this.renderer = new SPLAT.WebGLRenderer(canvas);
-    }
+        this.disposed = false;
+        this.canvas = canvas;
+        this.gl = this.initWebGL();
+        this.ext = this.gl.getExtension("ANGLE_instanced_arrays") as ANGLE_instanced_arrays;
+        this.camera = new SPLAT.Camera();
+        this.orbitControls = new SPLAT.OrbitControls(this.camera, this.canvas);
 
-    async loadScene(url: string, onProgress?: (progress: number) => void) {
-        await SPLAT.Loader.LoadAsync(url, this.scene, onProgress);
+        this.splatData = new Uint8Array();
+        this.vertexCount = 0;
+
+        this.worker = new Worker(
+            URL.createObjectURL(
+                new Blob(["(", SPLAT.createWorker.toString(), ")(self)"], {
+                    type: "application/javascript",
+                })
+            )
+        );
+
+        const gl = this.gl;
+
+        this.canvas.width = innerWidth;
+        this.canvas.height = innerHeight;
+        gl.viewport(0, 0, this.canvas.width, this.canvas.height);
+        this.camera.updateProjectionMatrix(this.canvas.width, this.canvas.height);
+
+        let viewMatrix = SPLAT.getViewMatrix(this.camera);
+
+        this.vertexShader = gl.createShader(gl.VERTEX_SHADER) as WebGLShader;
+        gl.shaderSource(this.vertexShader, SPLAT.vertex);
+        gl.compileShader(this.vertexShader);
+        if (!gl.getShaderParameter(this.vertexShader, gl.COMPILE_STATUS)) {
+            console.error(gl.getShaderInfoLog(this.vertexShader));
+        }
+
+        this.fragmentShader = gl.createShader(gl.FRAGMENT_SHADER) as WebGLShader;
+        gl.shaderSource(this.fragmentShader, SPLAT.frag);
+        gl.compileShader(this.fragmentShader);
+        if (!gl.getShaderParameter(this.fragmentShader, gl.COMPILE_STATUS)) {
+            console.error(gl.getShaderInfoLog(this.fragmentShader));
+        }
+
+        this.program = gl.createProgram() as WebGLProgram;
+        gl.attachShader(this.program, this.vertexShader);
+        gl.attachShader(this.program, this.fragmentShader);
+        gl.linkProgram(this.program);
+        gl.useProgram(this.program);
+
+        if (!gl.getProgramParameter(this.program, gl.LINK_STATUS)) {
+            console.error(gl.getProgramInfoLog(this.program));
+        }
+
+        gl.disable(gl.DEPTH_TEST); // Disable depth testing
+
+        // Enable blending
+        gl.enable(gl.BLEND);
+
+        // Set blending function
+        gl.blendFuncSeparate(gl.ONE_MINUS_DST_ALPHA, gl.ONE, gl.ONE_MINUS_DST_ALPHA, gl.ONE);
+
+        // Set blending equation
+        gl.blendEquationSeparate(gl.FUNC_ADD, gl.FUNC_ADD);
+
+        // projection
+        const u_projection = gl.getUniformLocation(this.program, "projection");
+        gl.uniformMatrix4fv(u_projection, false, this.camera.projectionMatrix.buffer);
+
+        // viewport
+        const u_viewport = gl.getUniformLocation(this.program, "viewport");
+        gl.uniform2fv(u_viewport, new Float32Array([this.canvas.width, this.canvas.height]));
+
+        // focal
+        const u_focal = gl.getUniformLocation(this.program, "focal");
+        gl.uniform2fv(u_focal, new Float32Array([this.camera.fx, this.camera.fy]));
+
+        // view
+        const u_view = gl.getUniformLocation(this.program, "view");
+        gl.uniformMatrix4fv(u_view, false, viewMatrix.buffer);
+
+        // positions
+        const triangleVertices = new Float32Array([-2, -2, 2, -2, 2, 2, -2, 2]);
+        this.vertexBuffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, triangleVertices, gl.STATIC_DRAW);
+
+        this.a_position = gl.getAttribLocation(this.program, "position");
+        gl.enableVertexAttribArray(this.a_position);
+        gl.vertexAttribPointer(this.a_position, 2, gl.FLOAT, false, 0, 0);
+
+        // center
+        this.centerBuffer = gl.createBuffer();
+        this.a_center = gl.getAttribLocation(this.program, "center");
+        gl.enableVertexAttribArray(this.a_center);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.centerBuffer);
+        gl.vertexAttribPointer(this.a_center, 3, gl.FLOAT, false, 0, 0);
+        this.ext.vertexAttribDivisorANGLE(this.a_center, 1); // Use the extension here
+
+        // color
+        this.colorBuffer = gl.createBuffer();
+        this.a_color = gl.getAttribLocation(this.program, "color");
+        gl.enableVertexAttribArray(this.a_color);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.colorBuffer);
+        gl.vertexAttribPointer(this.a_color, 4, gl.FLOAT, false, 0, 0);
+        this.ext.vertexAttribDivisorANGLE(this.a_color, 1); // Use the extension here
+
+        // cov
+        this.covABuffer = gl.createBuffer();
+        this.a_covA = gl.getAttribLocation(this.program, "covA");
+        gl.enableVertexAttribArray(this.a_covA);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.covABuffer);
+        gl.vertexAttribPointer(this.a_covA, 3, gl.FLOAT, false, 0, 0);
+        this.ext.vertexAttribDivisorANGLE(this.a_covA, 1); // Use the extension here
+
+        this.covBBuffer = gl.createBuffer();
+        this.a_covB = gl.getAttribLocation(this.program, "covB");
+        gl.enableVertexAttribArray(this.a_covB);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.covBBuffer);
+        gl.vertexAttribPointer(this.a_covB, 3, gl.FLOAT, false, 0, 0);
+        this.ext.vertexAttribDivisorANGLE(this.a_covB, 1); // Use the extension here
+
+        this.worker.onmessage = (e) => {
+            if (e.data.buffer) {
+                this.splatData = new Uint8Array(e.data.buffer);
+                const blob = new Blob([this.splatData.buffer], {
+                    type: "application/octet-stream",
+                });
+                const link = document.createElement("a");
+                link.download = "model.splat";
+                link.href = URL.createObjectURL(blob);
+                document.body.appendChild(link);
+                link.click();
+            } else {
+                let { covA, covB, center, color } = e.data;
+                vertexCount = center.length / 3;
+
+                gl.bindBuffer(gl.ARRAY_BUFFER, this.centerBuffer);
+                gl.bufferData(gl.ARRAY_BUFFER, center, gl.DYNAMIC_DRAW);
+
+                gl.bindBuffer(gl.ARRAY_BUFFER, this.colorBuffer);
+                gl.bufferData(gl.ARRAY_BUFFER, color, gl.DYNAMIC_DRAW);
+
+                gl.bindBuffer(gl.ARRAY_BUFFER, this.covABuffer);
+                gl.bufferData(gl.ARRAY_BUFFER, covA, gl.DYNAMIC_DRAW);
+
+                gl.bindBuffer(gl.ARRAY_BUFFER, this.covBBuffer);
+                gl.bufferData(gl.ARRAY_BUFFER, covB, gl.DYNAMIC_DRAW);
+            }
+        };
+
+        let vertexCount = 0;
+        let lastTime = performance.now();
 
         const frame = () => {
-            this.renderer.render(this.scene, this.camera);
+            const currentTime = performance.now();
+            const deltaTime = (currentTime - lastTime) / 1000;
+            lastTime = currentTime;
+            console.log(deltaTime);
+
+            this.orbitControls.update(deltaTime);
+
+            this.camera.updateProjectionMatrix(this.canvas.width, this.canvas.height);
+            viewMatrix = SPLAT.getViewMatrix(this.camera);
+
+            const viewProj = this.camera.projectionMatrix.multiply(viewMatrix);
+            this.worker.postMessage({ view: viewProj.buffer });
+
+            if (vertexCount > 0) {
+                gl.uniformMatrix4fv(u_view, false, viewMatrix.buffer);
+                this.ext.drawArraysInstancedANGLE(gl.TRIANGLE_FAN, 0, 4, vertexCount);
+            } else {
+                gl.clear(gl.COLOR_BUFFER_BIT);
+            }
 
             if (!this.disposed) {
-                requestAnimationFrame(frame);
+                this.animationFrameId = requestAnimationFrame(frame);
             }
         };
 
-        this.disposed = false;
-        requestAnimationFrame(frame);
+        this.animationFrameId = requestAnimationFrame(frame);
+
+        document.addEventListener("dragenter", this.preventDefault);
+        document.addEventListener("dragover", this.preventDefault);
+        document.addEventListener("dragleave", this.preventDefault);
+        document.addEventListener("contextmenu", this.preventDefault);
+
+        this.handleTouchStart = this.handleTouchStart.bind(this);
+        this.handleTouchEnd = this.handleTouchEnd.bind(this);
+        this.handleTouchMove = this.handleTouchMove.bind(this);
+        this.handleMouseDown = this.handleMouseDown.bind(this);
+        this.handleMouseUp = this.handleMouseUp.bind(this);
+        this.handleMouseMove = this.handleMouseMove.bind(this);
+        this.handleMouseWheel = this.handleMouseWheel.bind(this);
+        this.handleDrop = this.handleDrop.bind(this);
+        this.handleResize = this.handleResize.bind(this);
+
+        this.canvas.addEventListener("touchstart", this.handleTouchStart);
+        this.canvas.addEventListener("touchend", this.handleTouchEnd);
+        this.canvas.addEventListener("touchmove", this.handleTouchMove);
+        this.canvas.addEventListener("mousedown", this.handleMouseDown);
+        this.canvas.addEventListener("mouseup", this.handleMouseUp);
+        this.canvas.addEventListener("mousemove", this.handleMouseMove);
+        this.canvas.addEventListener("wheel", this.handleMouseWheel);
+        this.canvas.addEventListener("drop", this.handleDrop);
+
+        window.addEventListener("resize", this.handleResize);
+    }
+
+    initWebGL(): WebGLRenderingContext {
+        const gl = this.canvas.getContext("webgl") || this.canvas.getContext("experimental-webgl");
+        if (!gl) {
+            alert("WebGL is not supported on your browser!");
+        }
+        return gl as WebGLRenderingContext;
+    }
+
+    preventDefault(e: Event) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+
+    async loadScene(url: string, onProgress?: (progress: number) => void) {
+        const req = await fetch(url, {
+            mode: "cors",
+            credentials: "omit",
+        });
+        console.log(req);
+        if (req.status != 200) {
+            throw new Error(req.status + " Unable to load " + req.url);
+        }
+
+        const rowLength = 3 * 4 + 3 * 4 + 4 + 4;
+        const reader = req.body!.getReader();
+        this.splatData = new Uint8Array(req.headers.get("content-length") as any);
+
+        console.log("Vertex Count", this.splatData.length / rowLength);
+
+        let bytesRead = 0;
+        let lastVertexCount = -1;
+        let stopLoading = false;
+
+        while (true) {
+            const { done, value } = await reader.read();
+            if (done || stopLoading) break;
+
+            this.splatData.set(value, bytesRead);
+            bytesRead += value.length;
+
+            if (onProgress) {
+                onProgress(bytesRead / this.splatData.length);
+            }
+
+            if (this.vertexCount > lastVertexCount) {
+                this.worker.postMessage({
+                    buffer: this.splatData.buffer,
+                    vertexCount: Math.floor(bytesRead / rowLength),
+                });
+                lastVertexCount = this.vertexCount;
+            }
+        }
+        if (!stopLoading) {
+            this.worker.postMessage({
+                buffer: this.splatData.buffer,
+                vertexCount: Math.floor(bytesRead / rowLength),
+            });
+        }
+    }
+
+    handleTouchStart(e: TouchEvent) {
+        e.preventDefault();
+        this.dragging = true;
+        this.panning = e.touches.length === 2;
+        this.lastX = e.touches[0].clientX;
+        this.lastY = e.touches[0].clientY;
+    }
+
+    handleTouchEnd(e: TouchEvent) {
+        e.preventDefault();
+        this.dragging = false;
+        this.panning = false;
+    }
+
+    computeZoomNorm() {
+        return (
+            0.1 +
+            (0.9 * (this.orbitControls.desiredRadius - this.orbitControls.minZoom)) /
+                (this.orbitControls.maxZoom - this.orbitControls.minZoom)
+        );
+    }
+
+    handleTouchMove(e: TouchEvent) {
+        e.preventDefault();
+        if (!this.dragging) return;
+        const dx = e.touches[0].clientX - this.lastX;
+        const dy = e.touches[0].clientY - this.lastY;
+        const zoomNorm = this.computeZoomNorm();
+
+        if (this.panning) {
+            this.orbitControls.pan(
+                -dx * this.orbitControls.panSpeed * 0.01 * zoomNorm,
+                -dy * this.orbitControls.panSpeed * 0.01 * zoomNorm
+            );
+        } else {
+            this.orbitControls.desiredAlpha -= dx * this.orbitControls.orbitSpeed * 0.005;
+            this.orbitControls.desiredBeta += dy * this.orbitControls.orbitSpeed * 0.005;
+            this.orbitControls.desiredBeta = Math.min(
+                Math.max(this.orbitControls.desiredBeta, this.orbitControls.minBeta),
+                this.orbitControls.maxBeta
+            );
+        }
+
+        this.lastX = e.touches[0].clientX;
+        this.lastY = e.touches[0].clientY;
+    }
+
+    handleMouseDown(e: MouseEvent) {
+        this.dragging = true;
+        this.panning = e.button === 2;
+        this.lastX = e.clientX;
+        this.lastY = e.clientY;
+    }
+
+    handleMouseUp(e: MouseEvent) {
+        this.dragging = false;
+        this.panning = false;
+    }
+
+    handleMouseMove(e: MouseEvent) {
+        if (!this.dragging) return;
+        const dx = e.clientX - this.lastX;
+        const dy = e.clientY - this.lastY;
+        const zoomNorm = this.computeZoomNorm();
+
+        if (this.panning) {
+            this.orbitControls.pan(
+                -dx * this.orbitControls.panSpeed * 0.01 * zoomNorm,
+                -dy * this.orbitControls.panSpeed * 0.01 * zoomNorm
+            );
+        } else {
+            this.orbitControls.desiredAlpha -= dx * this.orbitControls.orbitSpeed * 0.005;
+            this.orbitControls.desiredBeta += dy * this.orbitControls.orbitSpeed * 0.005;
+            this.orbitControls.desiredBeta = Math.min(
+                Math.max(this.orbitControls.desiredBeta, this.orbitControls.minBeta),
+                this.orbitControls.maxBeta
+            );
+        }
+
+        this.lastX = e.clientX;
+        this.lastY = e.clientY;
+    }
+
+    handleMouseWheel(e: WheelEvent) {
+        const zoomNorm = this.computeZoomNorm();
+        this.orbitControls.desiredRadius += e.deltaY * this.orbitControls.zoomSpeed * 0.02 * zoomNorm;
+        this.orbitControls.desiredRadius = Math.min(
+            Math.max(this.orbitControls.desiredRadius, this.orbitControls.minZoom),
+            this.orbitControls.maxZoom
+        );
+    }
+
+    handleDrop(e: DragEvent) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.selectFile(e.dataTransfer!.files[0]);
+    }
+
+    selectFile(file: File) {
+        const reader = new FileReader();
+        reader.onload = () => {
+            this.splatData = new Uint8Array(reader.result as ArrayBuffer);
+            if (
+                this.splatData[0] !== 112 ||
+                this.splatData[1] !== 108 ||
+                this.splatData[2] !== 121 ||
+                this.splatData[3] !== 10
+            ) {
+                alert("Invalid file format");
+                return;
+            }
+            this.worker.postMessage({ ply: this.splatData.buffer });
+        };
+        reader.readAsArrayBuffer(file);
+    }
+
+    handleResize() {
+        this.canvas.width = innerWidth;
+        this.canvas.height = innerHeight;
+        this.gl.viewport(0, 0, this.canvas.width, this.canvas.height);
+        this.camera.updateProjectionMatrix(this.canvas.width, this.canvas.height);
+
+        const u_projection = this.gl.getUniformLocation(this.program, "projection");
+        this.gl.uniformMatrix4fv(u_projection, false, this.camera.projectionMatrix.buffer);
+
+        const u_viewport = this.gl.getUniformLocation(this.program, "viewport");
+        this.gl.uniform2fv(u_viewport, new Float32Array([this.canvas.width, this.canvas.height]));
     }
 
     dispose() {
+        this.worker.terminate();
+
+        this.gl.disableVertexAttribArray(this.a_position);
+        this.gl.disableVertexAttribArray(this.a_center);
+        this.gl.disableVertexAttribArray(this.a_color);
+        this.gl.disableVertexAttribArray(this.a_covA);
+        this.gl.disableVertexAttribArray(this.a_covB);
+
+        this.gl.deleteBuffer(this.vertexBuffer);
+        this.gl.deleteBuffer(this.centerBuffer);
+        this.gl.deleteBuffer(this.colorBuffer);
+        this.gl.deleteBuffer(this.covABuffer);
+        this.gl.deleteBuffer(this.covBBuffer);
+
+        this.gl.detachShader(this.program, this.vertexShader);
+        this.gl.detachShader(this.program, this.fragmentShader);
+        this.gl.deleteShader(this.vertexShader);
+        this.gl.deleteShader(this.fragmentShader);
+
+        this.gl.deleteProgram(this.program);
+
+        this.vertexBuffer = null;
+        this.centerBuffer = null;
+        this.colorBuffer = null;
+        this.covABuffer = null;
+        this.covBBuffer = null;
+
+        this.splatData = new Uint8Array();
+
+        if (this.animationFrameId) {
+            cancelAnimationFrame(this.animationFrameId);
+        }
+
         this.disposed = true;
+
+        document.removeEventListener("dragenter", this.preventDefault);
+        document.removeEventListener("dragover", this.preventDefault);
+        document.removeEventListener("dragleave", this.preventDefault);
+        document.removeEventListener("contextmenu", this.preventDefault);
+
+        this.canvas.removeEventListener("touchstart", this.handleTouchStart);
+        this.canvas.removeEventListener("touchend", this.handleTouchEnd);
+        this.canvas.removeEventListener("touchmove", this.handleTouchMove);
+        this.canvas.removeEventListener("mousedown", this.handleMouseDown);
+        this.canvas.removeEventListener("mouseup", this.handleMouseUp);
+        this.canvas.removeEventListener("mousemove", this.handleMouseMove);
+        this.canvas.removeEventListener("wheel", this.handleMouseWheel);
+        this.canvas.removeEventListener("drop", this.handleDrop);
+
+        window.removeEventListener("resize", this.handleResize);
     }
 
     async capture(): Promise<string | null> {
-        return null;
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                const offscreenCanvas = document.createElement("canvas");
+                offscreenCanvas.width = 512;
+                offscreenCanvas.height = 512;
+                const offscreenContext = offscreenCanvas.getContext("2d")!;
+
+                const x = (this.canvas.width - offscreenCanvas.width) / 2;
+                const y = (this.canvas.height - offscreenCanvas.height) / 2;
+
+                offscreenContext.drawImage(
+                    this.canvas,
+                    x,
+                    y,
+                    offscreenCanvas.width,
+                    offscreenCanvas.height,
+                    0,
+                    0,
+                    offscreenCanvas.width,
+                    offscreenCanvas.height
+                );
+                const dataURL = offscreenCanvas.toDataURL("image/png");
+                offscreenCanvas.remove();
+
+                resolve(dataURL);
+            });
+        });
     }
 
     getStats(): { name: string; value: any }[] {