体渲染 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中实现体渲染

Cesium中实现体渲染相关推荐

Cesium中开启等高线渲染
最近接到一个需求,需要在Cesium中基于实时地形开启等高线效果,让用户可以看到真实效果.在网上看了一些资料,许多都是需要付费的或者不提供源码,于是在cesium官网找到了示例代码,以下将具体介绍如何 ...
Cesium Volumn 体渲染
Cesium中的体渲染上篇介绍了Cesium中的BoxGeometry的本地坐标获取方法,获取了本地坐标后,我们就可以开始做体渲染相关的东西了.将相机坐标也换算到模型本地坐标,即可计算得到以相机为起 ...
ThreeJS 中体渲染，利用噪声模拟烟，云
ThreeJS 中体渲染,利用噪声模拟烟,云体渲染的东西也看了一段时间了,这里结合Three.js中体积云的例子,实现shdertoy中的一个效果,先放效果图. Fire2 (shadertoy.c ...
Cesium中使用Sampler3D，3D纹理，实现体渲染
Cesium中使用Sampler3D,3D纹理,实现体渲染 Cesium目前(20221231)还不支持直接使用3D纹理,但是其实内部已经可以WebGL2,而且内置常量也有3DTexture.所以,可 ...
Cesium体渲染，去除Volume中的马赛克
Cesium中体渲染,去除Volume中的马赛克产生马赛克的原因是所有数据都是真实数据,未对采样结果进行插值处理,上一篇文中采用的是Nearest,所有采样结果都是基于真实数据的,即在不同位置处进行 ...
Cesium 中的离屏渲染
Cesium 中的离屏渲染本文参考了众多文章,均列在了最后.先感谢各位的分享精神,如觉有冒犯,请与我联系. 部分内容来自个人理解,欢迎指正交流. 为了达到更加真实的渲染效果或其他计算需求,很多时候需 ...
用体渲染的方法在Unity中渲染云(18/4/4更新)
github: https://github.com/yangrc1234/VolumeCloud 更新的内容在底部最近在知乎上看到一篇文章讲云层的渲染(https://zhuanlan.zhihu ...
Cesium中的相机—旋转矩阵
在学习坐标旋转的时候,一不小心就会把坐标系的旋转和矢量的旋转弄错,这里给出详细的两种旋转过程: 两种旋转矩阵的定义下面仅以绕Z轴旋转为例,给出两种旋转的过程定义. 坐标系旋转,点不变(见下左图) 两 ...
ios 自动缩小字体_小字体紫筑B丸85%中粗体文件+deb双版本
今天带来的是有字由心雨公众号的一款收费字体『紫筑B丸』,我把5字重里面的中粗体提取出来单独缩小至85%后做成了单字重,同时把英文也改变成和中文对应的大小粗度后,整体感觉非常的舒服,也一直是我自用最久的 ...

Cesium中实现体渲染