Cesium中实现体渲染_cesium 体渲染

体渲染 Volume Rendering

传统意义上我们构建模型都是通过构建物体的外表面去实现的，例如通过三角面构建模型，或者通过方程的形式构建隐式的表面模型。

而体渲染则是通过 3d 数据集渲染物体的一种方式，典型的 3d 数据集是医学领域上的 CT，CT 是一组 2d 的切片图像（例如，每毫米深度进行一次切片），因此 3d 数据集也可以理解成一组存放 2d 贴图的数组。

通过 3d 数据集可以渲染出具有内部信息的模型。

Threejs 中的体渲染示例

Threejs 中有一些非常优秀的体渲染示例，这次的目的就是在 cesium 中复现这些示例。

体积云

柏林噪声

在 Cesium 中复现

翻看 Threejs 的相关源码，可以很轻松的获取到 3D 贴图数据的计算方式，以及相关的着色器代码。

但是比较麻烦的一点是，Cesium 目前并不支持 sampler3D，并且在默认使用 WebGL1 情况下不支持 glsl 3.0 的语法。

不支持 sampler3D 和 glsl 3.0 的语法的解决办法

对于支持 glsl 3.0 语法的问题，只需要在构建 Viewer 时传入参数，利用 WebGL2 渲染即可。

contextOptions: {
  requestWebgl2: true, // 开启webgl2
}

1
2
3
4
5

而对于 sampler3D 的支持，我的做法是对 Cesium 的源码进行一点改造，仿照 Cesium 原有的 Texture 类，再构建一个 Texture3 类用于传入 sampler3D 纹理。

着色器代码适配

在 Threejs 的顶点着色器中，计算 vOrigin 的方式是传入相机的世界坐标 cameraPos， 再乘以模型矩阵的逆矩阵获得的。

而在 Cesium 中，则可以直接利用内部变量计算得到

vOrigin=czm_encodedCameraPositionMCHigh+czm_encodedCameraPositionMCLow;
1

片元着色器基本照搬即可，需要注意的是，Threejs 的片元着色器是利用 color 的变量输出最终结果的，因此移植到 Cesium 中还需要将其输出到 gl_FragColor 中

实现效果

实际体验

由于csdn无法放置自定义的html，因此如果想体验实际效果，请移步Cesium中实现体渲染