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

package/main.js

@@ -0,0 +1,284 @@
+// Import the wasm-bindgen generated JS glue code and Rust functions
+import { initGpuCache } from "./gpu_cache.js";
+import init, { engine_init, engine_run } from "./pkg/webgpu_build.js"; // Ensure this path is correct
+
+const initialRealmInput = document.getElementById("initialRealm");
+const locationInput = document.getElementById("location");
+const systemSceneInput = document.getElementById("systemScene");
+const initButton = document.getElementById("initButton");
+const canvas = document.getElementById("canvas-parent");
+const header = document.getElementById("header");
+
+let initialRealmGroup = document.getElementById("initialRealm")?.parentElement;
+let locationGroup = document.getElementById("location")?.parentElement;
+let systemSceneGroup = document.getElementById("systemScene")?.parentElement;
+
+var autoStart = true;
+
+function populateInputsFromQueryParams() {
+  const queryParams = new URLSearchParams(window.location.search);
+
+  const manualParams = queryParams.get("manualParams");
+  if (manualParams) {
+    autoStart = false;
+  }
+
+  const initialRealmParam = queryParams.get("initialRealm");
+  if (initialRealmInput && initialRealmParam) {
+    initialRealmInput.value = decodeURIComponent(initialRealmParam);
+  } else if (initialRealmInput) {
+    initialRealmInput.value = "https://realm-provider-ea.decentraland.org/main";
+  }
+  const locationParam = queryParams.get("location");
+  if (locationInput && locationParam) {
+    locationInput.value = decodeURIComponent(locationParam);
+  } else if (locationInput) {
+    locationInput.value = "";
+  }
+  const systemSceneParam = queryParams.get("systemScene");
+  if (systemSceneInput && systemSceneParam) {
+    systemSceneInput.value = decodeURIComponent(systemSceneParam);
+  } else if (systemSceneInput) {
+    systemSceneInput.value = "https://dclexplorer.github.io/bevy-ui-scene/BevyUiScene";
+  }
+
+  initialRealmInput.disabled = autoStart;
+  locationInput.disabled = autoStart;
+  systemSceneInput.disabled = autoStart;
+}
+function hideHeader() {
+  if (header) header.style.display = "none";
+  if (canvas) canvas.style.display = "block";
+}
+
+if ("serviceWorker" in navigator) {
+  window.addEventListener("load", () => {
+    navigator.serviceWorker
+      .register("service_worker.js")
+      .then((registration) => {
+        console.log(
+          "Page: Service Worker registered successfully with scope: ",
+          registration.scope
+        );
+      })
+      .catch((error) => {
+        console.log("Page: Service Worker registration failed: ", error);
+      });
+  });
+
+  // make sure the worker stays around after a hard reload
+  // 1. Check if a service worker is active and controlling the page.
+  if (navigator.serviceWorker && navigator.serviceWorker.controller) {
+    // SUCCESS CASE:
+    // If the recovery flag is present, it means we just successfully
+    // recovered from a hard reload. We can now remove the flag.
+    if (sessionStorage.getItem('sw_reloaded')) {
+      console.log('Service Worker recovery successful. Cleaning up flag.');
+      sessionStorage.removeItem('sw_reloaded');
+    }
+    // Everything is fine, let the app load.
+  } else {
+    // 2. RECOVERY CASE: No service worker is in control.
+    // This could be a first visit or a hard reload.
+    if (navigator.serviceWorker && navigator.serviceWorker.getRegistration) {
+      navigator.serviceWorker.getRegistration().then(registration => {
+        // We only try to recover if a service worker is already registered.
+        if (registration) {
+          // Prevent an infinite reload loop.
+          if (sessionStorage.getItem('sw_reloaded')) {
+            sessionStorage.removeItem('sw_reloaded');
+            console.error('Service Worker failed to take control after reload.');
+          } else {
+            // Set the flag and perform a standard reload.
+            console.log('Page is uncontrolled. Reloading to activate Service Worker...');
+            sessionStorage.setItem('sw_reloaded', 'true');
+            window.location.reload();
+          }
+        }
+      });
+    }
+  }
+}
+
+async function initEngine() {
+  populateInputsFromQueryParams();
+
+  if (initButton) {
+    initButton.disabled = true;
+    if (autoStart) {
+      initButton.textContent = "Autostarting .."
+    } else {
+      initButton.textContent = "Loading ..."
+    }
+  }
+
+  const wasmUrl = "./pkg/webgpu_build_bg.wasm";
+
+  try {
+    const compiledModule = await WebAssembly.compileStreaming(fetch(wasmUrl));
+
+    const initialMemoryPages = 640; // setting initial memory high causes malloc failures
+    const maximumMemoryPages = 65536;
+    const sharedMemory = new WebAssembly.Memory({
+      initial: initialMemoryPages,
+      maximum: maximumMemoryPages,
+      shared: true,
+    });
+    window.wasm_memory = sharedMemory;
+
+    window.setVideoSource = (video, src) => {
+      async function isHlsStream(url) {
+        try {
+          const response = await fetch(url, {
+            method: "HEAD",
+            mode: "cors",
+          });
+
+          if (!response.ok) {
+            return false;
+          }
+
+          const contentType = response.headers.get("Content-Type");
+
+          if (contentType) {
+            return (
+              contentType.includes("application/vnd.apple.mpegurl") ||
+              contentType.includes("application/x-mpegURL")
+            );
+          }
+
+          return false;
+        } catch (error) {
+          return false;
+        }
+      }
+
+      if (video.canPlayType("application/vnd.apple.mpegurl")) {
+        video.src = src;
+      } else if (Hls.isSupported()) {
+        // check if we need hls
+        setTimeout(async () => {
+          if (await isHlsStream(src)) {
+            var hls = new Hls();
+            hls.loadSource(src);
+            hls.attachMedia(video);
+          } else {
+            video.src = src;
+          }
+        }, 0);
+      }
+    };
+
+    window.spawn_and_init_sandbox = async () => {
+      var timeoutId;
+      return new Promise((resolve, _reject) => {
+        // var sandboxWorker = new Worker(sandboxJs, { type: "module" });
+        var sandboxWorker = new Worker("sandbox_worker.js", { type: "module" });
+
+        var timeoutCount = 0;
+        let logTimeout = () => {
+          console.log(
+            "[Main JS] Still waiting for worker to init",
+            timeoutCount
+          );
+          timeoutCount += 1;
+          timeoutId = setTimeout(logTimeout, 5000);
+        };
+        timeoutId = setTimeout(logTimeout, 5000);
+
+        sandboxWorker.onmessage = (workerEvent) => {
+          if (workerEvent.data.type === "READY") {
+            sandboxWorker.postMessage({
+              type: "INIT_WORKER",
+              payload: {
+                compiledModule,
+                sharedMemory,
+              },
+            });
+          }
+          if (workerEvent.data.type === "INIT_COMPLETE") {
+            resolve();
+          }
+          if (workerEvent.data.type === "INIT_FAILED") {
+            console.log("[Main JS] Sandbox init failed; retrying");
+            sandboxWorker = new Worker(sandboxJs, { type: "module" });
+          }
+        };
+      }).finally(() => {
+        clearTimeout(timeoutId);
+      });
+    };
+
+    await init({ module_or_path: compiledModule, memory: sharedMemory });
+    console.log("[Main JS] Main application WebAssembly module initialized.");
+
+    let res = await engine_init();
+    console.log(
+      "[Main JS] Main application WebAssembly module custom initialized: ",
+      res
+    );
+
+    // start asset loader thread
+    await new Promise((resolve, _reject) => {
+      const assetLoader = new Worker("asset_loader.js", { type: "module" });
+      assetLoader.onmessage = (workerEvent) => {
+        if (workerEvent.data.type === "READY") {
+          assetLoader.postMessage({
+            type: "INIT_ASSET_LOADER",
+            payload: {
+              compiledModule,
+              sharedMemory,
+            },
+          });
+        }
+        if (workerEvent.data.type === "INITIALIZED") {
+          resolve();
+        }
+      };
+    });
+  } catch (error) {
+    console.error(
+      "[Main JS] Error during Wasm initialization or setup:",
+      error
+    );
+    if (initButton) {
+      initButton.textContent = "Load Failed";
+    }
+  }
+}
+
+function start() {
+  const initialRealm = initialRealmInput.value;
+  const location = locationInput.value;
+  const systemScene = systemSceneInput.value;
+  console.log(
+    `[Main JS] "Go" button clicked. Initial Realm: "${initialRealm}", Location: "${location}", System Scene: "${systemScene}"`
+  );
+  hideHeader();
+
+  const platform = (() => {
+    if (navigator.userAgent.includes("Mac")) return "macos";
+    if (navigator.userAgent.includes("Win")) return "windows";
+    if (navigator.userAgent.includes("Linux")) return "linux";
+    return "unknown";
+  })();
+
+  engine_run(platform, initialRealm, location, systemScene, true, 1e6);
+}
+
+initButton.onclick = start;
+
+Promise.all([initEngine(), initGpuCache()])
+  .then(() => {
+    if (autoStart) {
+      start()
+    } else {
+      initButton.disabled = false;
+      initButton.textContent = "Go";
+    }
+  })
+  .catch((e) => {
+    console.log("error", e);
+    initButton.textContent = "Load Failed";
+  });
+

