Cesium智慧城市效果(3)道路流光

效果

代码

Shader的实现

注:因为找个类是继承自PolylineMaterialAppearance ,所以和PolylineMaterialAppearance 一样只能用在PolylineGeometry的外观.

index.ts

import * as Cesium from "cesium"
import frag from "./frag.glsl?raw"

export default class FlowLightPolylineMaterialAppearance extends Cesium.PolylineMaterialAppearance {
  constructor(option: { lightColor?: Cesium.Color } = {}) {
    const { lightColor = new Cesium.Color(.5, 1, 1) } = option

    super({
      material: new Cesium.Material({
        fabric: {
          uniforms: {
            u_time: 0,
            light_color: lightColor
          }
        }
      }),
      fragmentShaderSource: frag
    })

    const task = (t) => {
      this.material.uniforms.u_time = t * .001
      requestAnimationFrame(task)
    }
    requestAnimationFrame(task)
  }
}

frag.glsl

 #ifdef VECTOR_TILE
uniform vec4 u_highlightColor;
      #endif

in vec2 v_st;

void main() {
  czm_materialInput materialInput;

  vec2 st = v_st;
  st.t = czm_readNonPerspective(st.t, gl_FragCoord.w);

  materialInput.s = st.s;
  materialInput.st = st;
  materialInput.str = vec3(st, 0.0);
  czm_material material = czm_getMaterial(materialInput);
  vec3 color = light_color_1.rgb;
  float start = 0.;
  float end = .5;
  float t = fract(u_time_0 * .4) * (1. + end) - end;
  start += t;
  end += t;
  if(st.x > start && st.x < end) {
    float d = 1. - (st.x - start) / (end - start);
    color = mix(color, color * .6, d * d);
  } else {
    color = color * .6;
  }
  material.emission = color;
  out_FragColor = vec4(material.diffuse + material.emission, light_color_1.a);
      #ifdef VECTOR_TILE
  out_FragColor *= u_highlightColor;
      #endif

  czm_writeLogDepth();
}

使用到Primitive

  const primitive = new Cesium.Primitive({
    appearance: new FlowLightPolylineMaterialAppearance({ lightColor: new Cesium.Color(.5, 1, 1) }),
	// other code....
  })

开启场景的Bloom

viewer.scene.postProcessStages.bloom.enabled = true