Elevation Band Material

[IanLilleyT]

Merge #9287 first

This material is very similar to the ElevationRamp material (https://sandcastle.cesium.com/?src=Globe%20Materials.html) but provides a lot more flexibility and accuracy. The main limitation with ElevationRamp is the quality is tied to the texture resolution, so it's not possible to map colors or gradients to exact elevations without extremely large textures. ElevationBand works a bit differently. It feeds a texture of heights and a texture of colors at those heights to the shader, which does a binary search from an input height to find out which two colors to interpolate between. This means unique colors and gradients can be mapped to many different elevation ranges with minimal texture memory and still be quite performant.

While the ElevationBand height and color textures can be created from scratch, it's much easier to go through the createElevationBandMaterial.js helper file which takes an array of layers, each containing an array of height / color pairs, and flattens them on top of each other, returning a single Material. This way you can implement more complex behaviors like background gradients, movable bands, etc.

Here's the feature in action. Everything in the gif, including the narrow white grid lines on the mountain, is ultimately a single material. It gets recreated whenever the UI changes.

Sandcastle demo on local host

Also, a Sandcastle demo on local host for showing the difference between creating a simple gradient with ElevationRamp and ElevationBand. The results should look identical.

[cesium-concierge]

Thanks for the pull request @IanLilleyT!

• ✔️ Signed CLA found.
• ❔ CHANGES.md was not updated.
  • If this change updates the public API in any way, please add a bullet point to CHANGES.md.

Reviewers, don't forget to make sure that:

• Cesium Viewer works.
• Works in 2D/CV.
• Works (or fails gracefully) in IE11.

[OmarShehata]

Looks amazing! Is there a reason someone would choose to use the old elevation material over this?

[IanLilleyT]

ElevationRamp might be a bit faster because it only has to do one texture lookup. It's also a bit more straightforward in some cases.

[IanLilleyT]

It's possible this new material can deprecate ElevationRamp since it has all the same functionality and more. Plus we won't have to awkwardly go through the css gradient setup. I wonder if with a little bit of work similar materials like SlopeRamp and AspectRamp can use this new system too. The ElevationBand shader is hardcoded to materialInput.height, but there's no reason we can't make this a common function that all three materials call with their own input.

[mramato]

👍 for deprecating and then removing other classes if we can replace them with different usages for this. If the setup is non-obvious, we can use helper functions or derived classes so that the API is easy but the overall implementation is less code.

The less code overall, the better.

[cesium-concierge]

Thanks again for your contribution @IanLilleyT!

No one has commented on this pull request in 30 days. Maintainers, can you review, merge or close to keep things tidy?

I'm going to re-bump this in 30 days. If you'd like me to stop, just comment with @cesium-concierge stop. If you want me to start again, just delete the comment.

[cesium-concierge]

Thanks again for your contribution @IanLilleyT!

No one has commented on this pull request in 30 days. Maintainers, can you review, merge or close to keep things tidy?

I'm going to re-bump this in 30 days. If you'd like me to stop, just comment with @cesium-concierge stop. If you want me to start again, just delete the comment.