@needle-tools/gltf-progressive 1.2.4-beta.1 → 1.2.5

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).
 
+## [1.2.5] - 2023-07-09
+- Remove: Frustum cull check because we're already operating on the latest renderlist
+
+## [1.2.5-beta] - 2023-07-09
+- Change: Update skinned mesh bounding box every 30 frames using the lowres mesh version
+
 ## [1.2.4-beta.1] - 2023-07-09
 - Add: LODsManager `manual` property which can be used to manually update the LODs in the scene by calling `LODsManager.update(scene, camera)`
 - Fix: updating LODs in WebXR

package/README.md

@@ -17,6 +17,7 @@ Examples are in the `/examples` directory. Live versions can be found in the lin
 - \<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)
 
 **Interactive Examples**:
 - [Stackblitz](https://stackblitz.com/@marwie/collections/gltf-progressive)

package/dist/CHANGELOG.md

@@ -0,0 +1,139 @@
+# Changelog
+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).
+
+## [1.2.5-beta] - 2023-07-09
+- Change: Update skinned mesh bounding box every 30 frames using the lowres mesh version
+
+## [1.2.4-beta.1] - 2023-07-09
+- Add: LODsManager `manual` property which can be used to manually update the LODs in the scene by calling `LODsManager.update(scene, camera)`
+- Fix: updating LODs in WebXR
+
+## [1.2.4-beta] - 2023-07-05
+- Change: `createLoaders` now returns created loaders and decoders to be re-used
+
+## [1.2.3-beta] - 2023-07-04
+- Add: support for transmissive objects
+
+## [1.2.3-alpha.3] - 2023-07-01
+- Add: prevent loading highres textures when user has enabled data-save mode
+
+## [1.2.3-alpha.2] - 2023-06-27
+- Fix: error caused by parser associations containing `undefined` value
+
+## [1.2.3-alpha.1] - 2023-06-25
+- Internal: rename `setRaycastMesh` to `registerRaycastMesh`
+
+## [1.2.3-alpha] - 2023-06-24
+- Change: automatically change LOD update interval based on framerate
+
+## [1.2.2-alpha.4] - 2023-06-20
+- Add: Register version in global "GLTF_PROGRESSIVE_VERSION" variable
+- Add: `<model-viewer>` elements added document at any time are now properly registered 
+- Fix: LOD updates for multiple `<model-viewer>` elements
+- Fix: Initial render tick for a few frames for `<model-viewer>` to trigger LOD updates when the model-viewer element is not animated or interacted with
+- Change: `<model-viewer>` elements will fetch a slightly higher texture LOD
+
+## [1.2.1-alpha.4] - 2023-06-19
+- Fix: SkinnedMesh bounds calculation
+
+## [1.2.1-alpha.3] - 2023-06-15
+- update the README
+
+## [1.2.1-alpha.2] - 2023-06-15
+- fix: Ortographic camera causing LODs being falsely updated
+- fix: regression introduced in 1.2.1-alpha
+- fix: error when trying to load a LOD glTF directly 
+- fix: issues caused by instanceof in local development environments
+
+## [1.2.0-alpha.9] - 2023-06-13
+- fix: issue where skinned mesh matrix was falsely applied to calculate screen size
+- fix: use bounding box from SkinnedMesh object
+
+## [1.2.0-alpha.6] - 2023-06-12
+- fix: minor bug where opened glTF has `NEEDLE_progressive` extension but no lods array because the glTF is a LOD variant
+
+## [1.2.0-alpha.5] - 2023-06-10
+- fix: safeguard when `registerMesh` or `registerTexture` are being called with invalid data
+- examples: update vanilla threejs example
+
+## [1.2.0-alpha.4] - 2023-06-07
+- add: `useRaycastMeshes` method:
+  ```ts
+    // call to enable raycasting with low poly raycast meshes
+    // this can be done once in your project
+    useRaycastMeshes(true);
+    
+    // then use the raycaster as usual
+    const raycaster = new Raycaster();
+    raycaster.setFromCamera(mouse, camera);
+    const intersects = raycaster.intersectObjects(scene.children, true);
+    
+    // call to disable raycasting with low polwy meshes
+    useRaycastMeshes(false);
+  ```
+
+## [1.2.0-alpha.3] - 2023-06-06
+- add: automatically load the highest LOD first to show a slightly better quality level as soon as possible
+- fix: improve Texture LOD selection by taking LOD level height into account
+- fix: correctly assign LOD level information to initially loaded texture
+
+## [1.1.0-alpha.2] - 2023-06-05
+- fix: register LOD information for meshes that don't have associations
+
+## [1.1.0-alpha] - 2023-06-03
+- add: loading of multiple texture LOD levels
+- fix: issue where material LODs where not updated when the material was cloned
+- change: clamp screen coverage when near plane intersects with the object bounds
+- change: skip CubeCamera setup
+- change: handle cases where an object has only texture LODs
+
+## [1.0.0-alpha.19] - 2023-05-31
+- add `LODsManager.plugins` getter 
+
+## [1.0.0-alpha.18] - 2023-05-30
+- update README
+
+## [1.0.0-alpha.16] - 2023-05-29
+- fix: LODs manager now clamps to LOD 0 if the near plane is inside the bounds
+- change: Ignore certain material in lods update loop 
+
+## [1.0.0-alpha.15] - 2023-05-25
+- add: `getRaycastMesh` method
+- add: LODsManager does now expose `targetTriangleDensity`. The target triangle density is the desired max amount of triangles on screen when the mesh is filling the screen. 
+- change: create LODsManager via `LODsManager.get(renderer)`
+
+## [1.0.0-alpha.13] - 2023-05-24
+- fix: modelviewer error when trying to access undefined texture extensions
+
+## [1.0.0-alpha.13] - 2023-05-24
+- add: vanilla three.js example
+- fix: texture LODs losing filter setting
+
+## [1.0.0-alpha.12] - 2023-05-19
+- fix: update LODs when using postprocessing
+
+## [1.0.0-alpha.11] - 2023-05-17
+- add: expose `setDracoDecoderLocation` and `setKTX2TranscoderLocation`
+- fix: allow using draco decoder and ktx2 transcoder from local filepath
+
+## [1.0.0-alpha.10] - 2023-05-07
+- fix: progressive assets are now only updated during the main canvas render call and not e.g. when rendering to a texture
+
+## [1.0.0-alpha.9] - 2023-05-03
+- fix: handle loading of ShaderMaterial for VRM progressive textures
+
+## [1.0.0-alpha.8] - 2023-05-03
+- fix: handle transparent materials
+
+## [1.0.0-alpha.7] - 2023-05-01
+- fix: Handle modelviewer `src` set as property but not as attribute
+- change: Remove sourcemap
+
+## [1.0.0-alpha.6] - 2023-05-01
+- fix: LOD mesh assignment for multi-material meshes (meshes with multiple primitives)
+
+## [1.0.0-alpha.5] - 2023-04-30
+- initial version

