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
}

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

着色器代码适配

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

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

vOrigin=czm_encodedCameraPositionMCHigh+czm_encodedCameraPositionMCLow;

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

实现效果

在这里插入图片描述

实际体验

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

相关文章

学习编程是顺着互联网的发展潮流,是一件好事。新手如何学习...
IT行业是什么工作做什么?IT行业的工作有:产品策划类、页面...
女生学Java好就业吗?女生适合学Java编程吗?目前有不少女生...
Can’t connect to local MySQL server through socket \'/v...
oracle基本命令 一、登录操作 1.管理员登录 # 管理员登录 ...
一、背景 因为项目中需要通北京网络,所以需要连vpn,但是服...