Upload 56 files

.eslintrc.json

@@ -0,0 +1,21 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:prettier/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "rules": {
+    }
+}

.gitattributes

@@ -1,35 +1 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text
+* text=auto

.gitignore

@@ -0,0 +1,134 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+# IDE
+.vscode/
+playground/

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "tabWidth": 4,
+  "useTabs": false,
+  "printWidth": 120
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Dylan Ebert
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,12 +1,106 @@
----
-title: Gsplat Library
-emoji: 📊
-colorFrom: gray
-colorTo: blue
-sdk: static
-pinned: false
-license: mit
-short_description: gsplat_library based on dylanebert library
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# gsplat.js
+
+#### JavaScript Gaussian Splatting library
+
+gsplat.js is an easy-to-use, general-purpose, open-source 3D Gaussian Splatting library, providing functionality similar to [three.js](https://github.com/mrdoob/three.js) but for Gaussian Splatting.
+
+### Quick Start
+
+-   **Live Viewer Demo:** Explore this library in action in the 🤗 [Hugging Face demo](https://huggingface.co/spaces/dylanebert/igf). Note: May not work on all devices; use `Bonsai` for the lowest memory requirements.
+-   **Editor Demo:** Try new real-time updates and editing features in the [gsplat.js editor](https://huggingface.co/spaces/dylanebert/gsplat-editor).
+-   **Code Example:** Start coding immediately with this [jsfiddle example](https://jsfiddle.net/wdn6vasc/).
+
+### Installation
+
+**Prerequisites**: Ensure your development environment supports ES6 modules.
+
+1. **Set Up a Project:** (If not already set up)
+
+    Install [Node.js](https://nodejs.org/en/download/) and [NPM](https://www.npmjs.com/get-npm), then initialize a new project using a module bundler like [Vite](https://vitejs.dev/):
+
+    ```bash
+    npm create vite@latest gsplat -- --template vanilla-ts
+    ```
+
+2. **Test Your Environment:**
+
+    ```bash
+    cd gsplat
+    npm install
+    npm run dev
+    ```
+
+3. **Install gsplat.js:**
+
+    ```bash
+    npm install --save gsplat
+    ```
+
+### Usage
+
+#### Creating a Scene
+
+-   Import **gsplat.js** components and set up a basic scene.
+-   Load Gaussian Splatting data and start a rendering loop.
+
+(in `src/main.ts` if you followed the Vite setup)
+
+```js
+import * as SPLAT from "gsplat";
+
+const scene = new SPLAT.Scene();
+const camera = new SPLAT.Camera();
+const renderer = new SPLAT.WebGLRenderer();
+const controls = new SPLAT.OrbitControls(camera, renderer.canvas);
+
+async function main() {
+    const url = "https://huggingface.co/datasets/dylanebert/3dgs/resolve/main/bonsai/bonsai-7k.splat";
+
+    await SPLAT.Loader.LoadAsync(url, scene, () => {});
+
+    const frame = () => {
+        controls.update();
+        renderer.render(scene, camera);
+
+        requestAnimationFrame(frame);
+    };
+
+    requestAnimationFrame(frame);
+}
+
+main();
+```
+
+This script sets up a basic scene with Gaussian Splatting data loaded from URL and starts a rendering loop.
+
+### FAQ
+
+**Q: Can I use .ply files?**
+
+A: Yes, gsplat.js supports `.ply` files. See the [ply-converter example](https://github.com/dylanebert/gsplat.js/blob/main/examples/ply-converter/src/main.ts) for details on how to convert `.ply` to `.splat`. Alternatively, convert PLY files from URL in this [jsfiddle example](https://jsfiddle.net/2sq3pvdt/1/).
+
+**Q: What are .splat files?**
+
+A: `.splat` files are a compact form of the splat data, offering quicker loading times than `.ply` files. They consist of a raw Uint8Array buffer.
+
+> ⚠️ The `.splat` format does not contain SH coefficients, so colors are not view-dependent.
+
+**Q: Can I convert .splat files to .ply?**
+
+A: Yes, see the commented code in the [ply-converter example](https://github.com/dylanebert/gsplat.js/blob/main/examples/ply-converter/src/main.ts). Alternatively, convert `.splat` to `.ply` from URL in this [jsfiddle example](https://jsfiddle.net/aL81ds3e/).
+
+> ⚠️ When converting `.ply` -> `.splat` -> `.ply`, SH coefficients will be lost.
+
+### License
+
+This project is released under the MIT license. It is built upon several other open-source projects:
+
+-   [three.js](https://github.com/mrdoob/three.js), MIT License (c) 2010-2023 three.js authors
+-   [antimatter15/splat](https://github.com/antimatter15/splat), MIT License (c) 2023 Kevin Kwok
+-   [UnityGaussianSplatting](https://github.com/aras-p/UnityGaussianSplatting), MIT License (c) 2023 Aras Pranckevičius
+
+Please note that the license of the original [3D Gaussian Splatting](https://github.com/graphdeco-inria/gaussian-splatting) research project is non-commercial. While this library provides an open-source rendering implementation, users should consider the source of the splat data separately.
+
+### Contact
+
+Feel free to open issues, join the [Hugging Face Discord](https://hf.co/join/discord), or email me directly at [[email protected]](mailto:[email protected]).

compile_wasm.sh

@@ -0,0 +1,18 @@
+#!/bin/bash
+emcc --bind wasm/sort.cpp -Oz -o src/wasm/sort.js \
+    -s EXPORT_ES6=1 \
+    -s MODULARIZE=1 \
+    -s EXPORT_NAME=loadWasm \
+    -s EXPORTED_FUNCTIONS="[_sort, _malloc, _free]" \
+    -s SINGLE_FILE=1 \
+    -s ALLOW_MEMORY_GROWTH=1 \
+    -s ENVIRONMENT=worker
+
+emcc --bind wasm/data.cpp -Oz -o src/wasm/data.js \
+    -s EXPORT_ES6=1 \
+    -s MODULARIZE=1 \
+    -s EXPORT_NAME=loadWasm \
+    -s EXPORTED_FUNCTIONS="[_pack, _malloc, _free]" \
+    -s SINGLE_FILE=1 \
+    -s ALLOW_MEMORY_GROWTH=1 \
+    -s ENVIRONMENT=worker

jest.config.js

@@ -0,0 +1,5 @@
+/** @type {import("ts-jest").JestConfigWithTsJest} */
+export default {
+    preset: "ts-jest",
+    testEnvironment: "node",
+};

package.json

@@ -0,0 +1,58 @@
+{
+    "name": "gsplat",
+    "version": "1.2.4",
+    "description": "JavaScript Gaussian Splatting library",
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "type": "module",
+    "scripts": {
+        "build:wasm": "sh ./compile_wasm.sh",
+        "copy:wasm": "ncp ./src/wasm ./dist/wasm",
+        "build": "npm run build:wasm && rollup -c && npm run copy:wasm",
+        "test": "jest --passWithNoTests",
+        "lint": "eslint \"src/**/*.ts\" \"examples/**/*.ts\"",
+        "format": "prettier --write \"src/**/*.ts\" \"examples/**/*.ts\""
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/dylanebert/splat.js.git"
+    },
+    "keywords": [
+        "gsplat",
+        "gaussian splatting",
+        "javascript",
+        "3d",
+        "webgl"
+    ],
+    "author": "dylanebert",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/dylanebert/splat.js/issues"
+    },
+    "homepage": "https://github.com/dylanebert/splat.js#readme",
+    "devDependencies": {
+        "@jest/globals": "^29.7.0",
+        "@rollup/plugin-commonjs": "^25.0.7",
+        "@rollup/plugin-node-resolve": "^15.2.3",
+        "@rollup/plugin-replace": "^5.0.5",
+        "@rollup/plugin-terser": "^0.4.4",
+        "@rollup/plugin-typescript": "^11.1.5",
+        "@types/jest": "^29.5.8",
+        "@types/node": "^20.8.10",
+        "@typescript-eslint/eslint-plugin": "^6.9.1",
+        "@typescript-eslint/parser": "^6.9.1",
+        "eslint": "^8.52.0",
+        "eslint-config-prettier": "^9.0.0",
+        "eslint-plugin-prettier": "^5.0.1",
+        "jest": "^29.7.0",
+        "ncp": "^2.0.0",
+        "prettier": "^3.0.3",
+        "rollup": "^4.3.0",
+        "rollup-plugin-web-worker-loader": "^1.6.1",
+        "ts-jest": "^29.1.1",
+        "typescript": "^5.2.2"
+    },
+    "files": [
+        "dist/**/*"
+    ]
+}

rollup.config.js

@@ -0,0 +1,27 @@
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import terser from "@rollup/plugin-terser";
+import typescript from "@rollup/plugin-typescript";
+import workerLoader from "rollup-plugin-web-worker-loader";
+import replace from "@rollup/plugin-replace";
+
+export default {
+    input: "src/index.ts",
+    output: {
+        dir: "dist",
+        format: "esm",
+        name: "gsplat",
+        sourcemap: true,
+        plugins: [terser()],
+    },
+    plugins: [
+        replace({
+            "import.meta.url": "''",
+            preventAssignment: true,
+        }),
+        workerLoader({ targetPlatform: "browser" }),
+        resolve({ browser: true, preferBuiltins: false }),
+        commonjs(),
+        typescript(),
+    ],
+};

src/cameras/Camera.ts

@@ -0,0 +1,42 @@
+import { CameraData } from "./CameraData";
+import { Object3D } from "../core/Object3D";
+import { Vector3 } from "../math/Vector3";
+import { Vector4 } from "../math/Vector4";
+
+class Camera extends Object3D {
+    private _data: CameraData;
+
+    screenPointToRay: (x: number, y: number) => Vector3;
+
+    constructor(camera: CameraData | undefined = undefined) {
+        super();
+
+        this._data = camera ? camera : new CameraData();
+        this._position = new Vector3(0, 0, -5);
+
+        this.update = () => {
+            this.data.update(this.position, this.rotation);
+        };
+
+        this.screenPointToRay = (x: number, y: number) => {
+            const clipSpaceCoords = new Vector4(x, y, -1, 1);
+            const inverseProjectionMatrix = this._data.projectionMatrix.invert();
+            const cameraSpaceCoords = clipSpaceCoords.multiply(inverseProjectionMatrix);
+            const inverseViewMatrix = this._data.viewMatrix.invert();
+            const worldSpaceCoords = cameraSpaceCoords.multiply(inverseViewMatrix);
+            const worldSpacePosition = new Vector3(
+                worldSpaceCoords.x / worldSpaceCoords.w,
+                worldSpaceCoords.y / worldSpaceCoords.w,
+                worldSpaceCoords.z / worldSpaceCoords.w,
+            );
+            const direction = worldSpacePosition.subtract(this.position).normalize();
+            return direction;
+        };
+    }
+
+    get data() {
+        return this._data;
+    }
+}
+
+export { Camera };

src/cameras/CameraData.ts

@@ -0,0 +1,127 @@
+import { Quaternion } from "../math/Quaternion";
+import { Matrix3 } from "../math/Matrix3";
+import { Matrix4 } from "../math/Matrix4";
+import { Vector3 } from "../math/Vector3";
+
+class CameraData {
+    private _fx: number = 1132;
+    private _fy: number = 1132;
+    private _near: number = 0.1;
+    private _far: number = 100;
+
+    private _width: number = 512;
+    private _height: number = 512;
+
+    private _projectionMatrix: Matrix4 = new Matrix4();
+    private _viewMatrix: Matrix4 = new Matrix4();
+    private _viewProj: Matrix4 = new Matrix4();
+
+    update: (position: Vector3, rotation: Quaternion) => void;
+    setSize: (width: number, height: number) => void;
+
+    private _updateProjectionMatrix: () => void;
+
+    constructor() {
+        this._updateProjectionMatrix = () => {
+            // prettier-ignore
+            this._projectionMatrix = new Matrix4(
+                2 * this.fx / this.width, 0, 0, 0,
+                0, -2 * this.fy / this.height, 0, 0,
+                0, 0, this.far / (this.far - this.near), 1,
+                0, 0, -(this.far * this.near) / (this.far - this.near), 0
+            );
+
+            this._viewProj = this.projectionMatrix.multiply(this.viewMatrix);
+        };
+
+        this.update = (position: Vector3, rotation: Quaternion) => {
+            const R = Matrix3.RotationFromQuaternion(rotation).buffer;
+            const t = position.flat();
+
+            // prettier-ignore
+            this._viewMatrix = new Matrix4(
+                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,
+            );
+
+            this._viewProj = this.projectionMatrix.multiply(this.viewMatrix);
+        };
+
+        this.setSize = (width: number, height: number) => {
+            this._width = width;
+            this._height = height;
+            this._updateProjectionMatrix();
+        };
+    }
+
+    get fx() {
+        return this._fx;
+    }
+
+    set fx(fx: number) {
+        if (this._fx !== fx) {
+            this._fx = fx;
+            this._updateProjectionMatrix();
+        }
+    }
+
+    get fy() {
+        return this._fy;
+    }
+
+    set fy(fy: number) {
+        if (this._fy !== fy) {
+            this._fy = fy;
+            this._updateProjectionMatrix();
+        }
+    }
+
+    get near() {
+        return this._near;
+    }
+
+    set near(near: number) {
+        if (this._near !== near) {
+            this._near = near;
+            this._updateProjectionMatrix();
+        }
+    }
+
+    get far() {
+        return this._far;
+    }
+
+    set far(far: number) {
+        if (this._far !== far) {
+            this._far = far;
+            this._updateProjectionMatrix();
+        }
+    }
+
+    get width() {
+        return this._width;
+    }
+
+    get height() {
+        return this._height;
+    }
+
+    get projectionMatrix() {
+        return this._projectionMatrix;
+    }
+
+    get viewMatrix() {
+        return this._viewMatrix;
+    }
+
+    get viewProj() {
+        return this._viewProj;
+    }
+}
+
+export { CameraData };

src/controls/FPSControls.ts

@@ -0,0 +1,122 @@
+import { Camera } from "../cameras/Camera";
+import { Quaternion } from "../math/Quaternion";
+import { Matrix3 } from "../math/Matrix3";
+import { Vector3 } from "../math/Vector3";
+
+class FPSControls {
+    moveSpeed: number = 1.5;
+    lookSpeed: number = 0.7;
+    dampening: number = 0.5;
+    update: () => void;
+    dispose: () => void;
+
+    constructor(camera: Camera, canvas: HTMLCanvasElement) {
+        const keys: { [key: string]: boolean } = {};
+        let pitch = camera.rotation.toEuler().x;
+        let yaw = camera.rotation.toEuler().y;
+        let targetPosition = camera.position;
+        let pointerLock = false;
+
+        const onMouseDown = () => {
+            canvas.requestPointerLock();
+        };
+
+        const onPointerLockChange = () => {
+            pointerLock = document.pointerLockElement === canvas;
+            if (pointerLock) {
+                canvas.addEventListener("mousemove", onMouseMove);
+            } else {
+                canvas.removeEventListener("mousemove", onMouseMove);
+            }
+        };
+
+        const onMouseMove = (e: MouseEvent) => {
+            const mouseX = e.movementX;
+            const mouseY = e.movementY;
+
+            yaw += mouseX * this.lookSpeed * 0.001;
+            pitch -= mouseY * this.lookSpeed * 0.001;
+            pitch = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, pitch));
+        };
+
+        const onKeyDown = (e: KeyboardEvent) => {
+            keys[e.code] = true;
+            // Map arrow keys to WASD keys
+            if (e.code === "ArrowUp") keys["KeyW"] = true;
+            if (e.code === "ArrowDown") keys["KeyS"] = true;
+            if (e.code === "ArrowLeft") keys["KeyA"] = true;
+            if (e.code === "ArrowRight") keys["KeyD"] = true;
+        };
+
+        const onKeyUp = (e: KeyboardEvent) => {
+            keys[e.code] = false;
+            // Map arrow keys to WASD keys
+            if (e.code === "ArrowUp") keys["KeyW"] = false;
+            if (e.code === "ArrowDown") keys["KeyS"] = false;
+            if (e.code === "ArrowLeft") keys["KeyA"] = false;
+            if (e.code === "ArrowRight") keys["KeyD"] = false;
+            if (e.code === "Escape") document.exitPointerLock();
+        };
+
+        this.update = () => {
+            const R = Matrix3.RotationFromQuaternion(camera.rotation).buffer;
+            const forward = new Vector3(-R[2], -R[5], -R[8]);
+            const right = new Vector3(R[0], R[3], R[6]);
+            let move = new Vector3(0, 0, 0);
+            if (keys["KeyS"]) {
+                move = move.add(forward);
+            }
+            if (keys["KeyW"]) {
+                move = move.subtract(forward);
+            }
+            if (keys["KeyA"]) {
+                move = move.subtract(right);
+            }
+            if (keys["KeyD"]) {
+                move = move.add(right);
+            }
+            move = new Vector3(move.x, 0, move.z);
+            if (move.magnitude() > 0) {
+                move = move.normalize();
+            }
+
+            targetPosition = targetPosition.add(move.multiply(this.moveSpeed * 0.01));
+            camera.position = camera.position.add(targetPosition.subtract(camera.position).multiply(this.dampening));
+
+            camera.rotation = Quaternion.FromEuler(new Vector3(pitch, yaw, 0));
+        };
+
+        const preventDefault = (e: Event) => {
+            e.preventDefault();
+            e.stopPropagation();
+        };
+
+        this.dispose = () => {
+            canvas.removeEventListener("dragenter", preventDefault);
+            canvas.removeEventListener("dragover", preventDefault);
+            canvas.removeEventListener("dragleave", preventDefault);
+            canvas.removeEventListener("contextmenu", preventDefault);
+            canvas.removeEventListener("mousedown", onMouseDown);
+
+            document.removeEventListener("pointerlockchange", onPointerLockChange);
+
+            window.removeEventListener("keydown", onKeyDown);
+            window.removeEventListener("keyup", onKeyUp);
+        };
+
+        window.addEventListener("keydown", onKeyDown);
+        window.addEventListener("keyup", onKeyUp);
+
+        canvas.addEventListener("dragenter", preventDefault);
+        canvas.addEventListener("dragover", preventDefault);
+        canvas.addEventListener("dragleave", preventDefault);
+        canvas.addEventListener("contextmenu", preventDefault);
+        canvas.addEventListener("mousedown", onMouseDown);
+
+        document.addEventListener("pointerlockchange", onPointerLockChange);
+
+        this.update();
+    }
+}
+
+export { FPSControls };

src/controls/OrbitControls.ts

@@ -0,0 +1,310 @@
+import { Camera } from "../cameras/Camera";
+import { Matrix3 } from "../math/Matrix3";
+import { Quaternion } from "../math/Quaternion";
+import { Vector3 } from "../math/Vector3";
+
+class OrbitControls {
+    minAngle: number = -90;
+    maxAngle: number = 90;
+    minZoom: number = 0.1;
+    maxZoom: number = 30;
+    orbitSpeed: number = 1;
+    panSpeed: number = 1;
+    zoomSpeed: number = 1;
+    dampening: number = 0.12;
+    setCameraTarget: (newTarget: Vector3) => void = () => {};
+    update: () => void;
+    dispose: () => void;
+
+    constructor(
+        camera: Camera,
+        canvas: HTMLElement,
+        alpha: number = 0.5,
+        beta: number = 0.5,
+        radius: number = 5,
+        enableKeyboardControls: boolean = true,
+        inputTarget: Vector3 = new Vector3(),
+    ) {
+        let target = inputTarget.clone();
+
+        let desiredTarget = target.clone();
+        let desiredAlpha = alpha;
+        let desiredBeta = beta;
+        let desiredRadius = radius;
+
+        let dragging = false;
+        let panning = false;
+        let lastDist = 0;
+        let lastX = 0;
+        let lastY = 0;
+
+        const keys: { [key: string]: boolean } = {};
+
+        let isUpdatingCamera = false;
+
+        const onCameraChange = () => {
+            if (isUpdatingCamera) return;
+
+            const eulerRotation = camera.rotation.toEuler();
+            desiredAlpha = -eulerRotation.y;
+            desiredBeta = -eulerRotation.x;
+
+            const x = camera.position.x - desiredRadius * Math.sin(desiredAlpha) * Math.cos(desiredBeta);
+            const y = camera.position.y + desiredRadius * Math.sin(desiredBeta);
+            const z = camera.position.z + desiredRadius * Math.cos(desiredAlpha) * Math.cos(desiredBeta);
+
+            desiredTarget = new Vector3(x, y, z);
+        };
+
+        camera.addEventListener("objectChanged", onCameraChange);
+
+        this.setCameraTarget = (newTarget: Vector3) => {
+            const dx = newTarget.x - camera.position.x;
+            const dy = newTarget.y - camera.position.y;
+            const dz = newTarget.z - camera.position.z;
+            desiredRadius = Math.sqrt(dx * dx + dy * dy + dz * dz);
+            desiredBeta = Math.atan2(dy, Math.sqrt(dx * dx + dz * dz));
+            desiredAlpha = -Math.atan2(dx, dz);
+            desiredTarget = new Vector3(newTarget.x, newTarget.y, newTarget.z);
+        };
+
+        const computeZoomNorm = () => {
+            return 0.1 + (0.9 * (desiredRadius - this.minZoom)) / (this.maxZoom - this.minZoom);
+        };
+
+        const onKeyDown = (e: KeyboardEvent) => {
+            keys[e.code] = true;
+            // Map arrow keys to WASD keys
+            if (e.code === "ArrowUp") keys["KeyW"] = true;
+            if (e.code === "ArrowDown") keys["KeyS"] = true;
+            if (e.code === "ArrowLeft") keys["KeyA"] = true;
+            if (e.code === "ArrowRight") keys["KeyD"] = true;
+        };
+
+        const onKeyUp = (e: KeyboardEvent) => {
+            keys[e.code] = false; // Map arrow keys to WASD keys
+            if (e.code === "ArrowUp") keys["KeyW"] = false;
+            if (e.code === "ArrowDown") keys["KeyS"] = false;
+            if (e.code === "ArrowLeft") keys["KeyA"] = false;
+            if (e.code === "ArrowRight") keys["KeyD"] = false;
+        };
+
+        const onMouseDown = (e: MouseEvent) => {
+            preventDefault(e);
+
+            dragging = true;
+            panning = e.button === 2;
+            lastX = e.clientX;
+            lastY = e.clientY;
+            window.addEventListener("mouseup", onMouseUp);
+        };
+
+        const onMouseUp = (e: MouseEvent) => {
+            preventDefault(e);
+
+            dragging = false;
+            panning = false;
+            window.removeEventListener("mouseup", onMouseUp);
+        };
+
+        const onMouseMove = (e: MouseEvent) => {
+            preventDefault(e);
+
+            if (!dragging || !camera) return;
+
+            const dx = e.clientX - lastX;
+            const dy = e.clientY - lastY;
+
+            if (panning) {
+                const zoomNorm = computeZoomNorm();
+                const panX = -dx * this.panSpeed * 0.01 * zoomNorm;
+                const panY = -dy * this.panSpeed * 0.01 * zoomNorm;
+                const R = Matrix3.RotationFromQuaternion(camera.rotation).buffer;
+                const right = new Vector3(R[0], R[3], R[6]);
+                const up = new Vector3(R[1], R[4], R[7]);
+                desiredTarget = desiredTarget.add(right.multiply(panX));
+                desiredTarget = desiredTarget.add(up.multiply(panY));
+            } else {
+                desiredAlpha -= dx * this.orbitSpeed * 0.003;
+                desiredBeta += dy * this.orbitSpeed * 0.003;
+                desiredBeta = Math.min(
+                    Math.max(desiredBeta, (this.minAngle * Math.PI) / 180),
+                    (this.maxAngle * Math.PI) / 180,
+                );
+            }
+
+            lastX = e.clientX;
+            lastY = e.clientY;
+        };
+
+        const onWheel = (e: WheelEvent) => {
+            preventDefault(e);
+
+            const zoomNorm = computeZoomNorm();
+            desiredRadius += e.deltaY * this.zoomSpeed * 0.025 * zoomNorm;
+            desiredRadius = Math.min(Math.max(desiredRadius, this.minZoom), this.maxZoom);
+        };
+
+        const onTouchStart = (e: TouchEvent) => {
+            preventDefault(e);
+
+            if (e.touches.length === 1) {
+                dragging = true;
+                panning = false;
+                lastX = e.touches[0].clientX;
+                lastY = e.touches[0].clientY;
+                lastDist = 0;
+            } else if (e.touches.length === 2) {
+                dragging = true;
+                panning = true;
+                lastX = (e.touches[0].clientX + e.touches[1].clientX) / 2;
+                lastY = (e.touches[0].clientY + e.touches[1].clientY) / 2;
+                const distX = e.touches[0].clientX - e.touches[1].clientX;
+                const distY = e.touches[0].clientY - e.touches[1].clientY;
+                lastDist = Math.sqrt(distX * distX + distY * distY);
+            }
+        };
+
+        const onTouchEnd = (e: TouchEvent) => {
+            preventDefault(e);
+
+            dragging = false;
+            panning = false;
+        };
+
+        const onTouchMove = (e: TouchEvent) => {
+            preventDefault(e);
+
+            if (!dragging || !camera) return;
+
+            if (panning) {
+                const zoomNorm = computeZoomNorm();
+
+                const distX = e.touches[0].clientX - e.touches[1].clientX;
+                const distY = e.touches[0].clientY - e.touches[1].clientY;
+                const dist = Math.sqrt(distX * distX + distY * distY);
+                const delta = lastDist - dist;
+                desiredRadius += delta * this.zoomSpeed * 0.1 * zoomNorm;
+                desiredRadius = Math.min(Math.max(desiredRadius, this.minZoom), this.maxZoom);
+                lastDist = dist;
+
+                const touchX = (e.touches[0].clientX + e.touches[1].clientX) / 2;
+                const touchY = (e.touches[0].clientY + e.touches[1].clientY) / 2;
+                const dx = touchX - lastX;
+                const dy = touchY - lastY;
+                const R = Matrix3.RotationFromQuaternion(camera.rotation).buffer;
+                const right = new Vector3(R[0], R[3], R[6]);
+                const up = new Vector3(R[1], R[4], R[7]);
+                desiredTarget = desiredTarget.add(right.multiply(-dx * this.panSpeed * 0.025 * zoomNorm));
+                desiredTarget = desiredTarget.add(up.multiply(-dy * this.panSpeed * 0.025 * zoomNorm));
+                lastX = touchX;
+                lastY = touchY;
+            } else {
+                const dx = e.touches[0].clientX - lastX;
+                const dy = e.touches[0].clientY - lastY;
+
+                desiredAlpha -= dx * this.orbitSpeed * 0.003;
+                desiredBeta += dy * this.orbitSpeed * 0.003;
+                desiredBeta = Math.min(
+                    Math.max(desiredBeta, (this.minAngle * Math.PI) / 180),
+                    (this.maxAngle * Math.PI) / 180,
+                );
+
+                lastX = e.touches[0].clientX;
+                lastY = e.touches[0].clientY;
+            }
+        };
+
+        const lerp = (a: number, b: number, t: number) => {
+            return (1 - t) * a + t * b;
+        };
+
+        this.update = () => {
+            isUpdatingCamera = true;
+
+            alpha = lerp(alpha, desiredAlpha, this.dampening);
+            beta = lerp(beta, desiredBeta, this.dampening);
+            radius = lerp(radius, desiredRadius, this.dampening);
+            target = target.lerp(desiredTarget, this.dampening);
+
+            const x = target.x + radius * Math.sin(alpha) * Math.cos(beta);
+            const y = target.y - radius * Math.sin(beta);
+            const z = target.z - radius * Math.cos(alpha) * Math.cos(beta);
+            camera.position = new Vector3(x, y, z);
+
+            const direction = target.subtract(camera.position).normalize();
+            const rx = Math.asin(-direction.y);
+            const ry = Math.atan2(direction.x, direction.z);
+            camera.rotation = Quaternion.FromEuler(new Vector3(rx, ry, 0));
+
+            const moveSpeed = 0.025;
+            const rotateSpeed = 0.01;
+
+            const R = Matrix3.RotationFromQuaternion(camera.rotation).buffer;
+            const forward = new Vector3(-R[2], -R[5], -R[8]);
+            const right = new Vector3(R[0], R[3], R[6]);
+
+            if (keys["KeyS"]) desiredTarget = desiredTarget.add(forward.multiply(moveSpeed));
+            if (keys["KeyW"]) desiredTarget = desiredTarget.subtract(forward.multiply(moveSpeed));
+            if (keys["KeyA"]) desiredTarget = desiredTarget.subtract(right.multiply(moveSpeed));
+            if (keys["KeyD"]) desiredTarget = desiredTarget.add(right.multiply(moveSpeed));
+
+            // Add rotation with 'e' and 'q' for horizontal rotation
+            if (keys["KeyE"]) desiredAlpha += rotateSpeed;
+            if (keys["KeyQ"]) desiredAlpha -= rotateSpeed;
+
+            // Add rotation with 'r' and 'f' for vertical rotation
+            if (keys["KeyR"]) desiredBeta += rotateSpeed;
+            if (keys["KeyF"]) desiredBeta -= rotateSpeed;
+
+            isUpdatingCamera = false;
+        };
+
+        const preventDefault = (e: Event) => {
+            e.preventDefault();
+            e.stopPropagation();
+        };
+
+        this.dispose = () => {
+            canvas.removeEventListener("dragenter", preventDefault);
+            canvas.removeEventListener("dragover", preventDefault);
+            canvas.removeEventListener("dragleave", preventDefault);
+            canvas.removeEventListener("contextmenu", preventDefault);
+
+            canvas.removeEventListener("mousedown", onMouseDown);
+            canvas.removeEventListener("mousemove", onMouseMove);
+            canvas.removeEventListener("wheel", onWheel);
+
+            canvas.removeEventListener("touchstart", onTouchStart);
+            canvas.removeEventListener("touchend", onTouchEnd);
+            canvas.removeEventListener("touchmove", onTouchMove);
+
+            if (enableKeyboardControls) {
+                window.removeEventListener("keydown", onKeyDown);
+                window.removeEventListener("keyup", onKeyUp);
+            }
+        };
+
+        if (enableKeyboardControls) {
+            window.addEventListener("keydown", onKeyDown);
+            window.addEventListener("keyup", onKeyUp);
+        }
+
+        canvas.addEventListener("dragenter", preventDefault);
+        canvas.addEventListener("dragover", preventDefault);
+        canvas.addEventListener("dragleave", preventDefault);
+        canvas.addEventListener("contextmenu", preventDefault);
+
+        canvas.addEventListener("mousedown", onMouseDown);
+        canvas.addEventListener("mousemove", onMouseMove);
+        canvas.addEventListener("wheel", onWheel);
+
+        canvas.addEventListener("touchstart", onTouchStart);
+        canvas.addEventListener("touchend", onTouchEnd);
+        canvas.addEventListener("touchmove", onTouchMove);
+
+        this.update();
+    }
+}
+
+export { OrbitControls };

src/core/Object3D.ts

@@ -0,0 +1,101 @@
+import { Vector3 } from "../math/Vector3";
+import { Quaternion } from "../math/Quaternion";
+import { EventDispatcher } from "../events/EventDispatcher";
+import { Matrix4 } from "../math/Matrix4";
+import { ObjectChangedEvent } from "../events/Events";
+
+abstract class Object3D extends EventDispatcher {
+    public positionChanged: boolean = false;
+    public rotationChanged: boolean = false;
+    public scaleChanged: boolean = false;
+
+    protected _position: Vector3 = new Vector3();
+    protected _rotation: Quaternion = new Quaternion();
+    protected _scale: Vector3 = new Vector3(1, 1, 1);
+    protected _transform: Matrix4 = new Matrix4();
+
+    protected _changeEvent = new ObjectChangedEvent(this);
+
+    update: () => void;
+    applyPosition: () => void;
+    applyRotation: () => void;
+    applyScale: () => void;
+    raiseChangeEvent: () => void;
+
+    constructor() {
+        super();
+
+        this.update = () => {};
+
+        this.applyPosition = () => {
+            this.position = new Vector3();
+        };
+
+        this.applyRotation = () => {
+            this.rotation = new Quaternion();
+        };
+
+        this.applyScale = () => {
+            this.scale = new Vector3(1, 1, 1);
+        };
+
+        this.raiseChangeEvent = () => {
+            this.dispatchEvent(this._changeEvent);
+        };
+    }
+
+    protected _updateMatrix() {
+        this._transform = Matrix4.Compose(this._position, this._rotation, this._scale);
+    }
+
+    get position() {
+        return this._position;
+    }
+
+    set position(position: Vector3) {
+        if (!this._position.equals(position)) {
+            this._position = position;
+            this.positionChanged = true;
+            this._updateMatrix();
+            this.dispatchEvent(this._changeEvent);
+        }
+    }
+
+    get rotation() {
+        return this._rotation;
+    }
+
+    set rotation(rotation: Quaternion) {
+        if (!this._rotation.equals(rotation)) {
+            this._rotation = rotation;
+            this.rotationChanged = true;
+            this._updateMatrix();
+            this.dispatchEvent(this._changeEvent);
+        }
+    }
+
+    get scale() {
+        return this._scale;
+    }
+
+    set scale(scale: Vector3) {
+        if (!this._scale.equals(scale)) {
+            this._scale = scale;
+            this.scaleChanged = true;
+            this._updateMatrix();
+            this.dispatchEvent(this._changeEvent);
+        }
+    }
+
+    get forward() {
+        let forward = new Vector3(0, 0, 1);
+        forward = this.rotation.apply(forward);
+        return forward;
+    }
+
+    get transform() {
+        return this._transform;
+    }
+}
+
+export { Object3D };

src/core/Scene.ts

@@ -0,0 +1,117 @@
+import { Object3D } from "./Object3D";
+import { SplatData } from "../splats/SplatData";
+import { Splat } from "../splats/Splat";
+import { EventDispatcher } from "../events/EventDispatcher";
+import { ObjectAddedEvent, ObjectRemovedEvent } from "../events/Events";
+import { Converter } from "../utils/Converter";
+
+class Scene extends EventDispatcher {
+    private _objects: Object3D[] = [];
+
+    addObject: (object: Object3D) => void;
+    removeObject: (object: Object3D) => void;
+    findObject: (predicate: (object: Object3D) => boolean) => Object3D | undefined;
+    findObjectOfType: <T extends Object3D>(type: { new (): T }) => T | undefined;
+    reset: () => void;
+
+    constructor() {
+        super();
+
+        this.addObject = (object: Object3D) => {
+            this.objects.push(object);
+            this.dispatchEvent(new ObjectAddedEvent(object));
+        };
+
+        this.removeObject = (object: Object3D) => {
+            const index = this.objects.indexOf(object);
+            if (index < 0) {
+                throw new Error("Object not found in scene");
+            }
+            this.objects.splice(index, 1);
+            this.dispatchEvent(new ObjectRemovedEvent(object));
+        };
+
+        this.findObject = (predicate: (object: Object3D) => boolean) => {
+            for (const object of this.objects) {
+                if (predicate(object)) {
+                    return object;
+                }
+            }
+            return undefined;
+        };
+
+        this.findObjectOfType = <T extends Object3D>(type: { new (): T }) => {
+            for (const object of this.objects) {
+                if (object instanceof type) {
+                    return object;
+                }
+            }
+            return undefined;
+        };
+
+        this.reset = () => {
+            const objectsToRemove = this.objects.slice();
+            for (const object of objectsToRemove) {
+                this.removeObject(object);
+            }
+        };
+
+        this.reset();
+    }
+
+    getMergedSceneDataBuffer(format: "splat" | "ply" = "splat"): ArrayBuffer {
+        const buffers: Uint8Array[] = [];
+        let vertexCount = 0;
+
+        for (const object of this.objects) {
+            if (object instanceof Splat) {
+                const splatClone = object.clone() as Splat;
+
+                splatClone.applyRotation();
+                splatClone.applyScale();
+                splatClone.applyPosition();
+                const buffer = splatClone.data.serialize();
+
+                buffers.push(buffer);
+                vertexCount += splatClone.data.vertexCount;
+            }
+        }
+
+        const mergedSplatData = new Uint8Array(vertexCount * SplatData.RowLength);
+        let offset = 0;
+        for (const buffer of buffers) {
+            mergedSplatData.set(buffer, offset);
+            offset += buffer.length;
+        }
+
+        if (format === "ply") {
+            return Converter.SplatToPLY(mergedSplatData.buffer, vertexCount);
+        }
+
+        return mergedSplatData.buffer;
+    }
+
+    saveToFile(name: string | null = null, format: "splat" | "ply" = "splat") {
+        if (!document) return;
+
+        if (!name) {
+            const now = new Date();
+            name = `scene-${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}.${format}`;
+        }
+
+        const mergedData = this.getMergedSceneDataBuffer(format);
+
+        const blob = new Blob([mergedData], { type: "application/octet-stream" });
+
+        const link = document.createElement("a");
+        link.download = name;
+        link.href = URL.createObjectURL(blob);
+        link.click();
+    }
+
+    get objects() {
+        return this._objects;
+    }
+}
+
+export { Scene };

src/custom.d.ts

@@ -0,0 +1,6 @@
+declare module "web-worker:*" {
+    const WorkerConstructor: {
+        new (): Worker;
+    };
+    export default WorkerConstructor;
+}

src/events/EventDispatcher.ts

@@ -0,0 +1,46 @@
+class EventDispatcher {
+    addEventListener: (type: string, listener: (event: Event) => void) => void;
+    removeEventListener: (type: string, listener: (event: Event) => void) => void;
+    hasEventListener: (type: string, listener: (event: Event) => void) => boolean;
+    dispatchEvent: (event: Event) => void;
+
+    constructor() {
+        const listeners = new Map<string, Set<(event: Event) => void>>();
+
+        this.addEventListener = (type: string, listener: (event: Event) => void) => {
+            if (!listeners.has(type)) {
+                listeners.set(type, new Set());
+            }
+
+            listeners.get(type)!.add(listener);
+        };
+
+        this.removeEventListener = (type: string, listener: (event: Event) => void) => {
+            if (!listeners.has(type)) {
+                return;
+            }
+
+            listeners.get(type)!.delete(listener);
+        };
+
+        this.hasEventListener = (type: string, listener: (event: Event) => void) => {
+            if (!listeners.has(type)) {
+                return false;
+            }
+
+            return listeners.get(type)!.has(listener);
+        };
+
+        this.dispatchEvent = (event: Event) => {
+            if (!listeners.has(event.type)) {
+                return;
+            }
+
+            for (const listener of listeners.get(event.type)!) {
+                listener(event);
+            }
+        };
+    }
+}
+
+export { EventDispatcher };

src/events/Events.ts

@@ -0,0 +1,21 @@
+import { Object3D } from "../core/Object3D";
+
+class ObjectAddedEvent extends Event {
+    constructor(public object: Object3D) {
+        super("objectAdded");
+    }
+}
+
+class ObjectRemovedEvent extends Event {
+    constructor(public object: Object3D) {
+        super("objectRemoved");
+    }
+}
+
+class ObjectChangedEvent extends Event {
+    constructor(public object: Object3D) {
+        super("objectChanged");
+    }
+}
+
+export { ObjectAddedEvent, ObjectRemovedEvent, ObjectChangedEvent };

src/index.ts

@@ -0,0 +1,28 @@
+export { Object3D } from "./core/Object3D";
+export { SplatData } from "./splats/SplatData";
+export { SplatvData } from "./splats/SplatvData";
+export { Splat } from "./splats/Splat";
+export { Splatv } from "./splats/Splatv";
+export { CameraData } from "./cameras/CameraData";
+export { Camera } from "./cameras/Camera";
+export { Scene } from "./core/Scene";
+export { Loader } from "./loaders/Loader";
+export { PLYLoader } from "./loaders/PLYLoader";
+export { SplatvLoader } from "./loaders/SplatvLoader";
+export { WebGLRenderer } from "./renderers/WebGLRenderer";
+export { OrbitControls } from "./controls/OrbitControls";
+export { FPSControls } from "./controls/FPSControls";
+export { Quaternion } from "./math/Quaternion";
+export { Vector3 } from "./math/Vector3";
+export { Vector4 } from "./math/Vector4";
+export { Matrix4 } from "./math/Matrix4";
+export { Matrix3 } from "./math/Matrix3";
+export { Color32 } from "./math/Color32";
+export { Plane } from "./math/Plane";
+export { ShaderPass } from "./renderers/webgl/passes/ShaderPass";
+export { FadeInPass } from "./renderers/webgl/passes/FadeInPass";
+export { RenderData } from "./renderers/webgl/utils/RenderData";
+export { ShaderProgram } from "./renderers/webgl/programs/ShaderProgram";
+export { RenderProgram } from "./renderers/webgl/programs/RenderProgram";
+export { VideoRenderProgram } from "./renderers/webgl/programs/VideoRenderProgram";
+export { IntersectionTester } from "./renderers/webgl/utils/IntersectionTester";

src/loaders/Loader.ts

@@ -0,0 +1,46 @@
+import type { Scene } from "../core/Scene";
+import { Splat } from "../splats/Splat";
+import { SplatData } from "../splats/SplatData";
+import { initiateFetchRequest, loadRequestDataIntoBuffer } from "../utils/LoaderUtils";
+
+class Loader {
+    static async LoadAsync(
+        url: string,
+        scene: Scene,
+        onProgress?: (progress: number) => void,
+        useCache: boolean = false,
+    ): Promise<Splat> {
+        const res: Response = await initiateFetchRequest(url, useCache);
+
+        const buffer = await loadRequestDataIntoBuffer(res, onProgress);
+        return this.LoadFromArrayBuffer(buffer, scene);
+    }
+
+    static async LoadFromFileAsync(file: File, scene: Scene, onProgress?: (progress: number) => void): Promise<Splat> {
+        const reader = new FileReader();
+        let splat = new Splat();
+        reader.onload = (e) => {
+            splat = this.LoadFromArrayBuffer(e.target!.result as ArrayBuffer, scene);
+        };
+        reader.onprogress = (e) => {
+            onProgress?.(e.loaded / e.total);
+        };
+        reader.readAsArrayBuffer(file);
+        await new Promise<void>((resolve) => {
+            reader.onloadend = () => {
+                resolve();
+            };
+        });
+        return splat;
+    }
+
+    static LoadFromArrayBuffer(arrayBuffer: ArrayBufferLike, scene: Scene): Splat {
+        const buffer = new Uint8Array(arrayBuffer);
+        const data = SplatData.Deserialize(buffer);
+        const splat = new Splat(data);
+        scene.addObject(splat);
+        return splat;
+    }
+}
+
+export { Loader };

src/loaders/PLYLoader.ts

@@ -0,0 +1,223 @@
+import { Scene } from "../core/Scene";
+import { Vector3 } from "../math/Vector3";
+import { Quaternion } from "../math/Quaternion";
+import { SplatData } from "../splats/SplatData";
+import { Splat } from "../splats/Splat";
+import { Converter } from "../utils/Converter";
+import { initiateFetchRequest, loadRequestDataIntoBuffer } from "../utils/LoaderUtils";
+
+class PLYLoader {
+    static async LoadAsync(
+        url: string,
+        scene: Scene,
+        onProgress?: (progress: number) => void,
+        format: string = "",
+        useCache: boolean = false,
+    ): Promise<Splat> {
+        const res: Response = await initiateFetchRequest(url, useCache);
+
+        const plyData = await loadRequestDataIntoBuffer(res, onProgress);
+
+        if (plyData[0] !== 112 || plyData[1] !== 108 || plyData[2] !== 121 || plyData[3] !== 10) {
+            throw new Error("Invalid PLY file");
+        }
+
+        return this.LoadFromArrayBuffer(plyData.buffer, scene, format);
+    }
+
+    static async LoadFromFileAsync(
+        file: File,
+        scene: Scene,
+        onProgress?: (progress: number) => void,
+        format: string = "",
+    ): Promise<Splat> {
+        const reader = new FileReader();
+        let splat = new Splat();
+        reader.onload = (e) => {
+            splat = this.LoadFromArrayBuffer(e.target!.result as ArrayBuffer, scene, format);
+        };
+        reader.onprogress = (e) => {
+            onProgress?.(e.loaded / e.total);
+        };
+        reader.readAsArrayBuffer(file);
+        await new Promise<void>((resolve) => {
+            reader.onloadend = () => {
+                resolve();
+            };
+        });
+        return splat;
+    }
+
+    static LoadFromArrayBuffer(arrayBuffer: ArrayBufferLike, scene: Scene, format: string = ""): Splat {
+        const buffer = new Uint8Array(this._ParsePLYBuffer(arrayBuffer, format));
+        const data = SplatData.Deserialize(buffer);
+        const splat = new Splat(data);
+        scene.addObject(splat);
+        return splat;
+    }
+
+    private static _ParsePLYBuffer(inputBuffer: ArrayBuffer, format: string): ArrayBuffer {
+        type PlyProperty = {
+            name: string;
+            type: string;
+            offset: number;
+        };
+
+        const ubuf = new Uint8Array(inputBuffer);
+        const headerText = new TextDecoder().decode(ubuf.slice(0, 1024 * 10));
+        const header_end = "end_header\n";
+        const header_end_index = headerText.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(headerText)![1]);
+
+        let rowOffset = 0;
+        const offsets: Record<string, number> = {
+            double: 8,
+            int: 4,
+            uint: 4,
+            float: 4,
+            short: 2,
+            ushort: 2,
+            uchar: 1,
+        };
+
+        const properties: PlyProperty[] = [];
+        for (const prop of headerText
+            .slice(0, header_end_index)
+            .split("\n")
+            .filter((k) => k.startsWith("property "))) {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const [_p, type, name] = prop.split(" ");
+            properties.push({ name, type, offset: rowOffset });
+            
+            if (!offsets[type]) throw new Error(`Unsupported property type: ${type}`);
+            rowOffset += offsets[type];
+        }
+
+        const dataView = new DataView(inputBuffer, header_end_index + header_end.length);
+        const buffer = new ArrayBuffer(SplatData.RowLength * vertexCount);
+
+        const q_polycam = Quaternion.FromEuler(new Vector3(Math.PI / 2, 0, 0));
+
+        for (let i = 0; i < vertexCount; i++) {
+            const position = new Float32Array(buffer, i * SplatData.RowLength, 3);
+            const scale = new Float32Array(buffer, i * SplatData.RowLength + 12, 3);
+            const rgba = new Uint8ClampedArray(buffer, i * SplatData.RowLength + 24, 4);
+            const rot = new Uint8ClampedArray(buffer, i * SplatData.RowLength + 28, 4);
+
+            let r0: number = 255;
+            let r1: number = 0;
+            let r2: number = 0;
+            let r3: number = 0;
+
+            properties.forEach((property) => {
+                let value;
+                switch (property.type) {
+                    case "float":
+                        value = dataView.getFloat32(property.offset + i * rowOffset, true);
+                        break;
+                    case "int":
+                        value = dataView.getInt32(property.offset + i * rowOffset, true);
+                        break;
+                    default:
+                        throw new Error(`Unsupported property type: ${property.type}`);
+                }
+
+                switch (property.name) {
+                    case "x":
+                        position[0] = value;
+                        break;
+                    case "y":
+                        position[1] = value;
+                        break;
+                    case "z":
+                        position[2] = value;
+                        break;
+                    case "scale_0":
+                    case "scaling_0":
+                        scale[0] = Math.exp(value);
+                        break;
+                    case "scale_1":
+                    case "scaling_1":
+                        scale[1] = Math.exp(value);
+                        break;
+                    case "scale_2":
+                    case "scaling_2":
+                        scale[2] = Math.exp(value);
+                        break;
+                    case "red":
+                        rgba[0] = value;
+                        break;
+                    case "green":
+                        rgba[1] = value;
+                        break;
+                    case "blue":
+                        rgba[2] = value;
+                        break;
+                    case "f_dc_0":
+                    case "features_0":
+                        rgba[0] = (0.5 + Converter.SH_C0 * value) * 255;
+                        break;
+                    case "f_dc_1":
+                    case "features_1":
+                        rgba[1] = (0.5 + Converter.SH_C0 * value) * 255;
+                        break;
+                    case "f_dc_2":
+                    case "features_2":
+                        rgba[2] = (0.5 + Converter.SH_C0 * value) * 255;
+                        break;
+                    case "f_dc_3":
+                        rgba[3] = (0.5 + Converter.SH_C0 * value) * 255;
+                        break;
+                    case "opacity":
+                    case "opacity_0":
+                        rgba[3] = (1 / (1 + Math.exp(-value))) * 255;
+                        break;
+                    case "rot_0":
+                    case "rotation_0":
+                        r0 = value;
+                        break;
+                    case "rot_1":
+                    case "rotation_1":
+                        r1 = value;
+                        break;
+                    case "rot_2":
+                    case "rotation_2":
+                        r2 = value;
+                        break;
+                    case "rot_3":
+                    case "rotation_3":
+                        r3 = value;
+                        break;
+                }
+            });
+
+            let q = new Quaternion(r1, r2, r3, r0);
+
+            switch (format) {
+                case "polycam": {
+                    const temp = position[1];
+                    position[1] = -position[2];
+                    position[2] = temp;
+                    q = q_polycam.multiply(q);
+                    break;
+                }
+                case "":
+                    break;
+                default:
+                    throw new Error(`Unsupported format: ${format}`);
+            }
+
+            q = q.normalize();
+            rot[0] = q.w * 128 + 128;
+            rot[1] = q.x * 128 + 128;
+            rot[2] = q.y * 128 + 128;
+            rot[3] = q.z * 128 + 128;
+        }
+
+        return buffer;
+    }
+}
+
+export { PLYLoader };

src/loaders/SplatvLoader.ts

@@ -0,0 +1,135 @@
+import { Camera } from "../cameras/Camera";
+import type { Scene } from "../core/Scene";
+import { Matrix3 } from "../math/Matrix3";
+import { Quaternion } from "../math/Quaternion";
+import { Vector3 } from "../math/Vector3";
+import { Splatv } from "../splats/Splatv";
+import { SplatvData } from "../splats/SplatvData";
+import { initiateFetchRequest, loadRequestDataIntoBuffer } from "../utils/LoaderUtils";
+
+class SplatvLoader {
+    static async LoadAsync(
+        url: string,
+        scene: Scene,
+        camera: Camera | null,
+        onProgress?: (progress: number) => void,
+        useCache: boolean = false,
+    ): Promise<Splatv> {
+        const res: Response = await initiateFetchRequest(url, useCache);
+
+        const buffer = await loadRequestDataIntoBuffer(res, onProgress);
+        return this._ParseSplatvBuffer(buffer.buffer, scene, camera);
+    }
+
+    static async LoadFromFileAsync(
+        file: File,
+        scene: Scene,
+        camera: Camera | null,
+        onProgress?: (progress: number) => void,
+    ): Promise<Splatv> {
+        const reader = new FileReader();
+        let splatv: Splatv | null = null;
+        reader.onload = (e) => {
+            splatv = this._ParseSplatvBuffer(e.target!.result as ArrayBuffer, scene, camera);
+        };
+        reader.onprogress = (e) => {
+            onProgress?.(e.loaded / e.total);
+        };
+        reader.readAsArrayBuffer(file);
+        await new Promise<void>((resolve) => {
+            reader.onloadend = () => {
+                resolve();
+            };
+        });
+        if (!splatv) {
+            throw new Error("Failed to load splatv file");
+        }
+        return splatv;
+    }
+
+    private static _ParseSplatvBuffer(inputBuffer: ArrayBuffer, scene: Scene, camera: Camera | null): Splatv {
+        let result: Splatv | null = null;
+
+        const handleChunk = (
+            chunk: { size: number; type: string; texwidth: number; texheight: number },
+            buffer: Uint8Array,
+            chunks: { size: number; type: string }[],
+        ) => {
+            if (chunk.type === "magic") {
+                const intView = new Int32Array(buffer.buffer);
+                if (intView[0] !== 0x674b) {
+                    throw new Error("Invalid splatv file");
+                }
+                chunks.push({ size: intView[1], type: "chunks" });
+            } else if (chunk.type === "chunks") {
+                const splatChunks = JSON.parse(new TextDecoder("utf-8").decode(buffer));
+                if (splatChunks.length == 0) {
+                    throw new Error("Invalid splatv file");
+                } else if (splatChunks.length > 1) {
+                    console.warn("Splatv file contains more than one chunk, only the first one will be loaded");
+                }
+                const chunk = splatChunks[0];
+                const cameras = chunk.cameras as { position: number[]; rotation: number[][] }[];
+                if (camera && cameras && cameras.length) {
+                    const cameraData = cameras[0];
+                    const position = new Vector3(
+                        cameraData.position[0],
+                        cameraData.position[1],
+                        cameraData.position[2],
+                    );
+                    const rotation = Quaternion.FromMatrix3(
+                        new Matrix3(
+                            cameraData.rotation[0][0],
+                            cameraData.rotation[0][1],
+                            cameraData.rotation[0][2],
+                            cameraData.rotation[1][0],
+                            cameraData.rotation[1][1],
+                            cameraData.rotation[1][2],
+                            cameraData.rotation[2][0],
+                            cameraData.rotation[2][1],
+                            cameraData.rotation[2][2],
+                        ),
+                    );
+                    camera.position = position;
+                    camera.rotation = rotation;
+                }
+                chunks.push(chunk);
+            } else if (chunk.type === "splat") {
+                const data = SplatvData.Deserialize(buffer, chunk.texwidth, chunk.texheight);
+                const splatv = new Splatv(data);
+                scene.addObject(splatv);
+                result = splatv;
+            }
+        };
+
+        const ubuf = new Uint8Array(inputBuffer);
+        const chunks: { size: number; type: string; texwidth: number; texheight: number }[] = [
+            { size: 8, type: "magic", texwidth: 0, texheight: 0 },
+        ];
+        let chunk: { size: number; type: string; texwidth: number; texheight: number } | undefined = chunks.shift();
+        let buffer = new Uint8Array(chunk!.size);
+        let offset = 0;
+        let inputOffset = 0;
+        while (chunk) {
+            while (offset < chunk.size) {
+                const sizeToRead = Math.min(chunk.size - offset, ubuf.length - inputOffset);
+                buffer.set(ubuf.subarray(inputOffset, inputOffset + sizeToRead), offset);
+                offset += sizeToRead;
+                inputOffset += sizeToRead;
+            }
+            handleChunk(chunk, buffer, chunks);
+            if (result) {
+                return result;
+            }
+            chunk = chunks.shift();
+            if (chunk) {
+                buffer = new Uint8Array(chunk.size);
+                offset = 0;
+            }
+        }
+
+        throw new Error("Invalid splatv file");
+    }
+}
+
+export { SplatvLoader };

src/math/BVH.ts

@@ -0,0 +1,56 @@
+import { Box3 } from "./Box3";
+
+class BVHNode {
+    public left: BVHNode | null = null;
+    public right: BVHNode | null = null;
+    public pointIndices: number[] = [];
+
+    constructor(
+        public bounds: Box3,
+        public boxes: Box3[],
+        pointIndices: number[],
+    ) {
+        if (pointIndices.length > 1) {
+            this.split(bounds, boxes, pointIndices);
+        } else if (pointIndices.length > 0) {
+            this.pointIndices = pointIndices;
+        }
+    }
+
+    private split(bounds: Box3, boxes: Box3[], pointIndices: number[]) {
+        const axis = bounds.size().maxComponent();
+        pointIndices.sort((a, b) => boxes[a].center().getComponent(axis) - boxes[b].center().getComponent(axis));
+
+        const mid = Math.floor(pointIndices.length / 2);
+        const leftIndices = pointIndices.slice(0, mid);
+        const rightIndices = pointIndices.slice(mid);
+
+        this.left = new BVHNode(bounds, boxes, leftIndices);
+        this.right = new BVHNode(bounds, boxes, rightIndices);
+    }
+
+    public queryRange(range: Box3): number[] {
+        if (!this.bounds.intersects(range)) {
+            return [];
+        } else if (this.left !== null && this.right !== null) {
+            return this.left.queryRange(range).concat(this.right.queryRange(range));
+        } else {
+            return this.pointIndices.filter((index) => range.intersects(this.boxes[index]));
+        }
+    }
+}
+
+class BVH {
+    public root: BVHNode;
+
+    constructor(bounds: Box3, boxes: Box3[]) {
+        const pointIndices = boxes.map((_, index) => index);
+        this.root = new BVHNode(bounds, boxes, pointIndices);
+    }
+
+    public queryRange(range: Box3) {
+        return this.root.queryRange(range);
+    }
+}
+
+export { BVH };

src/math/Box3.ts

@@ -0,0 +1,52 @@
+import { Vector3 } from "./Vector3";
+
+class Box3 {
+    constructor(
+        public min: Vector3,
+        public max: Vector3,
+    ) {}
+
+    public contains(point: Vector3) {
+        return (
+            point.x >= this.min.x &&
+            point.x <= this.max.x &&
+            point.y >= this.min.y &&
+            point.y <= this.max.y &&
+            point.z >= this.min.z &&
+            point.z <= this.max.z
+        );
+    }
+
+    public intersects(box: Box3) {
+        return (
+            this.max.x >= box.min.x &&
+            this.min.x <= box.max.x &&
+            this.max.y >= box.min.y &&
+            this.min.y <= box.max.y &&
+            this.max.z >= box.min.z &&
+            this.min.z <= box.max.z
+        );
+    }
+
+    public size() {
+        return this.max.subtract(this.min);
+    }
+
+    public center() {
+        return this.min.add(this.max).divide(2);
+    }
+
+    public expand(point: Vector3) {
+        this.min = this.min.min(point);
+        this.max = this.max.max(point);
+    }
+
+    public permute() {
+        const min = this.min;
+        const max = this.max;
+        this.min = new Vector3(Math.min(min.x, max.x), Math.min(min.y, max.y), Math.min(min.z, max.z));
+        this.max = new Vector3(Math.max(min.x, max.x), Math.max(min.y, max.y), Math.max(min.z, max.z));
+    }
+}
+
+export { Box3 };

src/math/Color32.ts

@@ -0,0 +1,36 @@
+class Color32 {
+    public readonly r: number;
+    public readonly g: number;
+    public readonly b: number;
+    public readonly a: number;
+
+    constructor(r: number = 0, g: number = 0, b: number = 0, a: number = 255) {
+        this.r = r;
+        this.g = g;
+        this.b = b;
+        this.a = a;
+    }
+
+    flat(): number[] {
+        return [this.r, this.g, this.b, this.a];
+    }
+
+    flatNorm(): number[] {
+        return [this.r / 255, this.g / 255, this.b / 255, this.a / 255];
+    }
+
+    toHexString(): string {
+        return (
+            "#" +
+            this.flat()
+                .map((x) => x.toString(16).padStart(2, "0"))
+                .join("")
+        );
+    }
+
+    toString(): string {
+        return `[${this.flat().join(", ")}]`;
+    }
+}
+
+export { Color32 };

src/math/Matrix3.ts

@@ -0,0 +1,110 @@
+import { Quaternion } from "./Quaternion";
+import type { Vector3 } from "./Vector3";
+
+class Matrix3 {
+    public readonly buffer: number[];
+
+    // prettier-ignore
+    constructor(n11: number = 1, n12: number = 0, n13: number = 0,
+                n21: number = 0, n22: number = 1, n23: number = 0,
+                n31: number = 0, n32: number = 0, n33: number = 1) {
+        this.buffer = [
+            n11, n12, n13,
+            n21, n22, n23,
+            n31, n32, n33
+        ];
+    }
+
+    equals(m: Matrix3): boolean {
+        if (this.buffer.length !== m.buffer.length) {
+            return false;
+        }
+        if (this.buffer === m.buffer) {
+            return true;
+        }
+        for (let i = 0; i < this.buffer.length; i++) {
+            if (this.buffer[i] !== m.buffer[i]) {
+                return false;
+            }
+        }
+        return true;
+    }
+
+    multiply(v: Matrix3): Matrix3 {
+        const a = this.buffer;
+        const b = v.buffer;
+        return new Matrix3(
+            b[0] * a[0] + b[3] * a[1] + b[6] * a[2],
+            b[1] * a[0] + b[4] * a[1] + b[7] * a[2],
+            b[2] * a[0] + b[5] * a[1] + b[8] * a[2],
+            b[0] * a[3] + b[3] * a[4] + b[6] * a[5],
+            b[1] * a[3] + b[4] * a[4] + b[7] * a[5],
+            b[2] * a[3] + b[5] * a[4] + b[8] * a[5],
+            b[0] * a[6] + b[3] * a[7] + b[6] * a[8],
+            b[1] * a[6] + b[4] * a[7] + b[7] * a[8],
+            b[2] * a[6] + b[5] * a[7] + 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 Eye(v: number = 1): Matrix3 {
+        return new Matrix3(v, 0, 0, 0, v, 0, 0, 0, v);
+    }
+
+    static Diagonal(v: Vector3): Matrix3 {
+        return new Matrix3(v.x, 0, 0, 0, v.y, 0, 0, 0, v.z);
+    }
+
+    static RotationFromQuaternion(q: Quaternion): Matrix3 {
+        const matrix = new Matrix3(
+            1 - 2 * q.y * q.y - 2 * q.z * q.z,
+            2 * q.x * q.y - 2 * q.z * q.w,
+            2 * q.x * q.z + 2 * q.y * q.w,
+            2 * q.x * q.y + 2 * q.z * q.w,
+            1 - 2 * q.x * q.x - 2 * q.z * q.z,
+            2 * q.y * q.z - 2 * q.x * q.w,
+            2 * q.x * q.z - 2 * q.y * q.w,
+            2 * q.y * q.z + 2 * q.x * q.w,
+            1 - 2 * q.x * q.x - 2 * q.y * q.y,
+        );
+        return matrix;
+    }
+
+    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);
+    }
+
+    toString(): string {
+        return `[${this.buffer.join(", ")}]`;
+    }
+}
+
+export { Matrix3 };

src/math/Matrix4.ts

@@ -0,0 +1,176 @@
+import { Quaternion } from "./Quaternion";
+import { Vector3 } from "./Vector3";
+
+class Matrix4 {
+    public readonly buffer: number[];
+
+    // prettier-ignore
+    constructor(n11: number = 1, n12: number = 0, n13: number = 0, n14: number = 0, 
+                n21: number = 0, n22: number = 1, n23: number = 0, n24: number = 0, 
+                n31: number = 0, n32: number = 0, n33: number = 1, n34: number = 0, 
+                n41: number = 0, n42: number = 0, n43: number = 0, n44: number = 1) {
+        this.buffer = [
+            n11, n12, n13, n14, 
+            n21, n22, n23, n24, 
+            n31, n32, n33, n34, 
+            n41, n42, n43, n44
+        ];
+    }
+
+    equals(m: Matrix4): boolean {
+        if (this.buffer.length !== m.buffer.length) {
+            return false;
+        }
+        if (this.buffer === m.buffer) {
+            return true;
+        }
+        for (let i = 0; i < this.buffer.length; i++) {
+            if (this.buffer[i] !== m.buffer[i]) {
+                return false;
+            }
+        }
+        return true;
+    }
+
+    multiply(m: Matrix4): Matrix4 {
+        const a = this.buffer;
+        const b = m.buffer;
+        return new Matrix4(
+            b[0] * a[0] + b[1] * a[4] + b[2] * a[8] + b[3] * a[12],
+            b[0] * a[1] + b[1] * a[5] + b[2] * a[9] + b[3] * a[13],
+            b[0] * a[2] + b[1] * a[6] + b[2] * a[10] + b[3] * a[14],
+            b[0] * a[3] + b[1] * a[7] + b[2] * a[11] + b[3] * a[15],
+            b[4] * a[0] + b[5] * a[4] + b[6] * a[8] + b[7] * a[12],
+            b[4] * a[1] + b[5] * a[5] + b[6] * a[9] + b[7] * a[13],
+            b[4] * a[2] + b[5] * a[6] + b[6] * a[10] + b[7] * a[14],
+            b[4] * a[3] + b[5] * a[7] + b[6] * a[11] + b[7] * a[15],
+            b[8] * a[0] + b[9] * a[4] + b[10] * a[8] + b[11] * a[12],
+            b[8] * a[1] + b[9] * a[5] + b[10] * a[9] + b[11] * a[13],
+            b[8] * a[2] + b[9] * a[6] + b[10] * a[10] + b[11] * a[14],
+            b[8] * a[3] + b[9] * a[7] + b[10] * a[11] + b[11] * a[15],
+            b[12] * a[0] + b[13] * a[4] + b[14] * a[8] + b[15] * a[12],
+            b[12] * a[1] + b[13] * a[5] + b[14] * a[9] + b[15] * a[13],
+            b[12] * a[2] + b[13] * a[6] + b[14] * a[10] + b[15] * a[14],
+            b[12] * a[3] + b[13] * a[7] + b[14] * a[11] + b[15] * a[15],
+        );
+    }
+
+    clone(): Matrix4 {
+        const e = this.buffer;
+        // prettier-ignore
+        return new Matrix4(
+            e[0], e[1], e[2], e[3], 
+            e[4], e[5], e[6], e[7], 
+            e[8], e[9], e[10], e[11], 
+            e[12], e[13], e[14], e[15]
+        );
+    }
+
+    determinant(): number {
+        const e = this.buffer;
+        // prettier-ignore
+        return (
+            e[12] * e[9] * e[6] * e[3] - e[8] * e[13] * e[6] * e[3] - e[12] * e[5] * e[10] * e[3] + e[4] * e[13] * e[10] * e[3] +
+            e[8] * e[5] * e[14] * e[3] - e[4] * e[9] * e[14] * e[3] - e[12] * e[9] * e[2] * e[7] + e[8] * e[13] * e[2] * e[7] +
+            e[12] * e[1] * e[10] * e[7] - e[0] * e[13] * e[10] * e[7] - e[8] * e[1] * e[14] * e[7] + e[0] * e[9] * e[14] * e[7] +
+            e[12] * e[5] * e[2] * e[11] - e[4] * e[13] * e[2] * e[11] - e[12] * e[1] * e[6] * e[11] + e[0] * e[13] * e[6] * e[11] +
+            e[4] * e[1] * e[14] * e[11] - e[0] * e[5] * e[14] * e[11] - e[8] * e[5] * e[2] * e[15] + e[4] * e[9] * e[2] * e[15] +
+            e[8] * e[1] * e[6] * e[15] - e[0] * e[9] * e[6] * e[15] - e[4] * e[1] * e[10] * e[15] + e[0] * e[5] * e[10] * e[15]
+        );
+    }
+
+    invert(): Matrix4 {
+        const e = this.buffer;
+        const det = this.determinant();
+        if (det === 0) {
+            throw new Error("Matrix is not invertible.");
+        }
+        const invDet = 1 / det;
+        // prettier-ignore
+        return new Matrix4(
+            invDet * (
+                e[5] * e[10] * e[15] - e[5] * e[11] * e[14] - e[9] * e[6] * e[15] + e[9] * e[7] * e[14] + e[13] * e[6] * e[11] - e[13] * e[7] * e[10]
+            ),
+            invDet * (
+                -e[1] * e[10] * e[15] + e[1] * e[11] * e[14] + e[9] * e[2] * e[15] - e[9] * e[3] * e[14] - e[13] * e[2] * e[11] + e[13] * e[3] * e[10]
+            ),
+            invDet * (
+                e[1] * e[6] * e[15] - e[1] * e[7] * e[14] - e[5] * e[2] * e[15] + e[5] * e[3] * e[14] + e[13] * e[2] * e[7] - e[13] * e[3] * e[6]
+            ),
+            invDet * (
+                -e[1] * e[6] * e[11] + e[1] * e[7] * e[10] + e[5] * e[2] * e[11] - e[5] * e[3] * e[10] - e[9] * e[2] * e[7] + e[9] * e[3] * e[6]
+            ),
+            invDet * (
+                -e[4] * e[10] * e[15] + e[4] * e[11] * e[14] + e[8] * e[6] * e[15] - e[8] * e[7] * e[14] - e[12] * e[6] * e[11] + e[12] * e[7] * e[10]
+            ),
+            invDet * (
+                e[0] * e[10] * e[15] - e[0] * e[11] * e[14] - e[8] * e[2] * e[15] + e[8] * e[3] * e[14] + e[12] * e[2] * e[11] - e[12] * e[3] * e[10]
+            ),
+            invDet * (
+                -e[0] * e[6] * e[15] + e[0] * e[7] * e[14] + e[4] * e[2] * e[15] - e[4] * e[3] * e[14] - e[12] * e[2] * e[7] + e[12] * e[3] * e[6]
+            ),
+            invDet * (
+                e[0] * e[6] * e[11] - e[0] * e[7] * e[10] - e[4] * e[2] * e[11] + e[4] * e[3] * e[10] + e[8] * e[2] * e[7] - e[8] * e[3] * e[6]
+            ),
+            invDet * (
+                e[4] * e[9] * e[15] - e[4] * e[11] * e[13] - e[8] * e[5] * e[15] + e[8] * e[7] * e[13] + e[12] * e[5] * e[11] - e[12] * e[7] * e[9]
+            ),
+            invDet * (
+                -e[0] * e[9] * e[15] + e[0] * e[11] * e[13] + e[8] * e[1] * e[15] - e[8] * e[3] * e[13] - e[12] * e[1] * e[11] + e[12] * e[3] * e[9]
+            ),
+            invDet * (
+                e[0] * e[5] * e[15] - e[0] * e[7] * e[13] - e[4] * e[1] * e[15] + e[4] * e[3] * e[13] + e[12] * e[1] * e[7] - e[12] * e[3] * e[5]
+            ),
+            invDet * (
+                -e[0] * e[5] * e[11] + e[0] * e[7] * e[9] + e[4] * e[1] * e[11] - e[4] * e[3] * e[9] - e[8] * e[1] * e[7] + e[8] * e[3] * e[5]
+            ),
+            invDet * (
+                -e[4] * e[9] * e[14] + e[4] * e[10] * e[13] + e[8] * e[5] * e[14] - e[8] * e[6] * e[13] - e[12] * e[5] * e[10] + e[12] * e[6] * e[9]
+            ),
+            invDet * (
+                e[0] * e[9] * e[14] - e[0] * e[10] * e[13] - e[8] * e[1] * e[14] + e[8] * e[2] * e[13] + e[12] * e[1] * e[10] - e[12] * e[2] * e[9]
+            ),
+            invDet * (
+                -e[0] * e[5] * e[14] + e[0] * e[6] * e[13] + e[4] * e[1] * e[14] - e[4] * e[2] * e[13] - e[12] * e[1] * e[6] + e[12] * e[2] * e[5]
+            ),
+            invDet * (
+                e[0] * e[5] * e[10] - e[0] * e[6] * e[9] - e[4] * e[1] * e[10] + e[4] * e[2] * e[9] + e[8] * e[1] * e[6] - e[8] * e[2] * e[5]
+            ),
+        );
+    }
+
+    static Compose(position: Vector3, rotation: Quaternion, scale: Vector3): Matrix4 {
+        const x = rotation.x,
+            y = rotation.y,
+            z = rotation.z,
+            w = rotation.w;
+        const x2 = x + x,
+            y2 = y + y,
+            z2 = z + z;
+        const xx = x * x2,
+            xy = x * y2,
+            xz = x * z2;
+        const yy = y * y2,
+            yz = y * z2,
+            zz = z * z2;
+        const wx = w * x2,
+            wy = w * y2,
+            wz = w * z2;
+        const sx = scale.x,
+            sy = scale.y,
+            sz = scale.z;
+        // prettier-ignore
+        return new Matrix4(
+            (1 - (yy + zz)) * sx, (xy + wz) * sx, (xz - wy) * sx, 0,
+            (xy - wz) * sy, (1 - (xx + zz)) * sy, (yz + wx) * sy, 0,
+            (xz + wy) * sz, (yz - wx) * sz, (1 - (xx + yy)) * sz, 0,
+            position.x, position.y, position.z, 1
+        );
+    }
+
+    toString(): string {
+        return `[${this.buffer.join(", ")}]`;
+    }
+}
+
+export { Matrix4 };

src/math/Plane.ts

@@ -0,0 +1,29 @@
+import { Vector3 } from "./Vector3";
+
+class Plane {
+    public readonly normal: Vector3;
+    public readonly point: Vector3;
+
+    constructor(normal: Vector3, point: Vector3) {
+        this.normal = normal;
+        this.point = point;
+    }
+
+    intersect(origin: Vector3, direction: Vector3): Vector3 | null {
+        const denominator = this.normal.dot(direction);
+
+        if (Math.abs(denominator) < 0.0001) {
+            return null;
+        }
+
+        const t = this.normal.dot(this.point.subtract(origin)) / denominator;
+
+        if (t < 0) {
+            return null;
+        }
+
+        return origin.add(direction.multiply(t));
+    }
+}
+
+export { Plane };

src/math/Quaternion.ts

@@ -0,0 +1,177 @@
+import { Matrix3 } from "./Matrix3";
+import { Vector3 } from "./Vector3";
+
+class Quaternion {
+    public readonly x: number;
+    public readonly y: number;
+    public readonly z: number;
+    public readonly w: number;
+
+    constructor(x: number = 0, y: number = 0, z: number = 0, w: number = 1) {
+        this.x = x;
+        this.y = y;
+        this.z = z;
+        this.w = w;
+    }
+
+    equals(q: Quaternion): boolean {
+        if (this.x !== q.x) {
+            return false;
+        }
+        if (this.y !== q.y) {
+            return false;
+        }
+        if (this.z !== q.z) {
+            return false;
+        }
+        if (this.w !== q.w) {
+            return false;
+        }
+
+        return true;
+    }
+
+    normalize(): Quaternion {
+        const l = Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z + this.w * this.w);
+        return new Quaternion(this.x / l, this.y / l, this.z / l, this.w / l);
+    }
+
+    multiply(q: Quaternion): Quaternion {
+        const w1 = this.w,
+            x1 = this.x,
+            y1 = this.y,
+            z1 = this.z;
+        const w2 = q.w,
+            x2 = q.x,
+            y2 = q.y,
+            z2 = q.z;
+
+        return new Quaternion(
+            w1 * x2 + x1 * w2 + y1 * z2 - z1 * y2,
+            w1 * y2 - x1 * z2 + y1 * w2 + z1 * x2,
+            w1 * z2 + x1 * y2 - y1 * x2 + z1 * w2,
+            w1 * w2 - x1 * x2 - y1 * y2 - z1 * z2,
+        );
+    }
+
+    inverse(): Quaternion {
+        const l = this.x * this.x + this.y * this.y + this.z * this.z + this.w * this.w;
+        return new Quaternion(-this.x / l, -this.y / l, -this.z / l, this.w / l);
+    }
+
+    apply(v: Vector3): Vector3 {
+        const vecQuat = new Quaternion(v.x, v.y, v.z, 0);
+        const conjugate = new Quaternion(-this.x, -this.y, -this.z, this.w);
+        const rotatedQuat = this.multiply(vecQuat).multiply(conjugate);
+        return new Vector3(rotatedQuat.x, rotatedQuat.y, rotatedQuat.z);
+    }
+
+    flat(): number[] {
+        return [this.x, this.y, this.z, this.w];
+    }
+
+    clone(): Quaternion {
+        return new Quaternion(this.x, this.y, this.z, this.w);
+    }
+
+    static FromEuler(e: Vector3): Quaternion {
+        const halfX = e.x / 2;
+        const halfY = e.y / 2;
+        const halfZ = e.z / 2;
+        const cy = Math.cos(halfY);
+        const sy = Math.sin(halfY);
+        const cp = Math.cos(halfX);
+        const sp = Math.sin(halfX);
+        const cz = Math.cos(halfZ);
+        const sz = Math.sin(halfZ);
+
+        const q = new Quaternion(
+            cy * sp * cz + sy * cp * sz,
+            sy * cp * cz - cy * sp * sz,
+            cy * cp * sz - sy * sp * cz,
+            cy * cp * cz + sy * sp * sz,
+        );
+        return q;
+    }
+
+    toEuler(): Vector3 {
+        const sinr_cosp = 2 * (this.w * this.x + this.y * this.z);
+        const cosr_cosp = 1 - 2 * (this.x * this.x + this.y * this.y);
+        const x = Math.atan2(sinr_cosp, cosr_cosp);
+
+        let y;
+        const sinp = 2 * (this.w * this.y - this.z * this.x);
+        if (Math.abs(sinp) >= 1) {
+            y = (Math.sign(sinp) * Math.PI) / 2;
+        } else {
+            y = Math.asin(sinp);
+        }
+
+        const siny_cosp = 2 * (this.w * this.z + this.x * this.y);
+        const cosy_cosp = 1 - 2 * (this.y * this.y + this.z * this.z);
+        const z = Math.atan2(siny_cosp, cosy_cosp);
+
+        return new Vector3(x, y, z);
+    }
+
+    static FromMatrix3(matrix: Matrix3): Quaternion {
+        const m = matrix.buffer;
+        const trace = m[0] + m[4] + m[8];
+        let x, y, z, w;
+        if (trace > 0) {
+            const s = 0.5 / Math.sqrt(trace + 1.0);
+            w = 0.25 / s;
+            x = (m[7] - m[5]) * s;
+            y = (m[2] - m[6]) * s;
+            z = (m[3] - m[1]) * s;
+        } else if (m[0] > m[4] && m[0] > m[8]) {
+            const s = 2.0 * Math.sqrt(1.0 + m[0] - m[4] - m[8]);
+            w = (m[7] - m[5]) / s;
+            x = 0.25 * s;
+            y = (m[1] + m[3]) / s;
+            z = (m[2] + m[6]) / s;
+        } else if (m[4] > m[8]) {
+            const s = 2.0 * Math.sqrt(1.0 + m[4] - m[0] - m[8]);
+            w = (m[2] - m[6]) / s;
+            x = (m[1] + m[3]) / s;
+            y = 0.25 * s;
+            z = (m[5] + m[7]) / s;
+        } else {
+            const s = 2.0 * Math.sqrt(1.0 + m[8] - m[0] - m[4]);
+            w = (m[3] - m[1]) / s;
+            x = (m[2] + m[6]) / s;
+            y = (m[5] + m[7]) / s;
+            z = 0.25 * s;
+        }
+        return new Quaternion(x, y, z, w);
+    }
+
+    static FromAxisAngle(axis: Vector3, angle: number): Quaternion {
+        const halfAngle = angle / 2;
+        const sin = Math.sin(halfAngle);
+        const cos = Math.cos(halfAngle);
+        return new Quaternion(axis.x * sin, axis.y * sin, axis.z * sin, cos);
+    }
+
+    static LookRotation(direction: Vector3): Quaternion {
+        const forward = new Vector3(0, 0, 1);
+        const dot = forward.dot(direction);
+
+        if (Math.abs(dot - -1.0) < 0.000001) {
+            return new Quaternion(0, 1, 0, Math.PI);
+        }
+        if (Math.abs(dot - 1.0) < 0.000001) {
+            return new Quaternion();
+        }
+
+        const rotAngle = Math.acos(dot);
+        const rotAxis = forward.cross(direction).normalize();
+        return Quaternion.FromAxisAngle(rotAxis, rotAngle);
+    }
+
+    toString(): string {
+        return `[${this.flat().join(", ")}]`;
+    }
+}
+
+export { Quaternion };

src/math/Vector3.ts

@@ -0,0 +1,163 @@
+import { Matrix4 } from "./Matrix4";
+
+class Vector3 {
+    public readonly x: number;
+    public readonly y: number;
+    public readonly z: number;
+
+    constructor(x: number = 0, y: number = 0, z: number = 0) {
+        this.x = x;
+        this.y = y;
+        this.z = z;
+    }
+
+    equals(v: Vector3): boolean {
+        if (this.x !== v.x) {
+            return false;
+        }
+        if (this.y !== v.y) {
+            return false;
+        }
+        if (this.z !== v.z) {
+            return false;
+        }
+
+        return true;
+    }
+
+    add(v: number): Vector3;
+    add(v: Vector3): Vector3;
+    add(v: number | Vector3): Vector3 {
+        if (typeof v === "number") {
+            return new Vector3(this.x + v, this.y + v, this.z + v);
+        } else {
+            return new Vector3(this.x + v.x, this.y + v.y, this.z + v.z);
+        }
+    }
+
+    subtract(v: number): Vector3;
+    subtract(v: Vector3): Vector3;
+    subtract(v: number | Vector3): Vector3 {
+        if (typeof v === "number") {
+            return new Vector3(this.x - v, this.y - v, this.z - v);
+        } else {
+            return new Vector3(this.x - v.x, this.y - v.y, this.z - v.z);
+        }
+    }
+
+    multiply(v: number): Vector3;
+    multiply(v: Vector3): Vector3;
+    multiply(v: Matrix4): Vector3;
+    multiply(v: number | Vector3 | Matrix4): Vector3 {
+        if (typeof v === "number") {
+            return new Vector3(this.x * v, this.y * v, this.z * v);
+        } else if (v instanceof Vector3) {
+            return new Vector3(this.x * v.x, this.y * v.y, this.z * v.z);
+        } else {
+            return new Vector3(
+                this.x * v.buffer[0] + this.y * v.buffer[4] + this.z * v.buffer[8] + v.buffer[12],
+                this.x * v.buffer[1] + this.y * v.buffer[5] + this.z * v.buffer[9] + v.buffer[13],
+                this.x * v.buffer[2] + this.y * v.buffer[6] + this.z * v.buffer[10] + v.buffer[14],
+            );
+        }
+    }
+
+    divide(v: number): Vector3;
+    divide(v: Vector3): Vector3;
+    divide(v: number | Vector3): Vector3 {
+        if (typeof v === "number") {
+            return new Vector3(this.x / v, this.y / v, this.z / v);
+        } else {
+            return new Vector3(this.x / v.x, this.y / v.y, this.z / v.z);
+        }
+    }
+
+    cross(v: Vector3): Vector3 {
+        const x = this.y * v.z - this.z * v.y;
+        const y = this.z * v.x - this.x * v.z;
+        const z = this.x * v.y - this.y * v.x;
+
+        return new Vector3(x, y, z);
+    }
+
+    dot(v: Vector3): number {
+        return this.x * v.x + this.y * v.y + this.z * v.z;
+    }
+
+    lerp(v: Vector3, t: number): Vector3 {
+        return new Vector3(this.x + (v.x - this.x) * t, this.y + (v.y - this.y) * t, this.z + (v.z - this.z) * t);
+    }
+
+    min(v: Vector3): Vector3 {
+        return new Vector3(Math.min(this.x, v.x), Math.min(this.y, v.y), Math.min(this.z, v.z));
+    }
+
+    max(v: Vector3): Vector3 {
+        return new Vector3(Math.max(this.x, v.x), Math.max(this.y, v.y), Math.max(this.z, v.z));
+    }
+
+    getComponent(axis: number) {
+        switch (axis) {
+            case 0:
+                return this.x;
+            case 1:
+                return this.y;
+            case 2:
+                return this.z;
+            default:
+                throw new Error(`Invalid component index: ${axis}`);
+        }
+    }
+
+    minComponent(): number {
+        if (this.x < this.y && this.x < this.z) {
+            return 0;
+        } else if (this.y < this.z) {
+            return 1;
+        } else {
+            return 2;
+        }
+    }
+
+    maxComponent(): number {
+        if (this.x > this.y && this.x > this.z) {
+            return 0;
+        } else if (this.y > this.z) {
+            return 1;
+        } else {
+            return 2;
+        }
+    }
+
+    magnitude(): number {
+        return Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z);
+    }
+
+    distanceTo(v: Vector3): number {
+        return Math.sqrt((this.x - v.x) ** 2 + (this.y - v.y) ** 2 + (this.z - v.z) ** 2);
+    }
+
+    normalize(): Vector3 {
+        const length = this.magnitude();
+
+        return new Vector3(this.x / length, this.y / length, this.z / length);
+    }
+
+    flat(): number[] {
+        return [this.x, this.y, this.z];
+    }
+
+    clone(): Vector3 {
+        return new Vector3(this.x, this.y, this.z);
+    }
+
+    toString(): string {
+        return `[${this.flat().join(", ")}]`;
+    }
+
+    static One(value: number = 1): Vector3 {
+        return new Vector3(value, value, value);
+    }
+}
+
+export { Vector3 };

src/math/Vector4.ts

@@ -0,0 +1,111 @@
+import { Matrix4 } from "./Matrix4";
+
+class Vector4 {
+    public readonly x: number;
+    public readonly y: number;
+    public readonly z: number;
+    public readonly w: number;
+
+    constructor(x: number = 0, y: number = 0, z: number = 0, w: number = 0) {
+        this.x = x;
+        this.y = y;
+        this.z = z;
+        this.w = w;
+    }
+
+    equals(v: Vector4): boolean {
+        if (this.x !== v.x) {
+            return false;
+        }
+        if (this.y !== v.y) {
+            return false;
+        }
+        if (this.z !== v.z) {
+            return false;
+        }
+        if (this.w !== v.w) {
+            return false;
+        }
+
+        return true;
+    }
+
+    add(v: number): Vector4;
+    add(v: Vector4): Vector4;
+    add(v: number | Vector4): Vector4 {
+        if (typeof v === "number") {
+            return new Vector4(this.x + v, this.y + v, this.z + v, this.w + v);
+        } else {
+            return new Vector4(this.x + v.x, this.y + v.y, this.z + v.z, this.w + v.w);
+        }
+    }
+
+    subtract(v: number): Vector4;
+    subtract(v: Vector4): Vector4;
+    subtract(v: number | Vector4): Vector4 {
+        if (typeof v === "number") {
+            return new Vector4(this.x - v, this.y - v, this.z - v, this.w - v);
+        } else {
+            return new Vector4(this.x - v.x, this.y - v.y, this.z - v.z, this.w - v.w);
+        }
+    }
+
+    multiply(v: number): Vector4;
+    multiply(v: Vector4): Vector4;
+    multiply(v: Matrix4): Vector4;
+    multiply(v: number | Vector4 | Matrix4): Vector4 {
+        if (typeof v === "number") {
+            return new Vector4(this.x * v, this.y * v, this.z * v, this.w * v);
+        } else if (v instanceof Vector4) {
+            return new Vector4(this.x * v.x, this.y * v.y, this.z * v.z, this.w * v.w);
+        } else {
+            return new Vector4(
+                this.x * v.buffer[0] + this.y * v.buffer[4] + this.z * v.buffer[8] + this.w * v.buffer[12],
+                this.x * v.buffer[1] + this.y * v.buffer[5] + this.z * v.buffer[9] + this.w * v.buffer[13],
+                this.x * v.buffer[2] + this.y * v.buffer[6] + this.z * v.buffer[10] + this.w * v.buffer[14],
+                this.x * v.buffer[3] + this.y * v.buffer[7] + this.z * v.buffer[11] + this.w * v.buffer[15],
+            );
+        }
+    }
+
+    dot(v: Vector4): number {
+        return this.x * v.x + this.y * v.y + this.z * v.z + this.w * v.w;
+    }
+
+    lerp(v: Vector4, t: number): Vector4 {
+        return new Vector4(
+            this.x + (v.x - this.x) * t,
+            this.y + (v.y - this.y) * t,
+            this.z + (v.z - this.z) * t,
+            this.w + (v.w - this.w) * t,
+        );
+    }
+
+    magnitude(): number {
+        return Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z + this.w * this.w);
+    }
+
+    distanceTo(v: Vector4): number {
+        return Math.sqrt((this.x - v.x) ** 2 + (this.y - v.y) ** 2 + (this.z - v.z) ** 2 + (this.w - v.w) ** 2);
+    }
+
+    normalize(): Vector4 {
+        const length = this.magnitude();
+
+        return new Vector4(this.x / length, this.y / length, this.z / length, this.w / length);
+    }
+
+    flat(): number[] {
+        return [this.x, this.y, this.z, this.w];
+    }
+
+    clone(): Vector4 {
+        return new Vector4(this.x, this.y, this.z, this.w);
+    }
+
+    toString(): string {
+        return `[${this.flat().join(", ")}]`;
+    }
+}
+
+export { Vector4 };

src/renderers/WebGLRenderer.ts

@@ -0,0 +1,110 @@
+import type { Scene } from "../core/Scene";
+import { FadeInPass } from "./webgl/passes/FadeInPass";
+import { Camera } from "../cameras/Camera";
+import { Color32 } from "../math/Color32";
+import { ShaderProgram } from "./webgl/programs/ShaderProgram";
+import { RenderProgram } from "./webgl/programs/RenderProgram";
+import { ShaderPass } from "./webgl/passes/ShaderPass";
+
+export class WebGLRenderer {
+    private _canvas: HTMLCanvasElement;
+    private _gl: WebGL2RenderingContext;
+    private _backgroundColor: Color32 = new Color32();
+    private _renderProgram: RenderProgram;
+
+    addProgram: (program: ShaderProgram) => void;
+    removeProgram: (program: ShaderProgram) => void;
+    resize: () => void;
+    setSize: (width: number, height: number) => void;
+    render: (scene: Scene, camera: Camera) => void;
+    dispose: () => void;
+
+    constructor(optionalCanvas: HTMLCanvasElement | null = null, optionalRenderPasses: ShaderPass[] | null = null) {
+        const canvas: HTMLCanvasElement = optionalCanvas || document.createElement("canvas");
+        if (!optionalCanvas) {
+            canvas.style.display = "block";
+            canvas.style.boxSizing = "border-box";
+            canvas.style.width = "100%";
+            canvas.style.height = "100%";
+            canvas.style.margin = "0";
+            canvas.style.padding = "0";
+            document.body.appendChild(canvas);
+        }
+        canvas.style.background = this._backgroundColor.toHexString();
+        this._canvas = canvas;
+
+        this._gl = canvas.getContext("webgl2", { antialias: false }) as WebGL2RenderingContext;
+
+        const renderPasses = optionalRenderPasses || [];
+        if (!optionalRenderPasses) {
+            renderPasses.push(new FadeInPass());
+        }
+
+        this._renderProgram = new RenderProgram(this, renderPasses);
+        const programs = [this._renderProgram] as ShaderProgram[];
+
+        this.resize = () => {
+            const width = canvas.clientWidth;
+            const height = canvas.clientHeight;
+            if (canvas.width !== width || canvas.height !== height) {
+                this.setSize(width, height);
+            }
+        };
+
+        this.setSize = (width: number, height: number) => {
+            canvas.width = width;
+            canvas.height = height;
+            this._gl.viewport(0, 0, canvas.width, canvas.height);
+            for (const program of programs) {
+                program.resize();
+            }
+        };
+
+        this.render = (scene: Scene, camera: Camera) => {
+            for (const program of programs) {
+                program.render(scene, camera);
+            }
+        };
+
+        this.dispose = () => {
+            for (const program of programs) {
+                program.dispose();
+            }
+        };
+
+        this.addProgram = (program: ShaderProgram) => {
+            programs.push(program);
+        };
+
+        this.removeProgram = (program: ShaderProgram) => {
+            const index = programs.indexOf(program);
+            if (index < 0) {
+                throw new Error("Program not found");
+            }
+            programs.splice(index, 1);
+        };
+
+        this.resize();
+    }
+
+    get canvas() {
+        return this._canvas;
+    }
+
+    get gl() {
+        return this._gl;
+    }
+
+    get renderProgram() {
+        return this._renderProgram;
+    }
+
+    get backgroundColor() {
+        return this._backgroundColor;
+    }
+
+    set backgroundColor(value: Color32) {
+        this._backgroundColor = value;
+        this._canvas.style.background = value.toHexString();
+    }
+}

src/renderers/webgl/passes/FadeInPass.ts

@@ -0,0 +1,50 @@
+import { RenderProgram } from "../programs/RenderProgram";
+import { ShaderProgram } from "../programs/ShaderProgram";
+import { ShaderPass } from "./ShaderPass";
+
+class FadeInPass implements ShaderPass {
+    initialize: (program: ShaderProgram) => void;
+    render: () => void;
+
+    constructor(speed: number = 1.0) {
+        let value = 0.0;
+        let active = false;
+
+        let renderProgram: RenderProgram;
+        let gl: WebGL2RenderingContext;
+        let u_useDepthFade: WebGLUniformLocation;
+        let u_depthFade: WebGLUniformLocation;
+
+        this.initialize = (program: ShaderProgram) => {
+            if (!(program instanceof RenderProgram)) {
+                throw new Error("FadeInPass requires a RenderProgram");
+            }
+
+            value = program.started ? 1.0 : 0.0;
+            active = true;
+            renderProgram = program;
+            gl = program.renderer.gl;
+
+            u_useDepthFade = gl.getUniformLocation(renderProgram.program, "useDepthFade") as WebGLUniformLocation;
+            gl.uniform1i(u_useDepthFade, 1);
+
+            u_depthFade = gl.getUniformLocation(renderProgram.program, "depthFade") as WebGLUniformLocation;
+            gl.uniform1f(u_depthFade, value);
+        };
+
+        this.render = () => {
+            if (!active || renderProgram.renderData?.updating) return;
+            gl.useProgram(renderProgram.program);
+            value = Math.min(value + speed * 0.01, 1.0);
+            if (value >= 1.0) {
+                active = false;
+                gl.uniform1i(u_useDepthFade, 0);
+            }
+            gl.uniform1f(u_depthFade, value);
+        };
+    }
+
+    dispose() {}
+}
+
+export { FadeInPass };

src/renderers/webgl/passes/ShaderPass.ts

@@ -0,0 +1,10 @@
+import { ShaderProgram } from "../programs/ShaderProgram";
+
+class ShaderPass {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    initialize(program: ShaderProgram) {}
+    render() {}
+    dispose() {}
+}
+
+export { ShaderPass };

src/renderers/webgl/programs/RenderProgram.ts

@@ -0,0 +1,574 @@
+import SortWorker from "web-worker:../utils/SortWorker.ts";
+
+import { ShaderProgram } from "./ShaderProgram";
+import { ShaderPass } from "../passes/ShaderPass";
+import { RenderData } from "../utils/RenderData";
+import { Color32 } from "../../../math/Color32";
+import { ObjectAddedEvent, ObjectChangedEvent, ObjectRemovedEvent } from "../../../events/Events";
+import { Splat } from "../../../splats/Splat";
+import { WebGLRenderer } from "../../WebGLRenderer";
+import { Scene } from "../../../core/Scene"
+
+const vertexShaderSource = /* glsl */ `#version 300 es
+precision highp float;
+precision highp int;
+
+uniform highp usampler2D u_texture;
+uniform highp sampler2D u_transforms;
+uniform highp usampler2D u_transformIndices;
+uniform highp sampler2D u_colorTransforms;
+uniform highp usampler2D u_colorTransformIndices;
+uniform mat4 projection, view;
+uniform vec2 focal;
+uniform vec2 viewport;
+
+uniform bool useDepthFade;
+uniform float depthFade;
+
+in vec2 position;
+in int index;
+
+out vec4 vColor;
+out vec2 vPosition;
+out float vSize;
+out float vSelected;
+
+void main () {
+    uvec4 cen = texelFetch(u_texture, ivec2((uint(index) & 0x3ffu) << 1, uint(index) >> 10), 0);
+    float selected = float((cen.w >> 24) & 0xffu);
+
+    uint transformIndex = texelFetch(u_transformIndices, ivec2(uint(index) & 0x3ffu, uint(index) >> 10), 0).x;
+    mat4 transform = mat4(
+        texelFetch(u_transforms, ivec2(0, transformIndex), 0),
+        texelFetch(u_transforms, ivec2(1, transformIndex), 0),
+        texelFetch(u_transforms, ivec2(2, transformIndex), 0),
+        texelFetch(u_transforms, ivec2(3, transformIndex), 0)
+    );
+
+    if (selected < 0.5) {
+        selected = texelFetch(u_transforms, ivec2(4, transformIndex), 0).x;
+    }
+
+    mat4 viewTransform = view * transform;
+
+    vec4 cam = viewTransform * vec4(uintBitsToFloat(cen.xyz), 1);
+    vec4 pos2d = projection * cam;
+
+    float clip = 1.2 * pos2d.w;
+    if (pos2d.z < -pos2d.w || pos2d.z > pos2d.w || pos2d.x < -clip || pos2d.x > clip || pos2d.y < -clip || pos2d.y > clip) {
+        gl_Position = vec4(0.0, 0.0, 2.0, 1.0);
+        return;
+    }
+
+    uvec4 cov = texelFetch(u_texture, ivec2(((uint(index) & 0x3ffu) << 1) | 1u, uint(index) >> 10), 0);
+    vec2 u1 = unpackHalf2x16(cov.x), u2 = unpackHalf2x16(cov.y), u3 = unpackHalf2x16(cov.z);
+    mat3 Vrk = mat3(u1.x, u1.y, u2.x, u1.y, u2.y, u3.x, u2.x, u3.x, u3.y);
+
+    mat3 J = mat3(
+        focal.x / cam.z, 0., -(focal.x * cam.x) / (cam.z * cam.z), 
+        0., -focal.y / cam.z, (focal.y * cam.y) / (cam.z * cam.z), 
+        0., 0., 0.
+    );
+
+    mat3 T = transpose(mat3(viewTransform)) * J;
+    mat3 cov2d = transpose(T) * Vrk * T;
+
+    //ref: https://github.com/graphdeco-inria/diff-gaussian-rasterization/blob/main/cuda_rasterizer/forward.cu#L110-L111
+    cov2d[0][0] += 0.3;
+    cov2d[1][1] += 0.3;
+
+    float mid = (cov2d[0][0] + cov2d[1][1]) / 2.0;
+    float radius = length(vec2((cov2d[0][0] - cov2d[1][1]) / 2.0, cov2d[0][1]));
+    float lambda1 = mid + radius, lambda2 = mid - radius;
+
+    if (lambda2 < 0.0) return;
+    vec2 diagonalVector = normalize(vec2(cov2d[0][1], lambda1 - cov2d[0][0]));
+    vec2 majorAxis = min(sqrt(2.0 * lambda1), 1024.0) * diagonalVector;
+    vec2 minorAxis = min(sqrt(2.0 * lambda2), 1024.0) * vec2(diagonalVector.y, -diagonalVector.x);
+
+    uint colorTransformIndex = texelFetch(u_colorTransformIndices, ivec2(uint(index) & 0x3ffu, uint(index) >> 10), 0).x;
+    mat4 colorTransform = mat4(
+        texelFetch(u_colorTransforms, ivec2(0, colorTransformIndex), 0),
+        texelFetch(u_colorTransforms, ivec2(1, colorTransformIndex), 0),
+        texelFetch(u_colorTransforms, ivec2(2, colorTransformIndex), 0),
+        texelFetch(u_colorTransforms, ivec2(3, colorTransformIndex), 0)
+    );
+
+    vec4 color = vec4((cov.w) & 0xffu, (cov.w >> 8) & 0xffu, (cov.w >> 16) & 0xffu, (cov.w >> 24) & 0xffu) / 255.0;
+    vColor = colorTransform * color;
+
+    vPosition = position;
+    vSize = length(majorAxis);
+    vSelected = selected;
+
+    float scalingFactor = 1.0;
+
+    if (useDepthFade) {
+        float depthNorm = (pos2d.z / pos2d.w + 1.0) / 2.0;
+        float near = 0.1; float far = 100.0;
+        float normalizedDepth = (2.0 * near) / (far + near - depthNorm * (far - near));
+        float start = max(normalizedDepth - 0.1, 0.0);
+        float end = min(normalizedDepth + 0.1, 1.0);
+        scalingFactor = clamp((depthFade - start) / (end - start), 0.0, 1.0);
+    }
+
+    vec2 vCenter = vec2(pos2d) / pos2d.w;
+    gl_Position = vec4(
+        vCenter 
+        + position.x * majorAxis * scalingFactor / viewport
+        + position.y * minorAxis * scalingFactor / viewport, 0.0, 1.0);
+}
+`;
+
+const fragmentShaderSource = /* glsl */ `#version 300 es
+precision highp float;
+
+uniform float outlineThickness;
+uniform vec4 outlineColor;
+
+in vec4 vColor;
+in vec2 vPosition;
+in float vSize;
+in float vSelected;
+
+out vec4 fragColor;
+
+void main () {
+    float A = -dot(vPosition, vPosition);
+
+    if (A < -4.0) discard;
+
+    if (vSelected < 0.5) {
+        float B = exp(A) * vColor.a;
+        fragColor = vec4(B * vColor.rgb, B);
+        return;
+    }
+
+    float outlineThreshold = -4.0 + (outlineThickness / vSize);
+
+    if (A < outlineThreshold) {
+        fragColor = outlineColor;
+    } 
+    else {
+        float B = exp(A) * vColor.a;
+        fragColor = vec4(B * vColor.rgb, B);
+    }
+}
+`;
+
+class RenderProgram extends ShaderProgram {
+    private _outlineThickness: number = 10.0;
+    private _outlineColor: Color32 = new Color32(255, 165, 0, 255);
+    private _renderData: RenderData | null = null;
+    private _depthIndex: Uint32Array = new Uint32Array();
+    private _splatTexture: WebGLTexture | null = null;
+    private _worker: Worker | null = null;
+
+    protected _initialize: () => void;
+    protected _resize: () => void;
+    protected _render: () => void;
+    protected _dispose: () => void;
+
+    private _setOutlineThickness: (value: number) => void;
+    private _setOutlineColor: (value: Color32) => void;
+
+    constructor(renderer: WebGLRenderer, passes: ShaderPass[]) {
+        super(renderer, passes);
+
+        const canvas = renderer.canvas;
+        const gl = renderer.gl;
+
+        let u_projection: WebGLUniformLocation;
+        let u_viewport: WebGLUniformLocation;
+        let u_focal: WebGLUniformLocation;
+        let u_view: WebGLUniformLocation;
+        let u_texture: WebGLUniformLocation;
+        let u_transforms: WebGLUniformLocation;
+        let u_transformIndices: WebGLUniformLocation;
+        let u_colorTransforms: WebGLUniformLocation;
+        let u_colorTransformIndices: WebGLUniformLocation;
+
+        let u_outlineThickness: WebGLUniformLocation;
+        let u_outlineColor: WebGLUniformLocation;
+
+        let positionAttribute: number;
+        let indexAttribute: number;
+
+        let transformsTexture: WebGLTexture;
+        let transformIndicesTexture: WebGLTexture;
+
+        let colorTransformsTexture: WebGLTexture;
+        let colorTransformIndicesTexture: WebGLTexture;
+
+        let vertexBuffer: WebGLBuffer;
+        let indexBuffer: WebGLBuffer;
+
+        this._resize = () => {
+            if (!this._camera) return;
+
+            this._camera.data.setSize(canvas.width, canvas.height);
+            this._camera.update();
+
+            u_projection = gl.getUniformLocation(this.program, "projection") as WebGLUniformLocation;
+            gl.uniformMatrix4fv(u_projection, false, this._camera.data.projectionMatrix.buffer);
+
+            u_viewport = gl.getUniformLocation(this.program, "viewport") as WebGLUniformLocation;
+            gl.uniform2fv(u_viewport, new Float32Array([canvas.width, canvas.height]));
+        };
+
+        const createWorker = () => {
+            this._worker = new SortWorker();
+            this._worker.onmessage = (e) => {
+                if (e.data.depthIndex) {
+                    const { depthIndex } = e.data;
+                    this._depthIndex = depthIndex;
+                    gl.bindBuffer(gl.ARRAY_BUFFER, indexBuffer);
+                    gl.bufferData(gl.ARRAY_BUFFER, depthIndex, gl.STATIC_DRAW);
+                }
+            };
+        };
+
+        this._initialize = () => {
+            if (!this._scene || !this._camera) {
+                console.error("Cannot render without scene and camera");
+                return;
+            }
+
+            this._resize();
+
+            this._scene.addEventListener("objectAdded", handleObjectAdded);
+            this._scene.addEventListener("objectRemoved", handleObjectRemoved);
+            for (const object of this._scene.objects) {
+                if (object instanceof Splat) {
+                    object.addEventListener("objectChanged", handleObjectChanged);
+                }
+            }
+
+            this._renderData = new RenderData(this._scene);
+
+            u_focal = gl.getUniformLocation(this.program, "focal") as WebGLUniformLocation;
+            gl.uniform2fv(u_focal, new Float32Array([this._camera.data.fx, this._camera.data.fy]));
+
+            u_view = gl.getUniformLocation(this.program, "view") as WebGLUniformLocation;
+            gl.uniformMatrix4fv(u_view, false, this._camera.data.viewMatrix.buffer);
+
+            u_outlineThickness = gl.getUniformLocation(this.program, "outlineThickness") as WebGLUniformLocation;
+            gl.uniform1f(u_outlineThickness, this.outlineThickness);
+
+            u_outlineColor = gl.getUniformLocation(this.program, "outlineColor") as WebGLUniformLocation;
+            gl.uniform4fv(u_outlineColor, new Float32Array(this.outlineColor.flatNorm()));
+
+            this._splatTexture = gl.createTexture() as WebGLTexture;
+            u_texture = gl.getUniformLocation(this.program, "u_texture") as WebGLUniformLocation;
+            gl.uniform1i(u_texture, 0);
+
+            transformsTexture = gl.createTexture() as WebGLTexture;
+            u_transforms = gl.getUniformLocation(this.program, "u_transforms") as WebGLUniformLocation;
+            gl.uniform1i(u_transforms, 1);
+
+            transformIndicesTexture = gl.createTexture() as WebGLTexture;
+            u_transformIndices = gl.getUniformLocation(this.program, "u_transformIndices") as WebGLUniformLocation;
+            gl.uniform1i(u_transformIndices, 2);
+
+            colorTransformsTexture = gl.createTexture() as WebGLTexture;
+            u_colorTransforms = gl.getUniformLocation(this.program, "u_colorTransforms") as WebGLUniformLocation;
+            gl.uniform1i(u_colorTransforms, 3);
+
+            colorTransformIndicesTexture = gl.createTexture() as WebGLTexture;
+            u_colorTransformIndices = gl.getUniformLocation(
+                this.program,
+                "u_colorTransformIndices",
+            ) as WebGLUniformLocation;
+            gl.uniform1i(u_colorTransformIndices, 4);
+
+            vertexBuffer = gl.createBuffer() as WebGLBuffer;
+            gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-2, -2, 2, -2, 2, 2, -2, 2]), gl.STATIC_DRAW);
+
+            positionAttribute = gl.getAttribLocation(this.program, "position");
+            gl.enableVertexAttribArray(positionAttribute);
+            gl.vertexAttribPointer(positionAttribute, 2, gl.FLOAT, false, 0, 0);
+
+            indexBuffer = gl.createBuffer() as WebGLBuffer;
+            indexAttribute = gl.getAttribLocation(this.program, "index");
+            gl.enableVertexAttribArray(indexAttribute);
+            gl.bindBuffer(gl.ARRAY_BUFFER, indexBuffer);
+
+            createWorker();
+        };
+
+        const handleObjectAdded = (event: Event) => {
+            const e = event as ObjectAddedEvent;
+
+            if (e.object instanceof Splat) {
+                e.object.addEventListener("objectChanged", handleObjectChanged);
+            }
+
+            resetSplatData();
+        };
+
+        const handleObjectRemoved = (event: Event) => {
+            const e = event as ObjectRemovedEvent;
+
+            if (e.object instanceof Splat) {
+                e.object.removeEventListener("objectChanged", handleObjectChanged);
+            }
+
+            resetSplatData();
+        };
+
+        const handleObjectChanged = (event: Event) => {
+            const e = event as ObjectChangedEvent;
+
+            if (e.object instanceof Splat && this._renderData) {
+                this._renderData.markDirty(e.object);
+            }
+        };
+
+        const resetSplatData = () => {
+            this._renderData?.dispose();
+            this._renderData = new RenderData(this._scene as Scene);
+
+            this._worker?.terminate();
+            createWorker();
+        };
+
+        this._render = () => {
+            if (!this._scene || !this._camera || !this.renderData) {
+                console.error("Cannot render without scene and camera");
+                return;
+            }
+
+            if (this.renderData.needsRebuild) {
+                this.renderData.rebuild();
+            }
+
+            if (
+                this.renderData.dataChanged ||
+                this.renderData.transformsChanged ||
+                this.renderData.colorTransformsChanged
+            ) {
+                if (this.renderData.dataChanged) {
+                    gl.activeTexture(gl.TEXTURE0);
+                    gl.bindTexture(gl.TEXTURE_2D, this.splatTexture);
+                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+                    gl.texImage2D(
+                        gl.TEXTURE_2D,
+                        0,
+                        gl.RGBA32UI,
+                        this.renderData.width,
+                        this.renderData.height,
+                        0,
+                        gl.RGBA_INTEGER,
+                        gl.UNSIGNED_INT,
+                        this.renderData.data,
+                    );
+                }
+
+                if (this.renderData.transformsChanged) {
+                    gl.activeTexture(gl.TEXTURE1);
+                    gl.bindTexture(gl.TEXTURE_2D, transformsTexture);
+                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+                    gl.texImage2D(
+                        gl.TEXTURE_2D,
+                        0,
+                        gl.RGBA32F,
+                        this.renderData.transformsWidth,
+                        this.renderData.transformsHeight,
+                        0,
+                        gl.RGBA,
+                        gl.FLOAT,
+                        this.renderData.transforms,
+                    );
+
+                    gl.activeTexture(gl.TEXTURE2);
+                    gl.bindTexture(gl.TEXTURE_2D, transformIndicesTexture);
+                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+                    gl.texImage2D(
+                        gl.TEXTURE_2D,
+                        0,
+                        gl.R32UI,
+                        this.renderData.transformIndicesWidth,
+                        this.renderData.transformIndicesHeight,
+                        0,
+                        gl.RED_INTEGER,
+                        gl.UNSIGNED_INT,
+                        this.renderData.transformIndices,
+                    );
+                }
+
+                if (this.renderData.colorTransformsChanged) {
+                    gl.activeTexture(gl.TEXTURE3);
+                    gl.bindTexture(gl.TEXTURE_2D, colorTransformsTexture);
+                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+                    gl.texImage2D(
+                        gl.TEXTURE_2D,
+                        0,
+                        gl.RGBA32F,
+                        this.renderData.colorTransformsWidth,
+                        this.renderData.colorTransformsHeight,
+                        0,
+                        gl.RGBA,
+                        gl.FLOAT,
+                        this.renderData.colorTransforms,
+                    );
+
+                    gl.activeTexture(gl.TEXTURE4);
+                    gl.bindTexture(gl.TEXTURE_2D, colorTransformIndicesTexture);
+                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+                    gl.texImage2D(
+                        gl.TEXTURE_2D,
+                        0,
+                        gl.R32UI,
+                        this.renderData.colorTransformIndicesWidth,
+                        this.renderData.colorTransformIndicesHeight,
+                        0,
+                        gl.RED_INTEGER,
+                        gl.UNSIGNED_INT,
+                        this.renderData.colorTransformIndices,
+                    );
+                }
+
+                const detachedPositions = new Float32Array(this.renderData.positions.slice().buffer);
+                const detachedTransforms = new Float32Array(this.renderData.transforms.slice().buffer);
+                const detachedTransformIndices = new Uint32Array(this.renderData.transformIndices.slice().buffer);
+                this._worker?.postMessage(
+                    {
+                        sortData: {
+                            positions: detachedPositions,
+                            transforms: detachedTransforms,
+                            transformIndices: detachedTransformIndices,
+                            vertexCount: this.renderData.vertexCount,
+                        },
+                    },
+                    [detachedPositions.buffer, detachedTransforms.buffer, detachedTransformIndices.buffer],
+                );
+
+                this.renderData.dataChanged = false;
+                this.renderData.transformsChanged = false;
+                this.renderData.colorTransformsChanged = false;
+            }
+
+            this._camera.update();
+            this._worker?.postMessage({ viewProj: this._camera.data.viewProj.buffer });
+
+            gl.viewport(0, 0, canvas.width, canvas.height);
+            gl.clearColor(0, 0, 0, 0);
+            gl.clear(gl.COLOR_BUFFER_BIT);
+
+            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);
+
+            gl.uniformMatrix4fv(u_projection, false, this._camera.data.projectionMatrix.buffer);
+            gl.uniformMatrix4fv(u_view, false, this._camera.data.viewMatrix.buffer);
+
+            gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+            gl.vertexAttribPointer(positionAttribute, 2, gl.FLOAT, false, 0, 0);
+
+            gl.bindBuffer(gl.ARRAY_BUFFER, indexBuffer);
+            gl.bufferData(gl.ARRAY_BUFFER, this.depthIndex, gl.STATIC_DRAW);
+            gl.vertexAttribIPointer(indexAttribute, 1, gl.INT, 0, 0);
+            gl.vertexAttribDivisor(indexAttribute, 1);
+
+            gl.drawArraysInstanced(gl.TRIANGLE_FAN, 0, 4, this.depthIndex.length);
+        };
+
+        this._dispose = () => {
+            if (!this._scene || !this._camera || !this.renderData) {
+                console.error("Cannot dispose without scene and camera");
+                return;
+            }
+
+            this._scene.removeEventListener("objectAdded", handleObjectAdded);
+            this._scene.removeEventListener("objectRemoved", handleObjectRemoved);
+            for (const object of this._scene.objects) {
+                if (object instanceof Splat) {
+                    object.removeEventListener("objectChanged", handleObjectChanged);
+                }
+            }
+
+            this._worker?.terminate();
+            this.renderData.dispose();
+
+            gl.deleteTexture(this.splatTexture);
+            gl.deleteTexture(transformsTexture);
+            gl.deleteTexture(transformIndicesTexture);
+
+            gl.deleteBuffer(indexBuffer);
+            gl.deleteBuffer(vertexBuffer);
+        };
+
+        this._setOutlineThickness = (value: number) => {
+            this._outlineThickness = value;
+            if (this._initialized) {
+                gl.uniform1f(u_outlineThickness, value);
+            }
+        };
+
+        this._setOutlineColor = (value: Color32) => {
+            this._outlineColor = value;
+            if (this._initialized) {
+                gl.uniform4fv(u_outlineColor, new Float32Array(value.flatNorm()));
+            }
+        };
+    }
+
+    get renderData() {
+        return this._renderData;
+    }
+
+    get depthIndex() {
+        return this._depthIndex;
+    }
+
+    get splatTexture() {
+        return this._splatTexture;
+    }
+
+    get outlineThickness() {
+        return this._outlineThickness;
+    }
+
+    set outlineThickness(value: number) {
+        this._setOutlineThickness(value);
+    }
+
+    get outlineColor() {
+        return this._outlineColor;
+    }
+
+    set outlineColor(value: Color32) {
+        this._setOutlineColor(value);
+    }
+
+    get worker() {
+        return this._worker;
+    }
+
+    protected _getVertexSource() {
+        return vertexShaderSource;
+    }
+
+    protected _getFragmentSource() {
+        return fragmentShaderSource;
+    }
+}
+
+export { RenderProgram };

src/renderers/webgl/programs/ShaderProgram.ts

@@ -0,0 +1,136 @@
+import { Camera } from "../../../cameras/Camera";
+import { Scene } from "../../../core/Scene";
+import { WebGLRenderer } from "../../WebGLRenderer";
+import { ShaderPass } from "../passes/ShaderPass";
+
+abstract class ShaderProgram {
+    private _renderer: WebGLRenderer;
+    private _program: WebGLProgram;
+    private _passes: ShaderPass[];
+
+    protected _scene: Scene | null = null;
+    protected _camera: Camera | null = null;
+    protected _started: boolean = false;
+    protected _initialized: boolean = false;
+
+    protected abstract _initialize: () => void;
+    protected abstract _resize: () => void;
+    protected abstract _render: () => void;
+    protected abstract _dispose: () => void;
+
+    initialize: () => void;
+    resize: () => void;
+    render: (scene: Scene, camera: Camera) => void;
+    dispose: () => void;
+
+    constructor(renderer: WebGLRenderer, passes: ShaderPass[]) {
+        this._renderer = renderer;
+        const gl = renderer.gl;
+
+        this._program = gl.createProgram() as WebGLProgram;
+        this._passes = passes || [];
+
+        const vertexShader = gl.createShader(gl.VERTEX_SHADER) as WebGLShader;
+        gl.shaderSource(vertexShader, this._getVertexSource());
+        gl.compileShader(vertexShader);
+        if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
+            console.error(gl.getShaderInfoLog(vertexShader));
+        }
+
+        const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER) as WebGLShader;
+        gl.shaderSource(fragmentShader, this._getFragmentSource());
+        gl.compileShader(fragmentShader);
+        if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
+            console.error(gl.getShaderInfoLog(fragmentShader));
+        }
+
+        gl.attachShader(this.program, vertexShader);
+        gl.attachShader(this.program, fragmentShader);
+        gl.linkProgram(this.program);
+        if (!gl.getProgramParameter(this.program, gl.LINK_STATUS)) {
+            console.error(gl.getProgramInfoLog(this.program));
+        }
+
+        this.resize = () => {
+            gl.useProgram(this._program);
+
+            this._resize();
+        };
+
+        this.initialize = () => {
+            console.assert(!this._initialized, "ShaderProgram already initialized");
+
+            gl.useProgram(this._program);
+
+            this._initialize();
+            for (const pass of this.passes) {
+                pass.initialize(this);
+            }
+
+            this._initialized = true;
+            this._started = true;
+        };
+
+        this.render = (scene: Scene, camera: Camera) => {
+            gl.useProgram(this._program);
+
+            if (this._scene !== scene || this._camera !== camera) {
+                this.dispose();
+                this._scene = scene;
+                this._camera = camera;
+                this.initialize();
+            }
+
+            for (const pass of this.passes) {
+                pass.render();
+            }
+
+            this._render();
+        };
+
+        this.dispose = () => {
+            if (!this._initialized) return;
+
+            gl.useProgram(this._program);
+
+            for (const pass of this.passes) {
+                pass.dispose();
+            }
+
+            this._dispose();
+
+            this._scene = null;
+            this._camera = null;
+            this._initialized = false;
+        };
+    }
+
+    get renderer() {
+        return this._renderer;
+    }
+
+    get scene() {
+        return this._scene;
+    }
+
+    get camera() {
+        return this._camera;
+    }
+
+    get program() {
+        return this._program;
+    }
+
+    get passes() {
+        return this._passes;
+    }
+
+    get started() {
+        return this._started;
+    }
+
+    protected abstract _getVertexSource(): string;
+    protected abstract _getFragmentSource(): string;
+}
+
+export { ShaderProgram };

