Cesium智慧城市特效(2)

效果

off bloom

on bloom

代码

Shader的实现

index.ts

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


export default class SweepShader extends Cesium.CustomShader {
    sweepColor: Cesium.Cartesian3
    mixColor1: Cesium.Cartesian3
    mixColor2: Cesium.Cartesian3

    constructor(opt: { [key in string]: Cesium.Cartesian3 } = {}) {
        const { sweepColor = new Cesium.Cartesian3(0.5765, 0.8157, 1.0),
            mixColor1 = new Cesium.Cartesian3(0.7333, 1.0, 0.902),
            mixColor2 = new Cesium.Cartesian3(1.0, 0.4118, 0.3098) } = opt;

        console.log(mixColor1)
        super({
            vertexShaderText: vertex,
            fragmentShaderText: frag,
            uniforms: {
                u_sweep_color: {
                    value: sweepColor,
                    type: Cesium.UniformType.VEC3
                },
                u_mix_color1: {
                    value: mixColor1,
                    type: Cesium.UniformType.VEC3
                },
                u_mix_color2: {
                    value: mixColor2,
                    type: Cesium.UniformType.VEC3
                },
                u_time: {
                    value: 0, // initial value
                    type: Cesium.UniformType.FLOAT
                },

            },
            varyings: {
                v_selectedColor: Cesium.VaryingType.VEC3,
                v_uv: Cesium.VaryingType.VEC2,
            },
        })


        this.sweepColor = sweepColor
        this.mixColor1 = mixColor1
        this.mixColor2 = mixColor2

        const task = (t: number) => {
            this.setUniform("u_time", t * .001)
            requestAnimationFrame(task)
        }
        requestAnimationFrame(task)
    }
}

frag.glsl

float random(vec2 st) {

  return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);
}

void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
  vec3 color = vec3(0);
  vec3 originColor = mix(u_mix_color1, u_mix_color2, v_uv.y);
  float t = fract(u_time * 2.) * 2.;
  vec2 absUv = abs(v_uv - t);

  vec2 st = v_uv * 15.;
  vec2 ipos = floor(st + u_time * 5.);
  float r = random(ipos)+.2;

  float d = clamp(distance(0., absUv.y) / .2, 0., 1.);
  float diffuse = dot(czm_sunDirectionEC, fsInput.attributes.normalEC);
  diffuse = clamp(-diffuse, 0., .45);
  color += originColor;
  color = mix(u_sweep_color * r + u_sweep_color * .8, color, d);
  material.diffuse = color;

  material.emissive = vec3(diffuse) * (1. - d);
}

void vertexMain(VertexInput vsInput, inout czm_modelVertexOutput vsOutput) {
  // 注意这里的uv，详情看本系列第一篇文章
  v_uv = vec2(vsInput.attributes.positionMC.x / 80., vsInput.attributes.positionMC.y / 250.);
}

使用到Cesium3DTileset

const option = {
	sweepColor = new Cesium.Cartesian3(0.5765, 0.8157, 1.0),
	mixColor1 = new Cesium.Cartesian3(0.7333, 1.0, 0.902),
	mixColor2 = new Cesium.Cartesian3(1.0, 0.4118, 0.3098)
}
tileset.customShader = new SweepShader(option)

开启场景的Bloom

const bloom = viewer.scene.postProcessStages.bloom.enabled = true