Last week we launched extrusion fill properties and light properties in Mapbox GL JS that enable exciting 3D map features like buildings as well as 3D data visualizations.
3D features require shading to create depth, unlike 2D features where colors are typically flat. The appearance of shading on a 3D feature depends on how the surface color interacts with lighting in the map scene. We designed the default shading behavior specifically to create beautiful 3D features that complement the rest of your map.
Regardless of what color you choose for your 3D features, it’s important to have a comfortable and legible amount of color contrast to show depth. We calibrated the contrast so that there is a narrower range of values for highlights/lowlights with lower light intensities and lighter surface colors:
Pale yellow buildings with a low light intensity, compared to darker purple buildings with a higher light intensity.
We added a subtle gradient along the height (z-axis) of 3D features, to help delineate visually overlapping features – especially useful for dense feature sets like buildings in cities:
The darkest shading is slightly tinted with the complementary (opposite) color to produce richer shades and more visual depth:
Fill patterns for extruded features allow for some interesting effects:
To give users more cartographic flexibility, we added several light properties that control the lighting of 3D features: light color, intensity, position, and anchor. With these properties, you can create a wide range of interesting and useful styles, such as this sunrise-to-sunset view:
Sunrise-to-sunset view created with a strong intensity light that varies from red to white, changes position to mimic the sun, and is anchored to the map (i.e. the light rotates with the map).