src/renderers/webgl/programs/VideoRenderProgram.ts

@@ -0,0 +1,378 @@
+import { Splatv } from "../../../splats/Splatv";
+import { SplatvData } from "../../../splats/SplatvData";
+import { WebGLRenderer } from "../../WebGLRenderer";
+import { ShaderPass } from "../passes/ShaderPass";
+import { ShaderProgram } from "./ShaderProgram";
+import { ObjectAddedEvent, ObjectChangedEvent, ObjectRemovedEvent } from "../../../events/Events";
+import { Matrix4 } from "../../../math/Matrix4";
+
+const vertexShaderSource = /* glsl */ `#version 300 es
+precision highp float;
+precision highp int;
+  
+uniform highp usampler2D u_texture;
+uniform mat4 projection, view;
+uniform vec2 focal;
+uniform vec2 viewport;
+uniform float time;
+  
+in vec2 position;
+in int index;
+  
+out vec4 vColor;
+out vec2 vPosition;
+  
+void main () {
+    gl_Position = vec4(0.0, 0.0, 2.0, 1.0);
+
+    uvec4 motion1 = texelFetch(u_texture, ivec2(((uint(index) & 0x3ffu) << 2) | 3u, uint(index) >> 10), 0);
+    vec2 trbf = unpackHalf2x16(motion1.w);
+    float dt = time - trbf.x;
+
+    float topacity = exp(-1.0 * pow(dt / trbf.y, 2.0));
+    if(topacity < 0.02) return;
+
+    uvec4 motion0 = texelFetch(u_texture, ivec2(((uint(index) & 0x3ffu) << 2) | 2u, uint(index) >> 10), 0);
+    uvec4 static0 = texelFetch(u_texture, ivec2(((uint(index) & 0x3ffu) << 2), uint(index) >> 10), 0);
+
+    vec2 m0 = unpackHalf2x16(motion0.x), m1 = unpackHalf2x16(motion0.y), m2 = unpackHalf2x16(motion0.z), 
+         m3 = unpackHalf2x16(motion0.w), m4 = unpackHalf2x16(motion1.x); 
+      
+    vec4 trot = vec4(unpackHalf2x16(motion1.y).xy, unpackHalf2x16(motion1.z).xy) * dt;
+    vec3 tpos = (vec3(m0.xy, m1.x) * dt + vec3(m1.y, m2.xy) * dt*dt + vec3(m3.xy, m4.x) * dt*dt*dt);
+      
+    vec4 cam = view * vec4(uintBitsToFloat(static0.xyz) + tpos, 1);
+    vec4 pos = projection * cam;
+  
+    float clip = 1.2 * pos.w;
+    if (pos.z < -clip || pos.x < -clip || pos.x > clip || pos.y < -clip || pos.y > clip) return;
+    uvec4 static1 = texelFetch(u_texture, ivec2(((uint(index) & 0x3ffu) << 2) | 1u, uint(index) >> 10), 0);
+
+    vec4 rot = vec4(unpackHalf2x16(static0.w).xy, unpackHalf2x16(static1.x).xy) + trot;
+    vec3 scale = vec3(unpackHalf2x16(static1.y).xy, unpackHalf2x16(static1.z).x);
+    rot /= sqrt(dot(rot, rot));
+  
+    mat3 S = mat3(scale.x, 0.0, 0.0, 0.0, scale.y, 0.0, 0.0, 0.0, scale.z);
+    mat3 R = mat3(
+        1.0 - 2.0 * (rot.z * rot.z + rot.w * rot.w), 2.0 * (rot.y * rot.z - rot.x * rot.w), 2.0 * (rot.y * rot.w + rot.x * rot.z),
+        2.0 * (rot.y * rot.z + rot.x * rot.w), 1.0 - 2.0 * (rot.y * rot.y + rot.w * rot.w), 2.0 * (rot.z * rot.w - rot.x * rot.y),
+        2.0 * (rot.y * rot.w - rot.x * rot.z), 2.0 * (rot.z * rot.w + rot.x * rot.y), 1.0 - 2.0 * (rot.y * rot.y + rot.z * rot.z));
+    mat3 M = S * R;
+    mat3 Vrk = 4.0 * transpose(M) * M;
+    mat3 J = mat3(
+        focal.x / cam.z, 0., -(focal.x * cam.x) / (cam.z * cam.z), 
+        0., -focal.y / cam.z, (focal.y * cam.y) / (cam.z * cam.z), 
+        0., 0., 0.
+    );
+  
+    mat3 T = transpose(mat3(view)) * J;
+    mat3 cov2d = transpose(T) * Vrk * T;
+  
+    float mid = (cov2d[0][0] + cov2d[1][1]) / 2.0;
+    float radius = length(vec2((cov2d[0][0] - cov2d[1][1]) / 2.0, cov2d[0][1]));
+    float lambda1 = mid + radius, lambda2 = mid - radius;
+  
+    if(lambda2 < 0.0) return;
+    vec2 diagonalVector = normalize(vec2(cov2d[0][1], lambda1 - cov2d[0][0]));
+    vec2 majorAxis = min(sqrt(2.0 * lambda1), 1024.0) * diagonalVector;
+    vec2 minorAxis = min(sqrt(2.0 * lambda2), 1024.0) * vec2(diagonalVector.y, -diagonalVector.x);
+      
+    uint rgba = static1.w;
+    vColor = 
+        clamp(pos.z/pos.w+1.0, 0.0, 1.0) * 
+        vec4(1.0, 1.0, 1.0, topacity) *
+        vec4(
+            (rgba) & 0xffu, 
+            (rgba >> 8) & 0xffu, 
+            (rgba >> 16) & 0xffu, 
+            (rgba >> 24) & 0xffu) / 255.0;
+
+    vec2 vCenter = vec2(pos) / pos.w;
+    gl_Position = vec4(
+        vCenter 
+        + position.x * majorAxis / viewport 
+        + position.y * minorAxis / viewport, 0.0, 1.0);
+
+    vPosition = position;
+}
+`;
+
+const fragmentShaderSource = /* glsl */ `#version 300 es
+precision highp float;
+  
+in vec4 vColor;
+in vec2 vPosition;
+
+out vec4 fragColor;
+
+void main () {
+    float A = -dot(vPosition, vPosition);
+    if (A < -4.0) discard;
+    float B = exp(A) * vColor.a;
+    fragColor = vec4(B * vColor.rgb, B);
+}
+`;
+
+class VideoRenderProgram extends ShaderProgram {
+    private _renderData: SplatvData | null = null;
+    private _depthIndex: Uint32Array = new Uint32Array();
+    private _splatTexture: WebGLTexture | null = null;
+
+    protected _initialize: () => void;
+    protected _resize: () => void;
+    protected _render: () => void;
+    protected _dispose: () => void;
+
+    constructor(renderer: WebGLRenderer, passes: ShaderPass[] = []) {
+        super(renderer, passes);
+
+        const canvas = renderer.canvas;
+        const gl = renderer.gl;
+
+        let worker: Worker;
+
+        let u_projection: WebGLUniformLocation;
+        let u_viewport: WebGLUniformLocation;
+        let u_focal: WebGLUniformLocation;
+        let u_view: WebGLUniformLocation;
+        let u_texture: WebGLUniformLocation;
+        let u_time: WebGLUniformLocation;
+
+        let positionAttribute: number;
+        let indexAttribute: number;
+
+        let vertexBuffer: WebGLBuffer;
+        let indexBuffer: WebGLBuffer;
+
+        this._resize = () => {
+            if (!this._camera) return;
+
+            this._camera.data.setSize(canvas.width, canvas.height);
+            this._camera.update();
+
+            u_projection = gl.getUniformLocation(this.program, "projection") as WebGLUniformLocation;
+            gl.uniformMatrix4fv(u_projection, false, this._camera.data.projectionMatrix.buffer);
+
+            u_viewport = gl.getUniformLocation(this.program, "viewport") as WebGLUniformLocation;
+            gl.uniform2fv(u_viewport, new Float32Array([canvas.width, canvas.height]));
+        };
+
+        const setupWorker = () => {
+            if (renderer.renderProgram.worker === null) {
+                console.error("Render program is not initialized. Cannot render without worker");
+                return;
+            }
+            worker = renderer.renderProgram.worker;
+            worker.onmessage = (e) => {
+                if (e.data.depthIndex) {
+                    const { depthIndex } = e.data;
+                    this._depthIndex = depthIndex;
+                    gl.bindBuffer(gl.ARRAY_BUFFER, indexBuffer);
+                    gl.bufferData(gl.ARRAY_BUFFER, depthIndex, gl.STATIC_DRAW);
+                }
+            };
+        };
+
+        this._initialize = () => {
+            if (!this._scene || !this._camera) {
+                console.error("Cannot render without scene and camera");
+                return;
+            }
+
+            this._resize();
+
+            this._scene.addEventListener("objectAdded", handleObjectAdded);
+            this._scene.addEventListener("objectRemoved", handleObjectRemoved);
+            for (const object of this._scene.objects) {
+                if (object instanceof Splatv) {
+                    if (this._renderData === null) {
+                        this._renderData = object.data;
+                        object.addEventListener("objectChanged", handleObjectChanged);
+                    } else {
+                        console.warn("Multiple Splatv objects are not currently supported");
+                    }
+                }
+            }
+
+            if (this._renderData === null) {
+                console.error("Cannot render without Splatv object");
+                return;
+            }
+
+            u_focal = gl.getUniformLocation(this.program, "focal") as WebGLUniformLocation;
+            gl.uniform2fv(u_focal, new Float32Array([this._camera.data.fx, this._camera.data.fy]));
+
+            u_view = gl.getUniformLocation(this.program, "view") as WebGLUniformLocation;
+            gl.uniformMatrix4fv(u_view, false, this._camera.data.viewMatrix.buffer);
+
+            this._splatTexture = gl.createTexture() as WebGLTexture;
+            u_texture = gl.getUniformLocation(this.program, "u_texture") as WebGLUniformLocation;
+            gl.uniform1i(u_texture, 0);
+
+            u_time = gl.getUniformLocation(this.program, "time") as WebGLUniformLocation;
+            gl.uniform1f(u_time, Math.sin(Date.now() / 1000) / 2 + 1 / 2);
+
+            vertexBuffer = gl.createBuffer() as WebGLBuffer;
+            gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-2, -2, 2, -2, 2, 2, -2, 2]), gl.STATIC_DRAW);
+
+            positionAttribute = gl.getAttribLocation(this.program, "position");
+            gl.enableVertexAttribArray(positionAttribute);
+            gl.vertexAttribPointer(positionAttribute, 2, gl.FLOAT, false, 0, 0);
+
+            indexBuffer = gl.createBuffer() as WebGLBuffer;
+            indexAttribute = gl.getAttribLocation(this.program, "index");
+            gl.enableVertexAttribArray(indexAttribute);
+            gl.bindBuffer(gl.ARRAY_BUFFER, indexBuffer);
+
+            setupWorker();
+
+            gl.activeTexture(gl.TEXTURE0);
+            gl.bindTexture(gl.TEXTURE_2D, this._splatTexture);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+            gl.texImage2D(
+                gl.TEXTURE_2D,
+                0,
+                gl.RGBA32UI,
+                this._renderData.width,
+                this._renderData.height,
+                0,
+                gl.RGBA_INTEGER,
+                gl.UNSIGNED_INT,
+                this._renderData.data,
+            );
+
+            const positions = this._renderData.positions;
+            const dummyTransforms = new Float32Array(new Matrix4().buffer);
+            const dummyTransformIndices = new Uint32Array(this._renderData.vertexCount);
+            dummyTransformIndices.fill(0);
+            worker.postMessage(
+                {
+                    sortData: {
+                        positions: positions,
+                        transforms: dummyTransforms,
+                        transformIndices: dummyTransformIndices,
+                        vertexCount: this._renderData.vertexCount,
+                    },
+                },
+                [positions.buffer, dummyTransforms.buffer, dummyTransformIndices.buffer],
+            );
+        };
+
+        const handleObjectAdded = (event: Event) => {
+            const e = event as ObjectAddedEvent;
+
+            if (e.object instanceof Splatv) {
+                if (this._renderData === null) {
+                    this._renderData = e.object.data;
+                    e.object.addEventListener("objectChanged", handleObjectChanged);
+                } else {
+                    console.warn("Splatv not supported by default RenderProgram. Use VideoRenderProgram instead.");
+                }
+            }
+
+            this.dispose();
+        };
+
+        const handleObjectRemoved = (event: Event) => {
+            const e = event as ObjectRemovedEvent;
+
+            if (e.object instanceof Splatv) {
+                if (this._renderData === e.object.data) {
+                    this._renderData = null;
+                    e.object.removeEventListener("objectChanged", handleObjectChanged);
+                }
+            }
+
+            this.dispose();
+        };
+
+        const handleObjectChanged = (event: Event) => {
+            const e = event as ObjectChangedEvent;
+
+            if (e.object instanceof Splatv && this._renderData === e.object.data) {
+                this.dispose();
+            }
+        };
+
+        this._render = () => {
+            if (!this._scene || !this._camera) {
+                console.error("Cannot render without scene and camera");
+                return;
+            }
+
+            if (!this._renderData) {
+                console.warn("Cannot render without Splatv object");
+                return;
+            }
+
+            this._camera.update();
+            worker.postMessage({ viewProj: this._camera.data.viewProj.buffer });
+
+            gl.viewport(0, 0, canvas.width, canvas.height);
+            gl.clearColor(0, 0, 0, 0);
+            gl.clear(gl.COLOR_BUFFER_BIT);
+
+            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);
+
+            gl.uniformMatrix4fv(u_projection, false, this._camera.data.projectionMatrix.buffer);
+            gl.uniformMatrix4fv(u_view, false, this._camera.data.viewMatrix.buffer);
+            gl.uniform1f(u_time, Math.sin(Date.now() / 1000) / 2 + 1 / 2);
+
+            gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+            gl.vertexAttribPointer(positionAttribute, 2, gl.FLOAT, false, 0, 0);
+
+            gl.bindBuffer(gl.ARRAY_BUFFER, indexBuffer);
+            gl.bufferData(gl.ARRAY_BUFFER, this._depthIndex, gl.STATIC_DRAW);
+            gl.vertexAttribIPointer(indexAttribute, 1, gl.INT, 0, 0);
+            gl.vertexAttribDivisor(indexAttribute, 1);
+
+            gl.drawArraysInstanced(gl.TRIANGLE_FAN, 0, 4, this._renderData.vertexCount);
+        };
+
+        this._dispose = () => {
+            if (!this._scene || !this._camera) {
+                console.error("Cannot dispose without scene and camera");
+                return;
+            }
+
+            this._scene.removeEventListener("objectAdded", handleObjectAdded);
+            this._scene.removeEventListener("objectRemoved", handleObjectRemoved);
+            for (const object of this._scene.objects) {
+                if (object instanceof Splatv) {
+                    if (this._renderData === object.data) {
+                        this._renderData = null;
+                        object.removeEventListener("objectChanged", handleObjectChanged);
+                    }
+                }
+            }
+
+            worker?.terminate();
+
+            gl.deleteTexture(this._splatTexture);
+
+            gl.deleteBuffer(indexBuffer);
+            gl.deleteBuffer(vertexBuffer);
+        };
+    }
+
+    get renderData(): SplatvData | null {
+        return this._renderData;
+    }
+
+    protected _getVertexSource(): string {
+        return vertexShaderSource;
+    }
+
+    protected _getFragmentSource(): string {
+        return fragmentShaderSource;
+    }
+}
+
+export { VideoRenderProgram };

