@needle-tools/gltf-progressive 1.0.0-alpha.9 → 1.1.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/CHANGELOG.md +39 -0
  2. package/README.md +92 -0
  3. package/examples/modelviewer.html +27 -0
  4. package/examples/react-three-fiber/.prettierrc +10 -0
  5. package/examples/react-three-fiber/favicon.png +0 -0
  6. package/examples/react-three-fiber/index.html +24 -0
  7. package/examples/react-three-fiber/package-lock.json +4023 -0
  8. package/examples/react-three-fiber/package.json +34 -0
  9. package/examples/react-three-fiber/tsconfig.json +22 -0
  10. package/examples/react-three-fiber/vite.config.js +39 -0
  11. package/examples/threejs/index.html +51 -0
  12. package/examples/threejs/main.js +76 -0
  13. package/gltf-progressive.js +462 -316
  14. package/gltf-progressive.min.js +5 -3
  15. package/gltf-progressive.umd.cjs +5 -3
  16. package/lib/extension.d.ts +8 -2
  17. package/lib/extension.js +102 -11
  18. package/lib/index.d.ts +5 -4
  19. package/lib/index.js +6 -4
  20. package/lib/loaders.d.ts +10 -0
  21. package/lib/loaders.js +21 -2
  22. package/lib/lods_manager.d.ts +50 -3
  23. package/lib/lods_manager.js +354 -219
  24. package/lib/plugins/index.d.ts +1 -1
  25. package/lib/plugins/index.js +0 -1
  26. package/lib/plugins/modelviewer.js +7 -3
  27. package/lib/plugins/plugin.d.ts +4 -5
  28. package/lib/plugins/plugin.js +0 -6
  29. package/lib/utils.d.ts +13 -0
  30. package/lib/utils.js +24 -0
  31. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -4,6 +4,45 @@ All notable changes to this package will be documented in this file.
4
4
  The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
5
5
  and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
6
6
 
7
+ ## [1.1.0-alpha] - 2023-06-03
8
+ - add: loading of multiple texture LOD levels
9
+ - fix: issue where material LODs where not updated when the material was cloned
10
+ - change: clamp screen coverage when near plane intersects with the object bounds
11
+ - change: skip CubeCamera setup
12
+ - change: handle cases where an object has only texture LODs
13
+
14
+ ## [1.0.0-alpha.19] - 2023-05-31
15
+ - add `LODsManager.plugins` getter
16
+
17
+ ## [1.0.0-alpha.18] - 2023-05-30
18
+ - update README
19
+
20
+ ## [1.0.0-alpha.16] - 2023-05-29
21
+ - fix: LODs manager now clamps to LOD 0 if the near plane is inside the bounds
22
+ - change: Ignore certain material in lods update loop
23
+
24
+ ## [1.0.0-alpha.15] - 2023-05-25
25
+ - add: `getRaycastMesh` method
26
+ - 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.
27
+ - change: create LODsManager via `LODsManager.get(renderer)`
28
+
29
+ ## [1.0.0-alpha.13] - 2023-05-24
30
+ - fix: modelviewer error when trying to access undefined texture extensions
31
+
32
+ ## [1.0.0-alpha.13] - 2023-05-24
33
+ - add: vanilla three.js example
34
+ - fix: texture LODs losing filter setting
35
+
36
+ ## [1.0.0-alpha.12] - 2023-05-19
37
+ - fix: update LODs when using postprocessing
38
+
39
+ ## [1.0.0-alpha.11] - 2023-05-17
40
+ - add: expose `setDracoDecoderLocation` and `setKTX2TranscoderLocation`
41
+ - fix: allow using draco decoder and ktx2 transcoder from local filepath
42
+
43
+ ## [1.0.0-alpha.10] - 2023-05-07
44
+ - fix: progressive assets are now only updated during the main canvas render call and not e.g. when rendering to a texture
45
+
7
46
  ## [1.0.0-alpha.9] - 2023-05-03
8
47
  - fix: handle loading of ShaderMaterial for VRM progressive textures
9
48
 
package/README.md CHANGED
@@ -2,6 +2,98 @@
2
2
 
3
3
  Support for loading of glTF or GLB files with progressive mesh or texture data for three.js based engines.
4
4
 
