Cesium流向纹理

最近需要对管线做一个流向效果，所以研究下流动纹理的绘制。废话不多说直接上代码。参考自 YanzheZhang的Cesium.HPUZYZ.Demo中一篇流动纹理，关联链接并感谢

因为原作者使用较老的1.43的代码，我这里是基于1.68做的修改.

关于如何构建viewer查看器就不多说了,这里贴上核心源码.

因为这里我是想做对管的效果而不是线的效果,虽然原理上是一样的.

// 定义线的轨迹动态线纹理-->
function PolylineTrailLinkMaterialProperty(color, duration) {
    this._definitionChanged = new Cesium.Event();
    this._color = undefined;
    this._colorSubscription = undefined;
    this.color = color;
    this.duration = duration;
    this._time = (new Date()).getTime();
}
Object.defineProperties(PolylineTrailLinkMaterialProperty.prototype, {
    isConstant: {
        get: function () { return false }
    },
    definitionChanged: {
        get: function () { return this._definitionChanged;}
    },
    color: Cesium.createPropertyDescriptor('color')
});
PolylineTrailLinkMaterialProperty.prototype.getType = function (time) {
    return 'PolylineTrailLink';
};
PolylineTrailLinkMaterialProperty.prototype.getValue = function (time, result) {
    if (!Cesium.defined(result)) { result = {};}
    result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
    result.image = Cesium.Material.PolylineTrailLinkImage;
    result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;
    return result;
};
PolylineTrailLinkMaterialProperty.prototype.equals = function (other) {
    return this === other || (other instanceof PolylineTrailLinkMaterialProperty && Property.equals(this._color, other._color));
};
// 在Material上挂载相关的流动线纹理 可以根据自己的需要进行封装
Cesium.Material.PolylineTrailLinkType = 'PolylineTrailLink';
Cesium.Material.PolylineTrailLinkImage = Cesium.buildModuleUrl('Assets/Textures/color.png');
// 定义着色器源码 核心部分
Cesium.Material.PolylineTrailLinkSource = "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));\n\
        material.alpha = colorImage.a;\n\
        material.diffuse = colorImage.rgb;\n\
        return material;\n\
    }";
Cesium.Material._materialCache.addMaterial(Cesium.Material.PolylineTrailLinkType, {
    fabric: {
        type: Cesium.Material.PolylineTrailLinkType,
        uniforms: {
            color: new Cesium.Color(0.0, 0.0, 1.0, 0.5),
            image: Cesium.Material.PolylineTrailLinkImage,
            time: 0
        },
        source: Cesium.Material.PolylineTrailLinkSource
    },
    translucent: function (material) {
        return true;
    }
});
// 测试部分
var lat =  42.006;
var lon = 128.055;
viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(lon, lat, 300000)
});
// 计算拐点位置的圆角点
function computeCircle(radius) {
    var positions = [];
    for (var i = 0; i < 360; i++) {
        var radians = Cesium.Math.toRadians(i);
        positions.push(new Cesium.Cartesian2(radius * Math.cos(radians), radius * Math.sin(radians)));
    }
    return positions;
}
// 添加一个多段线管
var polylineTrail = viewer.entities.add({
    name: 'PolylineTrail',
    polylineVolume: {
        positions: Cesium.Cartesian3.fromDegreesArrayHeights([lon, lat, 25,
            lon + 1, lat, 25,]),
        shape : computeCircle(600.0),
        material: new PolylineTrailLinkMaterialProperty(Cesium.Color.BLUE, 8000)
    }
});

里面的Assets/Textures/color.png纹理如下

最后的结果展示如下