@plasius/gpu-shared 0.1.2 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasius/gpu-shared",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Shared browser-safe demo runtime and asset helpers for the Plasius gpu-* package family.",
   "type": "module",
   "sideEffects": false,

package/src/asset-url.js

@@ -0,0 +1,10 @@
+const INLINE_BRIGANTINE_GLTF_URL =
+  "data:application/json;base64,ewogICJhc3NldCI6IHsKICAgICJ2ZXJzaW9uIjogIjIuMCIsCiAgICAiZ2VuZXJhdG9yIjogIlBsYXNpdXMgZGVtbyBhc3NldCBnZW5lcmF0b3IiCiAgfSwKICAic2NlbmUiOiAwLAogICJzY2VuZXMiOiBbCiAgICB7CiAgICAgICJub2RlcyI6IFswXQogICAgfQogIF0sCiAgIm5vZGVzIjogWwogICAgewogICAgICAibWVzaCI6IDAsCiAgICAgICJuYW1lIjogImJyaWdhbnRpbmUiLAogICAgICAiZXh0cmFzIjogewogICAgICAgICJwaHlzaWNzIjogewogICAgICAgICAgInNoYXBlIjogImJveCIsCiAgICAgICAgICAiaGFsZkV4dGVudHMiOiBbMS4zNSwgMC45NSwgMy45XSwKICAgICAgICAgICJtYXNzIjogMzIwMCwKICAgICAgICAgICJyZXN0aXR1dGlvbiI6IDAuMjIsCiAgICAgICAgICAibGluZWFyRGFtcGluZyI6IDAuMDQsCiAgICAgICAgICAiYW5ndWxhckRhbXBpbmciOiAwLjA4LAogICAgICAgICAgIndhdGVybGluZSI6IDAuNDIKICAgICAgICB9CiAgICAgIH0KICAgIH0KICBdLAogICJtZXNoZXMiOiBbCiAgICB7CiAgICAgICJuYW1lIjogImJyaWdhbnRpbmUtaHVsbCIsCiAgICAgICJwcmltaXRpdmVzIjogWwogICAgICAgIHsKICAgICAgICAgICJhdHRyaWJ1dGVzIjogewogICAgICAgICAgICAiUE9TSVRJT04iOiAwCiAgICAgICAgICB9LAogICAgICAgICAgImluZGljZXMiOiAxLAogICAgICAgICAgIm1hdGVyaWFsIjogMAogICAgICAgIH0KICAgICAgXQogICAgfQogIF0sCiAgIm1hdGVyaWFscyI6IFsKICAgIHsKICAgICAgIm5hbWUiOiAicGFpbnRlZC1odWxsIiwKICAgICAgInBick1ldGFsbGljUm91Z2huZXNzIjogewogICAgICAgICJiYXNlQ29sb3JGYWN0b3IiOiBbMC41NiwgMC4zMywgMC4yMiwgMV0sCiAgICAgICAgIm1ldGFsbGljRmFjdG9yIjogMC4wOCwKICAgICAgICAicm91Z2huZXNzRmFjdG9yIjogMC45MgogICAgICB9CiAgICB9CiAgXSwKICAiYnVmZmVycyI6IFsKICAgIHsKICAgICAgInVyaSI6ICJkYXRhOmFwcGxpY2F0aW9uL29jdGV0LXN0cmVhbTtiYXNlNjQsbXBtWnZ3QUFBTC9OekV6QW1wbVpQd0FBQUwvTnpFekF6Y3lzdnpNenM3NHpNN08vemN5c1B6TXpzNzR6TTdPL0FBQ2d2ODNNVEwzTnpNdy9BQUNnUDgzTVRMM056TXcvQUFBQUFPeFJPTDR6TTROQUFBQUFBR1ptNWo0QUFIQkFNek56dnpNenN6NmFtUm5BTXpOelB6TXpzejZhbVJuQXpjeE12ejBLMXo3TnpFdy96Y3hNUHowSzF6N056RXcvQUFBQUFETXpjejltWm1hL0FBQUNBQU1BQUFBREFBRUFBZ0FFQUFVQUFnQUZBQU1BQkFBSEFBVUFCQUFHQUFjQUJRQUhBQVlBQUFBQkFBa0FBQUFKQUFnQUNBQUpBQXdBQWdBSUFBd0FBd0FNQUFrQUFnQU1BQW9BQXdBTEFBd0FBZ0FLQUFRQUF3QUZBQXNBQ2dBTUFBc0FBQUFJQUFJQUFRQURBQWtBQkFBS0FBWUFCUUFHQUFzQUFnQUtBQXNBQWdBTEFBTUEiLAogICAgICAiYnl0ZUxlbmd0aCI6IDI5NAogICAgfQogIF0sCiAgImJ1ZmZlclZpZXdzIjogWwogICAgewogICAgICAiYnVmZmVyIjogMCwKICAgICAgImJ5dGVPZmZzZXQiOiAwLAogICAgICAiYnl0ZUxlbmd0aCI6IDE1NiwKICAgICAgInRhcmdldCI6IDM0OTYyCiAgICB9LAogICAgewogICAgICAiYnVmZmVyIjogMCwKICAgICAgImJ5dGVPZmZzZXQiOiAxNTYsCiAgICAgICJieXRlTGVuZ3RoIjogMTM4LAogICAgICAidGFyZ2V0IjogMzQ5NjMKICAgIH0KICBdLAogICJhY2Nlc3NvcnMiOiBbCiAgICB7CiAgICAgICJidWZmZXJWaWV3IjogMCwKICAgICAgImJ5dGVPZmZzZXQiOiAwLAogICAgICAiY29tcG9uZW50VHlwZSI6IDUxMjYsCiAgICAgICJjb3VudCI6IDEzLAogICAgICAidHlwZSI6ICJWRUMzIiwKICAgICAgIm1pbiI6IFstMS4zNSwgLTAuNSwgLTMuMl0sCiAgICAgICJtYXgiOiBbMS4zNSwgMC45NSwgNC4xXQogICAgfSwKICAgIHsKICAgICAgImJ1ZmZlclZpZXciOiAxLAogICAgICAiYnl0ZU9mZnNldCI6IDAsCiAgICAgICJjb21wb25lbnRUeXBlIjogNTEyMywKICAgICAgImNvdW50IjogNjksCiAgICAgICJ0eXBlIjogIlNDQUxBUiIsCiAgICAgICJtYXgiOiBbMTJdLAogICAgICAibWluIjogWzBdCiAgICB9CiAgXQp9Cg==";
+
+export function resolveShowcaseAssetUrl(baseUrl = import.meta.url) {
+  try {
+    return new URL("../assets/brigantine.gltf", baseUrl);
+  } catch {
+    return new URL(INLINE_BRIGANTINE_GLTF_URL);
+  }
+}

