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树洞
  

• 知乎专栏：BIM树洞

• 气氛组博客：http://www.31bim.com

• BIM应用及咨询，CAD,Revit, OpenGL，图形开发交流，加Q群1083064224