其他分享
首页 > 其他分享> > WebGL Volume Rendering Made Easy

WebGL Volume Rendering Made Easy

作者:互联网

WebGL Volume Rendering Made Easy

WebGL Volume Rendering Made Easy

Webgl2.0的3D texture可以很好实现体渲染,而不是所有现有平台都能到2.0。最近在看threejs在webgl 1.0版本下如何实现体渲染,http://lebarba.com/blog/上提供了完整的解决方案,可以说是开箱即用,网站上提供了step by step的教程,跟着教程,自己稍加修改就行,但是具体到工程化,估计还需要一些工作。


在这里插入图片描述

这个是根据空间x,y,z的坐标形成一个体渲染效果,还不错。

官网上主要的流程:

1、转换.raw文件成为一张16x16的png图片

.raw文件的转换提供了一个3DTextureConverter,其中比较核心的思想就是:raw文件每个字节中存放的是一个具体256内的数值内,表征强度值,刚好对应图片的成灰度值。根据xyz可以生成一个256X256X256的空间位置,这个值会被输出成16X16的切片。

茶杯:
在这里插入图片描述
根据XYZ值生成的灰度切片:

value = Convert.ToInt32(256 * (0.33 * z / depth + 0.33 * x / width + 0.33 * y / height));

在这里插入图片描述

2、2个render pass

——数据准备完成了就是threesjs的渲染部分,其中比较核心的思想就是2个render pass,第一是求前后面的坐标,第二个主要是集合Ray marching和ray casting来计算射线前后相交点,并计算片元颜色,具体的实现shader原理有点麻烦,回头可以仔细分析下,这里就不多说了。

在这里插入图片描述
在这里插入图片描述
经过这几部分,修改添加GitHub上对应的js代码就可以得到刚才的效果了,
github上地址:https://github.com/weihl/webglvolumerendering


BIM树洞

做一个静谧的树洞君

用建筑的语言描述IT事物;

用IT的思维解决建筑问题;

共建BIM桥梁,聚合团队。

本学习分享资料不得用于商业用途,仅做学习交流!!如有侵权立即删除!!


标签:BIM,raw,WebGL,Volume,Rendering,Made
来源: https://blog.csdn.net/weixin_44204198/article/details/114643623