HTML5漫谈（5）--3D技术：WebGL

WebGL是HTML5中的3D技术。

WebGL从何而来？

目前，主流的3D技术标准包括微软的DirectX和业界广泛使用的OpenGL(Open Graphics Library)/OpenCL。

而WebGL正是基于OpenGL ES（OpenGL for Embedded Systems）制定的，浏览器内核通过对Open GL API的封装，实现可以通过调用Javascript（Canvas等）调用3D能力。Khronos Group（http://www.khronos.org） 负责制定WebGL标准，并在2011年2月发布了Web 1.0标准。

 

WebGL的产业化现状

WebGL刚刚起步，标准刚发布一年，但一些产品化、产业化进展还是令人欣喜的。

1、主流浏览器快速支持WebGL

PC浏览器方面，Chrome、Mozilla、Safari、Opera等主流浏览器最新版本已经支持WebGL；手机浏览器方面目前只有Opera Mobile 12完全支持WebGL。

2、基于WebGL的应用不断涌现

举两个例子：

1） 3 Dreams of Black （http://ro.me 用Chrome浏览器访问）

“3 Dreams of Black”,是基于WebGL技术的互动型MV，这支MV所讲述的是一个发生于”后世界末日”场景下的故事，故事由Norah Jones 和 Jack White饰演主角。整个故事讲述的是主角Norah Jones的三个梦境，观众可以通过角色操控来体验整个MV故事，采用知名的独立摇滚乐团Danger Mouse and Daniele Luppi全新专辑《ROME》中的音乐作品。

 

这项实验作品的目的是充分地展现Chrome浏览器所能够带来的卓越优化可能性。

整个MV中的所有画面都不是视频片段，而是一系列可视化模型通过WebGL技术而实时生成的动态3D视觉画面。WebGL是一个实现网页浏览器端3D动画效果的技术，有别于过往需加装浏览器插件，WebGL技术实现了各种动态视觉元素与2D动画元素的相互结合，在浏览器端，就能带给广大用户无与伦比的音乐与视觉动态体验。

 

“3 Dreams of Black”被称为WebGL巨作，获得FWA颁布的2011年度大众选择奖。

（http://www.thefwa.com/article/fwa-people-s-choice-award-2011）

该项目是由Aaron Koblin监督指导、在Three.js的开发者Mr.doob的领导下、由North Kingdom、Skellftae、Mirada以及Google Data Arts团队联合开发。

关于3 Dreams of Black更多背后故事，可访问： http://www.damndigital.com/archives/25192

2）Skid Racer (https://skid.gamagio.com 推荐用Chrome浏览器访问)

英国的 Gamegio 公司开发的Skid Racer是一款卡丁车竞速游戏，其iOS版本（http://itunes.apple.com/cn/app/id372282892?mt=8）深受喜爱。

日前，他们又基于WebGL推出了HTML5版本的Skid Racer，包含 8 种不同的车体，10 条场景各异的赛道以及各种重火力装备

 

 

3、3D引擎层出不穷

WebGL 3D引擎目前也有不少Copperlicht，Three.js、PhiloGL等等，但许多3D引擎还待成熟。

下图是基于Copperlicht引擎实现的Quake3场景：

 

 

展望

WebGL是HTML5最重要的特性之一。更多第三方Web GL 3D引擎的出现将进一步提高应用的开发速度和用户体验整体，同时，更多操作系统平台、浏览器支持WebGL及相关性能优化，将进一步激发开发者开发HTML5 3D应用（特别是游戏）的兴趣。

另外值得关注的是，Khronos Group发布WebGL 1.0标准后，又启动了WebCL(Web Computing Language)的规范制定。WebCL（http://www.khronos.org/webcl/）意味着用Javascipt可以实现OpenCL，通过Web可以实现GPU、多核CPU的并行编程，基于HTML5实现3D大型游戏从可能变成可行。

（中国移动研究院 程宝平 chengbaoping@139.com）