geodan / mapbox-3dtiles Goto Github PK

View Code? Open in Web Editor NEW

277.0 277.0 63.0 42.82 MB

3D Tiles implementation using Mapbox GL JS custom layers

License: BSD 3-Clause "New" or "Revised" License

JavaScript 95.67% HTML 4.33%

mapbox-3dtiles's Introduction

mapbox-3dtiles

3D Tiles implementation using Mapbox GL JS custom layers

See https://geodan.github.io/mapbox-3dtiles/ for a working demo.

This is a proof-of-concept implementation of a 3D Tiles viewer as a Mapbox GL JS custom layer. WebGL rendering is implemented using three.js. Only Web Mercator (EPSG:3857) tilesets are supported, as this is the projection mapbox uses. Earth-centered earth-fixed tilesets are explicitly not supported. Tilesets used for testing were generated using pg2b3dm, using a PostGIS database with EPSG:3857 geometries.

This is by no means a complete implementation of the 3D Tile specification. Currently the following features are supported:

Geometric error based tile loading
Replacement and additive refinement
Only Box bounding volumes are supported
Tile transforms
External tilesets
Tile types:
- Batched 3D Model (b3dm)
- Point Cloud (pnts): basic implementation

The following features are not supported at this time:

Any coordinate system other than EPSG:3857
Region and sphere bounding volumes
Viewer request volumes
Instanced 3D Model (i3dm) tiles
Composite (cmpt) tiles
3D Tile Styles

Instructions

In a directory on your webserver run the folowing commands:

git clone https://github.com/Geodan/mapbox-3dtiles.git
cd mapbox-3dtiles
npm install
cd ./ahn
tar xvf ahn_points.tar.gz
cd ../rotterdam
tar xvf rotterdam_3dtiles_small.tar.gz

Next, copy file "apikeys.js.example" to "apikeys.js" and add your mapbox token. Point your browser to the directory in question and you should see a basic viewer with 3d tiles content.

Creating tilesets

Tilesets can be created using pg2b3dm, using a PostGIS database table as source. The PostGIS table should contain 3D geometries in EPSG:3857 projection.

Example query creating extruded 3D buildings in EPSG:3857:

DROP TABLE IF EXISTS <schema>.<output_table>;
CREATE TABLE <schema>.<output_table> AS (
	WITH extent AS (
		SELECT ST_MakeEnvelope(<minx>, <miny>, <maxx>, <maxy>, <input_srid>) geom
	),
	footprints AS (
		SELECT a.id AS id, a.height, a.geom
		FROM <schema>.<input_table> a, extent b
		WHERE ST_Intersects(a.geom, b.geom)
	)
	SELECT id, ST_Force3D(ST_Extrude(ST_Transform(ST_MakeValid(geom), 3857), 0, 0, height)) AS geom
	FROM footprints
);
DELETE FROM <schema>.<output_table> WHERE geom IS NULL; -- cleanup
DELETE FROM <schema>.<output_table> WHERE ST_GeometryType(geom) NOT LIKE 'ST_PolyhedralSurface'; -- cleanup

Creating tileset using pg2b3dm:

pg2b3dm -h <my_host> -U <my_user> -d <my_database> -p <my_port> -c <geom_column> -t <my_schema.my_table>

For more information, see the pg2b3dm documentation.

Creating tileset from point cloud:

Pointcloud data is not yet supported by pg2b3dm and needs to be exporterd with an earlier tool called py3dtiles

py3dtiles convert --srs_in <srs_in> --srs_out 3857 --out <tileset_name> pointcloud.las

For more information, see the py3dtiles documentation.

mapbox-3dtiles's People

Contributors

Stargazers

Watchers

mapbox-3dtiles's Issues

Collaboration opportunity?

Hi, very nice demo, thanks for sharing.

We are also developing a framework-independent 3d tile loader (part of our loaders.gl effort), you can see results developing at:

A few remarks:

We created loaders.gl to enable collaboration/interoperability with others developers, such as yourselves.
As you have probably discovered, implementing the full 3d tiles standard is a big effort and as such, best shared.
If collaboration sounds interesting, happy to connect.

Also:

