Skip to content

Commit

Permalink
model: Adopt code which was originally in index.js
Browse files Browse the repository at this point in the history
  • Loading branch information
josephbirkner committed Jul 10, 2023
1 parent 141cb51 commit 0d4f23b
Show file tree
Hide file tree
Showing 6 changed files with 177 additions and 123 deletions.
2 changes: 1 addition & 1 deletion static/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ body {
height: 100% !important;
}

#headline {
#info {
color: white;
font-size: large;
background-color: transparent;
Expand Down
7 changes: 6 additions & 1 deletion static/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,12 @@

<div id="mapviewer-canvas-container" class="mapviewer-renderlayer" style="pointer-events: all;" unselectable="on"></div>
<div id="mapviewer-label-container" class="mapviewer-renderlayer" style="pointer-events: none;" unselectable="on"></div>
<div id="headline">erdblick v0.0.1 // <button onclick="loadTestTile()">Load All Tiles</button></div>
<div id="info">
erdblick v0.1.0 //
<button onclick="loadAllTiles()">Load Tiles</button> //
<button onclick="reloadStyle()">Reload Style</button><br>
<div id="log"></div>
</div>

</body>
</html>
71 changes: 11 additions & 60 deletions static/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,66 +14,17 @@ libErdblickCore().then(coreLib =>
console.log(" ...done.")

let mapComponent = new MapComponent(platform, coreLib);
let glbConverter = new coreLib.FeatureLayerRenderer();

const styleUrl = "/styles/demo-style.yaml";
const infoUrl = "/sources";
const tileUrl = "/tiles";

// ------- Fetch style --------
let style = null;
new Fetch(coreLib, styleUrl).withWasmCallback(styleYamlBuffer => {
style = new coreLib.FeatureLayerStyle(styleYamlBuffer);
console.log("Loaded style.")
}).go();

// -------- Fetch info --------
let stream = null;
let info = null;
new Fetch(coreLib, infoUrl)
.withWasmCallback((infoBuffer, response) => {
stream = new coreLib.TileLayerParser(infoBuffer);
stream.onTileParsed(tile => {
new MapViewerBatch("test", coreLib, glbConverter, style, tile, (batch)=>{
mapComponent.model.dispatchEvent({
type: mapComponent.model.BATCH_ADDED,
batch: batch
})
}, ()=>{})
});
console.log("Loaded data source info.")
})
.withJsonCallback(result => {info = result;})
.go();

// --- Fetch tiles on-demand ---
window.loadTestTile = () =>
{
mapComponent.renderingController.cameraController.moveToCoords(11.126489719579604, 47.99422683197585);
mapComponent.renderingController.cameraController.setCameraOrientation(1.0746333541984274, -1.5179395047543438);
mapComponent.renderingController.cameraController.setCameraAltitude(0.8930176014438322);

let requests = []
for (let dataSource of info) {
for (let [layerName, layer] of Object.entries(dataSource.layers)) {
requests.push({
mapId: dataSource.mapId,
layerId: layerName,
tileIds: layer.coverage
})
}
}
console.log(requests);

new Fetch(coreLib, tileUrl)
.withChunkProcessing()
.withMethod("POST")
.withBody({requests: requests})
.withWasmCallback(tileBuffer => {
stream.parse(tileBuffer);
})
.go();
};
window.loadAllTiles = () => {
$("#log").empty()
mapComponent.model.runUpdate();
}
window.reloadStyle = () => {
mapComponent.model.reloadStyle();
}
window.zoomToBatch = (batchId) => {
let center = mapComponent.model.registeredBatches.get(batchId).tileFeatureLayer.center();
mapComponent.moveToPosition(center.x, center.y, center.z);
}

// ----------------------- Initialize input event handlers -----------------------

Expand Down
89 changes: 50 additions & 39 deletions static/mapcomponent/batch.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,25 @@ export class MapViewerBatch
{
// public:

constructor(batchName, coreLib, renderer, style, tileFeatureLayer, onLoadingFinishedFn, onLoadingErrorFn)
constructor(batchName, tileFeatureLayer)
{
this.id = batchName;
this.children = undefined;
this.tileFeatureLayer = tileFeatureLayer;
}

/**
* Convert this batch's tile to GLTF and broadcast the result
*/
render(coreLib, glbConverter, style, onResult)
{
if (this.children) {
this.disposeChildren()
}

// Get the scene as GLB and visualize it.
let sharedGlbArray = new coreLib.SharedUint8Array();
renderer.render(style, tileFeatureLayer, sharedGlbArray);
glbConverter.render(style, this.tileFeatureLayer, sharedGlbArray);
let objSize = sharedGlbArray.getSize();
let bufferPtr = Number(sharedGlbArray.getPointer());
let glbBuf = coreLib.HEAPU8.buffer.slice(bufferPtr, bufferPtr + objSize);
Expand All @@ -27,63 +38,63 @@ export class MapViewerBatch
// called once the gltf resource is loaded
( gltf ) =>
{
sharedGlbArray.delete()
tileFeatureLayer.delete()

this.children = gltf.scene.children;
if(onLoadingFinishedFn)
onLoadingFinishedFn(this);
onResult(this);
sharedGlbArray.delete()
},
// called when loading has errors
( error ) => {
// Don't spam errors when fetching fails because the server retracted a batch
if(error.message && !error.message.endsWith("glTF versions >=2.0 are supported."))
console.warn( 'Glb load err: '+batchName+': '+error.message );
if(onLoadingErrorFn)
onLoadingErrorFn()
console.warn( `GLB load error: ${this.id}: ${error.message}` );
sharedGlbArray.delete()
}
)
}

dispose()
disposeChildren()
{
this.children.forEach( (root) =>
{
if (!root)
return;

root.traverse(
(node) =>
{
if (node.geometry)
node.geometry.dispose();
root.traverse((node) => {
if (node.geometry)
node.geometry.dispose();

if (node.material)
{
if (node.material instanceof MeshFaceMaterial || node.material instanceof MultiMaterial) {
node.material.materials.forEach((mtrl) => {
if (mtrl.map) mtrl.map.dispose();
if (mtrl.lightMap) mtrl.lightMap.dispose();
if (mtrl.bumpMap) mtrl.bumpMap.dispose();
if (mtrl.normalMap) mtrl.normalMap.dispose();
if (mtrl.specularMap) mtrl.specularMap.dispose();
if (mtrl.envMap) mtrl.envMap.dispose();
if (node.material)
{
if (node.material instanceof MeshFaceMaterial || node.material instanceof MultiMaterial) {
node.material.materials.forEach((mtrl) => {
if (mtrl.map) mtrl.map.dispose();
if (mtrl.lightMap) mtrl.lightMap.dispose();
if (mtrl.bumpMap) mtrl.bumpMap.dispose();
if (mtrl.normalMap) mtrl.normalMap.dispose();
if (mtrl.specularMap) mtrl.specularMap.dispose();
if (mtrl.envMap) mtrl.envMap.dispose();

mtrl.dispose(); // disposes any programs associated with the material
});
}
else {
if (node.material.map) node.material.map.dispose();
if (node.material.lightMap) node.material.lightMap.dispose();
if (node.material.bumpMap) node.material.bumpMap.dispose();
if (node.material.normalMap) node.material.normalMap.dispose();
if (node.material.specularMap) node.material.specularMap.dispose();
if (node.material.envMap) node.material.envMap.dispose();
mtrl.dispose(); // disposes any programs associated with the material
});
}
else {
if (node.material.map) node.material.map.dispose();
if (node.material.lightMap) node.material.lightMap.dispose();
if (node.material.bumpMap) node.material.bumpMap.dispose();
if (node.material.normalMap) node.material.normalMap.dispose();
if (node.material.specularMap) node.material.specularMap.dispose();
if (node.material.envMap) node.material.envMap.dispose();

node.material.dispose(); // disposes any programs associated with the material
}
node.material.dispose(); // disposes any programs associated with the material
}
});
}
});
});
}

dispose()
{
this.disposeChildren()
this.tileFeatureLayer.delete()
}
}
Loading

0 comments on commit 0d4f23b

Please sign in to comment.