How to create Aspect Map in Cesium

CesiumJS
1

1. A concise explanation of the problem you're experiencing.

I want to create Aspect Map in Cesium.

How should I get insight of fabric properties in Material, precisely for aspect map?

the below link
https://github.com/AnalyticalGraphicsInc/cesium/wiki/Fabric

defines the usage of fabric but does not entails the potential values of attributes like type, materials, components etc of fabric within Cesium.Material

2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

4. The Cesium version you're using, your operating system and browser.

2

Better documentation for the fabric system is definitely something I’d love to see improve.

In the mean time, you might find this example that colors the terrain based on elevation useful:

Let me know if that helps, or if there’s a specific thing you’re trying to do that you’re stuck on.

3

Hi Omar,

Thanks for the reply.

I already saw this example but its somehow not fulfilling my need of creating an aspect map or more clearly a direction map with 8 directions East, West, North, South, North East, North West, South East, South West.

This example explains creating slope, elevation and contours and its implemented through fabric property of Cesium Materials but no support on this aspect map. I am eyeing Elevation Ramp for Aspect Map but I am not sure whether it will take me in the right path.

Please direct me the to the properties and its values for fabric, to produce an aspect map.

Regards,
Tushar

4

If all you need is the direction of the surface at each point, I think you should be able to do this by using the normal at any given pixel, which should be possible with a custom shader. It is a bit involved, and there isn’t currently a tutorial the Fabric system, but it’s definitely something I’ll make sure to cover as we update our learning materials.

5

May I have some sample example, towards this approach, I am trying to get the aspect of the slope, like if slope is on east side of rockies, moving down to great plains then I should get its aspect in terms of degrees.

I want to provide my own terrain, then I want to draw the slope layer and aspect layer over it.

The aspect will be calculated from the perspective of highest elevation point of rockies towards its slopes leading to great plains.

6

I don’t have any ready-made examples to share unfortunately. This recent thread is someone trying to do a similar thing so it might be good to keep an eye on:

https://groups.google.com/d/msg/cesium-dev/Us4_CBDWtco/OMWzzndkBgAJ

7

Hi Omar,

This is what I am working at

function makeShadersDirty(globe) {
        var defines = ;

        var requireNormals = defined(globe._material) && (globe._material.shaderSource.match(/slope/) || globe._material.shaderSource.match('normalEC'));

        var fragmentSources = ;
        if (defined(globe._material) && (!requireNormals || globe._terrainProvider.requestVertexNormals)) {
            fragmentSources.push(globe._material.shaderSource);
            defines.push('APPLY_MATERIAL');
            globe._surface._tileProvider.uniformMap = globe._material._uniforms;
        } else {
            globe._surface._tileProvider.uniformMap = undefined;
        }
        fragmentSources.push(GlobeFS);

        globe._surfaceShaderSet.baseVertexShaderSource = new ShaderSource({
            sources : [GroundAtmosphere, GlobeVS],
            defines : defines
        });

        globe._surfaceShaderSet.baseFragmentShaderSource = new ShaderSource({
            sources : fragmentSources,
            defines : defines
        });
        globe._surfaceShaderSet.material = globe._material;
    }

GlobeVS.glsl has this

#ifdef APPLY_MATERIAL
    vec3 finalNormal = normalMC;
    vec3 ellipsoidNormal = normalize(position3DWC.xyz);
    v_slope = abs(dot(ellipsoidNormal, finalNormal));
    v_height = height;
#endif

By far, this glsl has been invoked from Globe.js and Custom Shader Source implies to work with czm_materialInput that is defined as

/**
* Used as input to every material's czm_getMaterial function.

8

Looks like there’s been some work on supporting this, check out this PR:

https://github.com/AnalyticalGraphicsInc/cesium/pull/7415

I’m not sure when it will get merged but you should be able to use their fork of Cesium if you want to develop with this feature right away. Feel free to provide feedback on it in that link above!

9

Hi everyone, the PR Omar linked above was merged and will ship with Cesium 1.55 on March 1st.