Could you clarify the licenses on your open source code, ideally by adding a LICENSE file to your repo? As it stands, it is not clear whether we can use/copy/fork your code
One idea would be to port your mapbox/THREE.js sample to use the loaders.gl/3d-tiles loader and include as a demo on loaders.gl website (with attribution to yourselves of course!)
If we can't use your implementation as a base due to licensing issues that is OK, we'd likely roll our own, but why reinvent the wheel when working with open source?

Support Replacement refinement

Currently, only Additive refinement is supported. According to the specification, Replacement refinement should also be supported. https://github.com/AnalyticalGraphicsInc/3d-tiles/tree/master/specification#refinement

Please add a license

Please add a license so that others can build upon it.

npm install failed

npm ERR! code ECONNRESET
npm ERR! errno ECONNRESET
npm ERR! network request to https://repo.geodan.io/repository/npm/mapbox-gl failed, reason: socket hang up
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly. See: 'npm help config'

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\wbz\AppData\Roaming\npm-cache_logs\2020-06-27T14_17_15_655Z-debug.log

Does cesium tilt photography model support

Deal with magic numbers for geometricerror

Seems these numbers are arbitrarily set:

improve shadow borders

Shadows have jagged borders, improve shadow map resolution or lighting

How to load cesium 3dtile

I am using Metashape for modeling, but the exported 3D tiles cannot be loaded directly. May I know how to handle this? Thank you very much

glTF animations not working on instanced tiles

