# Hillshade using Cesium terrain

**URL:** <https://community.cesium.com/t/hillshade-using-cesium-terrain/9590>\
**Category:** CesiumJS\
**Created:** [May 10, 2020, 6:33am UTC](https://community.cesium.com/t/hillshade-using-cesium-terrain/9590 "2020-05-10T06:33:23Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![davenquinn](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/davenquinn/32/1987_2.png) [@davenquinn](https://community.cesium.com/u/davenquinn)\
**Post date:** [May 10, 2020, 6:33am UTC](https://community.cesium.com/t/hillshade-using-cesium-terrain/9590/1 "2020-05-10T06:33:24Z")

</div>

I am trying to use Cesium’s 3D terrain features to enable a “hillshade”-like effect, computed dynamically. Basically, I want to use Cesium with no base imagery layer, but have terrain cast shadows that are overdramatized somewhat and have a consistent lighting incidence direction. This will serve (hopefully) as a low-complexity base layer for polygon overlays. I’d like it to work globally without respect to time of day.

The goal is something like [this](https://macrostrat.org/map/#/z=8.6/x=-105.7949/y=38.4418/) (powered by Mapbox Dynamic hillshading; I’m creating a 3D mode for this site and dataset).  
So far the closest I can get is the following:

 ![Screen Shot 2020-05-10 at 1.16.51 AM](https://global.discourse-cdn.com/cesium/original/3X/1/1/11e6d820cd6391657ba7bf779e0f861259f7f633.jpeg).

I can use precomputed terrain shading, potentially, but I suspect that I may be able to do better in Cesium. Are there any examples or resources available that cover my use case? I haven’t been able to find much.

---

<div class="post-metadata">

**Author:** ![omar](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/omar/32/1999_2.png) [@omar](https://community.cesium.com/u/omar)\
**Post date:** [May 11, 2020, 2:26pm UTC](https://community.cesium.com/t/hillshade-using-cesium-terrain/9590/2 "2020-05-11T14:26:00Z")

</div>

Welcome to the Cesium community @davenquinn! How are you currently approaching doing this in CesiumJS? Have you seen this globe materials code example?

> **[Cesium Sandcastle](https://sandcastle.cesium.com/index.html?src=Globe%20Materials.html)**
>
> The Cesium Sandcastle provides an interactive environment for testing Cesium code.

I think you should be able to get something as desired by turning off globe lighting (disable this line `viewer.scene.globe.enableLighting = true;`) and then defining a custom color ramp based on the terrain’s aspect and/or slope.

---

<div class="post-metadata">

**Author:** ![davenquinn](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/davenquinn/32/1987_2.png) [@davenquinn](https://community.cesium.com/u/davenquinn)\
**Post date:** [May 25, 2020, 8:07pm UTC](https://community.cesium.com/t/hillshade-using-cesium-terrain/9590/3 "2020-05-25T20:07:42Z")

</div>

Hi Omar, the globe materials code example wasn’t quite what I was going for, as I wanted a more standard “hillshade” effect. I was able to accomplish what i wanted by layering an externally generated hillshade (generated client-side in a WebGL context from Mapbox Terrain RGB data) into Cesium as an imagery provider.

 ![Screen Shot 2020-05-24 at 11.13.07 PM](https://global.discourse-cdn.com/cesium/original/2X/9/9d96abd2e711470a98278c8bbd8901a9d24ffb78.jpeg)

This leads to a follow-up question — in my experiments, both the hillshade and underlying terrain provider are generated client-side using Terrain RGB tiles (on-the-fly quantized mesh generation is accomplished using my prototype [Cesium-Martini](https://github.com/davenquinn/cesium-martini) library). Is there a recommended way to tie a `TerrainProvider` and `ImageryProvider` together so that they are backed by the same tile cache and request queue? As it stands, I am requesting the same image tiles for both layers. They are often cached appropriately, but sometimes duplicate downloads are created when different subdomains are used to load the request.

---

<div class="post-metadata">

**Author:** ![omar](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/omar/32/1999_2.png) [@omar](https://community.cesium.com/u/omar)\
**Post date:** [May 31, 2020, 6:37pm UTC](https://community.cesium.com/t/hillshade-using-cesium-terrain/9590/4 "2020-05-31T18:37:09Z")

</div>

> [@davenquinn](#):
>
> as I wanted a more standard “hillshade” effect

Do you know how a standard hillshade is typically computed? If the inputs needed are the elevation, slope, and some fixed sun position, you should be able to modify the shader to get this to appear correct. I’m curious what issues you ran into doing this - this might make for a good Sandcastle example to add here.

> [@davenquinn](#):
>
> Is there a recommended way to tie a `TerrainProvider` and `ImageryProvider` together so that they are backed by the same tile cache and request queue? As it stands, I am requesting the same image tiles for both layers.

I think the approach here would be using 3D Tiles for terrain (which is on our roadmap as mentioned here [Drape imagery over 3D Tiles · Issue #7591 · CesiumGS/cesium · GitHub](https://github.com/CesiumGS/cesium/issues/7591)). Otherwise I think it may not be trivial to connect these two since their architecture has been intentionally decoupled thus far.

> [@davenquinn](#):
>
> on-the-fly quantized mesh generation is accomplished using my prototype [Cesium-Martini](https://github.com/davenquinn/cesium-martini) library

This library looks pretty cool! If you have the time it’d be great to share it in the [General category](https://community.cesium.com/c/general/7) with others here who might find it useful. I’m curious to hear more about the motivation/how you’re using it in your work.
