CesiumPolylineST

index.js

// http://localhost/cedoc/Apps/Sandcastle/index.html#c=nVXbbts4EP2VgV8qAw7tXAosHMdomqZFgMYu2mxRYF20lETZRChS4MWRW/jfd0hZN9f7si82Z+acw+FoOEyUNBa2nL0wDTcg2QvcMcNdTr4GX7QaJMG+U9JSLpleDYbXK5kEnkmYZEir+CSYGKzD3v2oUiYQ8nslAcopTEYruQ+Ywz7PUiXPylliNU2eo4Yz7AhZpURMfYKpSlzOpCVrZu8F88u3u4cU0zxgqvSOtWlRiN1bLlMu16bdY1QrdzdLnLEq/7KhaSjJTyd5pnQOW5ZcQaKE0gjuOZXdMH13FMmEohbKSvhX/iOnlmlOBXgDs3882FE3+CALZ6FnDVcy1A6gp9IsbmrBdyyjTrS6fZXrSgPzvQA85E1/E2JsC8ADORuO48UPx/IxnkFkLClhDuUQDllBF92rhI/tq796M5LyLHPG90zNInodXx+hqCg2tIuhB4Rm1mnZANG7/xkqPB7DJyV2AjsUls76//p7+hKFziSF5jm3fMsMoSn2DEp2Gv5THY0OJ1szlTOrdw+oQiVeg2kX/uEoGjX1qHk9eJ1dTWvhAFQnT7uCTWvsbWWTxXJxP2phhTKYH56pAd5RbXFF5SXJtMrfsbVmzNxqTXfRPy0R4Oz8YkImo67r8thx9tf/gFy87jm+DzvGC0/tZnqssmWYc/kerwi10+Pq1M17WxSMal9W8vX+89P9tx/vl58fb58anX29UbOgDeVk3f9Ubr9A3U49YnOPOh8qo7HmyRR+d0twuPDmyA3V1elphmaOzrEeMCGv/c/VCNAcjvrM9hqdoE8q+lXgT07y/Zwllz3nvmcZ5bQvVHfWdQD7/6zzHsfR8NT49kE/lJexYXpLY8G6Y3Y1KHEwB4xxsUk0j1mUOZn4foaonSYlXtaFy2N8ecphZ+xws6ALdHXGTjUL+nNGkLYNSDNO6i9EvHp5XZ0D/wajwczYnWDzWvMNzwulLTgtIkLGluWFQBUzjl3yzCxJjPHE2bimzVK+BZ7enHgmIRHUGIxkTogv/BdbDeazMeJ7NHwl/KO0xGsh6M5DNufzj5WTEDIbo/knq3nsQubeP/9Wo9Dm4RmxOEMQi8VY496Qc4nWxK9oiatzXBnLCu8kE2+l1NKzGF9JdG2pcNgg5QjC6u8Cg2i/CtKvwsbthgD/Ag

const viewer = new Cesium.Viewer("cesiumContainer");
const scene = viewer.scene;

const viewModel = {
  x: 0,
};

Cesium.knockout.track(viewModel);

const toolbar = document.getElementById("toolbar");
Cesium.knockout.applyBindings(viewModel, toolbar);

const customShader = `uniform vec4 color;
uniform vec4 otherColor;
uniform float x;

czm_material czm_getMaterial(czm_materialInput materialInput)
{
    czm_material material = czm_getDefaultMaterial(materialInput);
    vec2 st = materialInput.st;
    vec4 outColor = color;
    if (st.x > x) {
      outColor = otherColor;
    }
    material.diffuse = outColor.rgb;
    material.alpha = outColor.a;
    return material;
}`;

// Polyline Outline
const l = scene.primitives.add(
  new Cesium.Primitive({
    geometryInstances: new Cesium.GeometryInstance({
      geometry: new Cesium.PolylineGeometry({
        arcType: Cesium.ArcType.NONE,
        positions: Cesium.Cartesian3.fromDegreesArray([
          -120.0,
          30.0,
          -80.0,
          30.0,
          -80.0,
          25.0,
        ]),
        width: 30.0,
        vertexFormat: Cesium.PolylineMaterialAppearance.VERTEX_FORMAT,
      }),
    }),
    appearance: new Cesium.PolylineMaterialAppearance({
      material: new Cesium.Material({
        fabric: {
          uniforms: {
            color: new Cesium.Color(1.0, 0.5, 0.4, 1.0),
            otherColor: new Cesium.Color(0.0, 0.45, 0.0, 1.0),
            x: 0.3,
          },
          source: customShader,
        },
      }),
    }),
  })
);

Cesium.knockout
  .getObservable(viewModel, "x")
  .subscribe(function (x) {
    x = Number(x);
    if (isNaN(x)) {
      return;
    }
    l.appearance.material.uniforms.x = x;
  });