add skeleton library

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

@@ -0,0 +1,32 @@
+import { Camera } from '../core/Camera';
+import { Matrix4 } from '../math/Matrix4';
+
+export class PerspectiveCamera extends Camera {
+    fx: number;
+    fy: number;
+
+    near: number;
+    far: number;
+
+    projectionMatrix: Matrix4;
+
+    constructor(fx: number = 1132, fy: number = 1132, near: number = 0.1, far: number = 100) {
+        super();
+
+        this.fx = fx;
+        this.fy = fy;
+        this.near = near;
+        this.far = far;
+
+        this.projectionMatrix = new Matrix4();
+    }
+
+    updateProjectionMatrix(width: number, height: number) : void {
+        this.projectionMatrix.set(
+            2 * this.fx / width, 0, 0, 0,
+            0, -2 * this.fy / height, 0, 0,
+            0, 0, this.far / (this.far - this.near), 1,
+            0, 0, -this.near * this.far / (this.far - this.near), 0
+        );
+    }
+}

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

@@ -0,0 +1,8 @@
+import { Object3D } from './Object3D';
+import { Matrix4 } from '../math/Matrix4';
+
+export class Camera extends Object3D {
+    constructor() {
+        super();
+    }
+}

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

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

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

@@ -0,0 +1,6 @@
+import type { Scene } from './Scene';
+import type { Camera } from './Camera';
+
+export interface Renderer {
+    render(scene: Scene, camera: Camera): void;
+}

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

@@ -0,0 +1,3 @@
+export class Scene {
+
+}

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

@@ -0,0 +1,8 @@
+export * from './core/Camera';
+export * from './core/Renderer';
+export * from './core/Scene';
+
+export * from './renderers/WebGLRenderer';
+
+export * from './math/Quaternion';
+export * from './math/Vector3';

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

@@ -0,0 +1,31 @@
+export class Matrix4 {
+    elements: number[];
+
+    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.elements = new Array(16);
+
+        this.set(
+            n11, n12, n13, n14, 
+            n21, n22, n23, n24, 
+            n31, n32, n33, n34, 
+            n41, n42, n43, n44
+        );
+    }
+
+    set(n11: number, n12: number, n13: number, n14: number,
+        n21: number, n22: number, n23: number, n24: number,
+        n31: number, n32: number, n33: number, n34: number,
+        n41: number, n42: number, n43: number, n44: number) : Matrix4 {
+        const e = this.elements;
+
+        e[0] = n11; e[4] = n12; e[8] = n13; e[12] = n14;
+        e[1] = n21; e[5] = n22; e[9] = n23; e[13] = n24;
+        e[2] = n31; e[6] = n32; e[10] = n33; e[14] = n34;
+        e[3] = n41; e[7] = n42; e[11] = n43; e[15] = n44;
+
+        return this;
+    }
+}

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

@@ -0,0 +1,22 @@
+export class Quaternion {
+    x: number;
+    y: number;
+    z: number;
+    w: number;
+
+    constructor(x: number = 0, y: number = 0, z: number = 0, w: number = 1) {
+        this.x = x;
+        this.y = y;
+        this.z = z;
+        this.w = w;
+    }
+
+    set(x: number, y: number, z: number, w: number) : Quaternion {
+        this.x = x;
+        this.y = y;
+        this.z = z;
+        this.w = w;
+
+        return this;
+    }
+}

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

@@ -0,0 +1,19 @@
+export class Vector3 {
+    x: number;
+    y: number;
+    z: number;
+
+    constructor(x: number = 0, y: number = 0, z: number = 0) {
+        this.x = x;
+        this.y = y;
+        this.z = z;
+    }
+
+    set(x: number, y: number, z: number) : Vector3 {
+        this.x = x;
+        this.y = y;
+        this.z = z;
+
+        return this;
+    }
+}

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

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

viewer/src/routes/components/ModelsView.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from "svelte";
-    import { getModels, getScenes } from "$lib/dataLoader";
+    import { getModels, getScenes } from "$lib/data/dataLoader";
     import placeholderImage from "$lib/placeholder.png";
 
     let models: any[] = [];

viewer/src/routes/components/ScenesView.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from "svelte";
-    import { getScenes } from "$lib/dataLoader";
+    import { getScenes } from "$lib/data/dataLoader";
     import placeholderImage from "$lib/placeholder.png";
 
     let scenes: any[] = [];

viewer/src/routes/models/[slug]/+page.server.ts

@@ -1,4 +1,4 @@
-import { getModels, getScenes } from "$lib/dataLoader";
+import { getModels, getScenes } from "$lib/data/dataLoader";
 
 export async function load({ params }) {
     const models = await getModels();

viewer/src/routes/store.js

@@ -1,3 +1,3 @@
 import { writable } from 'svelte/store';
 
-export const activeTab = writable('Models');
+export const activeTab = writable('Models');

viewer/src/routes/viewer/[slug]/+page.server.ts

@@ -1,5 +1,5 @@
 import { error } from "@sveltejs/kit";
-import { getModels, getScenes } from "$lib/dataLoader";
+import { getModels, getScenes } from "$lib/data/dataLoader";
 
 export async function load({ params }) {
     const models = await getModels();

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

@@ -41,7 +41,7 @@
             console.error(`Unsupported scene type: ${data.scene.type}`);
         }
         handleMobileView();
-        await loadModel(data.scene.url);
+        await loadScene(data.scene.url);
         window.addEventListener("resize", () => {
             updateCanvasSize();
         });
@@ -87,9 +87,9 @@
         babylonViewer.setRenderMode(mode);
     }
 
-    async function loadModel(url: string) {
+    async function loadScene(url: string) {
         overlay.style.display = "flex";
-        await viewer.loadModel(url, (progress) => {
+        await viewer.loadScene(url, (progress) => {
             loadingBarFill.style.width = `${progress * 100}%`;
         });
         updateCanvasSize();

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

@@ -41,7 +41,7 @@ export class BabylonViewer implements IViewer {
         this.engine.resize();
     }
 
-    async loadModel(url: string, loadingBarCallback?: (progress: number) => void) {
+    async loadScene(url: string, loadingBarCallback?: (progress: number) => void) {
         // Load scene
         await BABYLON.SceneLoader.AppendAsync("", url, this.scene, (event) => {
             const progress = event.loaded / event.total;

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

@@ -1,6 +1,10 @@
 export interface IViewer {
-    loadModel(url: string, loadingBarCallback?: (progress: number) => void): Promise<void>;
+    loadScene(url: string, loadingBarCallback?: (progress: number) => void): Promise<void>;
     dispose(): void;
     capture(): Promise<string | null>;
     getStats(): { name: string, value: any }[];
+}
+
+export interface ISplatRenderer {
+    init(): void;
 }

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

@@ -1,4 +1,5 @@
 import type { IViewer } from "./IViewer";
+import * as SPLAT from "$lib/splat.js";
 
 class OrbitCamera {
     position: number[];
@@ -789,7 +790,7 @@ export class SplatViewer implements IViewer {
         return gl as WebGLRenderingContext;
     }
 
-    async loadModel(url: string, loadingBarCallback?: (progress: number) => void) {
+    async loadScene(url: string, loadingBarCallback?: (progress: number) => void) {
         const req = await fetch(url, {
             mode: "cors",
             credentials: "omit",

viewer/tsconfig.json

@@ -1,6 +1,7 @@
 {
 	"extends": "./.svelte-kit/tsconfig.json",
 	"compilerOptions": {
+		"outDir": "build",
 		"allowJs": true,
 		"checkJs": true,
 		"esModuleInterop": true,