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

package/CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to this package will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [3.6.0] - 2026-07-07
+- version bump
+
+## [3.6.0-beta.1] - 2026-06-09
+- Fix: texture LOD selection regressed for meshes that only have texture LODs (no mesh LODs); screen coverage is now computed unconditionally so texture LODs update with camera distance again.
+
 ## [3.6.0-alpha.3] - 2026-05-27
 - Fix: stale progressive mesh and texture LOD requests no longer overwrite newer explicit targets, while still allowing useful intermediate LODs to apply during rapid target changes.
 - Fix: progressive worker/debug imports no longer assume `window` exists, and texture LOD selection now uses the renderer pixel ratio so main-thread and worker/offscreen renderers can make matching LOD decisions.

package/README.md

@@ -26,19 +26,19 @@ useNeedleProgressive(gltf_loader, webgl_renderer)
 
 Examples are in the `/examples` directory. Live versions can be found in the links below.  
 
-To view them locally, run `npx serve examples` and open the printed URL.
+To view the examples locally with the current checkout's runtime, run `npm run examples:serve` and open the printed examples index URL.
 
 - [Loading comparisons](https://stackblitz.com/edit/gltf-progressive-comparison?file=package.json,index.html)
 - [Vanilla three.js](https://engine.needle.tools/demos/gltf-progressive/threejs/) - multiple models and animations
-- `examples/webgpu` - WebGPU renderer
-- `examples/offscreen` - main-thread OffscreenCanvas rendering
-- `examples/worker-rendering` - OffscreenCanvas rendering in a Worker
 - [React Three Fiber](https://engine.needle.tools/demos/gltf-progressive/r3f/)
 - \<model-viewer\> 
   - [single \<model-viewer> element](https://engine.needle.tools/demos/gltf-progressive/modelviewer) 
   - [multiple \<model-viewer> elements](https://engine.needle.tools/demos/gltf-progressive/modelviewer-multiple)
 - [Needle Engine](https://stackblitz.com/edit/needle-engine-gltf-progressive?file=src%2Fmain.ts)
 - [Needle Cloud](https://cloud.needle.tools/view?file=Z23hmXBZN45qJ-ZN45qJ-world)
+- `examples/webgpu` - WebGPU renderer
+- `examples/offscreen` - main-thread OffscreenCanvas rendering
+- `examples/worker-rendering` - OffscreenCanvas rendering in a Worker
 
 **Interactive Examples**:
 - [Stackblitz](https://stackblitz.com/@marwie/collections/gltf-progressive)
@@ -79,10 +79,10 @@ gltfLoader.load(url, gltf => {
     <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>
@@ -90,7 +90,7 @@ gltfLoader.load(url, gltf => {
 ```
 
 
-## react three fiber
+## React Three Fiber
 
 Full react-three-fiber example at: `examples/react-three-fiber`
 
@@ -105,7 +105,7 @@ function MyModel() {
 }
 ```
 
-## google \<model-viewer\>
+## Google \<model-viewer\>
 
 Full model-viewer example at: `examples/modelviewer.html`
 
@@ -115,13 +115,13 @@ Full model-viewer example at: `examples/modelviewer.html`
     <script type="importmap">
         {
             "imports": {
-                "three": "https://unpkg.com/three/build/three.module.js",
-                "three/": "https://unpkg.com/three/"
+                "three": "https://unpkg.com/three@0.184.0/build/three.module.js",
+                "three/": "https://unpkg.com/three@0.184.0/"
             }
         }
     </script>
     <!-- Include gltf-progressive -->
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@needle-tools/gltf-progressive/gltf-progressive.min.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@needle-tools/gltf-progressive@3.6.0-canary.5401de9/gltf-progressive.min.js"></script>
     <!-- Include model-viewer -->
     <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
 </head>
@@ -134,7 +134,7 @@ Full model-viewer example at: `examples/modelviewer.html`
 
 ## Needle Engine
 
-[Needle Engine](https://needle.tools) natively supports progressive loading of these glTF files! See [docs.needle.tools](https://docs.needle.tools) for more information. 
+[Needle Engine](https://needle.tools) natively supports progressive loading of these glTF files! See [docs.needle.tools/gltf-progressive](https://engine.needle.tools/docs/gltf-progressive/) for more information. 
 
 
 # How can I generate assets for progressive loading
@@ -209,6 +209,8 @@ Call `getRaycastMesh(<your_mesh_object>)`
 # Extension
 Read more about the [NEEDLE_progressive extension](./NEEDLE_progressive/README.md)
 
+# Documentation
+Read more about Needle Progressive GLTF loading in the [Needle Engine documentation](https://docs.needle.tools/engine/gltf-progressive/)
 
 # Contact ✒️
 <b>[🌵 needle — tools for creators](https://needle.tools)</b> • 

package/examples/modelviewer-multiple.html

@@ -13,13 +13,13 @@
     <script type="importmap">
         {
             "imports": {
-                "three": "https://unpkg.com/three/build/three.module.js",
-                "three/": "https://unpkg.com/three/"
+                "three": "https://unpkg.com/three@0.184.0/build/three.module.js",
+                "three/": "https://unpkg.com/three@0.184.0/"
             }
         }
     </script>
     <script type="module"
-        src="https://cdn.jsdelivr.net/npm/@needle-tools/gltf-progressive/gltf-progressive.min.js"></script>
+        src="https://cdn.jsdelivr.net/npm/@needle-tools/gltf-progressive@3.6.0-canary.5401de9/gltf-progressive.min.js"></script>
     <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
 </head>
 
@@ -123,4 +123,4 @@
     }
 </style>
 
-</html>
+</html>

package/examples/modelviewer.html

@@ -7,14 +7,14 @@
     <script type="importmap">
         {
             "imports": {
-                "three": "https://unpkg.com/three/build/three.module.js",
-                "three/": "https://unpkg.com/three/"
+                "three": "https://unpkg.com/three@0.184.0/build/three.module.js",
+                "three/": "https://unpkg.com/three@0.184.0/"
             }
         }
     </script>
     <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
     <script type="module"
-        src="https://cdn.jsdelivr.net/npm/@needle-tools/gltf-progressive/gltf-progressive.min.js"></script>
+        src="https://cdn.jsdelivr.net/npm/@needle-tools/gltf-progressive@3.6.0-canary.5401de9/gltf-progressive.min.js"></script>
 </head>
 
 <model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb" ar shadow-intensity="1"
@@ -31,4 +31,4 @@
     }
 </style>
 
-</html>
+</html>

package/examples/offscreen/main.js

@@ -3,15 +3,22 @@ import {
     addLoadedScene,
     createOrbitControls,
     createExampleState,
+    createSceneChangeButton,
+    getInitialSceneIndex,
     getModelUrl,
     markError,
     markReady,
+    markSceneLoaded,
+    markSceneLoading,
+    normalizeSceneIndex,
     resizeRenderer,
     setupScene,
     setupRoomEnvironment,
+    trackLODChanges,
 } from "../shared/example-utils.js";
 
 const state = createExampleState("offscreen");
+const params = new URLSearchParams(location.search);
 
 try {
     if (!globalThis.OffscreenCanvas) throw new Error("OffscreenCanvas is not available in this browser.");
@@ -30,6 +37,9 @@ try {
     const { scene, camera } = setupScene(THREE, width, height);
     setupRoomEnvironment(THREE, runtime.RoomEnvironment, renderer, scene);
     const controls = createOrbitControls(runtime.OrbitControls, camera, visibleCanvas);
+    let root = null;
+    let sceneIndex = getInitialSceneIndex(params);
+    let loadToken = 0;
 
     function resize() {
         width = window.innerWidth;
@@ -41,24 +51,46 @@ try {
     }
     resize();
 
-    const loader = new runtime.GLTFLoader();
-    runtime.useNeedleProgressive(loader, renderer);
-    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);
+
+    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);
+        markReady(state, "offscreen-webgl");
+    }
 
     window.addEventListener("resize", resize);
+    createSceneChangeButton(() => loadScene(sceneIndex + 1).catch(error => markError(state, error)));
 
     function render() {
         state.frames += 1;
-        root.rotation.y += 0.01;
         controls.update();
         renderer.render(scene, camera);
         visibleContext.transferFromImageBitmap(offscreenCanvas.transferToImageBitmap());
         requestAnimationFrame(render);
     }
 
-    markReady(state, "offscreen-webgl");
+    await loadScene(sceneIndex);
     render();
 }
 catch (error) {