geo1007-labinstructions

GEO1007 Lab 6 - 3D Geo-information on the Web

This assignment consists of the following parts:

Part A - OSM buildings with Delft data

Prepare

Set up layer

In this step, you will replace the remote WFS service with a local WFS you shall create. Set up your own WFS service for ‘pand’ data as follows:

❓ Question / Result #1

Adapt

❓ Question / Result #2

Make subset request

We will now select only a part of the WFS layer (adapt .../osm_buildings/index.html).

❓ Question / Result #3

Include in your report:

Part B - Cesium with 3D Tiles (styling a 3D model)

In your browser go to http://localhost:8080/geoweb/lab6/3d_tiles/, this will load 3D Tiles from the tileset directory inside Cesium, a 3D globe application.

The 3D buildings are coloured according to tax values for the year 2020 (totVal2020) of the buildings.

Read the web page Styling and Filtering 3D Tiles in Cesium.

Now edit index.html and colour the buildings according to ‘number of floor’ (KAT_SAYISI) attribute. Use at least three different colour intervals (e.g. 0-3, 3-6, 6+). A website like https://colorbrewer2.org can be useful to obtain a colour scheme.

💡 Tip

The order of your conditions matter!

Go to the tileset folder, open tileset.json with a text editor of your choice and investigate the structure of tileset.json file. Also open one of the (smaller) .b3dm files with a simple text editor, but not Sublime. Now answer the following Question.

❓ Question / Result #4

Include in your report:

  1. The adapted index.html
  2. A screenshot of the result
  3. For the tileset.json: Using the OGC 3D Tiles Specification 1.0 (http://docs.opengeospatial.org/cs/18-053r2/18-053r2.html), interpret the tileset and tile properties (e.g. asset, properties, geometricError, root, refine, children, etc.) of the tileset.json file with your own words.
  4. For the .b3dm file: Which parts are human readable, and which parts are not? What information do the parts contain? Also, relate these parts to their name from the specification (hint: Section 9). If you’re curious, you can open the file with Sublime too and notice the way the text is rendered is a bit less chaotic.

Part C - Pointclouds with Potree

For this part, we will work with the contents of .../lab6/potree/.

Modify the Potree viewer

Add into index.html, the following Javascript code to add 2 layers with Pointcloud data into the viewer (hint: the ‘viewer’ instance already needs to be defined):

Potree.loadPointCloud("http://ahn2.pointclouds.nl/potree_data/tile_all/cloud.js", "AHN-2 (processed by TU Delft)", function(e){
    viewer.scene.addPointCloud(e.pointcloud);
    
    let material = e.pointcloud.material;
    material.size = 0.8;
    material.minSize = 2.0;
    material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
    material.shape = Potree.PointShape.CIRCLE;
    material.activeAttributeName = "elevation";
    material.elevationRange = [-1, 65];

    e.pointcloud.position.x += 3;
    e.pointcloud.position.y -= 3;
    e.pointcloud.position.z += 4;
    
    viewer.fitToScreen();
});

Potree.loadPointCloud("http://ahn2.pointclouds.nl/ahn2-hwh/metadata.json", "AHN-2 (processed by Het Waterschapshuis)", function(e){
    e.pointcloud.visible = false
    viewer.scene.addPointCloud(e.pointcloud);
    
    let material = e.pointcloud.material;
    material.size = 0.8;
    material.minSize = 2.0;
    material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
    material.shape = Potree.PointShape.CIRCLE;
    material.activeAttributeName = "elevation";
    material.elevationRange = [-1, 65];

    e.pointcloud.position.x += 3;
    e.pointcloud.position.y -= 3;
    e.pointcloud.position.z += 4;
    
    viewer.fitToScreen();
});

Once you’ve modified index.html, visit: http://localhost:8080/geoweb/lab6/potree/ and familiarize yourself with the Potree interface (on the left, you find the menu, that has folded regions, which can be opened by clicking on their heading).

Under ‘Appearance’ one can adjust how many points will be rendered at once (useful if your laptop is not that powerful). If the above modifications were made properly, then under ‘Scene’ → ‘Point Clouds’ the two layers show up.

The data for the two Pointcloud layers were processed in two different ways to obtain a nested Octree structure with points (see References below). As a result, how the Octree actually is stored in files on the web server is different. We will look at the differences in the following Question.

❓ Question / Result #5

Compare the web requests the viewer makes for fetching the point cloud data, in the Octree structure as pre-processed by TU Delft and by Het Waterschapshuis.

Answer the following two questions:

  1. For both Pointcloud layers: Which requests are responsible for the Octree hierarchy and which requests are responsible for the data? Any other relevant requests for fetching the (meta)data (hint: how does Potree ‘know’ the layout of the Octree to visit nodes, when the user zooms or pans)?

  2. What are the differences between the requests made for the two layers? Look at least at: For which URL is the request made? What are the HTTP status codes and what headers do you see (specifically look for presence of Content-Length and Content-Range header). Hint: https://developer.mozilla.org/en-US/docs/Web/HTTP/Range_requests.

References for Potree

In case you want to know more about how the Octree datasets were generated, you can read the following 2 research papers:

Submit

Submit Lab 6 together with the result of Lab 5.

For this Lab 6, you submit (on Brightspace):