Cesium Primitive 紋理動態旋轉

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;
    });
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章