3D Tiles: een OGC standaard

• Open standaard voor het visualiseren van (grote hoeveelheden) 3D geodata op het web
• Ontwikkeld door Cesium en gestandaardiseerd door OGC
• Hiërarchische datastructuur (spatial tiling)
• Ondersteunt verschillende formaten:
  • Batched 3D Models (b3dm)
  • Instanced 3D Models (i3dm)
  • Point Clouds (pnts)
  • Composite (cmpt)

Zie voor een gedetailleerd overzicht van de 3D Tiles specificatie: 3D Tiles Reference Card

Waarom zijn 3D Tiles nuttig?

• Optimalisatie voor grote datasets
  • Alleen de noodzakelijke data wordt ingeladen
  • Level of Detail (LOD) mechanisme
• Interoperabiliteit
  • Open standaard
  • Ondersteund door verschillende viewers (Cesium, ArcGIS, QGIS, Unity3D, Unreal)
• Streaming van 3D content
  • Progressief laden van data
  • Efficiënt voor web-based toepassingen
• Styling mogelijkheden
  • 3D Tiles Styling Language

Aan de slag!

• Casus: Proefpolderdijk bij Andijk
• Data:
  • Digitaal Topografisch Bestand (DTB) voor het terrein en bomen
  • De BAG voor gebouwen
• Toevoegingen
  • Windturbine 3D model (geanimeerd)
  • Boom 3D model
  • 3D Basisvoorziening van PDOK
  • IFC model van een gebouw

Docker omgeving

Let op: Controleer dat Docker is geïnstalleerd en draait voordat je verder gaat.

docker ps

Om de Docker omgeving op te starten zijn er twee bestanden nodig: docker-compose.yml en Dockerfile. Deze bestanden staan in de repository van de workshop.

Kopieer deze bestanden naar een lege directory op je lokale machine, bijvoorbeeld c:\3dtiles-workshop. Een makkelijke manier om dit te doen is click rechtermuis op de link en kies 'Save link as...'

Tip: Een alternatieve manier om de twee bestanden op te halen is de gehele repository te clonen via 'git clone'

Open een terminal (cmd, PowerShell of Git Bash) en ga naar de directory waar je de bestanden hebt opgeslagen

Workspace opzetten met Docker

Voor het opzetten van de workspace run het volgende commando vanuit de directory waar de bestanden docker-compose.yml en Dockerfile staan:

docker compose up -d

Er worden 2 containers gestart:

• postgis: een PostgreSQL database met PostGIS extensie
• workspace: een container met daarin alle benodigde tools geïnstalleerd (alpine)

De twee containers draaien in een apart netwerk en kunnen met elkaar communiceren. De database is vanaf de host machine bereikbaar via poort 5439, de workspace container is bereikbaar via poort 8080 (voor de webserver die we later gaan gebruiken).

Tip: Gebruik het commando docker compose down om de containers te stoppen en te verwijderen.

Docker containers

QGIS connectie met database

DBeaver connectie met database

Kies 'PostgreSQL' als database type.

Verbinding maken met workspace

Data downloaden en importeren

1. Zoek via de RWS DTB Bladindeling viewer het Andijk kaartblad (DTB kaartblad d15cz)
2. Download de data (d15cz.zip) en plaats de ZIP in ./container folder.
3. Bekijk de inhoud met GDAL (vanuit je container shell):

ogrinfo /vsizip/d15cz.zip

De zip bevat 3 shapefiles:

• d15cz_lin.shp (DTB lijnen)
• d15cz_reg.shp (DTB vlakken)
• d15cz_sym.shp (DTB punten)

Good to know: de /vsizip/ prefix voor de file path in ogrinfo zorgt ervoor dat je ZIPs kunt inspecteren.

Vraag: wat is de projectie van de bestanden?

Data importeren in PostgreSQL

Nu gaan we de DTB data inladen in de database. Run de volgende commands vanuit de shell container.

ogr2ogr -f "PostgreSQL" PG: /vsizip/d15cz.zip/d15cz_reg.shp -nln public.dtb_vlak_andijk -nlt MULTIPOLYGONZ

