working detached library

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

@@ -36,8 +36,7 @@ class OrbitControls {
         };
 
         const onPointerDown = (e: PointerEvent) => {
-            e.preventDefault();
-            e.stopPropagation();
+            preventDefault(e);
 
             dragging = true;
             if (e.pointerType === "touch") {
@@ -52,8 +51,7 @@ class OrbitControls {
         };
 
         const onPointerUp = (e: PointerEvent) => {
-            e.preventDefault();
-            e.stopPropagation();
+            preventDefault(e);
 
             dragging = false;
             panning = false;
@@ -62,8 +60,7 @@ class OrbitControls {
         };
 
         const onPointerMove = (e: PointerEvent) => {
-            e.preventDefault();
-            e.stopPropagation();
+            preventDefault(e);
 
             if (!dragging) return;
 
@@ -90,8 +87,7 @@ class OrbitControls {
         };
 
         const onWheel = (e: WheelEvent) => {
-            e.preventDefault();
-            e.stopPropagation();
+            preventDefault(e);
 
             const zoomNorm = computeZoomNorm();
             desiredRadius += e.deltaY * this.zoomSpeed * 0.02 * zoomNorm;
@@ -119,12 +115,27 @@ class OrbitControls {
             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);

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

@@ -16,8 +16,6 @@ class Scene extends Object3D {
 
         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

@@ -8,8 +8,3 @@ 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/renderers/WebGLRenderer.ts

@@ -2,217 +2,224 @@ import type { Camera } from "../cameras/Camera";
 import type { Scene } from "../core/Scene";
 import type { Renderer } from "./Renderer";
 
-import { getViewMatrix } from "./webgl/utils/transformations";
 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 {
-    canvas: HTMLCanvasElement;
-
-    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);
-    }
+    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);
+        };
 
-    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;
-
-        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.activeCamera!.updateProjectionMatrix(this.canvas.width, this.canvas.height);
-
-        let viewMatrix = getViewMatrix(this.activeCamera!);
-
-        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));
-        }
-
-        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));
-        }
-
-        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.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 initWebGL = () => {
+            worker = new Worker(
+                URL.createObjectURL(
+                    new Blob(["(", createWorker.toString(), ")(self)"], { type: "application/javascript" })
+                )
+            );
 
-                const gl = this.gl!;
+            canvas.width = innerWidth;
+            canvas.height = innerHeight;
 
-                gl.bindBuffer(gl.ARRAY_BUFFER, this.centerBuffer);
-                gl.bufferData(gl.ARRAY_BUFFER, center, gl.DYNAMIC_DRAW);
+            gl.viewport(0, 0, canvas.width, canvas.height);
+            activeCamera.updateProjectionMatrix(canvas.width, canvas.height);
 
-                gl.bindBuffer(gl.ARRAY_BUFFER, this.colorBuffer);
-                gl.bufferData(gl.ARRAY_BUFFER, color, gl.DYNAMIC_DRAW);
+            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));
+            }
 
-                gl.bindBuffer(gl.ARRAY_BUFFER, this.covABuffer);
-                gl.bufferData(gl.ARRAY_BUFFER, covA, gl.DYNAMIC_DRAW);
+            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));
+            }
 
-                gl.bindBuffer(gl.ARRAY_BUFFER, this.covBBuffer);
-                gl.bufferData(gl.ARRAY_BUFFER, covB, gl.DYNAMIC_DRAW);
+            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.frame = () => {
-            this.activeCamera!.updateProjectionMatrix(this.canvas.width, this.canvas.height);
+        this.render = (scene: Scene, camera: Camera) => {
+            if (scene !== activeScene || camera !== activeCamera) {
+                if (initialized) {
+                    this.dispose();
+                }
 
-            const viewProj = this.activeCamera!.projectionMatrix.multiply(viewMatrix);
-            this.worker!.postMessage({ view: viewProj.buffer });
+                activeScene = scene;
+                activeCamera = camera;
 
-            if (this.vertexCount > 0) {
-                this.gl!.uniformMatrix4fv(u_view, false, viewMatrix.buffer);
-                this.ext!.drawArraysInstancedANGLE(this.gl!.TRIANGLE_FAN, 0, 4, this.vertexCount);
+                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 {
-                this.gl!.clear(this.gl!.COLOR_BUFFER_BIT);
+                gl.clear(gl.COLOR_BUFFER_BIT);
             }
         };
-    }
 
-    frame: () => void = () => {};
+        this.dispose = () => {
+            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();
-            }
+            gl.deleteBuffer(vertexBuffer);
+            gl.deleteBuffer(centerBuffer);
+            gl.deleteBuffer(colorBuffer);
+            gl.deleteBuffer(covABuffer);
+            gl.deleteBuffer(covBBuffer);
 
-            this.activeScene = scene;
-            this.activeCamera = camera;
-            this.initWebGL();
-        }
+            worker.terminate();
 
-        this.frame();
+            initialized = false;
+        };
     }
