Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Ogc3dtiles] Fix tests #2375

Merged
merged 4 commits into from
Aug 9, 2024
Merged

[Ogc3dtiles] Fix tests #2375

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
08f7579
chore: revert 3d tiles examples
Desplandis Aug 2, 2024
4c9a3f0
chore: add new OGC3DTiles example
Desplandis Aug 6, 2024
571acde
chore: fix linting issue in gltfparser
Desplandis Aug 7, 2024
56a31b9
chore: check if batchId is defined in picking
Desplandis Aug 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions examples/3dtiles_25d.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,14 +81,14 @@
// extension of gltf. We need to enable it.
itowns.enableDracoLoader('./libs/draco/');

var $3dTilesLayer = new itowns.OGC3DTilesLayer(
var $3dTilesLayer = new itowns.C3DTilesLayer(
'3d-tiles-layer-building', {
name: 'Lyon-2015-building',
source: new itowns.OGC3DTilesSource({
source: new itowns.C3DTilesSource({
url: 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/' +
'3DTiles/lyon_1_3946_textured_draco/tileset.json',
}),
});
}, view);

// Lights
var dirLight = new itowns.THREE.DirectionalLight(0xffffff, 1);
Expand Down
27 changes: 13 additions & 14 deletions examples/3dtiles_basic.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,34 +45,33 @@

// Create a new Layer 3d-tiles For DiscreteLOD
// -------------------------------------------
var $3dTilesLayerDiscreteLOD = new itowns.OGC3DTilesLayer('3d-tiles-discrete-lod', {
var $3dTilesLayerDiscreteLOD = new itowns.C3DTilesLayer('3d-tiles-discrete-lod', {
name: 'DiscreteLOD',
source: new itowns.OGC3DTilesSource({
sseThreshold: 0.05,
source: new itowns.C3DTilesSource({
url: 'https://raw.githubusercontent.com/CesiumGS/3d-tiles-samples/master/1.0/TilesetWithDiscreteLOD/tileset.json',
}),
sseThreshold: 0.05,
});
}, view);

itowns.View.prototype.addLayer.call(view, $3dTilesLayerDiscreteLOD);

// Create a new Layer 3d-tiles For Viewer Request Volume
// -----------------------------------------------------

var $3dTilesLayerRequestVolume = new itowns.OGC3DTilesLayer('3d-tiles-request-volume', {
var $3dTilesLayerRequestVolume = new itowns.C3DTilesLayer('3d-tiles-request-volume', {
name: 'RequestVolume',
source: new itowns.OGC3DTilesSource({
source: new itowns.C3DTilesSource({
url: 'https://raw.githubusercontent.com/CesiumGS/3d-tiles-samples/master/1.0/TilesetWithRequestVolume/tileset.json',
}),
sseThreshold: 1,
});
}, view);

// add an event for picking the 3D Tiles layer and displaying
// information about the picked feature in an html div
const pickingArgs = {
htmlDiv: document.getElementById('featureInfo'),
view,
layer: $3dTilesLayerRequestVolume,
};
var pickingArgs = {};
pickingArgs.htmlDiv = document.getElementById('featureInfo');
pickingArgs.view = view;
pickingArgs.layer = $3dTilesLayerRequestVolume;
itowns.View.prototype.addLayer.call(view,
$3dTilesLayerRequestVolume).then(function _() {
window.addEventListener('mousemove',
Expand All @@ -82,8 +81,8 @@
// Add the UI Debug
var d = new debug.Debug(view, menuGlobe.gui);
debug.createTileDebugUI(menuGlobe.gui, view, view.tileLayer, d);
debug.create3dTilesDebugUI(menuGlobe.gui, view, $3dTilesLayerDiscreteLOD, d);
debug.create3dTilesDebugUI(menuGlobe.gui, view, $3dTilesLayerRequestVolume, d);
debug.create3dTilesDebugUI(menuGlobe.gui, view, $3dTilesLayerDiscreteLOD);
debug.create3dTilesDebugUI(menuGlobe.gui, view, $3dTilesLayerRequestVolume);
d.zoom = function() {
view.camera3D.position.set(1215013.9, -4736315.5, 4081597.5);
view.camera3D.quaternion.set(0.9108514448729665, 0.13456816437801225, 0.1107206134840362, 0.3741416847378546);
Expand Down
14 changes: 11 additions & 3 deletions examples/3dtiles_batch_table.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,14 +49,22 @@
.then(menuGlobe.addLayerGUI.bind(menuGlobe));
});

// Create a new 3D tiles layer with batch table hierarchy extension
const extensions = new itowns.C3DTExtensions();
extensions.registerExtension("3DTILES_batch_table_hierarchy",
{ [itowns.C3DTilesTypes.batchtable]:
itowns.C3DTBatchTableHierarchyExtension });

// Create the 3D Tiles layer
var $3dTilesLayerBTHierarchy = new itowns.OGC3DTilesLayer(
var $3dTilesLayerBTHierarchy = new itowns.C3DTilesLayer(
'3d-tiles-bt-hierarchy', {
name: 'BTHierarchy',
source: new itowns.OGC3DTilesSource({
source: new itowns.C3DTilesSource({
url: 'https://raw.githubusercontent.com/AnalyticalGraphicsInc/cesium/master/Apps/SampleData/Cesium3DTiles/Hierarchy/BatchTableHierarchy/tileset.json',
}),
});
registeredExtensions: extensions,
},
view);

// add an event for picking the 3D Tiles layer and displaying
// information about the picked feature in an html div
Expand Down
18 changes: 9 additions & 9 deletions examples/3dtiles_ion.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@
</head>
<body>
<div id="description">
<p><b>This example displays a dataset representing extruded OSM buildings from Cesium ion
<p><b>This example displays a dataset representing extruded OSM buildings from Cesium ion
with Cesium default access token. Zoom to any place in the world to see the buildings. <br>
Buildings may appear to "fly" above the ground in some places, this is due to the combination
Buildings may appear to "fly" above the ground in some places, this is due to the combination
of precision errors of this dataset and of the 3D terrain we use in this example. </b>
</p>
</div>
Expand Down Expand Up @@ -53,7 +53,7 @@
diffuse: new itowns.THREE.Color(0xa0d5fc)
};
var view = new itowns.GlobeView(viewerDiv, placement, viewOptions);

// Setup loading screen
setupLoadingScreen(viewerDiv, view);

Expand Down Expand Up @@ -91,19 +91,19 @@
extensions.registerExtension("3DTILES_batch_table_hierarchy",
{ [itowns.C3DTilesTypes.batchtable]:
itowns.C3DTBatchTableHierarchyExtension });

// Create a 3D Tiles layer from Cesium ion server with Cesium default access token and assetId of the
// Create a 3D Tiles layer from Cesium ion server with Cesium default access token and assetId of the
// OSM buildings dataset.
var threeDTilesIonSource = new itowns.OGC3DTilesIonSource({
var threeDTilesIonSource = new itowns.C3DTilesIonSource({
accessToken: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzOTkxZjY3NS0yNDU4LTQ3MTAtOGQ2NC1lOGI4YmY5ODhhYjQiLCJpZCI6Mzg4OTQsImlhdCI6MTYwNjkyMDkwOH0.aVrPA4xnpbSUlqfJ9RkSWmZtms_hnSRz7m596h1R7ew',
assetId: 96188
});
threeDTilesIonSource.whenReady.then(displayAttributions); // Add attributions returned by cesium ion server
var threeDTilesIonLayer = new itowns.OGC3DTilesLayer('3d-tiles-cesium-ion', {
var threeDTilesIonLayer = new itowns.C3DTilesLayer('3d-tiles-cesium-ion', {
name: '3D Tiles from Cesium Ion',
source: threeDTilesIonSource,
// registeredExtensions: extensions,
});
registeredExtensions: extensions,
}, view);

itowns.View.prototype.addLayer.call(view, threeDTilesIonLayer);

Expand Down
150 changes: 150 additions & 0 deletions examples/3dtiles_loader.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@
<html>
jailln marked this conversation as resolved.
Show resolved Hide resolved
<head>
<title>Itowns - 3D Tiles loader</title>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" type="text/css" href="css/example.css">
<link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">

<style type="text/css">
#description {
z-index: 2;
right: 10px;
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
</head>
<body>
<div id="viewerDiv"></div>
<div id="description">Specify the URL of a tileset to load:
<input type="text" id="url" />
<button onclick="setURL(document.getElementById('url').value)">
Load
</button>
<hr />
<p><b>Feature Information:</b></p>
<div id="featureInfo"></div>
</div>

<script src="js/GUI/GuiTools.js"></script>
<script src="../dist/itowns.js"></script>
<script src="js/GUI/LoadingScreen.js"></script>
<script src="../dist/debug.js"></script>

<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.165.0/build/three.module.js",
jailln marked this conversation as resolved.
Show resolved Hide resolved
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.165.0/examples/jsm/"
}
}
</script>

<script type="module">
import { AmbientLight } from 'three';
import {
zoomToLayer,
fillHTMLWithPickingInfo,
} from './jsm/OGC3DTilesHelper.js';

const {
TMSSource, WMTSSource, OGC3DTilesSource,
ColorLayer, ElevationLayer, OGC3DTilesLayer,
GlobeView, Coordinates, Fetcher,
} = itowns;

const uri = new URL(location);
const state = {
// URL to tileset JSON
tileset: uri.searchParams.get('tileset'),
// Cesium ION /
assetId: uri.searchParams.get('assetId'),
};

function setURL(url) {
if (!url) return;

uri.searchParams.set('tileset', url);
history.pushState(null, '', `?${uri.searchParams.toString()}`);

location.reload();
}

// ---- CREATE A GlobeView FOR SUPPORTING DATA VISUALIZATION ----

// Define camera initial position
const placement = {
coord: new Coordinates('EPSG:4326', 2.351323, 48.856712),
range: 12500000,
};

// `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
const viewerDiv = document.getElementById('viewerDiv');

// Create a GlobeView
const view = new GlobeView(viewerDiv, placement, {});

// Add ambient light to globally illuminates all objects
const light = new AmbientLight(0x404040, 15);
view.scene.add(light);

// Setup loading screen
setupLoadingScreen(viewerDiv, view);

// Setup debug menu
const menuGlobe = new GuiTools('menuDiv', view, 300);
debug.createTileDebugUI(menuGlobe.gui, view, view.tileLayer);


// ---- ADD A BASEMAP ----

// Add one imagery layer to the scene. This layer's properties are
// defined in a json file, but it cou ld be defined as a plain js
// object. See `Layer` documentation for more info.
Fetcher.json('./layers/JSONLayers/OPENSM.json').then((config) => {
const layer = new ColorLayer('Ortho', {
...config,
source: new TMSSource(config.source),
});
view.addLayer(layer).then(menuGlobe.addLayerGUI.bind(menuGlobe));
});

// ---- ADD 3D TILES TILESET ----

// Enable various compression support for 3D Tiles tileset:
// - `KHR_draco_mesh_compression` mesh compression extension
// - `KHR_texture_basisu` texture compresion extension
itowns.enableDracoLoader('./libs/draco/');
jailln marked this conversation as resolved.
Show resolved Hide resolved
itowns.enableKtx2Loader('./lib/basis/', view.renderer);

if (state.tileset) {
const source = new OGC3DTilesSource({ url: state.tileset });
const layer = new OGC3DTilesLayer('3DTiles', {
source,
});

// Add an event for picking the 3D Tiles layer and displaying
// information about the picked feature in an html div
const pickingArgs = {
htmlDiv: document.getElementById('featureInfo'),
view,
layer,
};

// Add the layer to our view
view.addLayer(layer).then((layer) => {
zoomToLayer(view, layer);
window.addEventListener('click',
(event) => fillHTMLWithPickingInfo(event, pickingArgs), false);
jailln marked this conversation as resolved.
Show resolved Hide resolved
});

debug.createOGC3DTilesDebugUI(menuGlobe.gui, view, layer);
}

window.setURL = setURL;
jailln marked this conversation as resolved.
Show resolved Hide resolved
</script>
</body>
</html>
42 changes: 23 additions & 19 deletions examples/3dtiles_pointcloud.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,6 @@
<li>Use classification to assign colour to each points</li>
<li>Switch between mode on the left panel</li>
</ul>
<br/>
<p><b>Point Information:</b></p>
<div id="featureInfo"></div>
</div>
<div id="viewerDiv"></div>
<script src="js/GUI/GuiTools.js"></script>
Expand Down Expand Up @@ -52,32 +49,39 @@
var layer = new itowns.ColorLayer('Ortho', config);
view.addLayer(layer).then(menuGlobe.addLayerGUI.bind(menuGlobe));
});

function updatePointCloudSize({tileContent}) {
tileContent.traverse(function (obj) {
if (obj.isPoints) {
obj.material.size = 2.0;
}
});
}
// Create a new Layer 3d-tiles For Pointcloud
// -------------------------------------------
var $3dTilesSource = new itowns.OGC3DTilesSource({
var $3dTilesSource = new itowns.C3DTilesSource({
url: 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/pointclouds/pnts-sete-2021-0756_6256/tileset.json',
});
var $3dTilesLayerSetePC = new itowns.OGC3DTilesLayer('3d-tiles-sete', {
var $3dTilesLayerSetePC = new itowns.C3DTilesLayer('3d-tiles-sete', {
name: 'SetePC',
sseThreshold: 5,
pntsMode: itowns.PNTS_MODE.CLASSIFICATION,
pntsShape : itowns.PNTS_SHAPE.CIRCLE,
pntsSizeMode: itowns.PNTS_SIZE_MODE.ATTENUATED,
source: $3dTilesSource,
});
}, view);

const pickingArgs = {
htmlDiv: document.getElementById('featureInfo'),
view,
layer: $3dTilesLayerSetePC,
};
$3dTilesLayerSetePC.addEventListener(
itowns.C3DTILES_LAYER_EVENTS.ON_TILE_CONTENT_LOADED,
updatePointCloudSize,
);

itowns.View.prototype.addLayer.call(view,$3dTilesLayerSetePC)
.then(() => {
window.addEventListener('mousemove',
(event) => fillHTMLWithPickingInfo(event, pickingArgs),
false);
});
itowns.View.prototype.addLayer.call(view, $3dTilesLayerSetePC);
function switchMode(){
let pntsLayer = view.getLayerById("3d-tiles-sete");
if(pntsLayer){
pntsLayer.pntsMode = pntsLayer.pntsMode === itowns.PNTS_MODE.COLOR ? itowns.PNTS_MODE.CLASSIFICATION : itowns.PNTS_MODE.COLOR;
view.notifyChange(view.camera3D);
}
}

// Add the UI Debug
var d = new debug.Debug(view, menuGlobe.gui);
Expand Down
4 changes: 4 additions & 0 deletions examples/config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,10 @@
"3dtiles_pointcloud": "Pointcloud classification"
},

"3D Tiles (new)": {
"3dtiles_loader": "3D Tiles tileset loader"
},

"Pointcloud": {
"potree_25d_map": "Potree 2.5D map",
"potree2_25d_map": "Potree 2.5D map 2.0 format",
Expand Down
Loading