"All in one example" demonstrating iTowns capacities for end users

[jailln]

Context

iTowns currently provides an unstructured collection of examples that are mainly designed for developers and are kind of tutorials in the end.

Description of the proposal

In addition to the developer oriented existing examples, I propose that we create one end-user oriented demonstration that exposes main iTowns features and that could be added to the landing page of our website

Implementation

Functional Implementation

Here is my proposition, submitted to discussion and that may evolve after a first implementation.

I propose to structure this demonstration in different steps. Each step will be composed of a view (globe or planar), a point of view, and a set of real-world data (i.e. not demo data but real data of potential end users). The transition between each step can be made with CameraUtils animations. A small component should be added to the upper top left with a title, a small descriptive text, buttons to allow to switch between different steps, and a button to restart the demo from the beginning, similar to the following one:

The proposed different steps are:

Step 1

• General idea: General view of the globe
• Point of view: the full globe, dezooomed, centered on europe
• datasets:
  • Basemap: examples/layers/JSONLayers/Ortho.json
• interaction: none
• title: 3D Globe
• text: -To be defined-
• reference example: view_3d_map.html

Step 2

• General idea: Show the 3D Terrain
• Point of view: zoomed in on corsica or the alps, depending on what is the best point of view
• datasets:
  • Basemap: examples/layers/JSONLayers/Ortho.json
  • elevation layers: examples/layers/JSONLayers/IGN_MNT_HIGHRES.json (+ examples/layers/JSONLayers/IGN_MNT.json)
• interaction: none
• title: 3D Terrain
• text: -To be defined- + include the different supported formats for 3D terrain and links to doc
• reference example: view_3d_map.html

Step 3

• General idea: 2D projected data
• Point of view: zooomed in on a zone of interest with data, tilted around 45 degrees.
• datasets:
  • Basemap: choose between the following based on what is the most interresting visually: examples/layers/JSONLayers/Ortho.json ; examples/layers/JSONLayers/OPENSM.json and http://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png / http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png
  • Elevation layer: examples/layers/JSONLayers/IGN_MNT_HIGHRES.json (+ examples/layers/JSONLayers/IGN_MNT.json)
  • Overlayed layers: use 2D elements of https://data.geopf.fr/annexes/ressources/vectorTiles/styles/PLAN.IGN/standard.json, including at least: parcs, building footprints. The idea is to represent different zones. Another possibility is to use https://data.grandlyon.com/portail/fr/jeux-de-donnees/parcs-jardins-metropole-lyon/donnees (test what seems better).
• interaction: click on the layer to display a tooltip with some selected layer properties
• title: 2D projected data
• text: -To be defined- + includes 2D projected data formats and rasterisation vs mesh possibilities
• other UI elements: add a small info tooltip on the upper right corner with the following text: i click on the data to display attributes
• reference example: https://www.itowns-project.org/itowns/examples/#source_file_geojson_raster and https://www.itowns-project.org/itowns/examples/#vector_tile_3d_mesh

Step 4

• General idea: 3D extruded data: same point of view as before but extrude data with animation
• Point of view: same as step 3
• datasets:
  • Basemap: same as step 3
  • Elevation layer: same as step 3
  • Overlayed layers: same as step 3, extrude building footprints with animation.
• interaction: same as step 3 + click on the buildings to display a tooltip with some selected layer properties
• title: 3D extruded data
• text: -To be defined- + includes data formats and extrusion possibilities
• reference example: https://www.itowns-project.org/itowns/examples/#vector_tile_3d_mesh

Step 5

• General idea: Instanced data
• Point of view: same as step 3
• datasets:
  • Basemap: same as step 3
  • Elevation layer: same as step 3
  • Overlayed layers: same as step 3 and 4 + instanced trees (on lyon footprints only) using the following dataset https://data.grandlyon.com/portail/fr/jeux-de-donnees/arbres-alignement-metropole-lyon/info + a simple but nice tree gltf model to be found or created.
• interaction: same as step 3 and 4
• title: Populate your city model
• text: -To be defined-
• reference example: https://www.itowns-project.org/itowns/examples/#misc_instancing

Step 6 - waiting for extruded lines to be merged

• General idea: Underground visualisation and extruded lines
• Point of view: same as step 3
• datasets:
  • Basemap: same as step 3
  • Elevation layer: same as step 3 (with the right opacity to see underground)
  • Overlayed layers: same as step 3, 4 and 5 + extruded lines underground: https://data.grandlyon.com/portail/fr/jeux-de-donnees/canalisations-des-reseaux-de-chaleur-et-de-froid-de-la-metropole-de-lyon--copie/donnees
