用WebGL实现光线追踪!

来自马萨诸塞中的程序员Evan Wallace正在布朗大学攻读计算机学位,他的主要兴趣在于图形图像和计算机图形学。他的不少基于WebGL技术的Demo都在国外广为流传,外国佬真心表示“这些Demo实在是太TM酷了”!

从今天开始,我们会逐个介绍这些声名海外的WebGL Demo。看看Evan的创意和技术能不能给我们什么启发!首先上场的就是这个在Twitter上火到不行的光线追踪Demo。

准备工作

一开始先让我们科普一下吧!什么是光线追踪呢?简单的说光线追踪就是最完美的光影解决方案。因为光线追踪会产生天然阴影,就不存在动态阴影的问题了,它的光照模型和现实是极为接近的。光线追踪可以实现极为逼真的光影效果,因为现实中光线就是这么传播的。看看下面的这个水杯,第一眼你觉得是照片还是电脑渲染出来的呢?

以下内容摘自维基百科

什么是光线追踪?

光线跟踪(Ray tracing),又称为光迹追踪或光线追迹,来自于几何光学的一项通用技术,它通过跟踪与光学表面发生交互作用的光线从而得到光线经过路径的模型。它用于光学系统设计,如照相机镜头、显微镜、望远镜以及双目镜等。这个术语也用于表示三维计算机图形学中的特殊渲染算法,跟踪从眼睛发出的光线而不是光源发出的光线,通过这样一项技术生成编排好的场景的数学模型显现出来。这样得到的结果类似于光线投射与扫描线渲染方法的结果,但是这种方法有更好的光学效果,例如对于反射与折射有更准确的模拟效果,并且效率非常高,所以当追求这样高质量结果时候经常使用这种方法。

光线跟踪的优点

光线跟踪的流行来源于它比其它渲染方法如扫描线渲染或者光线投射更加能够现实地模拟光线,象反射和阴影这样一些对于其它的算法来说都很难实现的效果,却是光线跟踪算法的一种自然结果。光线跟踪易于实现并且视觉效果很好,所以它通常是图形编程中首次尝试的领域。

光线跟踪的缺点

光线跟踪的一个最大的缺点就是性能,扫描线算法以及其它算法利用了数据的一致性从而在像素之间共享计算,但是光线跟踪通常是将每条光线当作独立的光线,每次都要重新计算。但是,这种独立的做法也有一些其它的优点,例如可以使用更多的光线以抗混叠现象,并且在需要的时候可以提高图像质量。

Demo信息

Demo名称:WebGL光线追踪

作者:Evan Wallace

作者网站:http://madebyevan.com

Demo地址:http://madebyevan.com/webgl-path-tracing/

浏览器要求:Chrome 13.0+, Firefox 5.0+, Safari 5.1+

Demo说明:

光线追踪是一种逼真的光影算法,用于模拟真实的光照反射场景。在这个光影追踪的实例中使用了WebGL来进行实时演算,支持漫反射、镜面反射、光泽表面。实例会持续渲染,所以一开始会有比较多的颗粒,随着不断的渲染,会渐渐变得平滑。Demo控制说明:

  • 点击“Add Sphere”增加一个球体,点击“Add Cube”增加一个立方体。
  • 鼠标单击来选择物体
  • 拖拽框架来移动物体
  • 使用退格键来删除物体
  • 拖拽背景来旋转相机视角

整个场景在GLSL着色器中动态编译。使用当前着色器可以重置任何物体,但任何几何体和材质的改变就意味着重新编译。为了计算每个像素的颜色,一道光线射入场景并且允许5次反射。每次反射中,该点上的入射光线(包括阴影)会与所有之前的的材质颜色进行加成和累计。软阴影是由随机抖动光线的每个像素的位置形成的。之前光线追踪被认为不可能被WebGL实现的,因为WebGL缺乏对浮点纹理的支持。但现在部分浏览器已经开始支持OES_texture_float了。

在线Demo

额… 由于这个Demo需要耗费大量的资源,为了避免您的电脑当机,这里就不插入在线Demo了。还请猛击上面的Demo地址,进入原网站进行欣赏!

HiWebGL点评

作为一种计算复杂度为O(n*n)的算法,由于计算机的速度问题,光线追踪目前仍然无法大规模应用于实时3D演算,暂时只能用于电影CG和渲染效果图等领域。这个基于WebGL技术实现光线追踪的Demo,实验价值大于实用价值,但仍然给了我们很大的启发,显示出WebGL技术强大的潜能。

分享到: 更多
Posted in Demo大赏, 推荐 and tagged , , . Bookmark the permalink.

2 trackbacks

用WebGL进行局部水体环境渲染HiWebGL | HiWebGL
2011 年 8 月 21 日 下午 4:03
Demo大赏 | 2011 Mozilla Demoparty赏析HiWebGL | HiWebGL | 最好的HTML5 WebGL中文资讯站
2011 年 9 月 10 日 下午 5:31

2 comments

  1. 我去,死机了

    回复

  2. 哈哈,不是一般的耗资源啊。。。我四核+4G内存都hold不住。。。卡得很

    回复

Post a Comment

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>