highlight: qtcreator_dark
theme: github
Cesium保姆教程之图片轨迹线
本教程主要将工作中用的cesium功能特点本着简洁的原则进行总结,尽量对每一步代码进行注释,以此来达到通透理解。本篇是本教程的第二个功能,主要实现图片轨迹线材质的实现和对象展示效果,可将轨迹绘制成一条流动的轨迹线并将轨迹赋予图片纹理,以此来实现图片在流动的效果。
实现效果
实现原理
图片轨迹线的实现原理是通过自定义对应的图像轨迹材质ImageTrailMaterial,借助于Cesium的entity类的polyline对象对轨迹进行绘制,再将材质按照纹理对象附到轨迹线上。
实现过程
材质对象
材质绘制(WebGL)
fragementShader(参考网上教程)
uniform sampler2D image;
uniform float speed;
uniform vec4 color;
uniform vec2 repeat;
czm_material czm_getMaterial(czm_materialInput materialInput){
czm_material material=czm_getDefaultMaterial(materialInput);
vec2 st=repeat * materialInput.st;
float time=fract(czm_frameNumber*speed/1000.);
//st.s是横轴方向运动,st.t是纵轴,
//vec2(fract(st.s-time),st.t)是横轴按照时间变化而变化,纵轴保持正常不变化
vec4 colorImage=texture2D(image,vec2(fract(st.s-time),st.t));
if(color.a==0.){
material.alpha=colorImage.a;
material.diffuse=colorImage.rgb;
}else{
material.alpha=colorImage.a*color.a;
material.diffuse=max(color.rgb*material.alpha*3.,color.rgb);
}
return material;
}
完整代码
import * as Cesium from "cesium"
/**
* 定义Cesium材质对象
*/
class ImageTrailMaterial {
constructor(options = {
}) {
this._definitionChanged = new Cesium.Event();
this._color = undefined;
this._colorSubscription = undefined;
this._speed = undefiend;
this._speedSubscription = undefined;
this._image = undefined;
this._imageSubscription = undefined;
this._repeat = undefined;
this._repeatSubscription = undefined;
this.color = options.color || Cesium.Color.fromBytes(0, 0, 255,