-
-    dispose() {}
 }

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

@@ -1,19 +0,0 @@
-import type { Camera } from "$lib/splat.js/cameras/Camera";
-import { Matrix4 } from "$lib/splat.js/math/Matrix4";
-
-export function 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);
-}

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

@@ -4,10 +4,12 @@ import "@babylonjs/loaders/glTF";
 import "@babylonjs/loaders/OBJ";
 
 export class BabylonViewer implements IViewer {
+    canvas: HTMLCanvasElement;
+
     engine: BABYLON.Engine;
     scene: BABYLON.Scene;
     camera: BABYLON.ArcRotateCamera;
-    canvas: HTMLCanvasElement;
+
     triangleCount: number = 0;
 
     constructor(canvas: HTMLCanvasElement) {

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

@@ -3,396 +3,51 @@ import * as SPLAT from "$lib/splat.js";
 
 export class SplatViewer implements IViewer {
     canvas: HTMLCanvasElement;
-    gl: WebGLRenderingContext;
-    ext: ANGLE_instanced_arrays;
-    camera: SPLAT.Camera;
-    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;
+    renderer: SPLAT.Renderer;
+    scene: SPLAT.Scene;
+    camera: SPLAT.Camera;
+    controls: SPLAT.OrbitControls;
 
-    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 SPLAT.Camera();
-        this.orbitControls = new SPLAT.OrbitControls(this.camera, this.canvas);
-
-        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;
-
-        const frame = () => {
-            this.orbitControls.update();
-
-            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) {
-                this.animationFrameId = 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.handleDrop = this.handleDrop.bind(this);
-        this.handleResize = this.handleResize.bind(this);
-
-        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();
+        this.renderer = new SPLAT.WebGLRenderer(canvas);
+        this.scene = new SPLAT.Scene();
+        this.camera = new SPLAT.Camera();
+        this.controls = new SPLAT.OrbitControls(this.camera, canvas);
     }
 
-    async loadScene(url: string, onProgress?: (progress: number) => void) {
-        const req = await fetch(url, {
-            mode: "cors",
-            credentials: "omit",
+    async loadScene(url: string, loadingBarCallback?: (progress: number) => void) {
+        await SPLAT.Loader.LoadAsync(url, this.scene, (progress) => {
+            loadingBarCallback?.(progress);
         });
-        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),
-            });
-        }
-    }
-
-    handleDrop(e: DragEvent) {
-        e.preventDefault();
-        e.stopPropagation();
-        this.selectFile(e.dataTransfer!.files[0]);
-    }
+        const frame = () => {
+            this.controls.update();
+            this.renderer.render(this.scene, this.camera);
 
-    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;
+            if (!this.disposed) {
+                requestAnimationFrame(frame);
             }
-            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);
+        this.disposed = false;
 
-        const u_viewport = this.gl.getUniformLocation(this.program, "viewport");
-        this.gl.uniform2fv(u_viewport, new Float32Array([this.canvas.width, this.canvas.height]));
+        requestAnimationFrame(frame);
     }
 
     dispose() {
-        this.worker.terminate();
-        this.orbitControls.dispose();
-
-        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.controls.dispose();
+        this.renderer.dispose();
 
         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("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);
-            });
-        });
+        return null;
     }
 
     getStats(): { name: string; value: any }[] {