package/src/index.d.ts

@@ -40,6 +40,7 @@ export interface MountGpuShowcaseResult {
   readonly state: Record<string, unknown>;
   readonly shipModel: GltfModel;
   readonly canvas: HTMLCanvasElement;
+  destroy(): void;
 }
 
 export const showcaseFocusModes: readonly ShowcaseFocusMode[];

package/src/index.js

@@ -1,3 +1,5 @@
+export { resolveShowcaseAssetUrl } from "./asset-url.js";
+
 export const showcaseFocusModes = Object.freeze([
   "integrated",
   "lighting",
@@ -8,10 +10,6 @@ export const showcaseFocusModes = Object.freeze([
   "debug",
 ]);
 
-export function resolveShowcaseAssetUrl(baseUrl = import.meta.url) {
-  return new URL("../assets/brigantine.gltf", baseUrl);
-}
-
 export async function loadGltfModel(url) {
   const module = await import("./gltf-loader.js");
   return module.loadGltfModel(url);

package/src/showcase-runtime.js

@@ -31,6 +31,7 @@ import {
   getPhysicsWorkerManifest,
 } from "@plasius/gpu-physics/browser";
 
+import { resolveShowcaseAssetUrl } from "./asset-url.js";
 import { loadGltfModel } from "./gltf-loader.js";
 
 const STYLE_ID = "plasius-shared-3d-showcase-style";
@@ -76,10 +77,6 @@ const UNIT_BOX_MESH = Object.freeze({
   ]),
 });
 
-export function resolveShowcaseAssetUrl(baseUrl = import.meta.url) {
-  return new URL("../assets/brigantine.gltf", baseUrl);
-}
-
 function injectStyles() {
   if (document.getElementById(STYLE_ID)) {
     return;
@@ -1794,6 +1791,9 @@ function syncTextState(state, shipModel) {
 export async function mountGpuShowcase(options = {}) {
   injectStyles();
   const root = options.root ?? document.body;
+  const previousMarkup = root.innerHTML;
+  const previousRenderGameToText = window.render_game_to_text;
+  const previousAdvanceTime = window.advanceTime;
   const focus = options.focus ?? new URLSearchParams(window.location.search).get("focus") ?? "integrated";
   const dom = buildDemoDom(root, {
     packageName: options.packageName ?? "@plasius/gpu-demo-viewer",
@@ -1813,7 +1813,14 @@ export async function mountGpuShowcase(options = {}) {
   syncTextState(state, shipModel);
 
   const ctx = dom.canvas.getContext("2d");
+  let destroyed = false;
+  let frameHandle = null;
+
   const renderFrame = (nowMs) => {
+    if (destroyed) {
+      return;
+    }
+
     if (!state.paused) {
       if (state.lastTimeMs == null) {
         state.lastTimeMs = nowMs;
@@ -1831,29 +1838,59 @@ export async function mountGpuShowcase(options = {}) {
     state.demoDescription = resolveSceneDescription(state, options, shipModel).description;
     renderScene(ctx, dom.canvas, state, shipModel, dom);
     syncTextState(state, shipModel);
-    requestAnimationFrame(renderFrame);
+    frameHandle = requestAnimationFrame(renderFrame);
   };
 
-  dom.pauseButton.addEventListener("click", () => {
+  const handlePauseClick = () => {
     state.paused = !state.paused;
     dom.pauseButton.textContent = state.paused ? "Resume" : "Pause";
-  });
-  dom.stressToggle.addEventListener("change", () => {
+  };
+  const handleStressChange = () => {
     state.stress = dom.stressToggle.checked;
-  });
-  dom.focusMode.addEventListener("change", () => {
+  };
+  const handleFocusChange = () => {
     state.focus = dom.focusMode.value;
     Object.assign(state.camera, {
       ...CAMERA_PRESETS[state.focus],
       target: vec3(...CAMERA_PRESETS[state.focus].target),
     });
-  });
+  };
 
-  requestAnimationFrame(renderFrame);
+  dom.pauseButton.addEventListener("click", handlePauseClick);
+  dom.stressToggle.addEventListener("change", handleStressChange);
+  dom.focusMode.addEventListener("change", handleFocusChange);
+
+  frameHandle = requestAnimationFrame(renderFrame);
   return {
     state,
     shipModel,
     canvas: dom.canvas,
+    destroy() {
+      if (destroyed) {
+        return;
+      }
+
+      destroyed = true;
+      if (frameHandle != null) {
+        cancelAnimationFrame(frameHandle);
+      }
+      dom.pauseButton.removeEventListener("click", handlePauseClick);
+      dom.stressToggle.removeEventListener("change", handleStressChange);
+      dom.focusMode.removeEventListener("change", handleFocusChange);
+      root.innerHTML = previousMarkup;
+
+      if (typeof previousRenderGameToText === "function") {
+        window.render_game_to_text = previousRenderGameToText;
+      } else {
+        delete window.render_game_to_text;
+      }
+
+      if (typeof previousAdvanceTime === "function") {
+        window.advanceTime = previousAdvanceTime;
+      } else {
+        delete window.advanceTime;
+      }
+    },
   };
 }