I've created i3dm's containing glTF animations, but the animation is not playing :-(

Demo:

https://bertt.github.io/mapbox_3dtiles_samples/samples/instanced/animations/#18.14/52.372675/4.893336/0/45

Can I load oblique photography data?

External tilesets?

I did an experiment with external tilesets see https://bertt.github.io/mapbox_3dtiles_samples/external.html

In this sample parent file external.json (https://bertt.github.io/mapbox_3dtiles_samples/external.json) is loaded, after that I can see child
tileset.json (https://bertt.github.io/mapbox_3dtiles_samples/tileset.json) is also loaded. But nothing is drawn on the map :-(

The same trick works in Cesium viewer.

When directly using child tileset https://bertt.github.io/mapbox_3dtiles_samples/tileset.json it works as expected (see https://bertt.github.io/mapbox_3dtiles_samples/index.html)

3dfiles cannot be loaded after setting the terrain。 Mapbox version 2.3.1

Hi, Man
3dfiles cannot be loaded after setting the terrain。
Mapbox version 2.3.1

how can i pickup point and get it's attributes from pointcloud datas

i3dm: add support for SCALE and SCALE_NON_UNIFORM per instance

see https://github.com/CesiumGS/3d-tiles/tree/master/specification/TileFormats/Instanced3DModel#instance-semantics

Add debugging functionality

Add debugging functions, something like in Cesium: debugShowBoundingVolume, debugColorizeTiles, debugShowGeometricError, debugShowRenderingStatistics

Support RTC_CENTER in i3dm

For high precision instance positions in i3dm there should be support for RTC_CENTER in the featuretable.

Sample featuretable: {"INSTANCES_LENGTH":25,"RTC_CENTER":[1215013.8340490046,-4736316.75897742,4081608.4380407534],"EAST_NORTH_UP":true,"POSITION":{"byteOffset":0}}

Spec: https://github.com/CesiumGS/3d-tiles/tree/master/specification/TileFormats/Instanced3DModel#rtc_center

Should be similar to the RTC_CENTER functionality in pnts tiles.

Differences between mapbox-3dtiles and fill-extrusion

Hello,

Thank you for making this open source!

I'm relatively new to MapBox. Could you please clarify what is the difference between this implementation, and the example at https://docs.mapbox.com/mapbox-gl-js/example/3d-buildings/ which uses a fill-extrusion layer? What are the tradeoffs for each approach? When would you prefer one over the other?

Add support for cmpt tiles

Add support for composite tiles, according to https://github.com/AnalyticalGraphicsInc/3d-tiles/tree/master/specification#introduction

Add support for Composite tile format (cmpt)

Add support for Composite tile format (cmpt), specs: https://docs.opengeospatial.org/cs/18-053r2/18-053r2.html#249

Support Geometricerror

Currently, the Geometricerror is ignored and tiles are loaded and unloaded according to the camera's frustum and the screenspace occupied by the tile's bounding volume. According to the specification, Geometricerror should be used to determine if a tile should be loaded/rendered. https://github.com/AnalyticalGraphicsInc/3d-tiles/tree/master/specification#geometric-error

Load textured 3d models

Hi Tom,

Would this implementation work with a textured 3d model that has been presented as a 3D tile service?

External tileset broken?

I'm using latest version of develop branch, testing external tileset.json function. I encounter the following error when using external.json (which references tileset.json):

Mapbox3DTiles.js:53981 ReferenceError: TileSet is not defined
    at ThreeDeeTile.load (Mapbox3DTiles.js:53964)
    at ThreeDeeTile.checkLoad (Mapbox3DTiles.js:54186)
    at ThreeDeeTile.checkLoad (Mapbox3DTiles.js:54192)
    at Mapbox3DTilesLayer.loadVisibleTiles (Mapbox3DTiles.js:59708)
    at Mapbox3DTiles.js:59799

Working site (references tileset.json):
https://bertt.github.io/mapbox_3dtiles_samples/samples/external/index_working.html#15.62/39.160792/-75.52649/0/45

Not working site (references external.json which references tileset.json):
https://bertt.github.io/mapbox_3dtiles_samples/samples/external/index_not_working.html#15.62/39.160792/-75.52649/0/45

The sample was working before upgrading to the latest commit in develop branch (old version was using mapbox-gl 1.9)

Error after removing layer

All Mapbox3DTiles layers are broken after removing a Mapbox3DTiles layer from the map, this has probably something to do with: https://github.com/Geodan/mapbox-3dtiles/blob/master/Mapbox3DTiles.mjs#L691

Uncaught TypeError: this.cameraSync is null
    loadVisibleTiles Mapbox3DTiles.mjs:72
    updateCallback Mapbox3DTiles.mjs:117
    updateCamera CameraSync.mjs:120
    CameraSync CameraSync.mjs:38
    fire mapbox-gl.js:31
    _fireEvent mapbox-gl.js:35
    _fireEvents mapbox-gl.js:35
    _updateMapTransform mapbox-gl.js:35
    _applyChanges mapbox-gl.js:35
    _requestFrame mapbox-gl.js:35
    run mapbox-gl.js:35
    _render mapbox-gl.js:35
    _frame mapbox-gl.js:35
    frame mapbox-gl.js:31
    triggerRepaint mapbox-gl.js:35
    _render mapbox-gl.js:35
    _frame mapbox-gl.js:35
    frame mapbox-gl.js:31
    triggerRepaint mapbox-gl.js:35
    _update mapbox-gl.js:35
    _updateMapTransform mapbox-gl.js:35
    _applyChanges mapbox-gl.js:35
    _requestFrame mapbox-gl.js:35
    run mapbox-gl.js:35
    _render mapbox-gl.js:35
    _frame mapbox-gl.js:35
    frame mapbox-gl.js:31

Something is wrong with the installation

After npm install, the following error occurs:
fetchMetadata: sill fetchPackageMetaData error for mapbox-gl@^1.10.0 request to https://repo.geodan.io/repository/npm/mapbox-gl failed, reason: socket hang up

shadows corrupted after map or window resize

After you resize the window or map, shadows are no longer correctly projected

Make gltf-loader a dependency

Currently gltf loader is statically included, would be nice when it is a dependency. Available from:
https://github.com/johh/three-gltf-loader

Instanced 3D Tiles (i3dm)

Add support for instanced 3D Tiles (i3dm).

Specs: https://github.com/CesiumGS/3d-tiles/tree/master/specification/TileFormats/Instanced3DModel

Working sample in Cesium:

see https://bertt.github.io/cesium_3dtiles_samples/samples/instanced/

Contains 1 tile (tree.i3dm) with tree.glb and two instances defined. Right clicking displays batch information in console (Height: Height: 101 or 102)

Not working sample in MapBox:

see https://bertt.github.io/mapbox_3dtiles_samples/samples/instanced/

Content tree.i3dm:

i3dm file: tree.i3dm
i3dm header version: 1
i3dm GltfFormat: 1
i3dm header magic: i3dm
i3dm featuretable json: {"INSTANCES_LENGTH":2,"POSITION":{"byteOffset":0},"EAST_NORTH_UP":true}
i3dm instances length: 2
i3dm batch table json: {"Height":[100,101]}
positions: <-8407347, 4743739.5, 38.29>,<-8406181, 4744924, 38.29>
normal ups: : -
normal rights: : -
Scale non-uniform: : -
Scales: -
Batch ids: : -

Upgrade gltf-loader /threejs

Currently threejs/gltf loader is throwing shader errors. Updgrade should fix that.

Question about intersectsBox and crs transform.

Hi, I'm new to 3d tiles and trying to use this lib to display my cesium asset tiles, and found during the checkLoad, there is no boundingvolume intersets with the camera frustum. Below are my understanding toward this issue and how this lib works, and I wish you can help me to clarify some of the doubts and point a direction. Thank you so much.

To my understanding, this is how 3d tile works: The vertex info in b3dm/pnts are merely forming meshes in a non-georeferenced Cartesian coordinate system. It is the boundingvolume that defines its geo location and bounding. And the bounding volume can be in any crs or even non georeferenced(in 3d scene Cartesian coordinate system). The transform is applied to project children's crs to the parent's crs, or from root crs to base map crs(in this case, web mercator EPSG:3857 for mapbox).

So I assume the problem with my case lies in the crs. The cesium ion assets are not in EPSG3857(There is no crs info in the tileset.json, I assume it is in EPSG: 4979 since it is recommended in the 3d tile standard), and the transform provided is not from 4979 to 3857.

So there can be two approaches:

Transform the boundingvolume into 3857 to make it consistent with mapbox crs, and remove the transform info(or use default identity matrix).
Leave the boundingvolume as it is, and change the transform info to the transform needed from the boundingvolume's crs to 3857.

I've tried gdal and epsg.io to transform 4979 to 3857, but failed. And I don't really have a clue about how to form the transform matrix needed from 4979 to 3857.

Could you please help to clarify the doubt and shed some light upon this issue?
Thank you.

Add boundingVolume.region support

Add boundingVolume.region support, see https://github.com/CesiumGS/3d-tiles/blob/master/specification/README.md#region

Pro's: smaller and more simple tileset.json

Support per-tile transforms

Currently, only the root-tile transform of a tileset is supported. According to the specification, every tile can have its own transform as well. https://github.com/AnalyticalGraphicsInc/3d-tiles/tree/master/specification#tile-transforms

Support 3D Tile Styles

https://github.com/AnalyticalGraphicsInc/3d-tiles/tree/master/specification/Styling

Some Questions

Hey,
really cool work!

i have some basic questions:

is this a fork of a mapbox version, or like a plugin?
Could i use it with any mapbox version, also like the new v2? If so, would it also working with the new elevation model?
are the 3D models click, hover able?
are maybe also styleexpression possible? or some way to color the buildings by some function in different way?

I3DM: Make NORMAL_UP and NORMAL_RIGHT optional

When trying to read an i3dm without NORMAL_UP and NORMAL_RIGHT vectors, there is an error:

'Cannot read property 'byteOffset' of undefined'

NORMAL_UP and NORMAL_RIGHT should be optional, as defined in https://github.com/CesiumGS/3d-tiles/tree/master/specification/TileFormats/Instanced3DModel#instance-semantics

cast shadows on mapbox-3dtiles objects

Currently shadows are cast on the map layers, not on the objects rendered by mapbox-3dtiles

Draco

When using glTF's with Draco compression there is an error:

THREE.GLTFLoader: No DRACOLoader instance provided.
at new GLTFDracoMeshCompressionExtension (GLTFLoader.js:556)
at GLTFLoader.parse (GLTFLoader.js:184)
at ThreeDeeTile.load (Mapbox3DTiles.js:295)

Sample:

https://bertt.github.io/mapbox_3dtiles_samples/draco.html