Cesium 着色器自定义材质

示例代码

<script setup lang="ts">
import * as Cesium from 'cesium'
import "../styles/Widgets/widgets.css"
import { onMounted } from 'vue';
import gsap from 'gsap';

onMounted(async () => {
  // https://cesium.com/learn/cesiumjs/ref-doc/Viewer.html#.ConstructorOptions
  const viewer = new Cesium.Viewer('cesiumContainer', {
    // 隐藏 logo
    creditContainer: document.createElement('div'),
    // 隐藏右上角的帮助按钮
    navigationHelpButton: false,
    // 去除第一次加载后控制台报错
    infoBox: false,
    // 右上角搜索框
    geocoder: false,
    // 底部时间线
    timeline: false,
    // 左下角动画控件
    animation: false,
    // 右上角主页按钮
    homeButton: false,
    // 右上角显示模式
    sceneModePicker: false,
    // 右上角投影切换按钮
    baseLayerPicker: false,
  })


  // 添加3D建筑 OSM自带建筑数据
  const tileset = await Cesium.createOsmBuildingsAsync();
  viewer.scene.primitives.add(tileset)



  // primivite创建矩形
  // 01-创建几何体
  let rectGeometry = new Cesium.RectangleGeometry({
    rectangle: Cesium.Rectangle.fromDegrees(
      // 西边的经度
      115,
      // 南边维度
      20,
      // 东边经度
      135,
      // 北边维度
      30
    ),
    // 距离表面高度
    height: 0,
    vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
  });
  // 02-创建几何体实例
  let instance = new Cesium.GeometryInstance({
    id: "myRect",
    geometry: rectGeometry,
    attributes: {
      color: Cesium.ColorGeometryInstanceAttribute.fromColor(
        Cesium.Color.BURLYWOOD.withAlpha(0.5)
      ),
    },
  });

  // 03-设置外观
  // let material1 = new Cesium.Material({
  //   fabric: {
  //     type: "Color",
  //     uniforms: {
  //       color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
  //     },
  //   },
  // });

  // let material1 = new Cesium.Material({
  //   fabric: {
  //     type: "Image",
  //     uniforms: {
  //       image: "texture/logo.png",
  //     },
  //   },
  // });

  // 编写着色器修改材质
  // https://cesium.com/downloads/cesiumjs/releases/b28/Documentation/
  let material1 = new Cesium.Material({
    fabric: {
      uniforms: {
        uTime: 0,
      },
      source: `
        czm_material czm_getMaterial(czm_materialInput materialInput)
        {
          // 生成默认的基础材质
          czm_material material = czm_getDefaultMaterial(materialInput);
          // material.diffuse = vec3(materialInput.st+uTime, 0.0);
          float strength = mod((materialInput.s-uTime) * 10.0, 1.0);
          material.diffuse = vec3(strength, 0.0, 0.0);
          return material;
        }
      `,
    },
  });

  gsap.to(material1.uniforms, {
    uTime: 1,
    duration: 2,
    repeat: -1,
    ease: "linear",
  });



  // 设定几何体都是与地球的椭球体平行
  // 假定几何体与地球椭球体平行，就可以在计算大量顶点属性的时候节省内存
  let appearance = new Cesium.EllipsoidSurfaceAppearance({
    material: material1,
    aboveGround: true,
  });
  // 基类
  // let appearance = new Cesium.MaterialAppearance({
  //   material: material1,
  // });


  // 04-图元
  let primitive = new Cesium.Primitive({
    geometryInstances: instance,
    appearance: appearance,
  });
  console.log(appearance.vertexShaderSource);
  console.log(appearance.fragmentShaderSource);
  // 05-添加到viewer
  viewer.scene.primitives.add(primitive);
})

</script>

<template>
  <div id="cesiumContainer" ref="cesiumContainer" />
</template>

<style scoped>
#cesiumContainer {
  height: 100%;
  width: 100%;
}
</style>