ogr2ogr -f "PostgreSQL" PG: /vsizip/d15cz.zip/d15cz_sym.shp -nln public.dtb_punt_andijk -nlt POINTZ

psql -c "SELECT count(*) from public.dtb_vlak_andijk;"

psql -c "SELECT count(*) from public.dtb_punt_andijk;"

Ruimtelijke indexen aanmaken

Maak ruimtelijke indexen aan in DBeaver:

In DBeaver ga naar menu SQL Editor > New SQL Script

Index voor DTB vlakken:

CREATE INDEX ON public.dtb_vlak_andijk USING gist(st_centroid(st_envelope(wkb_geometry)));

Index voor DTB punten:

CREATE INDEX ON public.dtb_punt_andijk USING gist(wkb_geometry);

Database view voor DTB punten

Maak een database view voor de punten (bomen) in DBeaver:

CREATE or replace view public.v_dtb_punt_andijk AS
SELECT
    RANDOM()*360 AS rotation,
    (RANDOM()*1.5)+0.5 AS scale,
    json_build_array(json_build_object('dtb id',dtb_id),
    json_build_object('omschrijving',omschr),
    json_build_object('datum',datum)) AS tags,
    'tree.glb' AS model,
    st_transform(wkb_geometry, 4979) AS geom
FROM public.dtb_punt_andijk
WHERE omschr = 'Boom';
                        

Good to know: we geven de bomen een random rotation en scale, zodat er wat variatie in zit. Merk ook op dat we 'tree.glb' als string toevoegen, hiermee koppelen we later het 3D model voor de boom.

Data bekijken

Gebruik QGIS om de data te bekijken.

public.dtb_punt_andijk (bomen)

public.dtb_vlak_andijk

3D Tiles maken van DTB vlakken

Maak 3D Tiles van de DTB vlakken.

pg2b3dm -U postgres -h postgis -p 5432 -d postgres -t public.dtb_vlak_andijk -a dtb_id,omschr,datum --use_implicit_tiling false -o ./output/dtb_vlakken -c wkb_geometry --create_gltf false

Resultaat: een tileset.json bestand en een directory 'content' met de 3D tiles in b3dm formaat.

3D Tiles maken van DTB punten

Maak 3D Tiles te maken van de DTB punten. We kunnen op elk punt een 3D-model (bijvoorbeeld van een 3D boom model) tekenen.

Kopieer tree.glb naar de container directory.

i3dm.export -c "Host=postgis;Username=postgres;Password=postgres;Database=postgres;Port=5432" -t public.v_dtb_punt_andijk -o ./output/dtb_punten --use_i3dm true

Resultaat: een tileset.json bestand, een directory 'content' met de 3D tiles in i3dm formaat, en een subtree folder.

Tilesets valideren

3d-tiles-validator --tilesetFile ./output/dtb_vlakken/tileset.json

3d-tiles-validator --tilesetFile ./output/dtb_punten/tileset.json

Server opzetten

Er is een webserver geïnstalleerd in de docker container. De webserver serveert alle files uit de /workspace folder. De server draait standaard op poort 8080.

Start de server:

http-server

3D Tiles bekijken in een CesiumJS Viewer

We gaan nu de CesiumJS Viewer gebruiken om de 3D Tiles te bekijken.

Kopieer index.html naar de container folder. Deze index.html pagina bevat Javascript code die met behulp van de CesiumJS library 3D data inlaadt.

In de code worden 4 tilesets geladen:

• PDOK achtergrondkaart (grijs)
• PDOK quantized mesh terrein model
• DTB Vlakken: ./output/dtb_vlakken/tileset.json
• DTB punten: ./output/dtb_punten/tileset.json

Open een browser en ga naar http://localhost:8080

De Cesium viewer bevat een aantal kaartlagen:

• PDOK BRT achtergrondkaart
• 3D Basisvoorziening - Digitaal Terreinmodel (DTM)

Tileset stijlen aanpassen

Styling kan worden toegepast op twee manieren:

• Tijdens het genereren van de tileset
• Tijdens het visualiseren in de client

Voeg de volgende code toe aan de tileset van de DTB vlakken voor het aanpassen van de style tijdens visualisatie:

Tip: Voeg code toe onder regel '// todo: voeg hier code toe'

