体渲染 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中实现体渲染
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。