开源！矢量建筑白模泛光特效以及全国77个大中城市的矢量shp数据获取！

大家好，我是日拱一卒的攻城师不浪，致力于前沿科技探索，摸索小而美工作室，这是2025年输出的第38/100篇原创文章。

效果预览

只是单单的一个白模杵在那，总是感觉少点什么，若是能给它们增加一点泛光特效，特别是在夜晚，定能给场景增添不少乐趣。

之前看到网上大多数的技术方案，是去修改3dtiles 里的一个非常深度的属性_source，但是如果Cesium版本在1.102之后，这个属性貌似已经不复存在了，给不少人带去了烦恼。

百思不得其解，为什么这博主行，我不行，是不是骗我？

要不说这么多人骂Cesium开源团队呢，确实该骂，Cesium的团队在升级版本的时候，真是一点都不考虑向后兼容啊！这也是一直以来被开发者诟病的原因之一。确实带来了不少麻烦。

其实，个人认为Cesium是一个非常强大的框架，涉及了多个领域知识，它本不该只有13K的star~

好了，今天给大家带来白模泛光的另一种技术方案：自定义Shader（CustomShader）

数据处理

想批量创建白模，手动创建当然是不现实的，一般都会有一个矢量建筑数据shp文件，(如果没有的话，我这里有全国大中77个城市的数据，关注公众号后台回复：白模，即可获取）并且会有一个高度字段，当然，是哪个字段，那就得根据具体数据具体分析了。

拿到shp文件，我们就可以去用专业的工具去构建3dtiles了，这里博主一直用的是cesiumlab，进入到"通用模型切片"，切一刀即可。

用的比较顺手了，且是免费开源的。谁让它带了个"cesium"字样呢，我一开始以为是官方的呢，太鸡贼了也。

不过还有类似的工具如：dasviewer，这类工具其实很多，我就不再一一列举了，选择适合自己的即可。

数据渲染

数据处理好之后，我们就可以在Cesium中加载3dtiles了。怎么加载3dtiles应该不用我写了吧。。。算了，啰嗦两句吧

js 复制代码

const addBuildings = async () => {
  const url = "/models/tileset.json";
  const tilesetUrl = await Cesium.Cesium3DTileset.fromUrl(url);
  const build3Dtileset = viewer.scene.primitives.add(tilesetUrl);
}

自定义shader

这里我们使用Cesium的原生接口CustomShader，自定义片元着色器。

js 复制代码

build3Dtileset.style = new Cesium.Cesium3DTileStyle({
    color: {
      conditions: [['true', "color('rgb(51, 153, 255)',1)"]]
    },
  });
  const customShader = new Cesium.CustomShader({
    //不考虑光照模型
    lightingModel: Cesium.LightingModel.UNLIT,
    fragmentShaderText: `
      void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
      float bh = 0.0; // 物体的基础高度，需要修改成一个合适的建筑基础高度
      float hR = 100.0; // 高亮的范围
      float gR = 400.0; // 光环的移动范围(高度)
      float vtxf_height = fsInput.attributes.positionMC.z-bh;
      float vtxf_a11 = fract(czm_frameNumber / 360.0) * 3.14159265 * 2.0;
      float vtxf_a12 = vtxf_height / hR + sin(vtxf_a11) * 0.1;
      material.diffuse*= vec3(vtxf_a12, vtxf_a12, vtxf_a12);
      float vtxf_a13 = fract(czm_frameNumber / 360.0);
      float vtxf_h = clamp(vtxf_height / gR, 0.0, 1.0);
      vtxf_a13 = abs(vtxf_a13 - 0.5) * 2.0;
      float vtxf_diff = step(0.01, abs(vtxf_h - vtxf_a13));
      material.diffuse += material.diffuse * (1.0 - vtxf_diff);
    }     
    `,
  });
  //将定义好的着色器作用域建筑tilesets
  build3Dtileset.customShader = customShader;

OK，完整的源码已经都贴出来了，是不是比老版本简单很多了，也不用费劲巴拉的去一个一个属性深挖了，有时候还挖不到，全看脸🐕。

总结

创建一个完整的白模泛光的数据主要就3步:

数据获取
数据处理
自定义Shader

数据如果没有的话，我这里有全国大中77个城市的数据，关注公众号后台回复：白模，即可获取。

【开源地址】：github.com/tingyuxuan2...

若想获取全国各地更全更新的白模矢量数据以及数据处理教程的的可以看看不浪的Cesium教程 ，教程《Cesium从入门到实战》，将Cesium的知识点进行串联，让不了解Cesium的小伙伴拥有一个完整的学习路线，并最终完成一个智慧城市的完整项目，课程最近也更新了很多进阶内容，想了解课程大纲，+作者：brown_7778（备注来意）。
有需要进可视化&Webgis交流群可以加我：brown_7778（备注来意）。