shader之雙色漸變（cesium）

shader之雙色漸變（cesium）

效果：

 

 原理：

通過計算兩個rgb的值映射到0到1的位置信息中。

完整着色器代碼：

vertexShaderSource: `
                attribute vec3 position3DHigh;
                attribute vec3 position3DLow;
                attribute vec3 normal;
                attribute vec2 st;
                attribute float batchId;

                varying vec4 v_positionEC;
                varying vec3 v_normalEC;

                void main()
                {
                    vec4 p = czm_computePosition();
                    vec4 eyePosition = czm_modelViewRelativeToEye * p;
                    v_positionEC =  czm_inverseModelView * eyePosition;      // position in eye coordinates
                    v_normalEC = czm_normal * normal;                         // normal in eye coordinates

                    gl_Position = czm_modelViewProjectionRelativeToEye * p;
                }
                    `,
                fragmentShaderSource: `         
                        varying vec4 v_positionEC;
                          varying vec3 v_normalEC;
                        void main() {
                            float l = sqrt(pow(v_positionEC.x,2.0) + pow(v_positionEC.y,2.0) + pow(v_positionEC.z,2.0));
                            float cy3 = fract((abs(l - 100000.0))/200000.0); 

                            float cr = (56.0/255.0) + ((187.0/255.0) - (56.0/255.0))*cy3;
                            float cg = (139.0/255.0) + ((186.0/255.0) - (139.0/255.0))*cy3;
                            float cb = (255.0/255.0) + ((236.0/255.0) - (255.0/255.0))*cy3;

                            gl_FragColor = vec4(cr, cg, cb, 1.0);
                        }
                `,

注意：此處只是爲了演示，56.0/255.0等固定值運算最好算完後再在片元着色器中使用。

 

 

鑽研不易，轉載請註明出處。。。。。。