How could i get right st direction in fragment shader of Appearance

I’m trying to load some geojson by use primitive. cause I want to render it by custom, i use

  let instance = new Cesium.GeometryInstance({
              geometry: new Cesium.PolygonGeometry({
                polygonHierarchy: feature.polygon.hierarchy,
                extrudedHeight: 100 * Math.random(),
              }),
            });

new Cesium.Primitive({
              geometryInstances: [instance],
              appearance: new Cesium.Appearance({
                translucent: false,
                renderState: {
                  blending: Cesium.BlendingState.PRE_MULITIPLIED_ALPHA_BLEND,
                  depthTest: {
                    enabled: true,
                  },
                  depthMask: true,
                },
               vertexShaderSource: `
                attribute vec3 position3DHigh;
                attribute vec3 position3DLow;
                attribute vec3 normal;
                attribute vec2 st;
                attribute float batchId;
                varying vec4 v_positionEC;
                varying vec3 vv;
                varying vec2 v_st;
                void main()
                {
                    vec4 p = czm_computePosition();
                    vec4 eyePosition = czm_modelViewRelativeToEye * p;
                    v_positionEC =  czm_inverseModelView * eyePosition; 
                    vv = normal;
                    v_st = st;
                    gl_Position = czm_modelViewProjectionRelativeToEye * p;
                }
                    `,
                fragmentShaderSource: `         
                  varying vec3 vv;
                  varying vec2 v_st;
                  void main() {
                    gl_FragColor = vec4(0., v_st.y, 1., 1.0);
                  }
                `,
              }),
            })

then i found that:

image

i change

v_st.y

to

v_st.x
it became
image
but what i want, is color gradual change(from bottom to top) like:


Is there any way to achieve it?

Welcome, Top to bottom gradient shader is becoming a basic requirement. Someone cesium expert should contribute on this topic. I’ve tried to search about gradient shader, you can check this link

If you got success, please share with us here.

Regards,

thanks you reply, i had saw this link before i code, so i still don’t know how to achieve it.The key is i don’t know how to get the ‘height’ directaion in shader, is there any attribute has height and position for every vertex? Just like st.x or st.y. Does there has some ‘st.z’?

I’m also a beginner. I’ve some references links which can be helpful to you.
Please check link1 link2 link3.
Let us know if you get any success.

Good Luck !

Regards,

thx reply. Unfortunately I have also read these articles before i code.And the closest result is link2(like this img).

But the color been changed when i move or drag map,i think it because the position get by that way is not fixed and not uniform variation.
So the question is still here. I think i need more test and search for glsl shader attributes

I want to contribute with you. Can you create a sandcastle link of what you’re doing for experimental purpose. It would be easy for others also to give you quick response. :slightly_smiling_face:

thx, here you are sample

You can try this:

  1. Remove extrudedHeight, and set height for polygon geometry.
  2. Add another Primitive containing a wall geometry which has same positions data as your polygon.

Then you will find it’s easy to shade it from top to bottom.

1 Like

thank you very much, it’s a great way! i’ll try

@Gu-Miao thank you for the suggestion - this is a great idea!