spoint 0.1.45 → 0.1.46

package/client/LoadingManager.js

@@ -1,3 +1,5 @@
+import { fetchCached } from './ModelCache.js'
+
 export class LoadingManager extends EventTarget {
   static STAGES = {
     CONNECTING: { name: 'CONNECTING', label: 'Connecting...', range: [0, 10] },
@@ -76,32 +78,7 @@ export class LoadingManager extends EventTarget {
 
   async fetchWithProgress(url) {
     try {
-      const response = await fetch(url)
-      if (!response.ok) throw new Error(`HTTP ${response.status}`)
-      const contentLength = parseInt(response.headers.get('content-length') || '0', 10)
-      const isGzip = (response.headers.get('content-encoding') || '').includes('gzip')
-      const useTotal = contentLength > 0 && !isGzip
-      const reader = response.body.getReader()
-      const chunks = []
-      let receivedLength = 0
-
-      while (true) {
-        const { done, value } = await reader.read()
-        if (done) break
-        chunks.push(value)
-        receivedLength += value.length
-        if (useTotal) {
-          this.updateProgress(receivedLength, contentLength)
-        }
-      }
-
-      const result = new Uint8Array(receivedLength)
-      let position = 0
-      for (const chunk of chunks) {
-        result.set(chunk, position)
-        position += chunk.length
-      }
-      return result
+      return await fetchCached(url, (received, total) => this.updateProgress(received, total))
     } catch (error) {
       console.error('[loading] fetch failed:', url, error)
       throw error

package/client/ModelCache.js

@@ -0,0 +1,76 @@
+const DB_NAME = 'spawnpoint-model-cache'
+const DB_VERSION = 1
+const STORE = 'models'
+
+let _db = null
+
+async function openDB() {
+  if (_db) return _db
+  return new Promise((resolve, reject) => {
+    const req = indexedDB.open(DB_NAME, DB_VERSION)
+    req.onupgradeneeded = e => e.target.result.createObjectStore(STORE)
+    req.onsuccess = e => { _db = e.target.result; resolve(_db) }
+    req.onerror = () => reject(req.error)
+  })
+}
+
+async function dbGet(key) {
+  const db = await openDB()
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE, 'readonly')
+    const req = tx.objectStore(STORE).get(key)
+    req.onsuccess = () => resolve(req.result)
+    req.onerror = () => reject(req.error)
+  })
+}
+
+async function dbPut(key, value) {
+  const db = await openDB()
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE, 'readwrite')
+    const req = tx.objectStore(STORE).put(value, key)
+    req.onsuccess = () => resolve()
+    req.onerror = () => reject(req.error)
+  })
+}
+
+export async function fetchCached(url, onProgress) {
+  let cached = null
+  try { cached = await dbGet(url) } catch {}
+
+  if (cached?.etag) {
+    const head = await fetch(url, { method: 'HEAD' }).catch(() => null)
+    const serverEtag = head?.headers?.get('etag')
+    if (serverEtag && serverEtag === cached.etag) {
+      return new Uint8Array(cached.buffer)
+    }
+  }
+
+  const response = await fetch(url)
+  if (!response.ok) throw new Error(`HTTP ${response.status}`)
+  const etag = response.headers.get('etag') || ''
+  const contentLength = parseInt(response.headers.get('content-length') || '0', 10)
+  const isGzip = (response.headers.get('content-encoding') || '').includes('gzip')
+  const useTotal = contentLength > 0 && !isGzip
+  const reader = response.body.getReader()
+  const chunks = []
+  let received = 0
+
+  while (true) {
+    const { done, value } = await reader.read()
+    if (done) break
+    chunks.push(value)
+    received += value.length
+    if (useTotal && onProgress) onProgress(received, contentLength)
+  }
+
+  const result = new Uint8Array(received)
+  let pos = 0
+  for (const chunk of chunks) { result.set(chunk, pos); pos += chunk.length }
+
+  if (etag) {
+    try { await dbPut(url, { etag, buffer: result.buffer }) } catch {}
+  }
+
+  return result
+}

