Streaming & lod update (#121)

Author: slimbuck

src/index.html

@@ -28,6 +28,7 @@
                 noui: url.searchParams.has('noui'),
                 noanim: url.searchParams.has('noanim'),
                 ministats: url.searchParams.has('ministats'),
+                colorize: url.searchParams.has('colorize'),
                 unified: url.searchParams.has('unified'),
                 aa: url.searchParams.has('aa')
             };

src/index.ts

@@ -5,6 +5,7 @@ import {
     EventHandler,
     type Texture,
     type AppBase,
+    platform,
     revision as engineRevision,
     version as engineVersion
 } from 'playcanvas';
@@ -89,7 +90,7 @@ const main = (app: AppBase, camera: Entity, settingsJson: any, config: Config) =
 
     const state = observe(events, {
         readyToRender: false,
-        hqMode: true,
+        hqMode: !platform.mobile,
         progress: 0,
         inputMode: 'desktop',
         cameraMode: 'orbit',

src/types.ts

@@ -16,6 +16,7 @@ type Config = {
     noui: boolean;
     noanim: boolean;
     ministats: boolean;
+    colorize: boolean;                          // render with LOD colorization
     unified: boolean;                           // force unified rendering mode
     aa: boolean;                                // render with antialiasing
 };

src/viewer.ts

@@ -20,8 +20,7 @@ import {
     TONEMAP_ACES2,
     TONEMAP_NEUTRAL,
     Vec3,
-    GSplatComponent,
-    platform
+    GSplatComponent
 } from 'playcanvas';
 
 import { Annotations } from './annotations';
@@ -332,13 +331,22 @@ class Viewer {
 
                 const { gsplat } = app.scene;
 
-                // lod ranges
-                const low = [2, 5];
-                const high = [0, 2];
+                // quality ranges
+                const quality = {
+                    low: {
+                        range: [2, 8],
+                        splatBudget: 1
+                    },
+                    high: {
+                        range: [0, 8],
+                        splatBudget: 4
+                    }
+                };
 
-                // in unified mode, for now we hard-code LOD range on mobile vs desktop
-                gsplat.lodRangeMin = low[0];
-                gsplat.lodRangeMax = low[1];
+                // start in low quality mode so we can get user interacting asap
+                gsplat.lodRangeMin = quality.low.range[0];
+                gsplat.lodRangeMax = quality.low.range[1];
+                gsplat.splatBudget = quality.low.splatBudget * 1000000;
 
                 // these two allow LOD behind camera to drop, saves lots of splats
                 gsplat.lodUpdateAngle = 90;
@@ -349,23 +357,30 @@ class Viewer {
 
                 const eventHandler = app.systems.gsplat;
 
-                // force render empty frames otherwise unified rendering doesn't update
+                // we must force continuous rendering with streaming & lod system
                 this.forceRenderNextFrame = true;
 
                 let current = 0;
                 let watermark = 1;
                 const readyHandler = (camera: CameraComponent, layer: Layer, ready: boolean, loading: number) => {
-                    if (ready && !loading) {
+                    if (ready && loading === 0) {
                         // scene is done loading
-
                         eventHandler.off('frame:ready', readyHandler);
 
-                        this.forceRenderNextFrame = false;
                         state.readyToRender = true;
 
-                        const range = platform.mobile ? low : high;
-                        gsplat.lodRangeMin = range[0];
-                        gsplat.lodRangeMax = range[1];
+                        // handle quality mode changes
+                        const updateLod = () => {
+                            const settings = state.hqMode ? quality.high : quality.low;
+                            gsplat.lodRangeMin = settings.range[0];
+                            gsplat.lodRangeMax = settings.range[1];
+                            gsplat.splatBudget = settings.splatBudget * 1000000;
+                        };
+                        events.on('hqMode:changed', updateLod);
+                        updateLod();
+
+                        // debug colorize lods
+                        gsplat.colorizeLod = config.colorize;
 
                         // wait for the first valid frame to complete rendering
                         app.once('frameend', () => {
@@ -376,18 +391,13 @@ class Viewer {
                         });
                     }
 
-                    if (ready) {
-                        app.renderNextFrame = true;
-                    }
-
                     // update loading status
                     if (loading !== current) {
                         watermark = Math.max(watermark, loading);
                         current = watermark - loading;
                         state.progress = Math.trunc(current / watermark * 100);
                     }
                 };
-
                 eventHandler.on('frame:ready', readyHandler);
             }
         });