ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

WebGL Volume Rendering Made Easy

2021-03-10 19:30:00  阅读:416  来源: 互联网

标签:BIM raw WebGL Volume Rendering Made


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

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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有