• interaction: same as step 3 and 4
• title: Visualize underground pipes
• text: -To be defined-
• reference example:

Step 7

• General idea: Point Cloud
• Point of view: depending on the dataset, large enough to show that we can display big point cloud datasets but zoomed enough to see point clouds details and to be performant
• datasets:
  • Basemap: same as step 3
  • Elevation layer: same as step 3
  • Overlayed layers: LIDAR HD point cloud, zone to be determined, format COPC: https://cartes.gouv.fr/telechargement/IGNF_NUAGES-DE-POINTS-LIDAR-HD (by using the urls instead of downloading the data).
• interaction: add a button to switch style from colored to classification for instance if possible (depending on the rendering modes available in the point clouds)
• title: Visualize large point clouds
• text: -To be defined- + point cloud formats
• reference example: https://www.itowns-project.org/itowns/examples/#copc_simple_loader

Step 9

• General idea: 3D textured meshes
• Point of view: depending on the dataset, large enough to show that we can display big 3D meshes datasets but zoomed enough to details and to be performant
• datasets:
  • Basemap: same as step 3
  • Elevation layer: same as step 3
  • Overlayed layers: 3D Tiles mesh: https://webimaging.lillemetropole.fr/externe/maillage/2020_mel_5cm/tileset.json
• interaction: Possibility to click on objects to get attributes information, if available in the dataset
• title: Visualize large 3D mesh scenes
• text: -To be defined- + 3D mesh formats (3D tiles + all formats from threejs)
• reference example: https://www.itowns-project.org/itowns/examples/#3dtiles_loader

Step 10

• General idea: BIM building
• Point of view: zoomed on the dataset
• datasets:
  • Basemap: same as step 3
  • Elevation layer: same as step 3
  • Overlayed layers: BIM file as gltf
• interaction: None
• title: Visualize BIM data
• text: -To be defined- + BIM as gltf and possible integration with ifcjs ?
• reference example: none

Step 12

• General idea: Immersive view
• Point of view: same as immersive view example
• datasets:
  • Basemap: same as immersive view example
  • Elevation layer: same as immersive view example
  • Overlayed layers: same as immersive view example
• interaction: None
• title: Jump to immersive view
• text: -To be defined-
• reference example: https://www.itowns-project.org/itowns/examples/#view_immersive

(If possible - Step 11)

• General idea: Zoom to France and add an animation to switch from globe view to planar view
• Point of view: France
• datasets:
  • Basemap: IGN basemap in EPSG:2154
  • Elevation layer: none
  • Overlayed layers: none
• interaction: None
• title: Switch to local projections
• text: -To be defined-
• reference example: https://www.itowns-project.org/itowns/examples/#view_25d_map

[Desplandis]

I can only approve this proposal, this is long overdue. =)

I like the storytelling approach from planet-scale to street-scale datasets, I saw a similar approach from a viewer (which I don't remember the name nor the URL...) for a city-scale dataset.

I have some more suggestions:

• Could we add a "try it yourself" step at the end (with a link to our future sandbox ?) ?
• For step 12, we could start with the immersive view example but in a few months just show a street-view from panaromax datasets
• Side note : we don't have an attribution widget in iTowns, it would be cool to add one too

[Desplandis]

Ping @alavenant @Calvina24

[alavenant]

Hello,

I also approve this proposal wich is missing for non developper user. And I like the up => bottom idea.

How did you plan to expose it ?

One little comment, there is not step 8.

[jailln]

thanks for your feedback !

Could we add a "try it yourself" step at the end (with a link to our future sandbox ?) ?

Yes !

For step 12, we could start with the immersive view example but in a few months just show a street-view from panaromax datasets

Yes 🤩

Side note : we don't have an attribution widget in iTowns, it would be cool to add one too

Good remark ! We definitely need to add attributions.

How did you plan to expose it ?

What do you mean @alavenant ?

[alavenant]

I mean where user will find the link with the demo ? On itowns-project ?

[jailln]

Oh ok, yes I think we should add it to the website landing page but embedded and not through a link, but let's test it and see how it works out.

Also, I'm wondering whether to put the code on this repo or on itowns repo but I think it would be easier for maintainance to add it to iTowns source repo.

[alavenant]

that sounds good