better networked model loading

This commit is contained in:
Yeicor
2024-02-17 18:14:27 +01:00
parent a0b8cfe2a8
commit f50efd3701
5 changed files with 89 additions and 85 deletions

View File

@@ -1,6 +1,7 @@
export class NetworkUpdateEvent extends Event {
name: string;
url: string;
constructor(name: string, url: string) {
super("update");
this.name = name;
@@ -27,15 +28,11 @@ export class NetworkManager extends EventTarget {
// Get the last part of the URL as the "name" of the model
let name = url.split("/").pop();
name = name?.split(".")[0] || `unknown-${Math.random()}`;
let prevHash = this.knownObjectHashes[name];
// Use a head request to get the hash of the file
let response = await fetch(url, { method: "HEAD" });
let response = await fetch(url, {method: "HEAD"});
let hash = response.headers.get("etag");
// Only trigger an update if the hash has changed
if (hash !== prevHash) {
this.knownObjectHashes[name] = hash;
this.dispatchEvent(new NetworkUpdateEvent(name, url));
}
this.foundModel(name, hash, url);
}
}
@@ -44,13 +41,7 @@ export class NetworkManager extends EventTarget {
ws.onmessage = (event) => {
let data = JSON.parse(event.data);
console.debug("WebSocket message", data);
let name = data.name;
let prevHash = this.knownObjectHashes[name];
let hash = data.hash;
if (hash !== prevHash) {
this.knownObjectHashes[name] = hash;
this.dispatchEvent(new NetworkUpdateEvent(name, data.url));
}
this.foundModel(data.name, data.hash, data.url);
};
ws.onerror = (event) => {
console.error("WebSocket error", event);
@@ -60,4 +51,12 @@ export class NetworkManager extends EventTarget {
setTimeout(() => this.monitorWebSocket(url), 500);
}
}
private foundModel(name: string, hash: string, url: string) {
let prevHash = this.knownObjectHashes[name];
if (hash !== prevHash) {
this.knownObjectHashes[name] = hash;
this.dispatchEvent(new NetworkUpdateEvent(name, url));
}
}
}

View File

@@ -3,6 +3,7 @@ import type {ModelScene} from "@google/model-viewer/lib/three-components/ModelSc
import {ref, Ref} from 'vue';
import {Document} from '@gltf-transform/core';
import {ModelViewerInfo} from "./viewer/ModelViewerWrapper.vue";
import {splitGlbs} from "../models/glb/glbs";
type SceneManagerData = {
/** When updated, forces the viewer to load a new model replacing the current one */
@@ -32,6 +33,22 @@ export class SceneMgr {
});
}
/** Loads a GLB/GLBS model from a URL and adds it to the viewer or replaces it if the names match */
static async loadModel(data: SceneManagerData, name: string, url: string) {
let response = await fetch(url);
if (!response.ok) throw new Error("Failed to fetch model: " + response.statusText);
let glbsSplitter = splitGlbs(response.body!);
let {value: numChunks} = await glbsSplitter.next();
console.log("Loading model with", numChunks, "chunks");
while (true) {
let {value: chunk, done} = await glbsSplitter.next();
if (done) break;
console.log("Got chunk", chunk);
// Override the current model with the new one
data.viewerSrc = URL.createObjectURL(new Blob([chunk], {type: 'model/gltf-binary'}));
}
}
/** Should be called any model finishes loading successfully (after a viewerSrc update) */
static onload(data: SceneManagerData, info: typeof ModelViewerInfo) {
console.log("ModelViewer loaded", info);