Mapbox-gl-js: Client-side terrain rendering

[lucaswoj]

Details to come 🕵️ 🕵️‍♀️

[mollymerp]

Time for a long overdue update to this ticket!
I have been working on porting over @kkaefer's work from mapbox-gl-native to JS. The relevant branches for the work he has done so far are:

• https://github.com/mapbox/mapbox-gl-native/tree/terrain-rendering
• https://github.com/mapbox/mapbox-gl-style-spec/tree/terrain-rendering
• https://github.com/mapbox/mapbox-gl-shaders/tree/terrain-rendering

I am working on https://github.com/mapbox/mapbox-gl-js/compare/terrain-rendering

Right now this depends on spinning up a backend server that processes 256px terrain-rgb tiles into 258px vector tiles that don't adhere to the current vector tile spec. I am also working on an implementation that would work directly with the terrain-rgb pngs, but this is not ideal bc we have to load all the bordering tiles of the ones in the viewport in order to avoid seams in the textures/rendering.

There is quite a bit of work that needs to happen before this can ship because it might involve changes to the vector-tile spec and subsequent creation of a new tileset for the world with the encoded raster terrain.

Once I have a working demo that is easily shareable (i.e. no local tileserver required) I will open a PR so people can play around with it.

[andrewharvey]

Are there plans to allow users to upload GeoTIFFs of their own DEMs as Tilesets and have Mapbox handle converting and distributing these as terrain-rgbs so if users have their own terrain in a local area they can use this?

Currently Mapbox Studio does support uploading single band rasters but only with Byte type. It would need to handle other types such as Int16,Int32 to support this use case.

[stirringhalo]

That's awesome! Any chance of a screenshot?

[andrewharvey]

My understanding is this is a proper 3D terrain so that a pitched map isn't a flat surface like https://www.mapbox.com/blog/3d-terrain-threejs/. Is that right?

And the flat surface/non pitched hillshading feature from #2546 would simply be an effect of the 3D terrain / lighting from this. Is that correct?

[lucaswoj]

@andrewharvey At this time we're working on 2d hillshading, not proper 3d terrain. I hope we'll be able to dig into 3d terrain soon! It's going to be a big project.

[andrewharvey]

@lucaswoj Thanks for the clarification. I see proper 3d terrain support is ticketed at #1489

[pwilczynski]

Hey @lucaswoj - curious about whether you have any plans of incorporating the thre.js experiments that @peterqliu just posted about here into MapboxGL at some point? Might be interested in helping out with this if it's well scoped.

[andrewharvey]

@pwilczynski This ticket is about client side 2D hillshading, 3D terrain in GL JS (like https://www.mapbox.com/blog/3d-terrain-threejs/) is ticketed at #1489

[mollymerp]

PR moving at #4701

[andrewharvey]

This got merged in #5286