Specify colors by url parameter

src/asset-loader.ts

@@ -1,6 +1,5 @@
 import { Asset, AssetRegistry, GraphicsDevice, GSplatData, GSplatResource, TEXTURETYPE_RGBP } from 'playcanvas';
 
-import { Env } from './env';
 import { Events } from './events';
 import { Splat } from './splat';
 
@@ -11,11 +10,6 @@ interface ModelLoadRequest {
     maxAnisotropy?: number;
 }
 
-interface EnvLoadRequest {
-    url: string;
-    filename?: string;
-}
-
 // ideally this function would stream data directly into GSplatData buffers.
 // unfortunately the .splat file format has no header specifying total number
 // of splats so filesize must be known in order to allocate the correct amount
@@ -66,7 +60,6 @@ const deserializeFromSSplat = (data: ArrayBufferLike) => {
         storage_rot_3[i] = (dataView.getUint8(off + 31) - 128) / 128;
     }
 
-
     return new GSplatData([{
         name: 'vertex',
         count: totalSplats,
@@ -199,20 +192,6 @@ class AssetLoader {
             return this.loadSplat(loadRequest);
         }
     }
-
-    loadEnv(loadRequest: EnvLoadRequest) {
-        const registry = this.registry;
-        return new Promise<Env>((resolve, reject) => {
-            const textureAsset = new Asset('skybox_equi', 'texture', loadRequest, {
-                mipmaps: false,
-                type: TEXTURETYPE_RGBP
-            });
-            textureAsset.ready(() => resolve(new Env(textureAsset)));
-            textureAsset.on('error', (err: string) => reject(err));
-            registry.add(textureAsset);
-            registry.load(textureAsset);
-        });
-    }
 }
 
 export { AssetLoader };

src/camera.ts

@@ -202,8 +202,8 @@ class Camera extends Element {
             this.scene.gizmoLayer.id
         ]);
 
-        if (this.scene.config.camera.debug_render) {
-            this.entity.camera.setShaderPass(`debug_${this.scene.config.camera.debug_render}`);
+        if (this.scene.config.camera.debugRender) {
+            this.entity.camera.setShaderPass(`debug_${this.scene.config.camera.debugRender}`);
         }
 
         const target = document.getElementById('canvas-container');

src/main.ts

@@ -139,10 +139,10 @@ const main = async () => {
     );
 
     // colors
-    const bgClr = new Color(0, 0, 0, 1);
-    const selectedClr = new Color(1, 1, 0, 1.0);
-    const unselectedClr = new Color(0, 0, 1, 0.5);
-    const lockedClr = new Color(0, 0, 0, 0.05);
+    const bgClr = new Color();
+    const selectedClr = new Color();
+    const unselectedClr = new Color();
+    const lockedClr = new Color();
 
     const setClr = (target: Color, value: Color, event: string) => {
         if (!target.equals(value)) {
@@ -204,7 +204,14 @@ const main = async () => {
         scene.forceRender = true;
     });
 
-    setBgClr(new Color(sceneConfig.bgClr.r, sceneConfig.bgClr.g, sceneConfig.bgClr.b, 1));
+    // initialize colors from application config
+    const toColor = (value: { r: number, g: number, b: number, a: number }) => {
+        return new Color(value.r, value.g, value.b, value.a);
+    };
+    setBgClr(toColor(sceneConfig.bgClr));
+    setSelectedClr(toColor(sceneConfig.selectedClr));
+    setUnselectedClr(toColor(sceneConfig.unselectedClr));
+    setLockedClr(toColor(sceneConfig.lockedClr));
 
     // create the mask selection canvas
     const maskCanvas = document.createElement('canvas');
@@ -239,7 +246,7 @@ const main = async () => {
     await initFileHandler(scene, events, editorUI.appContainer.dom, remoteStorageDetails);
 
     // load async models
-    await scene.load();
+    scene.start();
 
     // handle load params
     const loadList = url.searchParams.getAll('load');

src/scene-config.ts

@@ -1,41 +1,30 @@
 type Color = { r: number, g: number, b: number, a: number };
 
-const DEFAULT: Color = { r: 0.4, g: 0.4, b: 0.4, a: 1 };
+const DEFAULT_BG_CLR: Color = { r: 0.4, g: 0.4, b: 0.4, a: 1 };
+const DEFAULT_SELECTED_CLR: Color = { r: 1, g: 1, b: 0, a: 1 };
+const DEFAULT_UNSELECTED_CLR: Color = { r: 0, g: 0, b: 1, a: 0.5 };
+const DEFAULT_LOCKED_CLR: Color = { r: 0, g: 0, b: 0, a: 0.05 };
 
 // default config
 const sceneConfig = {
-    model: {
-        url: '',
-        filename: '',
-        position: { x: 0, y: 0, z: 0 },
-        rotation: { x: 0, y: 0, z: 0 },
-        scale: 1.0,
-        hideLeftShoe: true
-    },
-    env: {
-        url: '',
-        intensity: 1.0,
-        rotation: 0.0
-    },
-    bgClr: DEFAULT,
+    bgClr: DEFAULT_BG_CLR,
+    selectedClr: DEFAULT_SELECTED_CLR,
+    unselectedClr: DEFAULT_UNSELECTED_CLR,
+    lockedClr: DEFAULT_LOCKED_CLR,
     camera: {
         pixelScale: 1,
         multisample: false,
         fov: 50,
         exposure: 1.0,
         toneMapping: 'linear',
-        debug_render: '',
+        debugRender: '',
         overlay: true
     },
     show: {
         grid: true,
         bound: true,
         shBands: 3
     },
-    shadow: {
-        intensity: 0.25,
-        fade: true
-    },
     controls: {
         dampingFactor: 0.2,
         minPolarAngle: 0,
@@ -83,7 +72,9 @@ class Params {
     }
 
     get(path: string): any {
-        return this.resolve(this.sources, path.split('.'));
+        // https://stackoverflow.com/a/67243723/2405687
+        const kebabize = (s: string) => s.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? '-' : '') + $.toLowerCase());
+        return this.resolve(this.sources, path.split('.').map(kebabize)) ?? this.resolve(this.sources, path.split('.'));
     }
 
     getBool(path: string): boolean | undefined {