three流体可视化


之前参考各位大佬的例子,在cesium上面完成了流体的迁移。但总觉得如果在three里面还没完成,会觉得少了点什么。
于是在经过长时间的研究之后,终于折腾出来一个版本。实现原理与cesium的不尽相同。
之前体渲染没有考虑深度的原因,在某些视角会产生流体遮挡实景的情况。显然,渲染顺序是有问题的。
因此,这版换了另一种方式,非体渲染。至于使用体渲染结合场景深度,我暂时还没找到比较合适的方式,就留给后续研究研究吧。
实现思路大致如下:

思路

1、场景生成高度地形,创建正射相机,获取当前场景地形的深度图(左下角展示图)
2、创建四张帧缓冲,分别计算水流、水深高度,这里帧缓冲实现和cesium迁移的基本相同,同时选择一张水深高度展示,
验证当前的流体结果
3、创建一个plane,选择其中一张高度纹理,采样高度值,并在顶点着色器里面根据采样的值做高度偏移,,
4、片元着色器里面根据高度值不同,设置颜色

效果展示

参考链接

ThreeJS 流体模拟 WebGL Fluid ThreeJS水体开源预告


文章作者: coderrc
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 coderrc !
评论
  目录