zoukankan      html  css  js  c++  java
  • shader之渐变长方体实现(cesium)

    shader之渐变长方体实现(cesium)

    前置内容博客:

     shader之cesium应用(https://www.cnblogs.com/s313139232/p/14316829.html

    shader之渐变长方体实现(threejs)(https://www.cnblogs.com/s313139232/p/14316836.html

    效果:

     原理:

    1.position获取:

      1.1 在cesium中,可通过vec4 p = czm_computePosition();获取 模型坐标中相对于眼睛的位置矩阵 

      1.2 vec4 eyePosition = czm_modelViewRelativeToEye * p;       // position in eye coordinates    获取eyePosition

      1.3 v_positionEC =  czm_inverseModelView * eyePosition;      // 将eyePosition转换为模型坐标    注意:模型坐标系的原点为地心,不等于模型的东北上坐标系

    2.法线获取:

           v_normalEC = czm_normal * normal;                         // normal in eye coordinates    获取eyeNormal 
    3.片元着色器计算:
      3.1由于获取道德是模型坐标,并不是东北上坐标,所以不能直接使用坐标y值表示模型高度。
      3.2模型高度计算: 通过矢量长度计算公式算出点模型坐标内点到地心原点的距离
        float l = sqrt(pow(v_positionEC.x,2.0) + pow(v_positionEC.y,2.0) + pow(v_positionEC.z,2.0));
      3.3拉伸后取小数部分得到0到1的渐变值。矩形高:100000
        float cy = fract((abs(l - 50000.0))/100000.0); 
      3.4应用渐变的一部分:
        float cy = fract((abs(l - 100000.0))/200000.0); 
      得到最终效果:
        gl_FragColor = vec4(0.0, 0.0, cy3, 1.0);
     

    完成着色器代码:

    vertexShaderSource: `
                    attribute vec3 position3DHigh;
                    attribute vec3 position3DLow;
                    attribute vec3 normal;
                    attribute vec2 st;
                    attribute float batchId;
    
                    varying vec4 v_positionEC;
                    varying vec3 v_normalEC;
                    varying vec2 v_st;
    
                    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
                        v_st = st;
    
                        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 cy = fract((abs(l - 100000.0))/200000.0); 
    
                                gl_FragColor = vec4(0.0, 0.0, cy, 1.0);
                            }
                    `,

    合作:@浩

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

  • 相关阅读:
    知识积累的核心:解构、重构
    常用的测试用例设计方法
    安装双系统注意事项
    对象转换工具类
    一个超级简单的HTML模板框架源代码以及使用示例
    java常量池
    维数灾难
    机器学习算法思想简单梳理
    对线性代数的一些理解
    正则表达式 java版
  • 原文地址:https://www.cnblogs.com/s313139232/p/14316841.html
Copyright © 2011-2022 走看看