tilesetDtbVlakken.style = new Cesium.Cesium3DTileStyle({
  color: {
    conditions: [
    ["${feature['osmchr']} === 'Bitumen'", "color('#430719')"],
    ["${feature['omschr']} === 'Steen bekleding'", "color('#740320')"],
    ["${feature['omschr']} === 'Bomen en struiken'", "color('#008000')"],
    ["${feature['omschr']} === 'Industrieterrein'", "color('#FFFF00')"]
    // todo: add more conditions
    ]
  }
});

Opdracht: maak features waar omschr === 'Meer' blauw (code #0000FF).

3D modellen toevoegen

Kopieer windturbine.glb naar de container directory.

Voeg de volgende code toe aan index.html

const windturbine = viewer.entities.add({ 
  position: Cesium.Cartesian3.fromDegrees(5.193486,52.754867), 
  model: { 
    uri: "windturbine.glb"         
  }, 
});

3D Basisvoorziening

In de 3D Basis voorziening van PDOK zijn landelijke 3D Tilesets beschikbaar.

Voeg de 3D gebouwen tileset toe aan de Cesium Viewer:

const tileset3DGebouwen = await Cesium.Cesium3DTileset.fromUrl(
  "https://api.pdok.nl/kadaster/3d-basisvoorziening/ogc/v1_0/collections/gebouwen/3dtiles"
);  
viewer.scene.primitives.add(tileset3DGebouwen);

Tip: Voor 3D LoD2.2 gebouwen gebruik https://data.3dbag.nl/v20250903/cesium3dtiles/lod22/tileset.json

Uitwerking 3D Tiles van panden in Andijk maken

1. Laden van de BAG data in PostgreSQL:

ogr2ogr -f "PostgreSQL" PG: 8-512-888.gpkg lod22_3d -nln public.bag3d -nlt MULTIPOLYGONZ

2. Aanmaken ruimtelijke index in DBeaver:

CREATE INDEX ON public.bag3d USING gist(st_centroid(st_envelope(geom)));

3. 3D Tiles genereren:

pg2b3dm -U postgres -h postgis -p 5432 -d postgres -t public.bag3d -a labels --use_implicit_tiling false -o ./output/bag3d -c geom --create_gltf false

4. Toevoegen aan Cesium Viewer:

                const tilesetBag3dVlakken = await Cesium.Cesium3DTileset.fromUrl("./output/bag3d/tileset.json");
                viewer.scene.primitives.add(tilesetBag3dVlakken);
                

Voeg IFC model toe

Plaats model.glb in container folder

Voeg toe aan Cesium Viewer:

                viewer.entities.add({ 
                    position: Cesium.Cartesian3.fromDegrees(5.194139,52.753524), 
                    model: { 
                    uri: "model.glb",
                        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND         
                    }, 
                });
                

Tip: Gebruik HeightReference.CLAMP_TO_GROUND om het model op het terrein te plaatsen.

Tip: Het IFC model wordt geplaatst in de buurt van de windturbine

Tip: Element 'IfcSite' in de IFC file kan worden gebruikt om de juiste locatie van het model te definiëren.

Vraag: Wat zijn de beperkingen van deze aanpak?

QGIS 3D Tiles

1. Open QGIS en ga naar 'Layer' -> 'Data Source Manager' -> 'Scene'
2. Zet 'Source Type' op 'Service'
3. Maak een nieuwe connectie aan via 'New' -> 'New Cesium 3D Tiles Connection'
4. Name: panden
5. URL: http://localhost:8080/output/andijk_panden/tileset.json

QGIS 3D Tiles visualisatie

2D weergave in QGIS:

Vraag: Waarom bestaan alle panden uit driehoeken?

QGIS 3D Tiles visualisatie

3D weergave in QGIS (via Views -> 3D Map Views -> Create new 3D Map View)

Wat valt er op aan de 3D View in QGIS?

Cleanup na de workshop

Voer de volgende commando's uit om de Docker containers te stoppen en te verwijderen:

docker compose down

Verwijder docker images:

docker rmi 3dtiles_workshop-workspace

docker rmi postgis/postgis

Verwijder database data:

docker volume rm 3dtiles_workshop_postgis_data