package/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@dcl-regenesislabs/bevy-explorer-web",
+  "version": "0.1.0-18229784557.commit-ef374b9",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/decentraland/bevy-explorer.git"
+  },
+  "commit": "ef374b9d611f6fcc5cdad1664cdbcc92d9a8a4a9"
+}

package/sandbox_worker.js

@@ -0,0 +1,394 @@
+// sandbox_worker.js - Runs inside the final Web Worker, the most isolated environment.
+
+// Import the wasm-bindgen generated JS glue code.
+import init, * as wasm_bindgen_exports from "./pkg/webgpu_build.js";
+
+// self.WebSocket = {}
+
+console.log("[Scene Worker] Starting");
+
+const allowListES2020 = [
+  "Array",
+  "ArrayBuffer",
+  "BigInt",
+  "BigInt64Array",
+  "BigUint64Array",
+  "Boolean",
+  "DataView",
+  "Date",
+  "decodeURI",
+  "decodeURIComponent",
+  "encodeURI",
+  "encodeURIComponent",
+  "Error",
+  "escape",
+  "eval",
+  "EvalError",
+  "fetch",
+  "Float32Array",
+  "Float64Array",
+  "Function",
+  "Infinity",
+  "Int16Array",
+  "Int32Array",
+  "Int8Array",
+  "isFinite",
+  "isNaN",
+  "JSON",
+  "Map",
+  "Math",
+  "NaN",
+  "Number",
+  "Object",
+  "parseFloat",
+  "parseInt",
+  "Promise",
+  "Proxy",
+  "RangeError",
+  "ReferenceError",
+  "Reflect",
+  "RegExp",
+  "Set",
+  "SharedArrayBuffer",
+  "String",
+  "Symbol",
+  "SyntaxError",
+  "TypeError",
+  "Uint16Array",
+  "Uint32Array",
+  "Uint8Array",
+  "Uint8ClampedArray",
+  "undefined",
+  "unescape",
+  "URIError",
+  "WeakMap",
+  "WebSocket",
+  "WeakSet",
+];
+
+const jsContext = Object.create(null);
+var jsProxy = undefined;
+var jsPreamble = undefined;
+function createJsContext(wasmApi, context) {
+  const isSuper = wasmApi.is_super(context);
+
+  Object.defineProperty(jsContext, "console", {
+    value: {
+      log: console.log.bind(console),
+      info: console.info.bind(console),
+      debug: console.debug.bind(console),
+      trace: console.trace.bind(console),
+      warning: console.error.bind(console),
+      error: console.error.bind(console),
+    },
+  });
+
+  const ops = Object.create(null);
+  for (const exportName in wasmApi) {
+    if (exportName.substring(0, 3) === "op_") {
+      Object.defineProperty(ops, exportName, {
+        configurable: false,
+        get() {
+          return (...args) => {
+            // wrap ops to inject context arg
+            return wasmApi[exportName](context, ...args);
+          };
+        },
+      });
+    }
+  }
+  const core = Object.create(null);
+  Object.defineProperty(core, "ops", {
+    configurable: false,
+    value: ops,
+  });
+  const Deno = Object.create(null);
+  Object.defineProperty(Deno, "core", {
+    configurable: false,
+    value: core,
+  });
+  Object.defineProperty(jsContext, "Deno", {
+    configurable: false,
+    value: Deno,
+  });
+
+  Object.defineProperty(jsContext, "require", {
+    configurable: false,
+    value: require,
+  });
+  Object.defineProperty(jsContext, "localStorage", {
+    configurable: false,
+    value: createWebStorageProxy(ops),
+  });
+
+  // if (!isSuper) {
+  //   Object.defineProperty(jsContext, "fetch", {
+  //     configurable: false,
+  //     get() {
+  //       return (url, options) => {    
+  //         console.error('[Sandbox worker] Fetch request to', url, 'was intentionally blocked by the proxy.');
+  //         return Promise.reject(new Error('This request has been intentionally failed by the proxy.'));
+  //       };    
+  //     }
+  //   })
+  //   Object.defineProperty(jsContext, "WebSocket", {
+  //     configurable: false,
+  //     get() {
+  //       console.log("get WebSocket!!!")
+  //       return {}
+  //     }
+  //   })
+  // }
+
+  jsProxy = new Proxy(jsContext, {
+    has() {
+      return true;
+    },
+    get(_target, propKey, _receiver) {
+      if (propKey === "eval") return eval;
+      if (propKey === "globalThis") return jsProxy;
+      if (propKey === "global") return jsProxy;
+      if (propKey === "undefined") return undefined;
+      if (jsContext[propKey] !== undefined) return jsContext[propKey];
+      if (allowListES2020.includes(propKey)) {
+        return globalThis[propKey];
+      }
+      return undefined;
+    },
+  });
+
+  const contextKeys = Object.getOwnPropertyNames(jsContext);
+  const allGlobals = [...new Set([...allowListES2020, ...contextKeys])];
+  jsPreamble = allGlobals
+    .map((key) => `const ${key} = globalThis.${key};`)
+    .join("\n");
+}
+
+const defer = Promise.resolve().then.bind(Promise.resolve());
+
+async function runWithScope(code) {
+  const module = { exports: {} };
+
+  const func = new Function(
+    "globalThis",
+    "module",
+    "exports",
+    `${jsPreamble}\n\n${code}`
+  );
+
+  await defer(() => func.call(jsProxy, jsProxy, module, module.exports));
+  return module.exports;
+}
+
+// prefetch all the requireable scripts before we replace the fetch function
+var allowedModules = undefined;
+
+async function preloadModules(context, fetch_fn) {
+  const modules = [
+    "~system/BevyExplorerApi",
+    "~system/CommunicationsController",
+    "~system/CommsApi",
+    "~system/EngineApi",
+    "~system/EnvironmentApi",
+    "~system/EthereumController",
+    "~system/Players",
+    "~system/PortableExperiences",
+    "~system/RestrictedActions",
+    "~system/Runtime",
+    "~system/Scene",
+    "~system/SignedFetch",
+    "~system/Testing",
+    "~system/UserActionModule",
+    "~system/UserIdentity",
+    "~system/AdaptationLayerHelper",
+  ];
+
+  const promises = modules.map(async (key) => {
+    try {
+      const code = fetch_fn(context, key);
+      const result = await runWithScope(code);
+      return [key, result];
+    } catch (e) {
+      return undefined
+    }
+  });
+
+  allowedModules = Object.fromEntries((await Promise.all(promises)).filter(e => e));
+}
+
+function require(moduleName) {
+  let code = allowedModules[moduleName];
+  if (!code) {
+    throw "can't find module `" + moduleName + "`";
+  }
+
+  return code;
+}
+
+self.onmessage = async (event) => {
+  if (event.data && event.data.type === "INIT_WORKER") {
+    const { compiledModule, sharedMemory } = event.data.payload;
+
+    if (!compiledModule || !sharedMemory) {
+      console.error("[Sandbox Worker] Invalid payload received.");
+      return;
+    }
+
+    var wasm_init;
+    try {
+      // init wasm
+      wasm_init = await init({
+        module_or_path: compiledModule,
+        memory: sharedMemory,
+      });
+    } catch (e) {
+      console.error(
+        "[Scene Worker] Error during Wasm instantiation or setup:",
+        e
+      );
+      postMessage({ type: `INIT_FAILED` });
+      self.close();
+      return;
+    }
+
+    postMessage({ type: `INIT_COMPLETE` });
+        
+    // add listener to clean up on unhandled rejections
+    self.addEventListener("unhandledrejection", (event) => {
+      // Prevent the default browser action (logging to console)
+      event.preventDefault();
+
+      console.error(
+        "[Sandbox worker] FATAL: Unhandled Promise Rejection in Worker:",
+        event.reason
+      );
+
+      try {
+        wasm_init.__wbindgen_thread_destroy();
+      } catch (cleanupError) {
+        console.error(
+          "[Sandbox worker] Error during WASM cleanup:",
+          cleanupError
+        );
+      }
+
+      self.close();
+    });
+
+    var wasmContext;
+    try {
+      wasmContext = await wasm_bindgen_exports.wasm_init_scene();
+    } catch (e) {
+      console.error("[Scene Worker] Error during scene construction:", e);
+      try {
+        wasm_init.drop_context(wasmContext);
+      } catch (e) {}
+      wasm_init.__wbindgen_thread_destroy();
+      self.close();
+      return;
+    }
+
+    try {
+      createJsContext(wasm_bindgen_exports, wasmContext);
+      const ops = jsContext.Deno.core.ops;
+
+      // preload modules
+      await preloadModules(wasmContext, wasm_bindgen_exports.builtin_module);
+
+      const sceneCode = wasmContext.get_source();
+      let module = await runWithScope(sceneCode);
+
+      // send any initial rpc requests
+      ops.op_crdt_send_to_renderer([]);
+
+      await module.onStart();
+
+      var elapsed = 0;
+      const startTime = new Date();
+      var prevElapsed = 0;
+      var elapsed = 0;
+      var count = 0;
+      while (ops.op_continue_running()) {
+        const dt = (elapsed - prevElapsed) / 1000;
+        await module.onUpdate(dt);
+        prevElapsed = elapsed;
+        elapsed = new Date() - startTime;
+        count += 1;
+      }
+      console.log("[Scene Worker] exiting gracefully");
+    } catch (e) {
+      console.error("[Scene Worker] Error during scene execution:", e);
+    }
+
+    try {
+      wasm_init.drop_context(wasmContext);
+    } catch (e) {}
+    wasm_init.__wbindgen_thread_destroy();
+    self.close();
+  }
+};
+
+function createWebStorageProxy(ops) {
+  return new Proxy(
+    {},
+    {
+      get(_target, prop, _receiver) {
+        if (prop === "length") {
+          return ops.op_webstorage_length();
+        }
+
+        if (prop === "getItem") {
+          return (key) => ops.op_webstorage_get(String(key));
+        }
+        if (prop === "setItem") {
+          return (key, value) =>
+            ops.op_webstorage_set(String(key), String(value));
+        }
+        if (prop === "key") {
+          return (index) => ops.op_webstorage_key(index);
+        }
+        if (prop === "removeItem") {
+          return (key) => ops.op_webstorage_remove(String(key));
+        }
+        if (prop === "clear") {
+          return () => ops.op_webstorage_clear();
+        }
+
+        // Handle direct property access like `localStorage.myKey`
+        return ops.op_storage_get(String(prop));
+      },
+
+      set(_target, prop, value, _receiver) {
+        ops.op_storage_set(String(prop), String(value));
+        return true;
+      },
+
+      deleteProperty(_target, prop) {
+        ops.op_webstorage_remove(String(prop));
+        return true;
+      },
+
+      ownKeys(_target) {
+        return ops.op_webstorage_iterate_keys();
+      },
+
+      getOwnPropertyDescriptor(_target, prop) {
+        if (ops.op_webstorage_has(String(prop))) {
+          return {
+            value: ops.op_webstorage_get(String(prop)),
+            writable: true,
+            enumerable: true,
+            configurable: true,
+          };
+        }
+        return undefined;
+      },
+
+      has(_target, prop) {
+        return ops.op_webstorage_has(String(prop));
+      },
+    }
+  );
+}
+
+postMessage({ type: `READY` });

package/serve.json

@@ -0,0 +1,21 @@
+{
+  "headers": [
+    {
+      "source": "**/*",
+      "headers": [
+        {
+          "key": "Cross-Origin-Opener-Policy",
+          "value": "same-origin"
+        },
+        {
+          "key": "Cross-Origin-Embedder-Policy",
+          "value": "require-corp"
+        },
+        {
+          "key": "Cross-Origin-Resource-Policy",
+          "value": "cross-origin"
+        }
+      ]
+    }
+  ]
+}