5
+
6
+
7
+ ## Examples
8
+
9
+ Examples are in the `/examples` directory. Live versions can be found in the links below.
10
+
11
+ - [Vanilla three.js](https://engine.needle.tools/demos/gltf-progressive/threejs/)
12
+ - [\<model-viewer\>](https://engine.needle.tools/demos/gltf-progressive/modelviewer)
13
+ - [React Three Fiber](https://engine.needle.tools/demos/gltf-progressive/r3f/)
14
+
15
+
16
+ ## Usage
17
+
18
+ ### react three fiber
19
+
20
+ Full example in `examples/react-three-fiber`
21
+
22
+ ```ts
23
+ function ChurchModel() {
24
+ const { gl } = useThree()
25
+ const url = 'https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb'
26
+ const { scene } = useGLTF(url, false, false, (loader) => {
27
+ useNeedleProgressive(url, gl, loader as any)
28
+ })
29
+ return <primitive object={scene} />
30
+ }
31
+ ```
32
+
33
+ ### threejs (CDN, no bundler)
34
+
35
+ The full example can be found at `examples/threejs`
36
+
37
+ ```html
38
+ <head>
39
+ <!-- Add the threejs import map to your HTML head section -->
40
+ <script type="importmap">
41
+ {
42
+ "imports": {
43
+ "three": "https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js",
44
+ "three/addons/": "https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/",
45
+ "three/examples/": "https://cdn.jsdelivr.net/npm/three@latest/examples/",
46
+ "@needle-engine/gltf-progressive": "https://www.unpkg.com/@needle-tools/gltf-progressive@latest"
47
+ }
48
+ }
49
+ </script>
50
+ </head>
51
+ ```
52
+
53
+ In your script:
54
+ ```ts
55
+ const gltfLoader = new GLTFLoader();
56
+
57
+ const url = "https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb";
58
+
59
+ // register the progressive loader
60
+ useNeedleProgressive(url, renderer, gltfLoader)
61
+
62
+ // just call the load method as usual
63
+ gltfLoader.load(url, gltf => {
64
+ console.log(gltf)
65
+ scene.add(gltf.scene)
66
+ gltf.scene.position.y += .95;
67
+ })
68
+ ```
69
+
70
+
71
+ ### \<model-viewer\>
72
+
73
+ The full example can be found in `examples/modelviewer.html`
74
+
75
+ ```html
76
+ <head>
77
+ <!-- Include the import map and the gltf-progressive package -->
78
+ <script type="importmap">
79
+ {
80
+ "imports": {
81
+ "three": "https://unpkg.com/three/build/three.module.js",
82
+ "three/": "https://unpkg.com/three/"
83
+ }
84
+ }
85
+ </script>
86
+ <script type="module" src="https://www.unpkg.com/@needle-tools/gltf-progressive@latest"></script>
87
+ <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
88
+ </head>
89
+ <body>
90
+
91
+ <model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb" camera-controls auto-rotate></model-viewer>
92
+
93
+ ...
94
+ ```
95
+
96
+
5
97
  # Contact ✒️
6
98
  <b>[🌵 needle — tools for creators](https://needle.tools)</b> •
7
99
  [Twitter](https://twitter.com/NeedleTools) •
package/examples/modelviewer.html ADDED
@@ -0,0 +1,27 @@
1
+ <html>
2
+
3
+ <head>
4
+ <title>Minimal Example</title>
5
+ <script type="importmap">
6
+ {
7
+ "imports": {
8
+ "three": "https://unpkg.com/three/build/three.module.js",
9
+ "three/": "https://unpkg.com/three/"
10
+ }
11
+ }
12
+ </script>
13
+ <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
14
+ <script type="module" src="https://www.unpkg.com/@needle-tools/gltf-progressive@latest"></script>
15
+ </head>
16
+
17
+ <model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb" ar shadow-intensity="1"
18
+ camera-controls touch-action="pan-y" auto-rotate max-camera-orbit="auto 90deg auto"></model-viewer>
19
+
20
+ <style>
21
+ model-viewer {
22
+ width: 100%;
23
+ height: 100%;
24
+ }
25
+ </style>
26
+
27
+ </html>
package/examples/react-three-fiber/.prettierrc ADDED
@@ -0,0 +1,10 @@
1
+ {
2
+ "printWidth": 140,
3
+ "tabWidth": 2,
4
+ "useTabs": false,
5
+ "semi": false,
6
+ "singleQuote": true,
7
+ "trailingComma": "none",
8
+ "bracketSpacing": true,
9
+ "jsxBracketSameLine": true
10
+ }
package/examples/react-three-fiber/index.html ADDED
@@ -0,0 +1,24 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <link rel="icon" href="favicon.png">
6
+ <meta name="viewport" content="width=device-width, user-scalable=no">
7
+
8
+ <title>react-three-fiber with progressive loading</title>
9
+ <meta name="description" content="🌵 gltf-progressive example">
10
+ <meta name="twitter:card" content="summary_large_image">
11
+ <meta property="og:title" content="react-three-fiber with progressive loading" />
12
+ <meta property="og:description" content="🌵 gltf-progressive example" />
13
+ <meta property="twitter:image" content="" />
14
+ <meta property="og:image" content="" />
15
+
16
+ <meta name="robots" content="index,follow">
17
+ <link rel="stylesheet" href="./src/style.css">
18
+ </head>
19
+
20
+ <body>
21
+ <script type="module" src="./src/index.tsx"></script>
22
+ <div id="root" style="width:100vw; height:100vh;"></div>
23
+ </body>
24
+ </html>