src/renderers/webgl/utils/DataWorker.ts

@@ -0,0 +1,163 @@
+import loadWasm from "../../../wasm/data";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let wasmModule: any;
+
+async function initWasm() {
+    wasmModule = await loadWasm();
+}
+
+class Splat {
+    offset: number = 0;
+    position: Float32Array = new Float32Array(3);
+    rotation: Float32Array = new Float32Array(4);
+    scale: Float32Array = new Float32Array(3);
+    selected: boolean = false;
+    vertexCount: number = 0;
+    positions: Float32Array = new Float32Array(0);
+    rotations: Float32Array = new Float32Array(0);
+    scales: Float32Array = new Float32Array(0);
+    colors: Uint8Array = new Uint8Array(0);
+    selection: Uint8Array = new Uint8Array(0);
+}
+
+let allocatedVertexCount: number = 0;
+const updateQueue = new Array<Splat>();
+let running = false;
+let loading = false;
+
+let positionsPtr: number;
+let rotationsPtr: number;
+let scalesPtr: number;
+let colorsPtr: number;
+let selectionPtr: number;
+let dataPtr: number;
+let worldPositionsPtr: number;
+let worldRotationsPtr: number;
+let worldScalesPtr: number;
+
+const pack = async (splat: Splat) => {
+    while (loading) {
+        await new Promise((resolve) => setTimeout(resolve, 0));
+    }
+
+    if (!wasmModule) {
+        loading = true;
+        await initWasm();
+        loading = false;
+    }
+
+    const targetAllocatedVertexCount = Math.pow(2, Math.ceil(Math.log2(splat.vertexCount)));
+    if (targetAllocatedVertexCount > allocatedVertexCount) {
+        if (allocatedVertexCount > 0) {
+            wasmModule._free(positionsPtr);
+            wasmModule._free(rotationsPtr);
+            wasmModule._free(scalesPtr);
+            wasmModule._free(colorsPtr);
+            wasmModule._free(selectionPtr);
+            wasmModule._free(dataPtr);
+            wasmModule._free(worldPositionsPtr);
+            wasmModule._free(worldRotationsPtr);
+            wasmModule._free(worldScalesPtr);
+        }
+
+        allocatedVertexCount = targetAllocatedVertexCount;
+
+        positionsPtr = wasmModule._malloc(3 * allocatedVertexCount * 4);
+        rotationsPtr = wasmModule._malloc(4 * allocatedVertexCount * 4);
+        scalesPtr = wasmModule._malloc(3 * allocatedVertexCount * 4);
+        colorsPtr = wasmModule._malloc(4 * allocatedVertexCount);
+        selectionPtr = wasmModule._malloc(allocatedVertexCount);
+        dataPtr = wasmModule._malloc(8 * allocatedVertexCount * 4);
+        worldPositionsPtr = wasmModule._malloc(3 * allocatedVertexCount * 4);
+        worldRotationsPtr = wasmModule._malloc(4 * allocatedVertexCount * 4);
+        worldScalesPtr = wasmModule._malloc(3 * allocatedVertexCount * 4);
+    }
+
+    wasmModule.HEAPF32.set(splat.positions, positionsPtr / 4);
+    wasmModule.HEAPF32.set(splat.rotations, rotationsPtr / 4);
+    wasmModule.HEAPF32.set(splat.scales, scalesPtr / 4);
+    wasmModule.HEAPU8.set(splat.colors, colorsPtr);
+    wasmModule.HEAPU8.set(splat.selection, selectionPtr);
+
+    wasmModule._pack(
+        splat.selected,
+        splat.vertexCount,
+        positionsPtr,
+        rotationsPtr,
+        scalesPtr,
+        colorsPtr,
+        selectionPtr,
+        dataPtr,
+        worldPositionsPtr,
+        worldRotationsPtr,
+        worldScalesPtr,
+    );
+
+    const outData = new Uint32Array(wasmModule.HEAPU32.buffer, dataPtr, splat.vertexCount * 8);
+    const detachedData = new Uint32Array(outData.slice().buffer);
+
+    const worldPositions = new Float32Array(wasmModule.HEAPF32.buffer, worldPositionsPtr, splat.vertexCount * 3);
+    const detachedWorldPositions = new Float32Array(worldPositions.slice().buffer);
+
+    const worldRotations = new Float32Array(wasmModule.HEAPF32.buffer, worldRotationsPtr, splat.vertexCount * 4);
+    const detachedWorldRotations = new Float32Array(worldRotations.slice().buffer);
+
+    const worldScales = new Float32Array(wasmModule.HEAPF32.buffer, worldScalesPtr, splat.vertexCount * 3);
+    const detachedWorldScales = new Float32Array(worldScales.slice().buffer);
+
+    const response = {
+        data: detachedData,
+        worldPositions: detachedWorldPositions,
+        worldRotations: detachedWorldRotations,
+        worldScales: detachedWorldScales,
+        offset: splat.offset,
+        vertexCount: splat.vertexCount,
+        positions: splat.positions.buffer,
+        rotations: splat.rotations.buffer,
+        scales: splat.scales.buffer,
+        colors: splat.colors.buffer,
+        selection: splat.selection.buffer,
+    };
+
+    self.postMessage({ response: response }, [
+        response.data.buffer,
+        response.worldPositions.buffer,
+        response.worldRotations.buffer,
+        response.worldScales.buffer,
+        response.positions,
+        response.rotations,
+        response.scales,
+        response.colors,
+        response.selection,
+    ]);
+
+    running = false;
+};
+
+const packThrottled = () => {
+    if (updateQueue.length === 0) return;
+    if (!running) {
+        running = true;
+        const splat = updateQueue.shift() as Splat;
+        pack(splat);
+        setTimeout(() => {
+            running = false;
+            packThrottled();
+        }, 0);
+    }
+};
+
+self.onmessage = (e) => {
+    if (e.data.splat) {
+        const splat = e.data.splat as Splat;
+        for (const [index, existing] of updateQueue.entries()) {
+            if (existing.offset === splat.offset) {
+                updateQueue[index] = splat;
+                return;
+            }
+        }
+        updateQueue.push(splat);
+        packThrottled();
+    }
+};

