【Cesium】智慧城市建筑白模泛光特效

最新推荐文章于 2024-08-13 15:46:27 发布

程老师2088

最新推荐文章于 2024-08-13 15:46:27 发布

阅读量6.3k

点赞数 3

分类专栏： 3D引擎文章标签： javascript js 前端

本文链接：https://blog.csdn.net/chengzhf/article/details/110686409

版权

本文介绍了如何在Cesium中制作智慧城市建筑群的泛光效果，包括素材准备、原理剖析、源码修改、增加插件、开启泛光和调整底图亮度等步骤，详细解析了利用ModelUtility修改着色器代码以实现特效。

摘要由CSDN通过智能技术生成

今天我们来做下智慧城市建筑群泛光的效果。效果如下图所示：

1、素材准备

（1）白模的3dtiles数据。这个可以通过cesiumlab来生成，一般情况下，有shapefile面数据，即可通过cesiumlab进行高度拉伸生成。

（2）cesium源码。这里使用的是1.75.0版本。

2、原理剖析

由于cesium并没有提供类似的api，只能通过修改源码实现。有其他大神相关的帖子可以参考，本文也参考了一些其他人的做法，再此先感谢过。

首先，实现的原理是通过修改着色器实现的。在粗略的研究下，可以得知，cesium的加载方式大致如下：

加载数据----通过着色器渲染----展示到屏幕上。

且cesium只会渲染一次，并不会每帧渲染，这个跟其他一些游戏引擎并不一样。

然后，我们需要想办法介入其着色器的修改过程。这里参考了网上大神的帖子，后面章节直接给出操作方式。

3、修改源码

需要修改两处地方，第一处在行145604左右的地方，插入如下代码。这里给出上下文，可以根据代码关键字进行搜索。

    var drawVS = modifyShader$1(vs, programId, model._vertexShaderLoaded);
    var drawFS = modifyShader$1(fs, programId, model._fragmentShaderLoaded);

    //------------BEGIN 修改源码第一处---------------//
    if(ModelUtility && ModelUtility.modifyVertexShaderForLogDepth){
      drawVS = ModelUtility.modifyVertexShaderForLogDepth(
        drawVS,
        'u_projectionMatrix * u_modelViewMatrix * vec4(a_position.xyz, 1.0)'
      );
      drawFS = ModelUtility.modifyFragmentShaderForLogDepth(drawFS);
    }
    //------------END---------------