pg2b3dm

Getting started

Introduction

In this document we run pg2b3dm on a sample dataset, a shapefile from Delaware containing building footprints with a height attribute. The generated 3D tiles are visualized in a CesiumJS/Mapbox GL JS v3 beta/Cesium for Unreal viewer.

Download data

We download a dataset from the US Building Footprints.

https://wiki.openstreetmap.org/wiki/Microsoft_Building_Footprint_Data

Download dataset:

Delaware - Dover (22,532 buildings available)

https://1drv.ms/u/s!AqWv0F0N63JkgQqO6E9e2kI28R16

Donwload zip, unzip. It contains a ‘bldg_footprints.shp’ shapefile with building height column.

Prerequisites

Import buildings to PostGIS

Import the buildings to database using ogr2ogr.

$ ogr2ogr -f "PostgreSQL" PG:"host=localhost user=postgres password=postgres dbname=postgres" bldg_footprints.shp -nlt POLYGON -nln delaware_buildings

In PostGIS, a spatial table ‘delaware_buildings’ is created.

Add columns

postgres=# ALTER TABLE delaware_buildings ADD COLUMN  geom_triangle geometry;
postgres=# ALTER TABLE delaware_buildings ADD COLUMN style json;
postgres=# ALTER TABLE delaware_buildings ADD COLUMN shaders json;
postgres=# ALTER TABLE delaware_buildings ADD COLUMN elevation real default 0.0;

Shaders

Update the style column with a JSON file containing walls, roof, floor colors:

Colors used:

#008000: green (floor)

#FF0000: red (roof)

#EEC900: yellow (wall)

postgres=# UPDATE delaware_buildings SET style = ('{ "walls": "#EEC900", "roof":"#FF0000", "floor":"#008000"}');

The ‘shaders’ column will be filled in next ‘bertt/tesselate_building’ step.

Run tesselate_building

Install tool tesselate_building

$ dotnet tool install --global tesselate_building

When installation gives problems try with:

$ dotnet tool install -g --add-source 'https://api.nuget.org/v3/index.json' --ignore-failed-sources tesselate_building

Tool tesselate_building does the following:

Note: For Mapbox GL JS v3 beta support use ‘-f mapbox’ in the following step.

$ tesselate_building -h localhost -U postgres -d postgres -f cesium -t delaware_buildings -i wkb_geometry -o geom_triangle --idcolumn ogc_fid --stylecolumn style --shaderscolumn shaders
Tool: Tesselate buildings 0.3.0.0
Password for user postgres:

Connected to database.

Table: delaware_buildings
Progress: 100.00%
Elapsed: 190 seconds
Program finished.

After running, columns ‘geom_triangle’ and ‘shaders’ should be filled with the correct information.

The geom_triangle column contains PolyhedralSurfaceZ geometries consisting of triangles.

In SQL add a spatial index on the geom_triangle column for fast performance:

psql> CREATE INDEX ON delaware_buildings USING gist(st_centroid(st_envelope(geom_triangle)));

The shaders column contains json information like:

{
  "PbrMetallicRoughness": {
    "BaseColors": [
      "#008000",
      "#008000",
      "#FF0000",
      "#FF0000",
      "#EEC900",
      "#EEC900",
      "#EEC900",
      "#EEC900",
      "#EEC900",
      "#EEC900",
      "#EEC900",
      "#EEC900"
    ]
  }
}

In this case PbrMetallicRoughness shader will be used, for all the triangles there is a color code.

Run pg2b3dm

Install pg2b3dm:

$ dotnet tool install --global pg2b3dm

Run pg2b3dm, the program will make a connection to the database and 1 tileset.json and 927 b3dm’s will be created in the output directory.

$ pg2b3dm -h localhost -U postgres -c geom_triangle -t delaware_buildings -d postgres -a ogc_fid --shaderscolumn shaders

Output:

```Tool: pg2b3dm 2.0.0.0 Password for user postgres: Start processing 2024-01-04T10:55:13…. Input table: delaware_buildings Input geometry column: geom_triangle Spatial reference of delaware_buildings.geom_triangle: 4326 Spatial index detected on delaware_buildings.geom_triangle Query bounding box of delaware_buildings.geom_triangle… Bounding box for delaware_buildings.geom_triangle (in WGS84): -75.59158711, 39.08939264, -75.44656349, 39.23050979 Height values: [0 m - 76.58 m] Default color: #FFFFFF Default metallic roughness: #008000 Doublesided: True Create glTF tiles: True Attribute columns: ogc_fid Center (wgs84): -75.51907530249994, 39.15995121350005 Starting Cesium mode… Translation ECEF: 1238318.875,-4794808.5,4006101.5 Lod column: Geometric errors: 2000,0 Refinement: REPLACE Geometric error used for implicit tiling: 2000 Add outlines: False Use 3D Tiles 1.1 implicit tiling: True Maximum features per tile: 1000 Start generating tiles… Creating tile: 3_5_4.glb Tiles created: 60 Writing 33 subtree files… Available Levels: 5 Subtree Levels: 3 SubdivisionScheme: QUADTREE Writing output/tileset.json…

Elapsed: 9 seconds, 982 milliseconds Program finished 2024-01-04T10:55:23. ```

Visualize in CesiumJS

Copy the generated tiles to sample_data\delaware\cesium\ (overwrite the tileset.json and sample tiles in tiles directory there).

Put folder ‘sample_data’ on a webserver (for example $ python3 -m http.server) and navigate to /delaware/cesium/index.html

If all goes well in Delaware - Dover you can find some 3D Tiles buildings.

alt text

Sample live demo in Cesium: https://geodan.github.io/pg2b3dm/sample_data/delaware/cesium/

Visualize in Cesium for Unity3D

In pg2b3dm use options –create_gltf false –use_implicit_tiling false

Required:

Copy the generated tiles to webserver (for example $ python3 -m http.server)

image

In the Game View the buildings should be visible.

image

Visualize in Mapbox GL JS v3 beta

See demo https://geodan.github.io/pg2b3dm/sample_data/delaware/mapboxv3

Visualize in Cesium for Unreal

In pg2b3dm use options –create_gltf false –use_implicit_tiling false

Required:

image

Copy the generated tiles to webserver (for example $ python3 -m http.server)

CesiumUnrealAdd3dTiles

Unrealproperties

image

. Camera speed to 8

. Camera speed scalar to 2

image

If all goes well the 3D Tiles the 3D Tile buildings should be visualized.

image

This site is open source. Improve this page.