src/renderers/webgl/utils/IntersectionTester.ts

@@ -0,0 +1,87 @@
+import { Camera } from "../../../cameras/Camera";
+import { Vector3 } from "../../../math/Vector3";
+import { Splat } from "../../../splats/Splat";
+import { RenderProgram } from "../programs/RenderProgram";
+import { Box3 } from "../../../math/Box3";
+import { BVH } from "../../../math/BVH";
+import { RenderData } from "./RenderData";
+
+class IntersectionTester {
+    testPoint: (x: number, y: number) => Splat | null;
+
+    constructor(renderProgram: RenderProgram, maxDistance: number = 100, resolution: number = 1.0) {
+        let vertexCount = 0;
+        let bvh: BVH | null = null;
+        let lookup: Splat[] = [];
+
+        const build = () => {
+            if (renderProgram.renderData === null) {
+                console.error("IntersectionTester cannot be called before renderProgram has been initialized");
+                return;
+            }
+            lookup = [];
+            const renderData = renderProgram.renderData as RenderData;
+            const boxes = new Array<Box3>(renderData.offsets.size);
+            let i = 0;
+            const bounds = new Box3(
+                new Vector3(Infinity, Infinity, Infinity),
+                new Vector3(-Infinity, -Infinity, -Infinity),
+            );
+            for (const splat of renderData.offsets.keys()) {
+                const splatBounds = splat.bounds;
+                boxes[i++] = splatBounds;
+                bounds.expand(splatBounds.min);
+                bounds.expand(splatBounds.max);
+                lookup.push(splat);
+            }
+            bounds.permute();
+            bvh = new BVH(bounds, boxes);
+            vertexCount = renderData.vertexCount;
+        };
+
+        this.testPoint = (x: number, y: number) => {
+            if (renderProgram.renderData === null || renderProgram.camera === null) {
+                console.error("IntersectionTester cannot be called before renderProgram has been initialized");
+                return null;
+            }
+
+            build();
+
+            if (bvh === null) {
+                console.error("Failed to build octree for IntersectionTester");
+                return null;
+            }
+
+            const renderData = renderProgram.renderData as RenderData;
+            const camera = renderProgram.camera as Camera;
+
+            if (vertexCount !== renderData.vertexCount) {
+                console.warn("IntersectionTester has not been rebuilt since the last render");
+            }
+
+            const ray = camera.screenPointToRay(x, y);
+            for (let x = 0; x < maxDistance; x += resolution) {
+                const point = camera.position.add(ray.multiply(x));
+                const minPoint = new Vector3(
+                    point.x - resolution / 2,
+                    point.y - resolution / 2,
+                    point.z - resolution / 2,
+                );
+                const maxPoint = new Vector3(
+                    point.x + resolution / 2,
+                    point.y + resolution / 2,
+                    point.z + resolution / 2,
+                );
+                const queryBox = new Box3(minPoint, maxPoint);
+                const points = bvh.queryRange(queryBox);
+                if (points.length > 0) {
+                    return lookup[points[0]];
+                }
+            }
+
+            return null;
+        };
+    }
+}
+
+export { IntersectionTester };