package/client/app.js

@@ -15,6 +15,7 @@ import { VRButton } from 'three/addons/webxr/VRButton.js'
 import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js'
 import { XRHandModelFactory } from 'three/addons/webxr/XRHandModelFactory.js'
 import { LoadingManager } from './LoadingManager.js'
+import { fetchCached } from './ModelCache.js'
 import { createLoadingScreen } from './createLoadingScreen.js'
 import { MobileControls, detectDevice } from './MobileControls.js'
 import { ARControls, createARButton } from './ARControls.js'
@@ -956,7 +957,7 @@ function loadEntityModel(entityId, entityState) {
   }
   loadingMgr.setStage('RESOURCES')
   const url = entityState.model.startsWith('./') ? '/' + entityState.model.slice(2) : entityState.model
-  gltfLoader.load(url, (gltf) => {
+  const onGltfLoad = (gltf) => {
     const model = gltf.scene
     const mp = entityState.position; model.position.set(mp[0], mp[1], mp[2])
     const mr = entityState.rotation; if (mr) model.quaternion.set(mr[0], mr[1], mr[2], mr[3])
@@ -979,7 +980,11 @@ function loadEntityModel(entityId, entityState) {
     if (!environmentLoaded) { environmentLoaded = true; checkAllLoaded() }
     if (firstSnapshotEntityPending.has(entityId)) { firstSnapshotEntityPending.delete(entityId); if (firstSnapshotEntityPending.size === 0) checkAllLoaded() }
     if (loadingScreenHidden) renderer.compileAsync(scene, camera).catch(() => renderer.compile(scene, camera))
-  }, (progress) => { if (progress.total > 0) console.log('[gltf]', url, Math.round(Math.min(progress.loaded, progress.total) / progress.total * 100) + '%') }, (err) => { console.error('[gltf]', url, err); pendingLoads.delete(entityId); if (firstSnapshotEntityPending.has(entityId)) { firstSnapshotEntityPending.delete(entityId); if (firstSnapshotEntityPending.size === 0) checkAllLoaded() } })
+  }
+  const onGltfErr = (err) => { console.error('[gltf]', url, err); pendingLoads.delete(entityId); if (firstSnapshotEntityPending.has(entityId)) { firstSnapshotEntityPending.delete(entityId); if (firstSnapshotEntityPending.size === 0) checkAllLoaded() } }
+  fetchCached(url).then(buf => {
+    gltfLoader.parse(buf.buffer.slice(0), '', onGltfLoad, onGltfErr)
+  }).catch(onGltfErr)
 }
 
 function renderAppUI(state) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoint",
-  "version": "0.1.45",
+  "version": "0.1.46",
   "description": "Physics and netcode SDK for multiplayer game servers",
   "type": "module",
   "main": "src/index.js",

package/src/sdk/StaticHandler.js

@@ -45,9 +45,18 @@ export function createStaticHandler(dirs) {
         } else if (ext === '.glb' || ext === '.vrm' || ext === '.gltf') {
           headers['Cache-Control'] = 'public, max-age=86400, immutable'
         }
-        const { content, gzipped } = getCached(fp, ext)
+        const { content, gzipped, mtime } = getCached(fp, ext)
         if (gzipped) headers['Content-Encoding'] = 'gzip'
         headers['Content-Length'] = content.length
+        if (ext === '.glb' || ext === '.vrm' || ext === '.gltf') {
+          headers['ETag'] = `"${mtime.toString(16)}"`
+          const ifNoneMatch = req.headers['if-none-match']
+          if (ifNoneMatch === headers['ETag']) {
+            res.writeHead(304, { 'ETag': headers['ETag'], 'Cache-Control': headers['Cache-Control'] })
+            res.end()
+            return
+          }
+        }
         res.writeHead(200, headers)
         res.end(content)
         return