slightly faster initial load

This commit is contained in:
Yeicor
2024-02-18 17:55:35 +01:00
parent 27944ab9cd
commit c1e003c668
2 changed files with 12 additions and 13 deletions

View File

@@ -4,7 +4,7 @@ import {Ref, ref} from 'vue';
import {Document} from '@gltf-transform/core'; import {Document} from '@gltf-transform/core';
import {ModelViewerInfo} from "./viewer/ModelViewerWrapper.vue"; import {ModelViewerInfo} from "./viewer/ModelViewerWrapper.vue";
import {splitGlbs} from "../models/glb/glbs"; import {splitGlbs} from "../models/glb/glbs";
import {merge, toBuffer} from "../models/glb/merge"; import {mergeFinalize, mergePartial, toBuffer} from "../models/glb/merge";
import {settings} from "./settings"; import {settings} from "./settings";
export type SceneMgrRefData = { export type SceneMgrRefData = {
@@ -54,17 +54,11 @@ export class SceneMgr {
console.log("Loading", name, "which has", numChunks, "GLB chunks"); console.log("Loading", name, "which has", numChunks, "GLB chunks");
// Start merging each chunk into the current document, replacing or adding as needed // Start merging each chunk into the current document, replacing or adding as needed
let lastShow = performance.now();
while (true) { while (true) {
let {value: glbData, done} = await glbsSplitter.next(); let {value: glbData, done} = await glbsSplitter.next();
if (done) break; if (done) break;
data.document = await merge(glbData, name, data.document); data.document = await mergePartial(glbData, name, data.document);
// TODO: Report load progress
// Show the partial model while loading every once in a while
if (performance.now() - lastShow > settings.displayLoadingEveryMs) {
await this.showCurrentDoc(refData, data);
lastShow = performance.now();
}
} }
// Display the final fully loaded model // Display the final fully loaded model
@@ -73,6 +67,7 @@ export class SceneMgr {
/** Serializes the current document into a GLB and updates the viewerSrc */ /** Serializes the current document into a GLB and updates the viewerSrc */
private static async showCurrentDoc(refData: Ref<SceneMgrRefData>, data: SceneMgrData) { private static async showCurrentDoc(refData: Ref<SceneMgrRefData>, data: SceneMgrData) {
data.document = await mergeFinalize(data.document);
let buffer = await toBuffer(data.document); let buffer = await toBuffer(data.document);
let blob = new Blob([buffer], {type: 'model/gltf-binary'}); let blob = new Blob([buffer], {type: 'model/gltf-binary'});
console.log("Showing current doc", data.document, "as", Array.from(buffer)); console.log("Showing current doc", data.document, "as", Array.from(buffer));

View File

@@ -7,8 +7,10 @@ let io = new WebIO();
* Given the bytes of a GLB file and a parsed GLTF document, it parses and merges the GLB into the document. * Given the bytes of a GLB file and a parsed GLTF document, it parses and merges the GLB into the document.
* *
* It can replace previous models in the document if the provided name matches the name of a previous model. * It can replace previous models in the document if the provided name matches the name of a previous model.
*
* Remember to call mergeFinalize after all models have been merged (slower required operations).
*/ */
export async function merge(glb: Uint8Array, name: string, document: Document): Promise<Document> { export async function mergePartial(glb: Uint8Array, name: string, document: Document): Promise<Document> {
let newDoc = await io.readBinary(glb); let newDoc = await io.readBinary(glb);
@@ -18,12 +20,14 @@ export async function merge(glb: Uint8Array, name: string, document: Document):
let merged = document.merge(newDoc); let merged = document.merge(newDoc);
// noinspection TypeScriptValidateJSTypes // noinspection TypeScriptValidateJSTypes
return await merged.transform(mergeScenes(), unpartition()); // Single scene & buffer required! return await merged.transform(mergeScenes()); // Single scene & buffer required!
}
export async function mergeFinalize(document: Document): Promise<Document> {
return await document.transform(unpartition());
} }
export async function toBuffer(doc: Document): Promise<Uint8Array> { export async function toBuffer(doc: Document): Promise<Uint8Array> {
return io.writeBinary(doc); return io.writeBinary(doc);
} }