src/renderers/webgl/utils/RenderData.ts

@@ -0,0 +1,440 @@
+import { Scene } from "../../../core/Scene";
+import { Splat } from "../../../splats/Splat";
+import DataWorker from "web-worker:./DataWorker.ts";
+import loadWasm from "../../../wasm/data";
+import { Matrix4 } from "../../../math/Matrix4";
+
+class RenderData {
+    public dataChanged = false;
+    public transformsChanged = false;
+    public colorTransformsChanged = false;
+
+    private _splatIndices: Map<Splat, number>;
+    private _offsets: Map<Splat, number>;
+    private _data: Uint32Array;
+    private _width: number;
+    private _height: number;
+    private _transforms: Float32Array;
+    private _transformsWidth: number;
+    private _transformsHeight: number;
+    private _transformIndices: Uint32Array;
+    private _transformIndicesWidth: number;
+    private _transformIndicesHeight: number;
+    private _colorTransforms: Float32Array;
+    private _colorTransformsWidth: number;
+    private _colorTransformsHeight: number;
+    private _colorTransformIndices: Uint32Array;
+    private _colorTransformIndicesWidth: number;
+    private _colorTransformIndicesHeight: number;
+    private _positions: Float32Array;
+    private _rotations: Float32Array;
+    private _scales: Float32Array;
+    private _vertexCount: number;
+    private _updating: Set<Splat> = new Set<Splat>();
+    private _dirty: Set<Splat> = new Set<Splat>();
+    private _worker: Worker;
+
+    getSplat: (index: number) => Splat | null;
+    getLocalIndex: (splat: Splat, index: number) => number;
+    markDirty: (splat: Splat) => void;
+    rebuild: () => void;
+    dispose: () => void;
+
+    constructor(scene: Scene) {
+        let vertexCount = 0;
+        let splatIndex = 0;
+        this._splatIndices = new Map<Splat, number>();
+        this._offsets = new Map<Splat, number>();
+        const lookup = new Map<number, Splat>();
+        for (const object of scene.objects) {
+            if (object instanceof Splat) {
+                this._splatIndices.set(object, splatIndex);
+                this._offsets.set(object, vertexCount);
+                lookup.set(vertexCount, object);
+                vertexCount += object.data.vertexCount;
+                splatIndex++;
+            }
+        }
+
+        this._vertexCount = vertexCount;
+        this._width = 2048;
+        this._height = Math.ceil((2 * this.vertexCount) / this.width);
+        this._data = new Uint32Array(this.width * this.height * 4);
+
+        this._transformsWidth = 5;
+        this._transformsHeight = lookup.size;
+        this._transforms = new Float32Array(this._transformsWidth * this._transformsHeight * 4);
+
+        this._transformIndicesWidth = 1024;
+        this._transformIndicesHeight = Math.ceil(this.vertexCount / this._transformIndicesWidth);
+        this._transformIndices = new Uint32Array(this._transformIndicesWidth * this._transformIndicesHeight);
+
+        this._colorTransformsWidth = 4;
+        this._colorTransformsHeight = 64;
+        this._colorTransforms = new Float32Array(this._colorTransformsWidth * this._colorTransformsHeight * 4);
+        this._colorTransforms.fill(0);
+        this._colorTransforms[0] = 1;
+        this._colorTransforms[5] = 1;
+        this._colorTransforms[10] = 1;
+        this._colorTransforms[15] = 1;
+
+        this._colorTransformIndicesWidth = 1024;
+        this._colorTransformIndicesHeight = Math.ceil(this.vertexCount / this._colorTransformIndicesWidth);
+        this._colorTransformIndices = new Uint32Array(
+            this._colorTransformIndicesWidth * this._colorTransformIndicesHeight,
+        );
+        this.colorTransformIndices.fill(0);
+
+        this._positions = new Float32Array(this.vertexCount * 3);
+        this._rotations = new Float32Array(this.vertexCount * 4);
+        this._scales = new Float32Array(this.vertexCount * 3);
+
+        this._worker = new DataWorker();
+
+        const updateTransform = (splat: Splat) => {
+            const splatIndex = this._splatIndices.get(splat) as number;
+            this._transforms.set(splat.transform.buffer, splatIndex * 20);
+            this._transforms[splatIndex * 20 + 16] = splat.selected ? 1 : 0;
+            splat.positionChanged = false;
+            splat.rotationChanged = false;
+            splat.scaleChanged = false;
+            splat.selectedChanged = false;
+            this.transformsChanged = true;
+        };
+
+        const updateColorTransforms = () => {
+            let colorTransformsChanged = false;
+            for (const splat of this._splatIndices.keys()) {
+                if (splat.colorTransformChanged) {
+                    colorTransformsChanged = true;
+                    break;
+                }
+            }
+            if (!colorTransformsChanged) {
+                return;
+            }
+            const colorTransformsMap: Matrix4[] = [new Matrix4()];
+            this._colorTransformIndices.fill(0);
+            let i = 1;
+            for (const splat of this._splatIndices.keys()) {
+                const offset = this._offsets.get(splat) as number;
+                for (const colorTransform of splat.colorTransforms) {
+                    if (!colorTransformsMap.includes(colorTransform)) {
+                        colorTransformsMap.push(colorTransform);
+                        i++;
+                    }
+                }
+                for (const index of splat.colorTransformsMap.keys()) {
+                    const colorTransformIndex = splat.colorTransformsMap.get(index) as number;
+                    this._colorTransformIndices[index + offset] = colorTransformIndex + i - 1;
+                }
+                splat.colorTransformChanged = false;
+            }
+            for (let index = 0; index < colorTransformsMap.length; index++) {
+                const colorTransform = colorTransformsMap[index];
+                this._colorTransforms.set(colorTransform.buffer, index * 16);
+            }
+            this.colorTransformsChanged = true;
+        };
+
+        this._worker.onmessage = (e) => {
+            if (e.data.response) {
+                const response = e.data.response;
+                const splat = lookup.get(response.offset) as Splat;
+                updateTransform(splat);
+                updateColorTransforms();
+
+                const splatIndex = this._splatIndices.get(splat) as number;
+                for (let i = 0; i < splat.data.vertexCount; i++) {
+                    this._transformIndices[response.offset + i] = splatIndex;
+                }
+
+                this._data.set(response.data, response.offset * 8);
+                splat.data.reattach(
+                    response.positions,
+                    response.rotations,
+                    response.scales,
+                    response.colors,
+                    response.selection,
+                );
+
+                this._positions.set(response.worldPositions, response.offset * 3);
+                this._rotations.set(response.worldRotations, response.offset * 4);
+                this._scales.set(response.worldScales, response.offset * 3);
+
+                this._updating.delete(splat);
+
+                splat.selectedChanged = false;
+
+                this.dataChanged = true;
+            }
+        };
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let wasmModule: any;
+
+        async function initWasm() {
+            wasmModule = await loadWasm();
+        }
+
+        initWasm();
+
+        async function waitForWasm() {
+            while (!wasmModule) {
+                await new Promise((resolve) => setTimeout(resolve, 0));
+            }
+        }
+
+        const buildImmediate = (splat: Splat) => {
+            if (!wasmModule) {
+                waitForWasm().then(() => {
+                    buildImmediate(splat);
+                });
+                return;
+            }
+
+            updateTransform(splat);
+
+            const positionsPtr = wasmModule._malloc(3 * splat.data.vertexCount * 4);
+            const rotationsPtr = wasmModule._malloc(4 * splat.data.vertexCount * 4);
+            const scalesPtr = wasmModule._malloc(3 * splat.data.vertexCount * 4);
+            const colorsPtr = wasmModule._malloc(4 * splat.data.vertexCount);
+            const selectionPtr = wasmModule._malloc(splat.data.vertexCount);
+            const dataPtr = wasmModule._malloc(8 * splat.data.vertexCount * 4);
+            const worldPositionsPtr = wasmModule._malloc(3 * splat.data.vertexCount * 4);
+            const worldRotationsPtr = wasmModule._malloc(4 * splat.data.vertexCount * 4);
+            const worldScalesPtr = wasmModule._malloc(3 * splat.data.vertexCount * 4);
+
+            wasmModule.HEAPF32.set(splat.data.positions, positionsPtr / 4);
+            wasmModule.HEAPF32.set(splat.data.rotations, rotationsPtr / 4);
+            wasmModule.HEAPF32.set(splat.data.scales, scalesPtr / 4);
+            wasmModule.HEAPU8.set(splat.data.colors, colorsPtr);
+            wasmModule.HEAPU8.set(splat.data.selection, selectionPtr);
+
+            wasmModule._pack(
+                splat.selected,
+                splat.data.vertexCount,
+                positionsPtr,
+                rotationsPtr,
+                scalesPtr,
+                colorsPtr,
+                selectionPtr,
+                dataPtr,
+                worldPositionsPtr,
+                worldRotationsPtr,
+                worldScalesPtr,
+            );
+
+            const outData = new Uint32Array(wasmModule.HEAPU32.buffer, dataPtr, splat.data.vertexCount * 8);
+            const worldPositions = new Float32Array(
+                wasmModule.HEAPF32.buffer,
+                worldPositionsPtr,
+                splat.data.vertexCount * 3,
+            );
+            const worldRotations = new Float32Array(
+                wasmModule.HEAPF32.buffer,
+                worldRotationsPtr,
+                splat.data.vertexCount * 4,
+            );
+            const worldScales = new Float32Array(wasmModule.HEAPF32.buffer, worldScalesPtr, splat.data.vertexCount * 3);
+
+            const splatIndex = this._splatIndices.get(splat) as number;
+            const offset = this._offsets.get(splat) as number;
+            for (let i = 0; i < splat.data.vertexCount; i++) {
+                this._transformIndices[offset + i] = splatIndex;
+            }
+            this._data.set(outData, offset * 8);
+            this._positions.set(worldPositions, offset * 3);
+            this._rotations.set(worldRotations, offset * 4);
+            this._scales.set(worldScales, offset * 3);
+
+            wasmModule._free(positionsPtr);
+            wasmModule._free(rotationsPtr);
+            wasmModule._free(scalesPtr);
+            wasmModule._free(colorsPtr);
+            wasmModule._free(selectionPtr);
+            wasmModule._free(dataPtr);
+            wasmModule._free(worldPositionsPtr);
+            wasmModule._free(worldRotationsPtr);
+            wasmModule._free(worldScalesPtr);
+
+            this.dataChanged = true;
+            this.colorTransformsChanged = true;
+        };
+
+        const build = (splat: Splat) => {
+            if (splat.positionChanged || splat.rotationChanged || splat.scaleChanged || splat.selectedChanged) {
+                updateTransform(splat);
+            }
+
+            if (splat.colorTransformChanged) {
+                updateColorTransforms();
+            }
+
+            if (!splat.data.changed || splat.data.detached) return;
+
+            const serializedSplat = {
+                position: new Float32Array(splat.position.flat()),
+                rotation: new Float32Array(splat.rotation.flat()),
+                scale: new Float32Array(splat.scale.flat()),
+                selected: splat.selected,
+                vertexCount: splat.data.vertexCount,
+                positions: splat.data.positions,
+                rotations: splat.data.rotations,
+                scales: splat.data.scales,
+                colors: splat.data.colors,
+                selection: splat.data.selection,
+                offset: this._offsets.get(splat) as number,
+            };
+
+            this._worker.postMessage(
+                {
+                    splat: serializedSplat,
+                },
+                [
+                    serializedSplat.position.buffer,
+                    serializedSplat.rotation.buffer,
+                    serializedSplat.scale.buffer,
+                    serializedSplat.positions.buffer,
+                    serializedSplat.rotations.buffer,
+                    serializedSplat.scales.buffer,
+                    serializedSplat.colors.buffer,
+                    serializedSplat.selection.buffer,
+                ],
+            );
+
+            this._updating.add(splat);
+
+            splat.data.detached = true;
+        };
+
+        this.getSplat = (index: number) => {
+            let splat = null;
+            for (const [key, value] of this._offsets) {
+                if (index >= value) {
+                    splat = key;
+                } else {
+                    break;
+                }
+            }
+            return splat;
+        };
+
+        this.getLocalIndex = (splat: Splat, index: number) => {
+            const offset = this._offsets.get(splat) as number;
+            return index - offset;
+        };
+
+        this.markDirty = (splat: Splat) => {
+            this._dirty.add(splat);
+        };
+
+        this.rebuild = () => {
+            for (const splat of this._dirty) {
+                build(splat);
+            }
+
+            this._dirty.clear();
+        };
+
+        this.dispose = () => {
+            this._worker.terminate();
+        };
+
+        for (const splat of this._splatIndices.keys()) {
+            buildImmediate(splat);
+        }
+
+        updateColorTransforms();
+    }
+
+    get offsets() {
+        return this._offsets;
+    }
+
+    get data() {
+        return this._data;
+    }
+
+    get width() {
+        return this._width;
+    }
+
+    get height() {
+        return this._height;
+    }
+
+    get transforms() {
+        return this._transforms;
+    }
+
+    get transformsWidth() {
+        return this._transformsWidth;
+    }
+
+    get transformsHeight() {
+        return this._transformsHeight;
+    }
+
+    get transformIndices() {
+        return this._transformIndices;
+    }
+
+    get transformIndicesWidth() {
+        return this._transformIndicesWidth;
+    }
+
+    get transformIndicesHeight() {
+        return this._transformIndicesHeight;
+    }
+
+    get colorTransforms() {
+        return this._colorTransforms;
+    }
+
+    get colorTransformsWidth() {
+        return this._colorTransformsWidth;
+    }
+
+    get colorTransformsHeight() {
+        return this._colorTransformsHeight;
+    }
+
+    get colorTransformIndices() {
+        return this._colorTransformIndices;
+    }
+
+    get colorTransformIndicesWidth() {
+        return this._colorTransformIndicesWidth;
+    }
+
+    get colorTransformIndicesHeight() {
+        return this._colorTransformIndicesHeight;
+    }
+
+    get positions() {
+        return this._positions;
+    }
+
+    get rotations() {
+        return this._rotations;
+    }
+
+    get scales() {
+        return this._scales;
+    }
+
+    get vertexCount() {
+        return this._vertexCount;
+    }
+
+    get needsRebuild() {
+        return this._dirty.size > 0;
+    }
+
+    get updating() {
+        return this._updating.size > 0;
+    }
+}
+
+export { RenderData };