package/dist/README.md

@@ -0,0 +1,125 @@
+# glTF progressive
+
+Support for loading of glTF or GLB files with progressive mesh or texture data for three.js based engines.
+
+## Features
+- Automatic loading of mesh and texture LODs.   
+- High quality LOD levels are loaded on demand based on screen density.
+- Use low-poly LOD meshes for raycasting which allows the usage of high-poly meshes with smooth interaction
+- Use [cloud.needle.tools](https://cloud.needle.tools) for processing glTF, GLB & VRM assets
+
+## Examples
+
+Examples are in the `/examples` directory. Live versions can be found in the links below.  
+
+- [Vanilla three.js](https://engine.needle.tools/demos/gltf-progressive/threejs/) - multiple models and animations
+- [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)
+
+**Interactive Examples**:
+- [Stackblitz](https://stackblitz.com/@marwie/collections/gltf-progressive)
+- [Codesandbox](https://codesandbox.io/dashboard/sandboxes/gltf-progressive)
+
+
+<br/>
+<video width="320" controls autoplay src="https://engine.needle.tools/demos/gltf-progressive/video.mp4">
+    <source src="https://engine.needle.tools/demos/gltf-progressive/video.mp4" type="video/mp4">
+</video>
+
+
+## Usage
+
+### react three fiber
+
+Full example in `examples/react-three-fiber`
+
+```ts
+function ChurchModel() {
+  const { gl } = useThree()
+  const url = 'https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb'
+  const { scene } = useGLTF(url, false, false, (loader) => {
+    useNeedleProgressive(url, gl, loader as any)
+  })
+  return <primitive object={scene} />
+}
+```
+
+### threejs (CDN, no bundler)
+
+The full example can be found at `examples/threejs`
+
+```html
+<head>
+    <!-- Add the threejs import map to your HTML head section -->
+    <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-engine/gltf-progressive": "https://www.unpkg.com/@needle-tools/gltf-progressive@latest"
+        }
+    }
+    </script>
+</head>
+```
+
+In your script:
+```ts
+const gltfLoader = new GLTFLoader();
+
+const url = "https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb";
+
+// register the progressive loader
+useNeedleProgressive(url, renderer, gltfLoader)
+
+// just call the load method as usual
+gltfLoader.load(url, gltf => {
+    console.log(gltf)
+    scene.add(gltf.scene)
+    gltf.scene.position.y += .95;
+})
+```
+
+
+### \<model-viewer\>
+
+The example can be found in `examples/modelviewer.html`
+
+```html
+<head>
+    <!-- Include threejs import map -->
+    <script type="importmap">
+        {
+            "imports": {
+                "three": "https://unpkg.com/three/build/three.module.js",
+                "three/": "https://unpkg.com/three/"
+            }
+        }
+    </script>
+    <!-- Include gltf-progressive -->
+    <script type="module" src="https://www.unpkg.com/@needle-tools/gltf-progressive@latest"></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>
+<body>
+
+    <model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb" camera-controls auto-rotate></model-viewer>
+    
+</body>
+```
+
+### 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.
+
+
+# Contact ✒️
+<b>[🌵 needle — tools for creators](https://needle.tools)</b> • 
+[Twitter](https://twitter.com/NeedleTools) • 
+[Discord](https://discord.needle.tools) • 
+[Forum](https://forum.needle.tools)
+

package/dist/examples/modelviewer-multiple.html

@@ -0,0 +1,125 @@
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>gltf-progressive & model-viewer</title>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
+        rel="stylesheet">
+
+    <script type="importmap">
+        {
+            "imports": {
+                "three": "https://unpkg.com/three/build/three.module.js",
+                "three/": "https://unpkg.com/three/"
+            }
+        }
+    </script>
+    <script type="module" src="https://www.unpkg.com/@needle-tools/gltf-progressive@latest"></script>
+    <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
+</head>
+
+<div class="layout">
+    <div class="card">
+        <h1>glTF Progressive</h1>
+        <h3><a href="https://www.npmjs.com/package/@needle-tools/gltf-progressive"
+                target="_blank">@needle-tools/gltf-progressive</a></h3>
+        <p>Load high quality assets in model-viewer without having to worry about loading times, bandwidth or
+            performance.</p>
+        <p>Get started now at <a href="https://cloud.needle.tools">cloud.needle.tools</a></p>
+    </div>
+    <model-viewer src="https://api.cloud.needle.tools/v1/public/9162350/2b4509376/" ar auto-rotate shadow-intensity=".5"
+        camera-controls touch-action="pan-y" autoplay></model-viewer>
+
+
+    <model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/vase/model.glb" ar
+        shadow-intensity=".5" camera-controls touch-action="pan-y"></model-viewer>
+
+    <model-viewer src="https://api.cloud.needle.tools/v1/public/908aa03/29b3b3743/" ar auto-rotate shadow-intensity=".5"
+        camera-controls touch-action="pan-y" autoplay></model-viewer>
+
+    <model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb" ar auto-rotate
+        shadow-intensity="1" camera-controls touch-action="pan-y" auto-rotate autoplay field-of-view="10deg"
+        max-camera-orbit="auto 90deg auto"></model-viewer>
+
+    <model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/putti gruppe/model.glb" ar auto-rotate
+        shadow-intensity="1" camera-controls touch-action="pan-y" auto-rotate autoplay
+        max-camera-orbit="auto 90deg auto"></model-viewer>
+
+    <model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/jupiter_und_ganymed/model.glb" ar
+        auto-rotate shadow-intensity=".5" camera-controls touch-action="pan-y"></model-viewer>
+
+    <model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/cyberpunk/model.glb" ar auto-rotate
+        shadow-intensity=".5" camera-controls touch-action="pan-y" autoplay rotation-per-second="60deg"></model-viewer>
+
+</div>
+
+<script>
+    // Example if a model is loaded after the page has loaded
+    document.addEventListener('DOMContentLoaded', () => {
+        setTimeout(() => {
+            const element = document.createElement('model-viewer');
+            element.src = "https://api.cloud.needle.tools/v1/public/9191068/261b4395b/";
+            element.setAttribute("camera-controls", "");
+            const layout = document.querySelector('.layout');
+            layout.appendChild(element);
+        }, 2000)
+    });
+
+</script>
+
+<style>
+    body {
+        margin: 0;
+        background-color: rgba(245, 245, 245, 1);
+        font-family: "Open Sans", sans-serif;
+        font-optical-sizing: auto;
+    }
+
+    * {
+        box-sizing: border-box;
+    }
+
+    a {
+        text-decoration: none;
+        color: #cb0000;
+    }
+
+    .layout {
+        position: relative;
+        width: 100%;
+        min-height: 100%;
+
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(460px, 2fr));
+        gap: 1rem;
+        padding: 1rem;
+    }
+
+    .layout>* {
+        width: 100%;
+        height: auto;
+        aspect-ratio: 1;
+        flex: 1;
+        background: white;
+        border-radius: .3rem;
+        box-shadow: 0 0 1rem rgba(0, 0, 0, .1);
+        outline: 1px solid white;
+    }
+
+    .card {
+        padding: 1rem;
+        max-width: calc(100vw - 2rem);
+    }
+
+    @media screen and (max-width: 800px) {
+        .layout {
+            grid-template-columns: 1fr;
+        }
+    }
+</style>
+
+</html>

package/dist/examples/modelviewer.html

@@ -0,0 +1,33 @@
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>gltf-progressive & model-viewer</title>
+    <script type="importmap">
+        {
+            "imports": {
+                "three": "https://unpkg.com/three/build/three.module.js",
+                "three/": "https://unpkg.com/three/"
+            }
+        }
+    </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://www.unpkg.com/@needle-tools/gltf-progressive@latest"></script>
+</head>
+
+<model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb" ar shadow-intensity="1"
+    camera-controls touch-action="pan-y" auto-rotate max-camera-orbit="auto 90deg auto"></model-viewer>
+
+<style>
+    body {
+        margin: 0;
+    }
+
+    model-viewer {
+        width: 100%;
+        height: 100%;
+    }
+</style>
+
+</html>

package/dist/examples/react-three-fiber/.prettierrc

@@ -0,0 +1,10 @@
+{
+  "printWidth": 140,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": true
+}

package/dist/examples/react-three-fiber/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="favicon.png">
+  <meta name="viewport" content="width=device-width, user-scalable=no">
+
+  <title>react-three-fiber with progressive loading</title>
+  <meta name="description" content="🌵 gltf-progressive example">
+  <meta name="twitter:card" content="summary_large_image">
+  <meta property="og:title" content="react-three-fiber with progressive loading" />
+  <meta property="og:description" content="🌵 gltf-progressive example" />
+  <meta property="twitter:image" content="" />
+  <meta property="og:image" content="" />
+
+  <meta name="robots" content="index,follow">
+  <link rel="stylesheet" href="./src/style.css">
+</head>
+
+<body>
+  <script type="module" src="./src/index.tsx"></script>
+  <div id="root" style="width:100vw; height:100vh;"></div>
+</body>
+</html>