websocket loaderHEADmaster

1 files changed, 53 insertions, 37 deletions

diff --git a/viewer/main.ts b/viewer/main.ts
index f59bb1c..a85443a 100644
--- a/viewer/main.ts
+++ b/viewer/main.ts
@@ -1,6 +1,7 @@
 /// <reference lib="dom" />
 
 import { aabb_overlap } from "./helper.ts";
+import { WSLoader } from "./loader.ts";
 import { AABB, get_graphics_part, get_prefab, get_respackentry, get_spatialindex, GraphicsPart, Prefab, Resource, SpatialIndex } from "./resources.ts";
 
 const canvas = document.createElement("canvas")
@@ -12,13 +13,18 @@ canvas.style.height = "100vh"
 document.body.append(canvas)
 const ctx = canvas.getContext("2d")!
 
-let loader: Loader | undefined;
+let thing: Thing | undefined;
+const loader = new WSLoader()
 
 function draw() {
     ctx.fillStyle = "black"
     ctx.fillRect(0, 0, canvas.width, canvas.height)
 
-    loader?.root.draw()
+    ctx.fillStyle = "white"
+    ctx.font = "64px sans-serif"
+    ctx.fillText(`${loader.num_loading}`, 20, 80)
+
+    thing?.root.draw()
 
     requestAnimationFrame(draw)
 }
@@ -26,29 +32,28 @@ function resize() {
     canvas.width = globalThis.innerWidth
     canvas.height = globalThis.innerHeight
 }
-canvas.addEventListener("resize", () => resize())
+globalThis.addEventListener("resize", () => resize())
 resize()
 draw()
 
-
 async function init() {
-    const resp = await fetch("http://127.0.0.1:28556/entry")
-    if (!resp.ok) throw new Error("aaaa");
-    const entry_res = new Resource(await resp.bytes())
-
-    const entry = await get_respackentry(entry_res)
-    const root = await get_spatialindex(entry.c_spatial_index!)
-    loader = new Loader(root)
-    console.log("begin load");
-    await loader.update()
-    console.log("end load");
-
+    await loader.wait_ready()
+    const entry_res = await loader.get_entry()
+    const entry = await get_respackentry(loader, entry_res)
+    const root = await get_spatialindex(loader, entry.c_spatial_index!)
+    thing = new Thing(root)
+    loader_loop()
+}
+async function loader_loop() {
+    while (1) {
+        await thing!.update()
+        await new Promise(r => setTimeout(r, 100))
+    }
 }
-init()
 
-let limit = 10000;
+init()
 
-class Loader {
+class Thing {
     view: AABB
     root: SNode
     constructor(root: SpatialIndex) {
@@ -59,34 +64,45 @@ class Loader {
         await this.root.load(this.view)
     }
 }
+
+let num_loaded = 0
+
 class SNode {
-    children: (SNode | undefined)[]
+    children?: SNode[]
     prefab?: Prefab
     graphics?: GraphicsPart
     aabb?: AABB
-    constructor(public data: SpatialIndex) {
-        this.children = new Array(data.child.length).fill(undefined)
-    }
-    async load(view: AABB) {
+    constructor(public data: SpatialIndex) { }
+
+    async load_graphics() {
         if (this.data.prefab && !this.prefab)
-            this.prefab = await get_prefab(this.data.prefab)
+            this.prefab = await get_prefab(loader, this.data.prefab)
         if (this.prefab?.graphics[0] && !this.graphics)
-            this.graphics = await get_graphics_part(this.prefab.graphics[0][1])
-        for (let i = 0; i < this.data.child.length; i++) {
-            const [aabb, child_data_hash] = this.data.child[i];
-            if (!aabb_overlap(aabb, view)) continue
-            if (this.children[i] == undefined) {
-                this.children[i] = new SNode(await get_spatialindex(child_data_hash))
-                limit -= 1
-                if (limit <= 0) return
+            this.graphics = await get_graphics_part(loader, this.prefab.graphics[0][1])
+    }
+    async load(view: AABB) {
+        if (!this.aabb || aabb_overlap(this.aabb, view)) {
+            if (this.children) {
+                await Promise.all(this.children.map(c => c.load(view)))
+            } else if (this.data.child.length) {
+                if (num_loaded > 300) return
+                num_loaded += 1
+                this.children = await Promise.all(this.data.child.map(async c => {
+                    const n = new SNode(await get_spatialindex(loader, c[1]))
+                    n.aabb = c[0]
+                    await n.load_graphics()
+                    return n
+                }))
+            }
+        } else {
+            if (this.children) {
+                num_loaded -= 1
+                this.children = undefined
             }
-            await this.children[i]!.load(view)
         }
     }
     draw() {
-        for (const c of this.children) {
-            if (c) c.draw()
-        }
+        if (this.children) return this.children.forEach(c => c.draw())
         if (!this.graphics) return
         ctx.fillStyle = "red"
         ctx.save()
@@ -94,7 +110,7 @@ class SNode {
         ctx.translate(-0.155, -0.63)
         ctx.translate(this.prefab!.transform![10], this.prefab!.transform![11])
         for (const c of this.graphics.read()) {
-            if (c.point) ctx.fillRect(c.point.x, c.point.y, 0.00003, 0.00003)
+            if (c.point) ctx.fillRect(c.point.z, c.point.y, 0.00001, 0.00001)
         }
         ctx.restore()
     }