Cesium Entity的polygon有紋理旋轉的屬性,但是動態改變的話,會閃爍。
紋理的旋轉原理沒什麼好講的,就是算一下三角函數,根據動態傳入的uniform旋轉角度。如果是用純webgl寫的話是很簡單的事情,主要是寫入到Cesium中有點麻煩。
primitive的定義
let primitive = new Cesium.Primitive({
geometryInstances: [instance],
appearance: new Cesium.EllipsoidSurfaceAppearance({
material: new Cesium.Material({
fabric: {
type: 'Image',
uniforms: {
image: '圖片路徑',
radians: 0,
},
source: `
#define M_PI 3.1415926535897932384626433832795
uniform sampler2D image;
uniform float radians;
czm_material czm_getMaterial(czm_materialInput materialInput)
{
czm_material material = czm_getDefaultMaterial(materialInput);
vec2 st = vec2(materialInput.st.x - 0.5, materialInput.st.y - 0.5);
float alpha = 1.3 - st.x - 0.5;
float current_radians = atan(st.y, st.x);
float radius = sqrt(st.x * st.x + st.y * st.y);
if (radius < 0.50) {
current_radians = current_radians - radians;
st = vec2(cos(current_radians) * radius, sin(current_radians) * radius);
st = vec2(st.x + 0.5, st.y + 0.5);
vec4 colorImage = texture2D(image, st);
material.diffuse = colorImage.rgb;
material.alpha = colorImage.a * alpha;
} else {
material.alpha = 0.0;
}
return material;
}
`
}
})
})
});
旋轉參數的傳入
viewer.scene.preUpdate.addEventListener(() => {
radians += Math.PI / 90;
primitive.appearance.material.uniforms.radians = radians;
});