@needle-tools/gltf-progressive 3.6.0-canary.5401de9 → 3.6.0

package/examples/react-three-fiber/package.json

@@ -4,17 +4,17 @@
   "main": "src/index.tsx",
   "dependencies": {
     "@needle-tools/gltf-progressive": "file:../..",
-    "@react-three/drei": "^9.0.1",
-    "@react-three/fiber": "^8.0.6",
+    "@react-three/drei": "9.122.0",
+    "@react-three/fiber": "8.18.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "three": "0.162.0",
+    "three": "0.184.0",
     "typescript": "4.7.4"
   },
   "devDependencies": {
     "@types/react": "18.0.15",
     "@types/react-dom": "17.0.0",
-    "@types/three": "0.162.0",
+    "@types/three": "0.184.0",
     "@vitejs/plugin-basic-ssl": "^1.0.1",
     "@vitejs/plugin-react": "^1.3.0",
     "typescript": "4.1.3",

package/examples/react-three-fiber/src/App.tsx

@@ -8,8 +8,8 @@ import { OrbitControls, useGLTF } from '@react-three/drei'
 import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js'
 
 import { useNeedleProgressive } from '@needle-tools/gltf-progressive'
-
-const modelUrl = 'https://cloud.needle.tools/-/assets/Z23hmXBZ21QnG-Yt9m7-world/the-forgotten-knight-baked.glb'
+// @ts-ignore shared plain JS example helpers
+import { MODEL_URLS } from '../../shared/example-utils.js'
 
 function RoomEnvironmentSetup() {
   const { gl, scene } = useThree()
@@ -29,9 +29,9 @@ function RoomEnvironmentSetup() {
   return null
 }
 
-function Model({ controlsRef }: { controlsRef: React.MutableRefObject<any> }) {
+function Model({ controlsRef, url }: { controlsRef: React.MutableRefObject<any>, url: string }) {
   const { gl, camera } = useThree()
-  const { scene } = useGLTF(modelUrl, false, false, (loader) => {
+  const { scene } = useGLTF(url, false, false, (loader) => {
     useNeedleProgressive(loader as any, gl as any)
   })
 
@@ -63,17 +63,31 @@ function Model({ controlsRef }: { controlsRef: React.MutableRefObject<any> }) {
 
 export default function App() {
   const controlsRef = React.useRef<any>(null)
+  const [sceneIndex, setSceneIndex] = React.useState(0)
+  const modelUrl = MODEL_URLS[sceneIndex % MODEL_URLS.length]
+
+  React.useEffect(() => {
+    ;(globalThis as any).__GLTF_PROGRESSIVE_R3F_EXAMPLE__ = {
+      currentUrl: modelUrl,
+      sceneIndex,
+    }
+  }, [modelUrl, sceneIndex])
 
   return (
-    <Canvas
-      camera={{ position: [0.5, 1.3, 2], fov: 60, near: 0.01, far: 200 }}>
-      <RoomEnvironmentSetup />
-      <gridHelper args={[50, 50, 0x444444, 0x666666]} />
-      <directionalLight position={[-50, 20, 50]} intensity={1} />
-      <OrbitControls ref={controlsRef} enableDamping dampingFactor={0.08} target={[0, 0.5, 0]} />
-      <React.Suspense fallback={null}>
-        <Model controlsRef={controlsRef} />
-      </React.Suspense>
-    </Canvas>
+    <>
+      <div className="example-toolbar">
+        <button type="button" onClick={() => setSceneIndex((sceneIndex + 1) % MODEL_URLS.length)}>Change scene</button>
+      </div>
+      <Canvas
+        camera={{ position: [0.5, 1.3, 2], fov: 60, near: 0.01, far: 200 }}>
+        <RoomEnvironmentSetup />
+        <gridHelper args={[50, 50, 0x444444, 0x666666]} />
+        <directionalLight position={[-50, 20, 50]} intensity={1} />
+        <OrbitControls ref={controlsRef} enableDamping dampingFactor={0.08} target={[0, 0.5, 0]} />
+        <React.Suspense fallback={null}>
+          <Model key={modelUrl} controlsRef={controlsRef} url={modelUrl} />
+        </React.Suspense>
+      </Canvas>
+    </>
   )
 }

package/examples/shared/example-utils.js

@@ -1,4 +1,13 @@
-export const DEFAULT_MODEL_URL = "https://cloud.needle.tools/-/assets/Z23hmXBZ21QnG-Yt9m7-world/the-forgotten-knight-baked.glb";
+export const MODEL_URLS = [
+    "https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb",
+    "https://engine.needle.tools/demos/gltf-progressive/assets/putti gruppe/model.glb",
+    "https://engine.needle.tools/demos/gltf-progressive/assets/cyberpunk/model.glb",
+    "https://engine.needle.tools/demos/gltf-progressive/assets/robot/model.glb",
+    "https://engine.needle.tools/demos/gltf-progressive/assets/vase/model.glb",
+    "https://engine.needle.tools/demos/gltf-progressive/assets/jupiter_und_ganymed/model.glb",
+];
+
+export const DEFAULT_MODEL_URL = MODEL_URLS[0];
 
 export function createExampleState(label) {
     const state = {
@@ -9,6 +18,12 @@ export function createExampleState(label) {
         frames: 0,
         loaded: false,
         renderer: "",
+        currentUrl: "",
+        sceneIndex: 0,
+        sceneLoads: 0,
+        progressiveObjects: 0,
+        lodChanges: 0,
+        lodChangeTypes: [],
     };
     globalThis.__GLTF_PROGRESSIVE_EXAMPLE__ = state;
 
@@ -43,11 +58,68 @@ export function markError(state, error) {
     updateStatus(message);
 }
 
-export function getModelUrl(params = new URLSearchParams(globalThis.location?.search || "")) {
+export function getModelUrl(params = new URLSearchParams(globalThis.location?.search || ""), sceneIndex = 0) {
     const asset = params.get("asset");
     if (asset === "minimal") return createMinimalGltfUrl();
     if (asset) return new URL(asset, globalThis.location?.href).href;
-    return DEFAULT_MODEL_URL;
+    return MODEL_URLS[normalizeSceneIndex(sceneIndex)];
+}
+
+export function normalizeSceneIndex(sceneIndex) {
+    return ((sceneIndex % MODEL_URLS.length) + MODEL_URLS.length) % MODEL_URLS.length;
+}
+
+export function getInitialSceneIndex(params = new URLSearchParams(globalThis.location?.search || "")) {
+    const scene = Number(params.get("scene"));
+    return Number.isFinite(scene) ? normalizeSceneIndex(scene) : 0;
+}
+
+export function createSceneChangeButton(onChange) {
+    const document = globalThis.document;
+    if (!document) return null;
+
+    const toolbar = document.createElement("div");
+    toolbar.className = "example-toolbar";
+    const button = document.createElement("button");
+    button.type = "button";
+    button.textContent = "Change scene";
+    button.addEventListener("click", () => onChange());
+    toolbar.append(button);
+    document.body.append(toolbar);
+    return button;
+}
+
+export function markSceneLoading(state, sceneIndex, url) {
+    state.sceneIndex = normalizeSceneIndex(sceneIndex);
+    state.currentUrl = url;
+    updateStatus("loading");
+}
+
+export function markSceneLoaded(state, runtime, root) {
+    state.loaded = true;
+    state.sceneLoads += 1;
+    state.progressiveObjects = countProgressiveObjects(runtime, root);
+}
+
+export function trackLODChanges(lodsManager, state, notify) {
+    return lodsManager.addEventListener?.("changed", event => {
+        state.lodChanges += 1;
+        state.lodChangeTypes.push(event.type);
+        if (notify) notify(event);
+    });
+}
+
+export function countProgressiveObjects(runtime, root) {
+    const progressive = runtime.NEEDLE_progressive;
+    if (!progressive || !root) return 0;
+
+    let count = 0;
+    root.traverse?.(object => {
+        if (object?.isMesh && progressive.hasLODLevelAvailable(object)) count += 1;
+        const material = object?.material;
+        if (material && progressive.hasLODLevelAvailable(material)) count += 1;
+    });
+    return count;
 }
 
 export function createMinimalGltfUrl() {

package/examples/shared/example.css

@@ -25,3 +25,20 @@ canvas {
     font-size: 12px;
     line-height: 1.3;
 }
+
+.example-toolbar {
+    position: fixed;
+    right: 12px;
+    top: 12px;
+    z-index: 10;
+}
+
+.example-toolbar button {
+    padding: 6px 9px;
+    border: 1px solid rgba(245, 247, 250, 0.35);
+    background: rgba(18, 22, 28, 0.78);
+    color: #f5f7fa;
+    font: inherit;
+    font-size: 12px;
+    cursor: pointer;
+}

package/examples/shared/runtime.js

@@ -1,5 +1,5 @@
 const DEFAULT_THREE_VERSION = "0.184.0";
-const DEFAULT_PROGRESSIVE_VERSION = "3.6.0-canary.027a4c9";
+const DEFAULT_PROGRESSIVE_VERSION = "3.6.0-canary.5401de9";
 
 export async function loadRuntime(options = {}) {
     const params = options.params || new URLSearchParams(options.search || globalThis.location?.search || "");
@@ -29,5 +29,6 @@ export async function loadRuntime(options = {}) {
         RoomEnvironment: roomEnvironmentModule.RoomEnvironment,
         useNeedleProgressive: progressiveModule.useNeedleProgressive,
         LODsManager: progressiveModule.LODsManager,
+        NEEDLE_progressive: progressiveModule.NEEDLE_progressive,
     };
 }

package/examples/threejs/index.html

@@ -9,10 +9,10 @@
     <script type="importmap">
     {
         "imports": {
-            "three": "https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js",
-            "three/addons/": "https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/",
-            "three/examples/": "https://cdn.jsdelivr.net/npm/three@latest/examples/",
-            "@needle-tools/gltf-progressive": "https://cdn.jsdelivr.net/npm/@needle-tools/gltf-progressive/gltf-progressive.min.js"
+            "three": "https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.module.js",
+            "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.184.0/examples/jsm/",
+            "three/examples/": "https://cdn.jsdelivr.net/npm/three@0.184.0/examples/",
+            "@needle-tools/gltf-progressive": "https://cdn.jsdelivr.net/npm/@needle-tools/gltf-progressive@3.6.0-canary.5401de9/gltf-progressive.min.js"
         }
     }
     </script>

package/examples/webgpu/main.js

@@ -3,16 +3,23 @@ import {
     addLoadedScene,
     createOrbitControls,
     createExampleState,
+    createSceneChangeButton,
+    getInitialSceneIndex,
     getModelUrl,
     markError,
     markReady,
+    markSceneLoaded,
+    markSceneLoading,
+    normalizeSceneIndex,
     resizeRenderer,
     setupScene,
     setupRoomEnvironment,
+    trackLODChanges,
     updateStatus,
 } from "../shared/example-utils.js";
 
 const state = createExampleState("webgpu");
+const params = new URLSearchParams(location.search);
 
 try {
     const runtime = await loadRuntime();
@@ -32,20 +39,45 @@ try {
     });
     const controls = createOrbitControls(runtime.OrbitControls, camera, canvas);
 
-    const loader = new runtime.GLTFLoader();
-    runtime.useNeedleProgressive(loader, renderer);
+    let root = null;
+    let sceneIndex = getInitialSceneIndex(params);
+    let loadToken = 0;
+    let rendererLabel = "";
 
-    const root = await new Promise((resolve, reject) => {
-        loader.load(getModelUrl(), gltf => resolve(addLoadedScene(THREE, scene, gltf, { camera, controls })), undefined, reject);
-    });
+    const firstLoader = new runtime.GLTFLoader();
+    const lodsManager = runtime.useNeedleProgressive(firstLoader, renderer);
+    trackLODChanges(lodsManager, state);
 
     window.addEventListener("resize", () => {
         resizeRenderer(renderer, camera, window.innerWidth, window.innerHeight, window.devicePixelRatio);
     });
 
+    async function loadScene(nextIndex) {
+        const token = ++loadToken;
+        sceneIndex = normalizeSceneIndex(nextIndex);
+        const url = getModelUrl(params, sceneIndex);
+        markSceneLoading(state, sceneIndex, url);
+
+        const loader = token === 1 ? firstLoader : new runtime.GLTFLoader();
+        if (token !== 1) runtime.useNeedleProgressive(loader, renderer);
+
+        const nextRoot = await new Promise((resolve, reject) => {
+            loader.load(url, gltf => resolve(addLoadedScene(THREE, scene, gltf, { camera, controls })), undefined, reject);
+        });
+
+        if (token !== loadToken) {
+            nextRoot.removeFromParent();
+            return;
+        }
+
+        root?.removeFromParent();
+        root = nextRoot;
+        markSceneLoaded(state, runtime, root);
+        if (rendererLabel) markReady(state, rendererLabel);
+    }
+
     function render() {
         state.frames += 1;
-        root.rotation.y += 0.01;
         controls.update();
         renderer.render(scene, camera);
         requestAnimationFrame(render);
@@ -53,7 +85,10 @@ try {
 
     const backend = getBackendType(renderer);
     if (backend !== "webgpu") throw new Error(`Expected WebGPU backend, got ${backend}.`);
-    markReady(state, backend);
+    rendererLabel = backend;
+    createSceneChangeButton(() => loadScene(sceneIndex + 1).catch(error => markError(state, error)));
+    await loadScene(sceneIndex);
+    markReady(state, rendererLabel);
     render();
 }
 catch (error) {

package/examples/worker-rendering/main.js

@@ -3,6 +3,7 @@ import {
     applyCameraState,
     createExampleState,
     createOrbitControls,
+    createSceneChangeButton,
     markError,
     markReady,
     serializeCamera,
@@ -10,6 +11,8 @@ import {
 } from "../shared/example-utils.js";
 
 const state = createExampleState("worker-rendering");
+const params = new URLSearchParams(location.search);
+const rendererMode = params.get("renderer") === "webgpu" ? "webgpu" : "webgl";
 
 try {
     if (!globalThis.OffscreenCanvas) throw new Error("OffscreenCanvas is not available in this browser.");
@@ -36,9 +39,20 @@ try {
             sendCamera();
             markReady(state, message.renderer || "worker-webgl");
         }
+        else if (message.type === "scene-loaded") {
+            state.loaded = true;
+            state.currentUrl = message.url || "";
+            state.sceneIndex = message.sceneIndex || 0;
+            state.sceneLoads = message.sceneLoads || state.sceneLoads + 1;
+            state.progressiveObjects = message.progressiveObjects || 0;
+        }
         else if (message.type === "frame") {
             state.frames = message.frames;
         }
+        else if (message.type === "lod-change") {
+            state.lodChanges += 1;
+            state.lodChangeTypes.push(message.lodType);
+        }
         else if (message.type === "error") {
             markError(state, message.message || "Worker rendering failed.");
         }
@@ -67,6 +81,9 @@ try {
     }
 
     controls.addEventListener("change", sendCamera);
+    createSceneChangeButton(() => {
+        worker.postMessage({ type: "change-scene" });
+    });
 
     function updateControls() {
         controls.update();
@@ -82,9 +99,10 @@ try {
         pixelRatio: window.devicePixelRatio || 1,
         camera: serializeCamera(camera),
         search: location.search,
+        renderer: rendererMode,
     }, [offscreenCanvas]);
     window.addEventListener("resize", postResize);
-    updateStatus("worker-webgl");
+    updateStatus(rendererMode === "webgpu" ? "worker-webgpu" : "worker-webgl");
 }
 catch (error) {
     markError(state, error);

package/examples/worker-rendering/worker.js

@@ -2,20 +2,44 @@ import { loadRuntime } from "../shared/runtime.js";
 import {
     addLoadedScene,
     applyCameraState,
+    getInitialSceneIndex,
     getModelUrl,
+    markSceneLoaded,
+    markSceneLoading,
+    normalizeSceneIndex,
     resizeRenderer,
     serializeCamera,
     setupScene,
     setupRoomEnvironment,
+    trackLODChanges,
 } from "../shared/example-utils.js";
 
 let renderer;
 let camera;
+let scene;
 let root;
+let runtime;
+let THREE;
+let lodsManager;
+let rendererMode = "webgl";
+let rendererLabel = "worker-webgl";
 let frames = 0;
 let width = 1;
 let height = 1;
 let pixelRatio = 1;
+let params = new URLSearchParams();
+let sceneIndex = 0;
+let sceneLoads = 0;
+let loadToken = 0;
+const workerState = {
+    loaded: false,
+    currentUrl: "",
+    sceneIndex: 0,
+    sceneLoads: 0,
+    progressiveObjects: 0,
+    lodChanges: 0,
+    lodChangeTypes: [],
+};
 
 self.addEventListener("message", event => {
     const message = event.data || {};
@@ -34,44 +58,109 @@ self.addEventListener("message", event => {
     else if (message.type === "camera") {
         if (camera && message.camera) applyCameraState(camera, message.camera);
     }
+    else if (message.type === "change-scene") {
+        loadScene(sceneIndex + 1).catch(error => {
+            self.postMessage({ type: "error", message: error?.stack || error?.message || String(error) });
+        });
+    }
 });
 
 async function init(message) {
     width = message.width || width;
     height = message.height || height;
     pixelRatio = message.pixelRatio || pixelRatio;
+    rendererMode = message.renderer === "webgpu" ? "webgpu" : "webgl";
+    rendererLabel = rendererMode === "webgpu" ? "worker-webgpu" : "worker-webgl";
 
-    const params = new URLSearchParams(message.search || "");
-    const runtime = await loadRuntime({ params });
-    const THREE = runtime.THREE;
+    params = new URLSearchParams(message.search || "");
+    sceneIndex = getInitialSceneIndex(params);
+    runtime = await loadRuntime({ params });
+    THREE = runtime.THREE;
 
-    renderer = new THREE.WebGLRenderer({ canvas: message.canvas, antialias: true });
+    renderer = await createRenderer(message.canvas);
     const setup = setupScene(THREE, width, height);
-    const scene = setup.scene;
+    scene = setup.scene;
     camera = setup.camera;
     resizeRenderer(renderer, camera, width, height, pixelRatio);
     if (message.camera) applyCameraState(camera, message.camera);
-    setupRoomEnvironment(THREE, runtime.RoomEnvironment, renderer, scene);
+    setupRoomEnvironment(THREE, runtime.RoomEnvironment, renderer, scene, rendererMode === "webgpu" ? {
+        PMREMGenerator: runtime.THREE_WEBGPU.PMREMGenerator,
+    } : undefined);
+
+    const firstLoad = await loadScene(sceneIndex);
+    self.postMessage({ type: "ready", renderer: rendererLabel, camera: serializeCamera(camera), fit: firstLoad?.fit });
+
+    const requestFrame = callback => setTimeout(() => callback(performance.now()), 16);
+    function render() {
+        frames += 1;
+        renderer.render(scene, camera);
+        if (frames === 1 || frames % 10 === 0) self.postMessage({ type: "frame", frames });
+        requestFrame(render);
+    }
+    render();
+}
+
+async function createRenderer(canvas) {
+    if (rendererMode === "webgpu") {
+        if (!self.navigator?.gpu) throw new Error("WebGPU is not available in this worker.");
+        const WebGPURenderer = runtime.THREE.WebGPURenderer || runtime.THREE_WEBGPU.WebGPURenderer;
+        if (!WebGPURenderer) throw new Error("WebGPURenderer is not available in this Three.js runtime.");
+        const webgpuRenderer = new WebGPURenderer({ canvas, antialias: true });
+        await webgpuRenderer.init?.();
+        const backend = getBackendType(webgpuRenderer);
+        if (backend !== "webgpu") throw new Error(`Expected Worker WebGPU backend, got ${backend}.`);
+        return webgpuRenderer;
+    }
+    return new THREE.WebGLRenderer({ canvas, antialias: true });
+}
+
+function getBackendType(renderer) {
+    const backend = renderer.backend;
+    if (backend?.isWebGPUBackend === true) return "webgpu";
+    if (backend?.isWebGLBackend === true) return "webgl";
+    if (renderer.isWebGPURenderer === true) return "webgpu";
+    return backend?.constructor?.name || renderer.constructor?.name || "unknown";
+}
+
+async function loadScene(nextIndex) {
+    const token = ++loadToken;
+    sceneIndex = normalizeSceneIndex(nextIndex);
+    const url = getModelUrl(params, sceneIndex);
+    markSceneLoading(workerState, sceneIndex, url);
 
     const loader = new runtime.GLTFLoader();
-    runtime.useNeedleProgressive(loader, renderer);
+    lodsManager = runtime.useNeedleProgressive(loader, renderer);
+    if (sceneLoads === 0) {
+        trackLODChanges(lodsManager, workerState, event => {
+            self.postMessage({ type: "lod-change", lodType: event.type, level: event.level });
+        });
+    }
+
     let fit = null;
-    root = await new Promise((resolve, reject) => {
-        loader.load(getModelUrl(params), gltf => resolve(addLoadedScene(THREE, scene, gltf, {
+    const nextRoot = await new Promise((resolve, reject) => {
+        loader.load(url, gltf => resolve(addLoadedScene(THREE, scene, gltf, {
             camera,
             onFit: result => fit = result,
         })), undefined, reject);
     });
 
-    self.postMessage({ type: "ready", renderer: "worker-webgl", camera: serializeCamera(camera), fit });
-
-    const requestFrame = self.requestAnimationFrame || (callback => setTimeout(() => callback(performance.now()), 16));
-    function render() {
-        frames += 1;
-        root.rotation.y += 0.01;
-        renderer.render(scene, camera);
-        if (frames % 10 === 0) self.postMessage({ type: "frame", frames });
-        requestFrame(render);
+    if (token !== loadToken) {
+        nextRoot.removeFromParent();
+        return null;
     }
-    render();
+
+    root?.removeFromParent();
+    root = nextRoot;
+    sceneLoads += 1;
+    markSceneLoaded(workerState, runtime, root);
+    workerState.sceneLoads = sceneLoads;
+
+    self.postMessage({
+        type: "scene-loaded",
+        url,
+        sceneIndex,
+        sceneLoads,
+        progressiveObjects: workerState.progressiveObjects,
+    });
+    return { fit };
 }