标签：positionEC attribute float shader vec4 双色 vec3 cesium 255.0

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等固定值运算最好算完后再在片元着色器中使用。

钻研不易，转载请注明出处。。。。。。

标签：positionEC,attribute,float,shader,vec4,双色,vec3,cesium,255.0
来源： https://www.cnblogs.com/s313139232/p/14317566.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。