src/renderers/webgl/utils/SortWorker.ts

@@ -0,0 +1,155 @@
+import loadWasm from "../../../wasm/sort";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let wasmModule: any;
+
+async function initWasm() {
+    wasmModule = await loadWasm();
+}
+
+let sortData: {
+    positions: Float32Array;
+    transforms: Float32Array;
+    transformIndices: Uint32Array;
+    vertexCount: number;
+};
+
+let viewProjPtr: number;
+let transformsPtr: number;
+let transformIndicesPtr: number;
+let positionsPtr: number;
+let depthBufferPtr: number;
+let depthIndexPtr: number;
+let startsPtr: number;
+let countsPtr: number;
+
+let allocatedVertexCount: number = 0;
+let allocatedTransformCount: number = 0;
+let viewProj: number[] = [];
+
+let dirty = true;
+let lock = false;
+let allocationPending = false;
+let sorting = false;
+
+const allocateBuffers = async () => {
+    if (lock) {
+        allocationPending = true;
+        return;
+    }
+    lock = true;
+    allocationPending = false;
+
+    if (!wasmModule) await initWasm();
+
+    const targetAllocatedVertexCount = Math.pow(2, Math.ceil(Math.log2(sortData.vertexCount)));
+    if (allocatedVertexCount < targetAllocatedVertexCount) {
+        if (allocatedVertexCount > 0) {
+            wasmModule._free(viewProjPtr);
+            wasmModule._free(transformIndicesPtr);
+            wasmModule._free(positionsPtr);
+            wasmModule._free(depthBufferPtr);
+            wasmModule._free(depthIndexPtr);
+            wasmModule._free(startsPtr);
+            wasmModule._free(countsPtr);
+        }
+
+        allocatedVertexCount = targetAllocatedVertexCount;
+
+        viewProjPtr = wasmModule._malloc(16 * 4);
+        transformIndicesPtr = wasmModule._malloc(allocatedVertexCount * 4);
+        positionsPtr = wasmModule._malloc(3 * allocatedVertexCount * 4);
+        depthBufferPtr = wasmModule._malloc(allocatedVertexCount * 4);
+        depthIndexPtr = wasmModule._malloc(allocatedVertexCount * 4);
+        startsPtr = wasmModule._malloc(allocatedVertexCount * 4);
+        countsPtr = wasmModule._malloc(allocatedVertexCount * 4);
+    }
+
+    if (allocatedTransformCount < sortData.transforms.length) {
+        if (allocatedTransformCount > 0) {
+            wasmModule._free(transformsPtr);
+        }
+
+        allocatedTransformCount = sortData.transforms.length;
+
+        transformsPtr = wasmModule._malloc(allocatedTransformCount * 4);
+    }
+
+    lock = false;
+    if (allocationPending) {
+        allocationPending = false;
+        await allocateBuffers();
+    }
+};
+
+const runSort = () => {
+    if (lock || allocationPending || !wasmModule) return;
+    lock = true;
+
+    wasmModule.HEAPF32.set(sortData.positions, positionsPtr / 4);
+    wasmModule.HEAPF32.set(sortData.transforms, transformsPtr / 4);
+    wasmModule.HEAPU32.set(sortData.transformIndices, transformIndicesPtr / 4);
+    wasmModule.HEAPF32.set(new Float32Array(viewProj), viewProjPtr / 4);
+
+    wasmModule._sort(
+        viewProjPtr,
+        transformsPtr,
+        transformIndicesPtr,
+        sortData.vertexCount,
+        positionsPtr,
+        depthBufferPtr,
+        depthIndexPtr,
+        startsPtr,
+        countsPtr,
+    );
+
+    const depthIndex = new Uint32Array(wasmModule.HEAPU32.buffer, depthIndexPtr, sortData.vertexCount);
+    const detachedDepthIndex = new Uint32Array(depthIndex.slice().buffer);
+
+    self.postMessage({ depthIndex: detachedDepthIndex }, [detachedDepthIndex.buffer]);
+
+    lock = false;
+    dirty = false;
+};
+
+const throttledSort = () => {
+    if (!sorting) {
+        sorting = true;
+        if (dirty) runSort();
+
+        setTimeout(() => {
+            sorting = false;
+            throttledSort();
+        });
+    }
+};
+
+self.onmessage = (e) => {
+    if (e.data.sortData) {
+        //Recreating the typed arrays every time, will cause firefox to leak memory
+        if (!sortData) {
+            sortData = {
+                positions: new Float32Array(e.data.sortData.positions),
+                transforms: new Float32Array(e.data.sortData.transforms),
+                transformIndices: new Uint32Array(e.data.sortData.transformIndices),
+                vertexCount: e.data.sortData.vertexCount,
+            };
+        } else {
+            sortData.positions.set(e.data.sortData.positions);
+            sortData.transforms.set(e.data.sortData.transforms);
+            sortData.transformIndices.set(e.data.sortData.transformIndices);
+            sortData.vertexCount = e.data.sortData.vertexCount;
+        }
+
+        dirty = true;
+        allocateBuffers();
+    }
+    if (e.data.viewProj) {
+        if ((e.data.viewProj as number[]).every((item) => viewProj.includes(item)) === false) {
+            viewProj = e.data.viewProj;
+            dirty = true;
+        }
+
+        throttledSort();
+    }
+};

