Color polygon based on ElevationRamp

CesiumJS
1

My Issue

I want to colour the polygon based on the elevation ramp, similar to the elevation ramp example on the globe but confined to the drawn polygon - Cesium Sandcastle

Things I’ve explored so far

I’ve gone through some similar questions but couldn’t find any solution to this -

I’m aware that there is no support for applying elevation ramp for geometries yet, but as suggested by Omar here, we can use Appearance to define custom vertex and fragment shader to achieve this.

I’ve gone through few links to get some understanding on Shaders, GLSL and Cesium Fabric -

Things which I have tried

I’ve created a minimal example where I’m painting polygon using a custom fragment shader script through fabric - Cesium Sandcastle

Edit: I extended the previous example and wrote custom vertex and fragment shaders (based on GlobeVS). It still doesn’t work because position3DAndHeight attribute is missing. How I can calculate this and pass it to the vertex shader? How it’s done in the case of Globe? - Cesium Sandcastle

This example currently paints the polygon with black colour, it’s because materialInput.height is not present, it’s only available when the material is applied on the globe. Fragment position and height is required to select the colour from the elevation ramp but I was not able to get the height. I’ve looked into the GlobeVS.glsl file and figured that v_height is being set by the vertex shader which is basically used in the GlobeFS.glsl to set the height in materialInput.

I further explored and found that v_height in GlobeVS.glsl is computed from the position3DAndHeight attribute, but couldn’t figure out from where it’s being passed down to the GlobeVS.glsl

Roadblocker

I don’t know how I can get this world height information in my custom Vertex shader so that I can pass it down to Fragment shader. If only I can get the height of the fragment, I can pick the right colour from the elevation ramp.

Areas where I need help

  • How to get the height information for the fragment in my custom Fragment Shader for polygon
  • Basic example of writing vector and fragment shader from scratch. Existing scripts in the repository are quite complex and I’m having a hard time wrapping my head around it.
  • Various functions like czm_eastNorthUpToEyeCoordinates are being used in the Cesium’s GLSL scripts, is there any documentation on it?

Edit
A couple of parallel conversations happening on different tickets on a different approach which seems very promising -

  1. How to create animated heatmaps? - #25 by atul-sd
  2. ElevationRamp inside the polygon - #7 by Olga_Aptekar
2

I would really appreciate it if someone from the team can guide me in the right direction. I’ve been exploring ways to make this work for days without any success!

4

@atul-sd

Thank you for the detailed post! Apologies for the late response. As you know, we get a lot of community forum inbound, and sometimes threads slip through the cracks. Can you please start by giving me a more recent update on your project? Are you still dealing with the same issues?

-Sam

5

Hi @sam.rothstein, thanks for the reply. I’m working on something else now but will come back to this again after few weeks. I’ll first try out the solution which Olga has mentioned here - ElevationRamp inside the polygon - #7 by Olga_Aptekar and if it doesn’t work well then will explore further and update the thread.

6

@atul-sd

Great! Please keep me posted :grinning:

-Sam

7

Hello @atul-sd ,

Can you share any updates on this? It seems that the approach proposed by Olga is not scalable because sampleTerrainMostDetailed method takes a lot of time, especially when you use a grid with thousand of points.

8

Hi @Ilia_Shevelev, we didn’t go ahead with Olga’s approach. We end up generating clipped raster on the fly on the server and then coloring it dynamically.

9

@atul-sd , thank you for the update.