@dcl-regenesislabs/bevy-explorer-web 0.1.0-18229784557.commit-ef374b9

package/gpu_cache.js

@@ -0,0 +1,302 @@
+function simpleHash(s) {
+  var h = 0x811c9dc5;
+
+  for (let i = 0; i < s.length; i++) {
+    h ^= s.charCodeAt(i);
+    h += (h << 1) + (h << 4) + (h << 7) + (h << 8) + (h << 24);
+  }
+
+  return h >>> 0;
+}
+
+var gpuSessionState = {};
+var requiredItemTypes = new Map();
+var precaching = false;
+
+const dbConfig = {
+  name: "GpuCacheDB",
+  version: 1,
+  onUpgrade: (db) => {
+    if (!db.objectStoreNames.contains("shader")) db.createObjectStore("shader");
+    if (!db.objectStoreNames.contains("bindgroup"))
+      db.createObjectStore("bindgroup");
+    if (!db.objectStoreNames.contains("layout")) db.createObjectStore("layout");
+    if (!db.objectStoreNames.contains("pipeline"))
+      db.createObjectStore("pipeline");
+    if (!db.objectStoreNames.contains("requiredItems"))
+      db.createObjectStore("requiredItems");
+    if (!db.objectStoreNames.contains("deviceConfig"))
+      db.createObjectStore("deviceConfig");
+  },
+};
+
+var dbPromise;
+function openDB() {
+  if (dbPromise) {
+    return dbPromise;
+  }
+  dbPromise = new Promise((resolve, reject) => {
+    const request = indexedDB.open(dbConfig.name, dbConfig.version);
+    request.onupgradeneeded = (event) => {
+      dbConfig.onUpgrade(event.target.result);
+    };
+    request.onsuccess = (event) => resolve(event.target.result);
+    request.onerror = (event) => reject(event.target.error);
+  });
+  return dbPromise;
+}
+
+async function fetchRequiredItems() {
+  const db = await openDB();
+  return new Promise((resolve) => {
+    const tx = db.transaction("requiredItems", "readonly");
+    const request = tx.objectStore("requiredItems").get("it");
+    request.onsuccess = () => {
+      resolve(request.result ?? new Map());
+    };
+    request.onerror = () => {
+      resolve(new Map());
+    };
+  });
+}
+
+async function storeRequiredItems() {
+  const db = await openDB();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction("requiredItems", "readwrite");
+    tx.oncomplete = () => {
+      resolve();
+    };
+    tx.onerror = () => {
+      console.log("[GPU Cache] failed to store requiredItems");
+      reject(tx.error);
+    };
+    tx.objectStore("requiredItems").put(requiredItemTypes, "it");
+  });
+}
+
+async function fetchInstance(type, hash) {
+  const db = await openDB();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(type, "readonly");
+    const request = tx.objectStore(type).get(hash);
+    request.onsuccess = () => {
+      if (request.result) {
+        resolve(JSON.parse(request.result));
+      } else {
+        reject("undefined");
+      }
+    };
+    request.onerror = () => {
+      reject("error");
+    };
+  });
+}
+
+async function storeInstance(type, hash, value) {
+  const db = await openDB();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(type, "readwrite");
+    tx.oncomplete = () => {
+      resolve();
+    };
+    tx.onerror = () => {
+      console.log("[GPU Cache] failed to store ${type} instance");
+      reject(tx.error);
+    };
+    tx.objectStore(type).put(JSON.stringify(value), hash);
+  });
+}
+
+async function clearDatabase() {
+  const storeNames = ["shader", "bindgroup", "layout", "pipeline"];
+
+  const tx = await db.transaction("rqeuiredItems", "readwrite");
+  await tx.objectStore("requiredItems").clear();
+
+  const clearPromises = storeNames.map((name) => {
+    const tx = db.transaction(name, "readwrite");
+    return new Promise((resolve, reject) => {
+      const request = tx.objectStore(name).clear();
+      request.onsuccess = () => resolve();
+      request.onerror = () => reject(request.error);
+    });
+  });
+
+  // Wait for all clear operations to complete
+  await Promise.all(clearPromises);
+  await tx.done;
+}
+
+export async function initGpuCache() {
+  patchWebgpuAdater();
+  await createGpuCache();
+}
+
+function patchWebgpuAdater() {
+  const originalRequestDevice = GPUAdapter.prototype.requestDevice;
+  GPUAdapter.prototype.requestDevice = async function (descriptor) {
+    const jsonDescriptor = JSON.stringify(descriptor || {});
+    if (gpuSessionState.deviceDescriptor === jsonDescriptor) {
+      console.log("[GPU Cache] using precached device");
+      return gpuSessionState.device;
+    }
+
+    if (!precaching) {
+      console.log(
+        "[GPU Cache] device params are different: creating device and clearing cache"
+      );
+      clearDatabase();
+    }
+    gpuSessionState = {
+      shader: new Map(),
+      bindgroup: new Map(),
+      layout: new Map(),
+      pipeline: new Map(),
+    };
+    gpuSessionState.deviceDescriptor = jsonDescriptor;
+    const device = await originalRequestDevice.apply(this, [descriptor]);
+    gpuSessionState.device = device;
+    localStorage.setItem("deviceDescriptor", jsonDescriptor);
+
+    function wrapDeviceFunction(itemType, originalFunction) {
+      return (...args) => {
+        const jsonArgs = JSON.stringify(args);
+        const hash = simpleHash(jsonArgs);
+        const cachedItem = gpuSessionState[itemType].get(hash);
+        if (cachedItem !== undefined) {
+          return cachedItem;
+        }
+
+        const item = originalFunction.apply(device, args);
+        item.__gpu_item_type = itemType;
+        item.__gpu_hash = hash;
+        gpuSessionState[itemType].set(hash, item);
+
+        if (!precaching) {
+          console.log(`[GPU Cache] no cached ${itemType} for ${hash}`);
+          if (!requiredItemTypes.has(itemType)) {
+            requiredItemTypes.set(itemType, new Set());
+          }
+          const requiredItems = requiredItemTypes.get(itemType);
+          if (!requiredItems.has(hash)) {
+            requiredItems.add(hash);
+            storeRequiredItems();
+            storeInstance(itemType, hash, args);
+          }
+        }
+        return item;
+      };
+    }
+
+    device.createShaderModule = wrapDeviceFunction(
+      "shader",
+      device.createShaderModule
+    );
+    device.createBindGroupLayout = wrapDeviceFunction(
+      "bindgroup",
+      device.createBindGroupLayout
+    );
+    device.createPipelineLayout = wrapDeviceFunction(
+      "layout",
+      device.createPipelineLayout
+    );
+    device.createRenderPipeline = wrapDeviceFunction(
+      "pipeline",
+      device.createRenderPipeline
+    );
+
+    return device;
+  };
+}
+
+async function createGpuCache() {
+  const cachedDeviceDescriptor = localStorage.getItem("deviceDescriptor");
+  if (cachedDeviceDescriptor === null) {
+    return;
+  }
+  precaching = true;
+  const adapter = await navigator.gpu.requestAdapter();
+  const device = await adapter.requestDevice(
+    JSON.parse(cachedDeviceDescriptor)
+  );
+
+  requiredItemTypes = await fetchRequiredItems();
+  try {
+    await createItemType("shader", async (args) => {
+      return device.createShaderModule(args);
+    });
+    await createItemType("bindgroup", async (args) => {
+      return device.createBindGroupLayout(args);
+    });
+    await createItemType("layout", async (args) => {
+      return device.createPipelineLayout(args);
+    });
+    await createItemType("pipeline", async (args) => {
+      return await device.createRenderPipelineAsync(args);
+    });
+  } finally {
+    precaching = false;
+  }
+  storeRequiredItems();
+  const stats = Object.keys(gpuSessionState).map(
+    (k) => `\n${k}: ${gpuSessionState[k].size ?? "ok"}`
+  );
+  console.log(`[GPU Cache]: preloaded ${stats}`);
+}
+
+async function createItemType(itemType, asyncCreateFunction) {
+  const storedItems = requiredItemTypes.get(itemType) ?? new Set();
+
+  await Promise.all(
+    [...storedItems].map(async (hash) => {
+      try {
+        const args = await fetchInstance(itemType, hash);
+        rehydrateItem(args);
+        const item = await asyncCreateFunction(args[0]);
+        gpuSessionState[itemType].set(hash, item);
+      } catch (e) {
+        console.warn(`[GPU Cache] failed to precreate ${itemType}: ${e}`);
+        storedItems.delete(hash);
+      }
+    })
+  );
+}
+
+function rehydrateItem(currentObject) {
+  if (typeof currentObject !== "object" || currentObject === null) {
+    return;
+  }
+
+  if (Array.isArray(currentObject)) {
+    for (let i = 0; i < currentObject.length; i++) {
+      const item = currentObject[i];
+      if (item && item.__gpu_hash) {
+        const type = item.__gpu_item_type;
+        const hash = item.__gpu_hash;
+        currentObject[i] = gpuSessionState[type].get(hash);
+        if (!currentObject[i]) {
+          throw `failed to rehydrate: missing ${type} with hash ${hash}`;
+        }
+      } else {
+        rehydrateItem(item);
+      }
+    }
+  } else {
+    for (const key in currentObject) {
+      if (Object.prototype.hasOwnProperty.call(currentObject, key)) {
+        const value = currentObject[key];
+        if (value && value.__gpu_hash) {
+          const type = value.__gpu_item_type;
+          const hash = value.__gpu_hash;
+          currentObject[key] = gpuSessionState[type].get(hash);
+          if (!currentObject[key]) {
+            throw `failed to rehydrate: missing ${type} with hash ${hash}`;
+          }
+        } else {
+          rehydrateItem(value);
+        }
+      }
+    }
+  }
+}