src/splats/Splat.ts

@@ -0,0 +1,136 @@
+import { SplatData } from "./SplatData";
+import { Object3D } from "../core/Object3D";
+import { Vector3 } from "../math/Vector3";
+import { Quaternion } from "../math/Quaternion";
+import { Converter } from "../utils/Converter";
+import { Matrix4 } from "../math/Matrix4";
+import { Box3 } from "../math/Box3";
+
+class Splat extends Object3D {
+    public selectedChanged: boolean = false;
+    public colorTransformChanged: boolean = false;
+
+    private _data: SplatData;
+    private _selected: boolean = false;
+    private _colorTransforms: Array<Matrix4> = [];
+    private _colorTransformsMap: Map<number, number> = new Map();
+    private _bounds: Box3;
+
+    recalculateBounds: () => void;
+
+    constructor(splat: SplatData | undefined = undefined) {
+        super();
+
+        this._data = splat || new SplatData();
+        this._bounds = new Box3(
+            new Vector3(Infinity, Infinity, Infinity),
+            new Vector3(-Infinity, -Infinity, -Infinity),
+        );
+
+        this.recalculateBounds = () => {
+            this._bounds = new Box3(
+                new Vector3(Infinity, Infinity, Infinity),
+                new Vector3(-Infinity, -Infinity, -Infinity),
+            );
+            for (let i = 0; i < this._data.vertexCount; i++) {
+                this._bounds.expand(
+                    new Vector3(
+                        this._data.positions[3 * i],
+                        this._data.positions[3 * i + 1],
+                        this._data.positions[3 * i + 2],
+                    ),
+                );
+            }
+        };
+
+        this.applyPosition = () => {
+            this.data.translate(this.position);
+            this.position = new Vector3();
+        };
+
+        this.applyRotation = () => {
+            this.data.rotate(this.rotation);
+            this.rotation = new Quaternion();
+        };
+
+        this.applyScale = () => {
+            this.data.scale(this.scale);
+            this.scale = new Vector3(1, 1, 1);
+        };
+
+        this.recalculateBounds();
+    }
+
+    saveToFile(name: string | null = null, format: "splat" | "ply" = "splat") {
+        if (!document) return;
+
+        if (!name) {
+            const now = new Date();
+            name = `splat-${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}.${format}`;
+        }
+
+        const splatClone = this.clone();
+
+        splatClone.applyRotation();
+        splatClone.applyScale();
+        splatClone.applyPosition();
+
+        const data = splatClone.data.serialize();
+        let blob;
+        if (format === "ply") {
+            const plyData = Converter.SplatToPLY(data.buffer, splatClone.data.vertexCount);
+            blob = new Blob([plyData], { type: "application/octet-stream" });
+        } else {
+            blob = new Blob([data.buffer], { type: "application/octet-stream" });
+        }
+
+        const link = document.createElement("a");
+        link.download = name;
+        link.href = URL.createObjectURL(blob);
+        link.click();
+    }
+
+    get data() {
+        return this._data;
+    }
+
+    get selected() {
+        return this._selected;
+    }
+
+    set selected(selected: boolean) {
+        if (this._selected !== selected) {
+            this._selected = selected;
+            this.selectedChanged = true;
+            this.dispatchEvent(this._changeEvent);
+        }
+    }
+
+    get colorTransforms() {
+        return this._colorTransforms;
+    }
+
+    get colorTransformsMap() {
+        return this._colorTransformsMap;
+    }
+
+    get bounds() {
+        let center = this._bounds.center();
+        center = center.add(this.position);
+
+        let size = this._bounds.size();
+        size = size.multiply(this.scale);
+
+        return new Box3(center.subtract(size.divide(2)), center.add(size.divide(2)));
+    }
+
+    clone() {
+        const splat = new Splat(this.data.clone());
+        splat.position = this.position.clone();
+        splat.rotation = this.rotation.clone();
+        splat.scale = this.scale.clone();
+        return splat;
+    }
+}
+
+export { Splat };

