Cesium动态纹理实现

实现思路: Cesium原有的纹理条纹(StripeMaterialProperty) + 流动线

原型代码

// 动态多条纹理的着色器
"czm_material czm_getMaterial(czm_materialInput materialInput)\n\
{\n\
    float time = czm_frameNumber / 240.0;\n\
    czm_material material = czm_getDefaultMaterial(materialInput);\n\
    vec2 st = materialInput.st;\n\
    \n\
    vec4 colorImage = texture2D(image, vec2(fract(repeat*st.t - time), fract(st.s)));\n\
    material.diffuse = colorImage.rgb;\n\
    material.alpha = colorImage.a;\n\
    \n\
    return material;\n\
}\n\
";

 

// 动态单条纹理着色器
"czm_material czm_getMaterial(czm_materialInput materialInput)\n\
{\n\
    czm_material material = czm_getDefaultMaterial(materialInput);\n\
    vec2 st = materialInput.st;\n\
    vec4 colorImage = texture2D(image, vec2(fract(st.s - time), st.t), 60.0);\n\
    material.alpha = colorImage.a * color.a;\n\
    material.diffuse = (colorImage.rgb+color.rgb)/2.0;\n\
    return material;\n\
}"

封装代码

/**
 * speed(速度)[float]:越低越快
 * count(条数)[float]:分隔条数
 * freely(纵横)[string]:vertical纵,cross横
 * direction(方向)[string]:
 *    纵:'-'(由下到上),'+'(由上到下)
 *    横:'-'(顺时针),'+'(逆时针)
*/                        
function stripeMaterail(speed, count, freely, direction){
    materail = "czm_material czm_getMaterial(czm_materialInput materialInput)\n\
                {\n\
                    float time = czm_frameNumber / " + speed + ";\n\
                    czm_material material = czm_getDefaultMaterial(materialInput);\n\
                    vec2 st = materialInput.st;\n\
                \n\
               ";
    if(freely == "vertical"){
        //(由下到上)
        materail = materail + "vec4 colorImage = texture2D(image, vec2(fract( " + count + "*st.t " + direction + " time), fract(st.s)));\n\ ";
    } else {
        //(逆时针)
        materail = materail + "vec4 colorImage = texture2D(image, vec2(fract( " + count + "*st.s " + direction + " time), fract(st.t)));\n\ ";
    }               

    materail = materail + "     material.diffuse = colorImage.rgb;\n\
                                material.alpha = colorImage.a;\n\
                                \n\
                                return material;\n\
                                }\n\
                                ";
    return materail
}

效果图

 

 

其他部分可以参照:(Cesium动态纹理-通过着色器实现

©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页