No shadows present when 3D terrain is active

[chrispahm]

Hey,

Describe the bug Thanks for maintaining this awesome library! I'm trying to visualise wind turbines on a 3D terrain map. Once I activate the terrain, the shadows vanish from the map though.

To Reproduce

• Consider the add3dmodel.html example
• set terrain: true -> no shadows present on the ground

Expected behavior Shadows should be visible on the ground, just like they are when the 3D terrain is not active.

Relevant Code or Code Sandbox Here's an Observable notebook showcasing the bug, using a slightly altered version of the add3dmodel example https://observablehq.com/d/c6c236f9bb6f21f4

Screenshots Shadows present without 3D terrain

Shadows not present with 3D terrain enabled

• Threebox version 2.2.7, Mapbox version 2.12.0

[jscastro76]

Hi @chrispahm, Thanks for your comments. This is not really a bug, the shadows still there, but in a Geometry Plane created for projecting the shadow in the Custom Layer which is below the Terrain layer rendered by Mapbox engine. As the terrain layer has its own 3D mesh created on top of the map, there's no really a way to project the shadow of an object in a Custom Layer, over the terrain mesh in a Terrain layer, or at least, I haven't found a way to make it.

[chrispahm]

Hi @jscastro76, Thanks for the explanation!

[jscastro76]

Hi @jscastro76, Thanks for the explanation!

I couldn't find a way yo make the terrain mesh to receive a shadow.

[chrispahm]

No worries, I'm just thinking about a potential way how this could be incorporated without receiving the terrain mesh from Mapbox. What do you think of the following:

1. Query elevation data from another source, e.g. Mapzen's terrain data https://www.mapzen.com/blog/elevation/
2. Create a 3D mesh from the terrarium elevation tiles using a method described in this blog post (or similar) https://blog.mastermaps.com/2013/10/terrain-building-with-threejs.html
3. Add the 3D mesh to the scene, and project the shadows onto it. The mesh would need to be transparent, only the shadow should be visible. Not sure if that would work though 😄

It's quite hacky, but I guess there's no other way to get Mapbox's own terrain data / mesh into threebox, right?

One other thing that came to mind was to create a mesh on-the-fly by creating a point grid within the maps boundaries, and then query the elevation using map.queryTerrainElevation(point, { exaggerated: false }) for each point instead of re-fetching a raster DEM tile and interpolating it. I'm guessing that would be quite a performance hit though...

[chrispahm]

Hi @jscastro76,

I started to implement the above methodology to render shadows in a 3d terrain map: https://observablehq.com/@chrispahm/enabling-shadows-in-a-mapbox-terrain-map

There are still a few open issues though:

• Shadows are not visible in some parts of the map. The actual terrain mesh and the one created by this method are not identical, which leads to parts of the shadow terrain lying under the Mapbox terrain -> shadow is hidden
• No mechanism for showing / hiding more or less detailed grids depending on the zoom level yet -> coarse grid may cover fine grained grid
• Overall performance: The entire terrain grid is calculated and drawn twice now. Using mapbox's internal terrain grid should a) fix the first issue, and b) save (at least some) resources by not re-calculating the entire grid a second time. The actual terrain used by mapbox seems to be available through the `map.transform.elevation.gridBuffer`, but since it's a WebGL 1 context, I couldn't find a way to copy the existing grid data for use in three.js

[jscastro76]

That’s quite impressive @chrispahm! I assume performance will be heavily affected but it could be applied as an option so each one could decide if use them or not. If you’re preparing any PR, let me know