WebGL Volume Rendering Made Easy

2024-04-15 12:51:56

WebGL Volume Rendering Made Easy

WebGL Volume Rendering Made Easy
- 1、转换.raw文件成为一张16x16的png图片
- 2、2个render pass

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

WebGL Volume Rendering Made Easy相关推荐

体绘制（Volume Rendering）概述介绍
1.体绘制(Volume Rendering)概述之1:什么是体绘制? http://blog.csdn.net/liu_lin_xm/article/details/4850575 2.体绘制(Vo ...
NeuS: Learning Neural Implicit Surfaces by Volume Rendering for Multi-view Reconstruction
Paper_Reading(不定时更新版) (仅为个人记录,若有错误,请指正) Nerf:因为缺乏曲面约束,导致从学习到的隐式表示中提取到高质量的曲面较为困难. NeuS目的: In NeuS, th ...
3D Slicer Volume Rendering模块使用简单说明
这个模块还是比较好用的,打开Volume的小眼睛就可以看到渲染的结果还有一个要选的就是渲染什么模式,在Present那里其他的简单试试就可以知道作用官方网站 Volume rendering - ...
体绘制（Volume Rendering）概述
摘抄"GPU Programming And Cg Language Primer 1rd Edition" 中文名"GPU编程与CG语言之阳春白雪下里巴人" ...
体绘制（Volume Rendering）概述之1：什么是体绘制？
摘抄"GPU Programming And Cg Language Primer 1rd Edition" 中文名"GPU编程与CG语言之阳春白雪下里巴人" ...
Nerf论文前后介绍以及今后方向（2020年各个方向工作论文分析） NEURAL VOLUME RENDERING:NERF AND BEYOND
你好! 这里是"出门吃三碗饭"本人, 本文章接下来将介绍2020年对Nerf工作的一篇总结论文NEURAL VOLUME RENDERING:NERF AND BEYOND,论文作 ...
体绘制（Volume Rendering）概述之4：光线投射算法（Ray Casting）实现流程和代码（基于CPU的实现）...
转自:http://blog.csdn.net/liu_lin_xm/article/details/4850630 摘抄"GPU Programming And Cg Language P ...
【GPU编程】体绘制传输函数-分类(Volume Rendering Transfer function：Pre- VS Post-Classification)
在科学可视化中,我们所获得的体数据集经常是代表一些光学上的不同物理属性的单值.通常没有可行的方法可以从这样的数据中获得发射和吸收属性.因此用户必须采用某种映射方法给数据值分配光学属性值来决定数据中的不 ...
37、NeuS: Learning Neural Implicit Surfaces by Volume Rendering for Multi-view Reconstruction
简介主页:https://lingjie0206.github.io/papers/NeuS/index.htm 如图(a)顶部所示,由于孔洞引起的激进的深度变化,神经网络会错误地预测出前表面附近的 ...

最新文章

热门文章