package/index.html

@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bevy Explorer</title>
+    <style>
+        video {
+            display: none;
+        }        
+        body { 
+            font-family: 'Inter', sans-serif; /* Changed to Inter */
+            margin: 0px; 
+            background-color: #f7fafc; /* Lighter gray */
+            color: #2d3748; /* Darker gray for text */
+            display: flex;
+            flex-direction: column;
+            align-items: center; /* Center content */
+        }
+        .container {
+            background-color: #ffffff;
+            padding: 25px;
+            margin-top: 100px;
+            border-radius: 8px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            width: 100%;
+            max-width: 700px; /* Max width for content */
+        }
+        h1 { 
+            color: #2b6cb0; /* Tailwind blue-700 */
+            text-align: center;
+            margin-bottom: 20px;
+        }
+        label {
+            display: block;
+            margin-top: 15px;
+            margin-bottom: 5px;
+            font-weight: 600;
+            color: #4a5568; /* Tailwind gray-700 */
+        }
+        input[type="text"] {
+            width: calc(100% - 22px); /* Full width minus padding and border */
+            padding: 10px;
+            border: 1px solid #cbd5e0; /* Tailwind gray-400 */
+            border-radius: 6px;
+            font-size: 1rem;
+            color: #2d3748;
+        }
+        input[type="text"]:focus {
+            outline: none;
+            border-color: #4299e1; /* Tailwind blue-500 */
+            box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+        }
+        button { 
+            padding: 12px 20px; 
+            background-color: #3182ce; /* Tailwind blue-600 */
+            color: white; 
+            border: none; 
+            border-radius: 6px; 
+            cursor: pointer; 
+            margin-top: 25px;
+            font-size: 1rem;
+            font-weight: 600;
+            transition: background-color 0.2s ease-in-out;
+            display: block; /* Make button block to center it */
+            margin-left: auto;
+            margin-right: auto;
+        }
+        button:hover { 
+            background-color: #2b6cb0; /* Tailwind blue-700 */
+        }
+        #canvas-parent {
+            display: none;
+            width: 100%;
+            height: 100vh;
+        }
+        #mygame-canvas {
+            width: 100%;
+            height: 100%;
+            display: block; /* Remove extra space below canvas */
+        }
+        /* Added for better structure and responsiveness */
+        .input-group {
+            margin-bottom: 15px;
+        }
+
+        /* For smaller screens */
+        @media (max-width: 600px) {
+            body {
+                margin: 10px;
+            }
+            .container {
+                padding: 20px;
+            }
+            h1 {
+                font-size: 1.8rem;
+            }
+            button {
+                width: 100%;
+            }
+        }
+    </style>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div id="header" class="container">
+        <h1>Bevy Explorer</h1>
+
+        <div class="input-group">
+            <label for="initialRealm">Initial Realm:</label>
+            <input type="text" id="initialRealm" name="initialRealm" placeholder="e.g., world_alpha">
+        </div>
+
+        <div class="input-group">
+            <label for="location">Location:</label>
+            <input type="text" id="location" name="location" placeholder="e.g., 0,0">
+        </div>
+
+        <div class="input-group">
+            <label for="system scene">System Scene:</label>
+            <input type="text" id="systemScene" name="systemScene" placeholder="">
+        </div>
+
+        <button id="initButton" disabled="true">Loading...</button>
+        
+    </div>
+    <div id="canvas-parent">
+        <canvas id="mygame-canvas"></canvas> 
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/livekit-client/dist/livekit-client.umd.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script>
+    <script type="module" src="main.js"></script>
+</body>
+</html>