用WebGL进行局部水体环境渲染

大家好,今天我们要介绍的这个Demo名字很简单,叫做WebGL Water;但是效果可不一般!它自从上线以来,就被在Twitter和其他科技博客上广为转载,目前在Twitter上搜索WebGL,几乎十条有八条会提及这个Demo——俨然已经成为WebGL技术对大众展示的代言人了!“Cool!”、“Amazing!”、“Excelent!”无数的赞美之词加于一身!那么它的作者是谁呢?对了,正是我们之前提及的那个Evan Wallace!他的上一个Demo《用WebGL实现光线追踪》一样也是获得了业界和一般大众的一致好评!还真是WebGL界最近的Pop Star呢!

好了,废话少说,还是让我们赶紧来看一下这个用WebGL进行局部水体环境渲染的Demo吧!

Demo信息

这个Demo需要一个相当好的显卡和最新的显卡驱动。

操作说明:

    • 拖拽水体来生成水纹涟漪
    • 拖动背景来转换相机视角
    • 按空格键来暂停/开始
    • 拖拽圆球移动它
    • 按L键设置光线方向
    • 按G键来设置重力

使用到的技术:

    • 光线追踪的反射和折射
    • 基于统计的漫反射遮挡
    • 基于高度的水体模拟(需要OES_texture_float扩展)
    • 软阴影
    • 焦散效果(需要OES_texture_standard_derivatives扩展,目前只有Google Chrome浏览器支持这一扩展)

 赶紧打开Demo地址来看一下吧!如果你的显卡不够好或者没有Chrome浏览器,那也不要担心。HiWebGL为你准备了如下视频。

HiWebGL点评

Evan Wallace的Water Demo结合了基于高度的水面渲染、反射与折射(reflections & refractions)、基于统计的漫反射遮挡(Analytic AO)及平滑的实时软阴影生成技术、向我们呈现了一个非常逼真的局部水体环境的渲染解决方案。这个Demo的亮点在于将多项常用图形渲染技巧精彩完美得结合在一起,并使用WebGL技术在网页前端展示出来,同时也验证了基于浏览器前端硬件加速能力的WebGL应用,已经可以达到非常高质量的实时环境渲染水平了。

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

1 trackback

Demo大赏 | 2011 Mozilla Demoparty赏析HiWebGL | HiWebGL | 最好的HTML5 WebGL中文资讯站
2011 年 9 月 10 日 下午 5:31

Post a Comment

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

*

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