faster multi-object load, faster updates and better orthographic camera at different scales

frontend/misc/network.ts

@@ -27,7 +27,7 @@ export class NetworkManager extends EventTarget {
         if (url.startsWith("dev+")) {
             let baseUrl = new URL(url.slice(4));
             baseUrl.searchParams.set("api_updates", "true");
-            this.monitorDevServer(baseUrl);
+            await this.monitorDevServer(baseUrl);
         } else {
             // Get the last part of the URL as the "name" of the model
             let name = url.split("/").pop();
@@ -40,27 +40,51 @@ export class NetworkManager extends EventTarget {
         }
     }
 
-    private monitorDevServer(url: URL) {
-        // WARNING: This will spam the console logs with failed requests when the server is down
-        let eventSource = new EventSource(url);
-        eventSource.onmessage = (event) => {
-            let data = JSON.parse(event.data);
-            console.debug("WebSocket message", data);
-            let urlObj = new URL(url);
-            urlObj.searchParams.delete("api_updates");
-            urlObj.searchParams.set("api_object", data.name);
-            this.foundModel(data.name, data.hash, urlObj.toString());
-        };
-        eventSource.onerror = () => { // Retry after a very short delay
-            setTimeout(() => this.monitorDevServer(url), settings.monitorEveryMs);
+    private async monitorDevServer(url: URL) {
+        try {
+            // WARNING: This will spam the console logs with failed requests when the server is down
+            let response = await fetch(url.toString());
+            console.log("Monitoring", url.toString(), response);
+            if (response.status === 200) {
+                let lines = readLinesStreamings(response.body!.getReader());
+                for await (let line of lines) {
+                    if (!line || !line.startsWith("data:")) continue;
+                    let data = JSON.parse(line.slice(5));
+                    console.debug("WebSocket message", data);
+                    let urlObj = new URL(url);
+                    urlObj.searchParams.delete("api_updates");
+                    urlObj.searchParams.set("api_object", data.name);
+                    this.foundModel(data.name, data.hash, urlObj.toString());
+                }
+            }
+        } catch (e) { // Ignore errors (retry very soon)
         }
+        setTimeout(() => this.monitorDevServer(url), settings.monitorEveryMs);
+        return;
     }
 
     private foundModel(name: string, hash: string | null, url: string) {
         let prevHash = this.knownObjectHashes[name];
+        // TODO: Detect and manage instances of the same object (same hash, different name)
         if (!hash || hash !== prevHash) {
             this.knownObjectHashes[name] = hash;
             this.dispatchEvent(new NetworkUpdateEvent(name, url));
         }
     }
+}
+
+async function* readLinesStreamings(reader: ReadableStreamDefaultReader<Uint8Array>) {
+    let decoder = new TextDecoder();
+    let buffer = new Uint8Array();
+    while (true) {
+        let {value, done} = await reader.read();
+        if (done || !value) break;
+        buffer = new Uint8Array([...buffer, ...value]);
+        let text = decoder.decode(buffer);
+        let lines = text.split("\n");
+        for (let i = 0; i < lines.length - 1; i++) {
+            yield lines[i];
+        }
+        buffer = new Uint8Array([...buffer.slice(-1)]);
+    }
 }

frontend/misc/scene.ts

@@ -6,11 +6,14 @@ import {Vector3} from "three/src/math/Vector3.js"
 import {Box3} from "three/src/math/Box3.js"
 import {Matrix4} from "three/src/math/Matrix4.js"
 
+let latestModel: string | null = null;
+
 /** This class helps manage SceneManagerData. All methods are static to support reactivity... */
 export class SceneMgr {
     /** Loads a GLB model from a URL and adds it to the viewer or replaces it if the names match */
     static async loadModel(sceneUrl: Ref<string>, document: Document, name: string, url: string): Promise<Document> {
         let loadStart = performance.now();
+        latestModel = name; // To help load helpers only once per model load batch
 
         // Start merging into the current document, replacing or adding as needed
         document = await mergePartial(url, name, document);
@@ -19,8 +22,12 @@ export class SceneMgr {
 
         if (name !== extrasNameValueHelpers) {
             // Reload the helpers to fit the new model
-            // TODO: Only reload the helpers after a few milliseconds of no more models being added/removed
-            document = await this.reloadHelpers(sceneUrl, document);
+            // Only reload the helpers after a few milliseconds of no more models being added/removed
+            setTimeout(async () => {
+                if (name === latestModel) {
+                    document = await this.reloadHelpers(sceneUrl, document);
+                }
+            }, 10)
         } else {
             // Display the final fully loaded model
             let displayStart = performance.now();