src/splats/SplatData.ts

@@ -0,0 +1,213 @@
+import { Vector3 } from "../math/Vector3";
+import { Quaternion } from "../math/Quaternion";
+import { Matrix3 } from "../math/Matrix3";
+
+class SplatData {
+    static RowLength = 3 * 4 + 3 * 4 + 4 + 4;
+
+    public changed = false;
+    public detached = false;
+
+    private _vertexCount: number;
+    private _positions: Float32Array;
+    private _rotations: Float32Array;
+    private _scales: Float32Array;
+    private _colors: Uint8Array;
+    private _selection: Uint8Array;
+
+    translate: (translation: Vector3) => void;
+    rotate: (rotation: Quaternion) => void;
+    scale: (scale: Vector3) => void;
+    serialize: () => Uint8Array;
+    reattach: (
+        positions: ArrayBufferLike,
+        rotations: ArrayBufferLike,
+        scales: ArrayBufferLike,
+        colors: ArrayBufferLike,
+        selection: ArrayBufferLike,
+    ) => void;
+
+    constructor(
+        vertexCount: number = 0,
+        positions: Float32Array | null = null,
+        rotations: Float32Array | null = null,
+        scales: Float32Array | null = null,
+        colors: Uint8Array | null = null,
+    ) {
+        this._vertexCount = vertexCount;
+        this._positions = positions || new Float32Array(0);
+        this._rotations = rotations || new Float32Array(0);
+        this._scales = scales || new Float32Array(0);
+        this._colors = colors || new Uint8Array(0);
+        this._selection = new Uint8Array(this.vertexCount);
+
+        this.translate = (translation: Vector3) => {
+            for (let i = 0; i < this.vertexCount; i++) {
+                this.positions[3 * i + 0] += translation.x;
+                this.positions[3 * i + 1] += translation.y;
+                this.positions[3 * i + 2] += translation.z;
+            }
+
+            this.changed = true;
+        };
+
+        this.rotate = (rotation: Quaternion) => {
+            const R = Matrix3.RotationFromQuaternion(rotation).buffer;
+            for (let i = 0; i < this.vertexCount; i++) {
+                const x = this.positions[3 * i + 0];
+                const y = this.positions[3 * i + 1];
+                const z = this.positions[3 * i + 2];
+
+                this.positions[3 * i + 0] = R[0] * x + R[1] * y + R[2] * z;
+                this.positions[3 * i + 1] = R[3] * x + R[4] * y + R[5] * z;
+                this.positions[3 * i + 2] = R[6] * x + R[7] * y + R[8] * z;
+
+                const currentRotation = new Quaternion(
+                    this.rotations[4 * i + 1],
+                    this.rotations[4 * i + 2],
+                    this.rotations[4 * i + 3],
+                    this.rotations[4 * i + 0],
+                );
+
+                const newRot = rotation.multiply(currentRotation);
+                this.rotations[4 * i + 1] = newRot.x;
+                this.rotations[4 * i + 2] = newRot.y;
+                this.rotations[4 * i + 3] = newRot.z;
+                this.rotations[4 * i + 0] = newRot.w;
+            }
+
+            this.changed = true;
+        };
+
+        this.scale = (scale: Vector3) => {
+            for (let i = 0; i < this.vertexCount; i++) {
+                this.positions[3 * i + 0] *= scale.x;
+                this.positions[3 * i + 1] *= scale.y;
+                this.positions[3 * i + 2] *= scale.z;
+
+                this.scales[3 * i + 0] *= scale.x;
+                this.scales[3 * i + 1] *= scale.y;
+                this.scales[3 * i + 2] *= scale.z;
+            }
+
+            this.changed = true;
+        };
+
+        this.serialize = () => {
+            const data = new Uint8Array(this.vertexCount * SplatData.RowLength);
+
+            const f_buffer = new Float32Array(data.buffer);
+            const u_buffer = new Uint8Array(data.buffer);
+
+            for (let i = 0; i < this.vertexCount; i++) {
+                f_buffer[8 * i + 0] = this.positions[3 * i + 0];
+                f_buffer[8 * i + 1] = this.positions[3 * i + 1];
+                f_buffer[8 * i + 2] = this.positions[3 * i + 2];
+
+                u_buffer[32 * i + 24 + 0] = this.colors[4 * i + 0];
+                u_buffer[32 * i + 24 + 1] = this.colors[4 * i + 1];
+                u_buffer[32 * i + 24 + 2] = this.colors[4 * i + 2];
+                u_buffer[32 * i + 24 + 3] = this.colors[4 * i + 3];
+
+                f_buffer[8 * i + 3 + 0] = this.scales[3 * i + 0];
+                f_buffer[8 * i + 3 + 1] = this.scales[3 * i + 1];
+                f_buffer[8 * i + 3 + 2] = this.scales[3 * i + 2];
+
+                u_buffer[32 * i + 28 + 0] = (this.rotations[4 * i + 0] * 128 + 128) & 0xff;
+                u_buffer[32 * i + 28 + 1] = (this.rotations[4 * i + 1] * 128 + 128) & 0xff;
+                u_buffer[32 * i + 28 + 2] = (this.rotations[4 * i + 2] * 128 + 128) & 0xff;
+                u_buffer[32 * i + 28 + 3] = (this.rotations[4 * i + 3] * 128 + 128) & 0xff;
+            }
+
+            return data;
+        };
+
+        this.reattach = (
+            positions: ArrayBufferLike,
+            rotations: ArrayBufferLike,
+            scales: ArrayBufferLike,
+            colors: ArrayBufferLike,
+            selection: ArrayBufferLike,
+        ) => {
+            console.assert(
+                positions.byteLength === this.vertexCount * 3 * 4,
+                `Expected ${this.vertexCount * 3 * 4} bytes, got ${positions.byteLength} bytes`,
+            );
+            this._positions = new Float32Array(positions);
+            this._rotations = new Float32Array(rotations);
+            this._scales = new Float32Array(scales);
+            this._colors = new Uint8Array(colors);
+            this._selection = new Uint8Array(selection);
+            this.detached = false;
+        };
+    }
+
+    static Deserialize(data: Uint8Array): SplatData {
+        const vertexCount = data.length / SplatData.RowLength;
+        const positions = new Float32Array(3 * vertexCount);
+        const rotations = new Float32Array(4 * vertexCount);
+        const scales = new Float32Array(3 * vertexCount);
+        const colors = new Uint8Array(4 * vertexCount);
+
+        const f_buffer = new Float32Array(data.buffer);
+        const u_buffer = new Uint8Array(data.buffer);
+
+        for (let i = 0; i < vertexCount; i++) {
+            positions[3 * i + 0] = f_buffer[8 * i + 0];
+            positions[3 * i + 1] = f_buffer[8 * i + 1];
+            positions[3 * i + 2] = f_buffer[8 * i + 2];
+
+            rotations[4 * i + 0] = (u_buffer[32 * i + 28 + 0] - 128) / 128;
+            rotations[4 * i + 1] = (u_buffer[32 * i + 28 + 1] - 128) / 128;
+            rotations[4 * i + 2] = (u_buffer[32 * i + 28 + 2] - 128) / 128;
+            rotations[4 * i + 3] = (u_buffer[32 * i + 28 + 3] - 128) / 128;
+
+            scales[3 * i + 0] = f_buffer[8 * i + 3 + 0];
+            scales[3 * i + 1] = f_buffer[8 * i + 3 + 1];
+            scales[3 * i + 2] = f_buffer[8 * i + 3 + 2];
+
+            colors[4 * i + 0] = u_buffer[32 * i + 24 + 0];
+            colors[4 * i + 1] = u_buffer[32 * i + 24 + 1];
+            colors[4 * i + 2] = u_buffer[32 * i + 24 + 2];
+            colors[4 * i + 3] = u_buffer[32 * i + 24 + 3];
+        }
+
+        return new SplatData(vertexCount, positions, rotations, scales, colors);
+    }
+
+    get vertexCount() {
+        return this._vertexCount;
+    }
+
+    get positions() {
+        return this._positions;
+    }
+
+    get rotations() {
+        return this._rotations;
+    }
+
+    get scales() {
+        return this._scales;
+    }
+
+    get colors() {
+        return this._colors;
+    }
+
+    get selection() {
+        return this._selection;
+    }
+
+    clone() {
+        return new SplatData(
+            this.vertexCount,
+            new Float32Array(this.positions),
+            new Float32Array(this.rotations),
+            new Float32Array(this.scales),
+            new Uint8Array(this.colors),
+        );
+    }
+}
+
+export { SplatData };

src/splats/Splatv.ts

@@ -0,0 +1,18 @@
+import { Object3D } from "../core/Object3D";
+import { SplatvData } from "./SplatvData";
+
+class Splatv extends Object3D {
+    private _data: SplatvData;
+
+    constructor(splat: SplatvData) {
+        super();
+
+        this._data = splat;
+    }
+
+    get data() {
+        return this._data;
+    }
+}
+
+export { Splatv };

src/splats/SplatvData.ts

@@ -0,0 +1,59 @@
+class SplatvData {
+    static RowLength = 64;
+
+    private _vertexCount: number;
+    private _positions: Float32Array;
+    private _data: Uint32Array;
+    private _width: number;
+    private _height: number;
+
+    serialize: () => Uint8Array;
+
+    constructor(vertexCount: number, positions: Float32Array, data: Uint32Array, width: number, height: number) {
+        this._vertexCount = vertexCount;
+        this._positions = positions;
+        this._data = data;
+        this._width = width;
+        this._height = height;
+
+        this.serialize = () => {
+            return new Uint8Array(this._data.buffer);
+        };
+    }
+
+    static Deserialize(data: Uint8Array, width: number, height: number): SplatvData {
+        const buffer = new Uint32Array(data.buffer);
+        const f_buffer = new Float32Array(data.buffer);
+        const vertexCount = Math.floor(f_buffer.byteLength / this.RowLength);
+        const positions = new Float32Array(vertexCount * 3);
+        for (let i = 0; i < vertexCount; i++) {
+            positions[3 * i + 0] = f_buffer[16 * i + 0];
+            positions[3 * i + 1] = f_buffer[16 * i + 1];
+            positions[3 * i + 2] = f_buffer[16 * i + 2];
+            positions[3 * i + 0] = f_buffer[16 * i + 3];
+        }
+        return new SplatvData(vertexCount, positions, buffer, width, height);
+    }
+
+    get vertexCount() {
+        return this._vertexCount;
+    }
+
+    get positions() {
+        return this._positions;
+    }
+
+    get data() {
+        return this._data;
+    }
+
+    get width() {
+        return this._width;
+    }
+
+    get height() {
+        return this._height;
+    }
+}
+
+export { SplatvData };

src/utils/Converter.ts

@@ -0,0 +1,96 @@
+import { Quaternion } from "../math/Quaternion";
+
+class Converter {
+    public static SH_C0 = 0.28209479177387814;
+
+    public static SplatToPLY(buffer: ArrayBuffer, vertexCount: number): ArrayBuffer {
+        let header = "ply\nformat binary_little_endian 1.0\n";
+        header += `element vertex ${vertexCount}\n`;
+
+        const properties = ["x", "y", "z", "nx", "ny", "nz", "f_dc_0", "f_dc_1", "f_dc_2"];
+        for (let i = 0; i < 45; i++) {
+            properties.push(`f_rest_${i}`);
+        }
+        properties.push("opacity");
+        properties.push("scale_0");
+        properties.push("scale_1");
+        properties.push("scale_2");
+        properties.push("rot_0");
+        properties.push("rot_1");
+        properties.push("rot_2");
+        properties.push("rot_3");
+
+        for (const property of properties) {
+            header += `property float ${property}\n`;
+        }
+        header += "end_header\n";
+
+        const headerBuffer = new TextEncoder().encode(header);
+
+        const plyRowLength = 4 * 3 + 4 * 3 + 4 * 3 + 4 * 45 + 4 + 4 * 3 + 4 * 4;
+        const plyLength = vertexCount * plyRowLength;
+        const output = new DataView(new ArrayBuffer(headerBuffer.length + plyLength));
+        new Uint8Array(output.buffer).set(headerBuffer, 0);
+
+        const f_buffer = new Float32Array(buffer);
+        const u_buffer = new Uint8Array(buffer);
+
+        const offset = headerBuffer.length;
+        const f_dc_offset = 4 * 3 + 4 * 3;
+        const opacity_offset = f_dc_offset + 4 * 3 + 4 * 45;
+        const scale_offset = opacity_offset + 4;
+        const rot_offset = scale_offset + 4 * 3;
+        for (let i = 0; i < vertexCount; i++) {
+            const pos0 = f_buffer[8 * i + 0];
+            const pos1 = f_buffer[8 * i + 1];
+            const pos2 = f_buffer[8 * i + 2];
+
+            const f_dc_0 = (u_buffer[32 * i + 24 + 0] / 255 - 0.5) / this.SH_C0;
+            const f_dc_1 = (u_buffer[32 * i + 24 + 1] / 255 - 0.5) / this.SH_C0;
+            const f_dc_2 = (u_buffer[32 * i + 24 + 2] / 255 - 0.5) / this.SH_C0;
+
+            const alpha = u_buffer[32 * i + 24 + 3] / 255;
+            const opacity = Math.log(alpha / (1 - alpha));
+
+            const scale0 = Math.log(f_buffer[8 * i + 3 + 0]);
+            const scale1 = Math.log(f_buffer[8 * i + 3 + 1]);
+            const scale2 = Math.log(f_buffer[8 * i + 3 + 2]);
+
+            let q = new Quaternion(
+                (u_buffer[32 * i + 28 + 1] - 128) / 128,
+                (u_buffer[32 * i + 28 + 2] - 128) / 128,
+                (u_buffer[32 * i + 28 + 3] - 128) / 128,
+                (u_buffer[32 * i + 28 + 0] - 128) / 128,
+            );
+            q = q.normalize();
+
+            const rot0 = q.w;
+            const rot1 = q.x;
+            const rot2 = q.y;
+            const rot3 = q.z;
+
+            output.setFloat32(offset + plyRowLength * i + 0, pos0, true);
+            output.setFloat32(offset + plyRowLength * i + 4, pos1, true);
+            output.setFloat32(offset + plyRowLength * i + 8, pos2, true);
+
+            output.setFloat32(offset + plyRowLength * i + f_dc_offset + 0, f_dc_0, true);
+            output.setFloat32(offset + plyRowLength * i + f_dc_offset + 4, f_dc_1, true);
+            output.setFloat32(offset + plyRowLength * i + f_dc_offset + 8, f_dc_2, true);
+
+            output.setFloat32(offset + plyRowLength * i + opacity_offset, opacity, true);
+
+            output.setFloat32(offset + plyRowLength * i + scale_offset + 0, scale0, true);
+            output.setFloat32(offset + plyRowLength * i + scale_offset + 4, scale1, true);
+            output.setFloat32(offset + plyRowLength * i + scale_offset + 8, scale2, true);
+
+            output.setFloat32(offset + plyRowLength * i + rot_offset + 0, rot0, true);
+            output.setFloat32(offset + plyRowLength * i + rot_offset + 4, rot1, true);
+            output.setFloat32(offset + plyRowLength * i + rot_offset + 8, rot2, true);
+            output.setFloat32(offset + plyRowLength * i + rot_offset + 12, rot3, true);
+        }
+
+        return output.buffer;
+    }
+}
+
+export { Converter };

src/utils/LoaderUtils.ts

@@ -0,0 +1,74 @@
+export async function initiateFetchRequest(url: string, useCache: boolean): Promise<Response> {
+    const req = await fetch(url, {
+        mode: "cors",
+        credentials: "omit",
+        cache: useCache ? "force-cache" : "default",
+    });
+
+    if (req.status != 200) {
+        throw new Error(req.status + " Unable to load " + req.url);
+    }
+
+    return req;
+}
+
+export async function loadDataIntoBuffer(res: Response, onProgress?: (progress: number) => void): Promise<Uint8Array> {
+    const reader = res.body!.getReader();
+
+    const contentLength = parseInt(res.headers.get("content-length") as string);
+    const buffer = new Uint8Array(contentLength);
+
+    let bytesRead = 0;
+
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        buffer.set(value, bytesRead);
+        bytesRead += value.length;
+        onProgress?.(bytesRead / contentLength);
+    }
+
+    return buffer;
+}
+
+export async function loadChunkedDataIntoBuffer(
+    res: Response,
+    onProgress?: (progress: number) => void,
+): Promise<Uint8Array> {
+    const reader = res.body!.getReader();
+
+    const chunks = [];
+    let receivedLength = 0;
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        chunks.push(value);
+        receivedLength += value.length;
+    }
+
+    const buffer = new Uint8Array(receivedLength);
+    let position = 0;
+    for (const chunk of chunks) {
+        buffer.set(chunk, position);
+        position += chunk.length;
+
+        onProgress?.(position / receivedLength);
+    }
+
+    return buffer;
+}
+
+export async function loadRequestDataIntoBuffer(
+    res: Response,
+    onProgress?: (progress: number) => void,
+): Promise<Uint8Array> {
+    if (res.headers.has("content-length")) {
+        return loadDataIntoBuffer(res, onProgress);
+    } else {
+        return loadChunkedDataIntoBuffer(res, onProgress);
+    }
+}

src/wasm/data.d.ts

@@ -0,0 +1,20 @@
+interface WasmModule {
+    _malloc(size: number): number;
+    _free(ptr: number): void;
+    _pack(
+        selected: boolean,
+        vertexCount: number,
+        positions: number,
+        rotations: number,
+        scales: number,
+        colors: number,
+        selection: number,
+        data: number,
+        worldPositions: number,
+        worldRotations: number,
+        worldScales: number,
+    ): void;
+}
+
+declare const loadWasm: () => Promise<WasmModule>;
+export default loadWasm;