@jdultra/threedtiles 11.1.0 → 11.1.3
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.
- package/README.md +29 -4
- package/dist/index.html +1 -1
- package/dist/threedtiles.js +72983 -0
- package/dist/threedtiles.js.map +1 -0
- package/dist/threedtiles.min.js +1 -1
- package/dist/threedtiles.min.js.map +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -98,9 +98,9 @@ Contact: emeric.beaufays@jdultra.com
|
|
|
98
98
|
- Occlusion culling
|
|
99
99
|
- Instanced tilesets
|
|
100
100
|
- Center tileset and re-orient geolocated data
|
|
101
|
-
- draco and ktx2 compression support
|
|
101
|
+
- quantization, draco, mshopt and ktx2 compression support
|
|
102
102
|
- point clouds (only through gltf/glb tiles)
|
|
103
|
-
- loading strategy options ("incremental" or "immediate)
|
|
103
|
+
- loading strategy options ("incremental" or "immediate")
|
|
104
104
|
|
|
105
105
|
|
|
106
106
|
OGC3DTiles 1.1 are supported.
|
|
@@ -541,8 +541,9 @@ const ogc3DTile = new InstancedOGC3DTile({
|
|
|
541
541
|
ogc3DTile.updateMatrix();
|
|
542
542
|
},1000)
|
|
543
543
|
```
|
|
544
|
-
### Draco and Ktx2
|
|
545
|
-
Compressed meshes via Draco and compressed textures in Ktx2 format are supported automatically using the threejs plugins.
|
|
544
|
+
### Meshopt, Draco and Ktx2
|
|
545
|
+
Compressed meshes via Draco and compressed textures in Ktx2 format are supported automatically using the threejs plugins by passing the renderer at initialization.
|
|
546
|
+
The ktx and draco loader can also be passed manually (see jsdoc)
|
|
546
547
|
KTX uses an external wasm loaded at runtime so if you have trouble packaging your app correctly, check out the
|
|
547
548
|
[Getting started](https://drive.google.com/file/d/1kJ-yfYmy8ShOMMPPXgqW2gMgGkLOIidf/view?usp=share_link) project for a sample webpack configuration.
|
|
548
549
|
|
|
@@ -562,3 +563,27 @@ animate();
|
|
|
562
563
|
|
|
563
564
|
However, if you have several OGC3DTiles loaded or when you use instancedTilesets, you may have hundreds or even thousands of LOD trees that need to be updated individually. In order to preserve frame-rate,
|
|
564
565
|
you'll want to avoid updating every single tileset on every frame.
|
|
566
|
+
|
|
567
|
+
### Memory
|
|
568
|
+
This is especially important for iOS that limits the memory per tab quite harshly and doesn't allow growing the memory allocated to a tab.
|
|
569
|
+
|
|
570
|
+
Once a mesh is loaded, the mesh and texture data stays in CPU memory which isn't necessary unless one intends to modify it.
|
|
571
|
+
A nice trick is to allow this data to be garbage collected. You might do something like this in the mesh callback:
|
|
572
|
+
|
|
573
|
+
```
|
|
574
|
+
const tileLoader = new TileLoader({
|
|
575
|
+
...
|
|
576
|
+
meshCallback: (mesh, geometricError) => {
|
|
577
|
+
mesh.onAfterRender = ()=>{
|
|
578
|
+
if(mesh.geometry.attributes.position) mesh.geometry.attributes.position.data.array = null
|
|
579
|
+
if(mesh.geometry.attributes.uv) mesh.geometry.attributes.position.data.array = null
|
|
580
|
+
if(mesh.geometry.attributes.normal) mesh.geometry.attributes.position.data.array = null
|
|
581
|
+
if(mesh.material.map) mesh.material.map.mipmaps = null;
|
|
582
|
+
}
|
|
583
|
+
}
|
|
584
|
+
});
|
|
585
|
+
```
|
|
586
|
+
|
|
587
|
+
Be sure to call this in the mesh onAfterRender callback to make sure the data is on the GPU.
|
|
588
|
+
|
|
589
|
+
Depending on the mesh and texture type, different properties might hold data to be nullified so it can be garbage collected. It's up to the user to debug and see what geometry or material properties hold references to large data.
|
package/dist/index.html
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
<!doctype html><html><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,user-scalable=no,minimum-scale=1,maximum-scale=1"><title>Three 3DTiles viewer sample</title><style>.slidecontainer{width:100%}.slider{-webkit-appearance:none;width:100%;height:15px;border-radius:5px;background:#d3d3d3;outline:0;opacity:.7;-webkit-transition:.2s;transition:opacity .2s}.slider:hover{opacity:1}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:25px;height:25px;border-radius:50%;background:#0439aa;cursor:pointer}.slider::-moz-range-thumb{width:25px;height:25px;border-radius:50%;background:#04aa6d;cursor:pointer}</style></head><body><div id="screen"></div><div style="position:absolute;z-index:999;right:0;top:0;width:12%;height:100%;background-color:#acacacd2;display:flex;flex-direction:column;flex-wrap:wrap"><div style="z-index:1000;margin:10%"><input type="range" min="0.01" max="50.0" value="1.0" , step="0.01" class="slider" id="lodMultiplier"><p style="color:#0439aa">detail multiplier: <span id="multiplierValue">0
|
|
1
|
+
<!doctype html><html><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,user-scalable=no,minimum-scale=1,maximum-scale=1"><title>Three 3DTiles viewer sample</title><style>.slidecontainer{width:100%}.slider{-webkit-appearance:none;width:100%;height:15px;border-radius:5px;background:#d3d3d3;outline:0;opacity:.7;-webkit-transition:.2s;transition:opacity .2s}.slider:hover{opacity:1}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:25px;height:25px;border-radius:50%;background:#0439aa;cursor:pointer}.slider::-moz-range-thumb{width:25px;height:25px;border-radius:50%;background:#04aa6d;cursor:pointer}</style></head><body><div id="screen"></div><div style="position:absolute;z-index:999;right:0;top:0;width:12%;height:100%;background-color:#acacacd2;display:flex;flex-direction:column;flex-wrap:wrap"><div style="z-index:1000;margin:10%"><input type="range" min="0.01" max="50.0" value="1.0" , step="0.01" class="slider" id="lodMultiplier"><p style="color:#0439aa">detail multiplier: <span id="multiplierValue">1.0</span></p></div><div style="z-index:1000;margin:10%"><input type="range" min="0.5" max="1.5" value="1.0" , step="0.01" class="slider" id="distanceBias"><p style="color:#0439aa">distance bias: <span id="distanceBiasValue">1.0</span></p></div><div style="z-index:1000;margin:10%"><input type="range" min="10" max="200" value="200" , step="1" class="slider" id="targetFPS"><p style="color:#0439aa">target fps: <span id="targetFPSValue">200</span></p></div><div style="z-index:1000;margin:10%" id="loadingStrategyWrapper"><input type="range" min="0" max="1" value="1" , step="1" class="slider" style="width:25%;float:right;pointer-events:none" id="loadingStrategy"><p style="color:#0439aa">Strategy: <span id="loadingStrategyValue">IMMEDIATE</span></p></div><div style="z-index:1000;margin:10%"><input type="checkbox" id="autorotate"> <span style="color:#0439aa">Auto Rotate</span></div><div style="z-index:1000;margin:10%"><div>Tiles To Load <span style="color:#0439aa" id="tilesToLoadValue">0</span></div><div>Tiles Rendered <span style="color:#0439aa" id="tilesRenderedValue">0</span></div><div>max LOD <span style="color:#0439aa" id="maxLODValue">0</span></div><div>percentage loaded <span style="color:#0439aa" id="percentageValue">0</span></div></div></div><script src="threedtiles.min.js"></script></body></html>
|