@stowkit/three-loader 0.1.30 → 0.1.31

package/dist/stowkit-three-loader.js

@@ -24,6 +24,154 @@ function _interopNamespaceDefault(e) {
 
 var THREE__namespace = /*#__PURE__*/_interopNamespaceDefault(THREE);
 
+/**
+ * Persistent asset cache using IndexedDB
+ * Caches decoded Draco geometries and transcoded Basis textures
+ * Invalidates when source .stow file changes
+ */
+class AssetMemoryCache {
+    static async init() {
+        if (this.db)
+            return;
+        if (this.initPromise)
+            return this.initPromise;
+        this.initPromise = new Promise((resolve, reject) => {
+            const request = indexedDB.open(this.DB_NAME, this.DB_VERSION);
+            request.onerror = () => reject(request.error);
+            request.onsuccess = () => {
+                this.db = request.result;
+                resolve();
+            };
+            request.onupgradeneeded = (event) => {
+                const db = event.target.result;
+                if (!db.objectStoreNames.contains(this.GEOMETRY_STORE)) {
+                    db.createObjectStore(this.GEOMETRY_STORE);
+                }
+                if (!db.objectStoreNames.contains(this.TEXTURE_STORE)) {
+                    db.createObjectStore(this.TEXTURE_STORE);
+                }
+            };
+        });
+        return this.initPromise;
+    }
+    static async getGeometry(key, version) {
+        try {
+            await this.init();
+            if (!this.db)
+                return null;
+            return new Promise((resolve) => {
+                const transaction = this.db.transaction([this.GEOMETRY_STORE], 'readonly');
+                const store = transaction.objectStore(this.GEOMETRY_STORE);
+                const request = store.get(key);
+                request.onsuccess = () => {
+                    const cached = request.result;
+                    if (cached && cached.version === version) {
+                        resolve(cached);
+                    }
+                    else {
+                        resolve(null);
+                    }
+                };
+                request.onerror = () => resolve(null);
+            });
+        }
+        catch {
+            return null;
+        }
+    }
+    static async setGeometry(key, version, geometry) {
+        try {
+            await this.init();
+            if (!this.db)
+                return;
+            const cached = { ...geometry, version };
+            return new Promise((resolve) => {
+                const transaction = this.db.transaction([this.GEOMETRY_STORE], 'readwrite');
+                const store = transaction.objectStore(this.GEOMETRY_STORE);
+                store.put(cached, key);
+                transaction.oncomplete = () => resolve();
+                transaction.onerror = () => resolve();
+            });
+        }
+        catch {
+            // Silently fail if IndexedDB unavailable
+        }
+    }
+    static async getTexture(key, version) {
+        try {
+            await this.init();
+            if (!this.db)
+                return null;
+            return new Promise((resolve) => {
+                const transaction = this.db.transaction([this.TEXTURE_STORE], 'readonly');
+                const store = transaction.objectStore(this.TEXTURE_STORE);
+                const request = store.get(key);
+                request.onsuccess = () => {
+                    const cached = request.result;
+                    if (cached && cached.version === version) {
+                        resolve(cached);
+                    }
+                    else {
+                        resolve(null);
+                    }
+                };
+                request.onerror = () => resolve(null);
+            });
+        }
+        catch {
+            return null;
+        }
+    }
+    static async setTexture(key, version, textureData) {
+        try {
+            await this.init();
+            if (!this.db)
+                return;
+            const cached = { ...textureData, version };
+            return new Promise((resolve) => {
+                const transaction = this.db.transaction([this.TEXTURE_STORE], 'readwrite');
+                const store = transaction.objectStore(this.TEXTURE_STORE);
+                store.put(cached, key);
+                transaction.oncomplete = () => resolve();
+                transaction.onerror = () => resolve();
+            });
+        }
+        catch {
+            // Silently fail if IndexedDB unavailable
+        }
+    }
+    static async clear() {
+        try {
+            await this.init();
+            if (!this.db)
+                return;
+            return new Promise((resolve) => {
+                const transaction = this.db.transaction([this.GEOMETRY_STORE, this.TEXTURE_STORE], 'readwrite');
+                transaction.objectStore(this.GEOMETRY_STORE).clear();
+                transaction.objectStore(this.TEXTURE_STORE).clear();
+                transaction.oncomplete = () => resolve();
+                transaction.onerror = () => resolve();
+            });
+        }
+        catch {
+            // Silently fail
+        }
+    }
+    /**
+     * Generate a version hash for cache invalidation
+     * Based on file size only
+     */
+    static generateVersion(fileSize) {
+        return `${fileSize}`;
+    }
+}
+AssetMemoryCache.db = null;
+AssetMemoryCache.initPromise = null;
+AssetMemoryCache.DB_NAME = 'StowKitAssetCache';
+AssetMemoryCache.DB_VERSION = 1;
+AssetMemoryCache.GEOMETRY_STORE = 'geometries';
+AssetMemoryCache.TEXTURE_STORE = 'textures';
+
 class MeshParser {
     /**
      * Parse mesh metadata from binary data
@@ -211,7 +359,24 @@ class MeshParser {
     /**
      * Create Three.js BufferGeometry from Draco compressed mesh data
      */
-    static async createGeometry(geoInfo, dataBlob, dracoLoader) {
+    static async createGeometry(geoInfo, dataBlob, dracoLoader, cacheKey, version) {
+        // Try loading from IndexedDB cache first
+        if (cacheKey && version) {
+            const cached = await AssetMemoryCache.getGeometry(cacheKey, version);
+            if (cached) {
+                reader.PerfLogger.log(`[Perf] Geometry cache hit: ${cacheKey}`);
+                const geometry = new THREE__namespace.BufferGeometry();
+                geometry.setAttribute('position', new THREE__namespace.BufferAttribute(cached.positions, 3));
+                if (cached.normals) {
+                    geometry.setAttribute('normal', new THREE__namespace.BufferAttribute(cached.normals, 3));
+                }
+                if (cached.uvs) {
+                    geometry.setAttribute('uv', new THREE__namespace.BufferAttribute(cached.uvs, 2));
+                }
+                geometry.setIndex(new THREE__namespace.BufferAttribute(cached.indices, 1));
+                return geometry;
+            }
+        }
         // Extract the Draco compressed buffer
         if (geoInfo.compressedBufferOffset + geoInfo.compressedBufferSize > dataBlob.length) {
             throw new Error(`Compressed buffer out of bounds: offset=${geoInfo.compressedBufferOffset}, size=${geoInfo.compressedBufferSize}, dataLength=${dataBlob.length}`);
@@ -230,22 +395,39 @@ class MeshParser {
                 reject(new Error(`Failed to decode Draco geometry: ${error}`));
             });
         });
+        // Cache the decoded geometry
+        if (cacheKey && version) {
+            const posAttr = geometry.getAttribute('position');
+            const normAttr = geometry.getAttribute('normal');
+            const uvAttr = geometry.getAttribute('uv');
+            const indexAttr = geometry.index;
+            if (posAttr && 'array' in posAttr && indexAttr && 'array' in indexAttr) {
+                AssetMemoryCache.setGeometry(cacheKey, version, {
+                    positions: posAttr.array,
+                    normals: (normAttr && 'array' in normAttr) ? normAttr.array : undefined,
+                    uvs: (uvAttr && 'array' in uvAttr) ? uvAttr.array : undefined,
+                    indices: indexAttr.array
+                }).catch(() => {
+                    // Silent fail - caching is optional
+                });
+            }
+        }
         return geometry;
     }
     /**
      * Build Three.js scene from parsed mesh data
      */
-    static async buildScene(parsedData, dataBlob, dracoLoader) {
+    static async buildScene(parsedData, dataBlob, dracoLoader, cacheKeyPrefix, version) {
         const root = new THREE__namespace.Group();
         root.name = 'StowKitMesh';
         const { geometries, materials, nodes, meshIndices } = parsedData;
         // Pre-load ALL geometries in parallel for maximum speed
         const dracoStart = performance.now();
-        const geometryPromises = geometries.map(geoInfo => this.createGeometry(geoInfo, dataBlob, dracoLoader));
+        const geometryPromises = geometries.map((geoInfo, index) => this.createGeometry(geoInfo, dataBlob, dracoLoader, cacheKeyPrefix ? `${cacheKeyPrefix}_geo${index}` : undefined, version));
         const loadedGeometries = await Promise.all(geometryPromises);
         const dracoTime = performance.now() - dracoStart;
         const totalVerts = geometries.reduce((sum, g) => sum + g.vertexCount, 0);
-        reader.PerfLogger.log(`[Perf] Draco decode: ${dracoTime.toFixed(2)}ms (${geometries.length} meshes, ${totalVerts} total vertices)`);
+        reader.PerfLogger.log(`[Perf] Draco: ${dracoTime.toFixed(2)}ms (${geometries.length} meshes, ${totalVerts} verts)`);
         // Create all Three.js objects for nodes
         const nodeObjects = [];
         for (const node of nodes) {
@@ -332,11 +514,13 @@ class MeshParser {
  * Represents an opened StowKit pack with methods to load assets by name
  */
 class StowKitPack {
-    constructor(reader, ktx2Loader, dracoLoader) {
+    constructor(reader, ktx2Loader, dracoLoader, packUrl = '', packVersion = '') {
         this.textureCache = new Map();
         this.reader = reader;
         this.ktx2Loader = ktx2Loader;
         this.dracoLoader = dracoLoader;
+        this.packUrl = packUrl;
+        this.packVersion = packVersion || Date.now().toString();
     }
     /**
      * Load a skinned mesh by its string ID
@@ -687,8 +871,9 @@ class StowKitPack {
         if (textureNames.length > 0) {
             reader.PerfLogger.log(`[Perf] Textures: ${textureTime.toFixed(2)}ms (${textureNames.join(', ')})`);
         }
-        // Build Three.js scene with Draco decoder
-        const scene = await MeshParser.buildScene(parsedData, data, this.dracoLoader);
+        // Build Three.js scene with Draco decoder (with caching)
+        const cacheKey = `${this.packUrl}::${assetPath}`;
+        const scene = await MeshParser.buildScene(parsedData, data, this.dracoLoader, cacheKey, this.packVersion);
         const totalTime = performance.now() - totalStart;
         reader.PerfLogger.log(`[Perf] === Mesh "${assetPath}": ${totalTime.toFixed(2)}ms total ===`);
         return scene;
@@ -1036,14 +1221,29 @@ class StowKitPack {
         return Array.from(uniqueTextures);
     }
     async loadKTX2Texture(data, textureName) {
+        // Try IndexedDB cache first
+        const cacheKey = textureName ? `${this.packUrl}::${textureName}` : undefined;
+        if (cacheKey) {
+            const startCache = performance.now();
+            const cached = await AssetMemoryCache.getTexture(cacheKey, this.packVersion);
+            if (cached) {
+                reader.PerfLogger.log(`[Perf] Texture cache hit (IndexedDB): ${textureName} (${(performance.now() - startCache).toFixed(2)}ms)`);
+                const texture = new THREE__namespace.CompressedTexture([{ data: cached.data, width: cached.width, height: cached.height }], cached.width, cached.height, cached.format, THREE__namespace.UnsignedByteType);
+                texture.needsUpdate = true;
+                return texture;
+            }
+        }
         // Create blob URL - KTX2Loader requires a URL, can't use ArrayBuffer directly
         const arrayBuffer = data.buffer.slice(data.byteOffset, data.byteOffset + data.byteLength);
         const blob = new Blob([arrayBuffer]);
         const url = URL.createObjectURL(blob);
         try {
-            return await new Promise((resolve, reject) => {
+            const decodeStart = performance.now();
+            const texture = await new Promise((resolve, reject) => {
                 this.ktx2Loader.load(url, (texture) => {
                     URL.revokeObjectURL(url);
+                    const decodeTime = performance.now() - decodeStart;
+                    reader.PerfLogger.log(`[Perf] Basis decode: ${decodeTime.toFixed(2)}ms (${textureName || 'unknown'}, ${texture.image?.width}x${texture.image?.height})`);
                     texture.needsUpdate = true;
                     resolve(texture);
                 }, undefined, (error) => {
@@ -1051,6 +1251,22 @@ class StowKitPack {
                     reject(error);
                 });
             });
+            // Cache the transcoded texture data to IndexedDB
+            if (cacheKey && texture.mipmaps && texture.mipmaps.length > 0) {
+                const mipmap = texture.mipmaps[0];
+                const dataArray = new Uint8Array(mipmap.data.buffer, mipmap.data.byteOffset, mipmap.data.byteLength);
+                AssetMemoryCache.setTexture(cacheKey, this.packVersion, {
+                    data: dataArray,
+                    width: mipmap.width,
+                    height: mipmap.height,
+                    format: texture.format,
+                    internalFormat: texture.format,
+                    compressed: true
+                }).catch(() => {
+                    // Silent fail - caching is optional
+                });
+            }
+            return texture;
         }
         catch (error) {
             URL.revokeObjectURL(url);
@@ -1111,17 +1327,22 @@ class StowKitLoader {
             throw new Error(`Failed to fetch ${url}: ${response.statusText}`);
         }
         const arrayBuffer = await response.arrayBuffer();
+        // Generate version for cache invalidation (based on file size)
+        const version = `${arrayBuffer.byteLength}`;
         // Create a new reader instance for this pack
         const reader$1 = new reader.StowKitReader(this.wasmPath);
         await reader$1.init();
         await reader$1.open(arrayBuffer);
         // Return pack wrapper with its own dedicated reader
-        return new StowKitPack(reader$1, this.ktx2Loader, this.dracoLoader);
+        return new StowKitPack(reader$1, this.ktx2Loader, this.dracoLoader, url, version);
     }
     /**
      * Load a .stow pack from memory (ArrayBuffer, Blob, or File)
+     * @param data - The .stow file data
+     * @param options - Loader options
+     * @param cacheKey - Optional unique identifier for caching (e.g., CDN URL). Recommended for files loaded from CDN.
      */
-    static async loadFromMemory(data, options) {
+    static async loadFromMemory(data, options, cacheKey) {
         // Initialize loaders if needed
         if (!this.initialized) {
             await this.initialize(options);
@@ -1140,12 +1361,15 @@ class StowKitLoader {
         else {
             throw new Error('Data must be ArrayBuffer, Blob, or File');
         }
+        // Generate version for cache invalidation (based on file size)
+        const version = `${arrayBuffer.byteLength}`;
+        const packUrl = cacheKey || 'memory';
         // Create a new reader instance for this pack
         const reader$1 = new reader.StowKitReader(this.wasmPath);
         await reader$1.init();
         await reader$1.open(arrayBuffer);
         // Return pack wrapper with its own dedicated reader
-        return new StowKitPack(reader$1, this.ktx2Loader, this.dracoLoader);
+        return new StowKitPack(reader$1, this.ktx2Loader, this.dracoLoader, packUrl, version);
     }
     /**
      * Initialize the loader (called automatically on first load)
@@ -1180,6 +1404,7 @@ Object.defineProperty(exports, 'PerfLogger', {
     enumerable: true,
     get: function () { return reader.PerfLogger; }
 });
+exports.AssetMemoryCache = AssetMemoryCache;
 exports.StowKitLoader = StowKitLoader;
 exports.StowKitPack = StowKitPack;
 //# sourceMappingURL=stowkit-three-loader.js.map