浏览器上的60FPS愤怒的小鸟

By | 2011/05/12
0 Comment

愤怒的小鸟，使用谷歌浏览器访问http://chrome.angrybirds.com/（貌似被墙了……）

小鸟就不用我说了吧，有名到要命。到底有多少盗版，谁也说不清楚，想来用Flash实现这样一个游戏并不是什么困难的事情。不过我这里说的是使用WebGL，使用WebGL和本地存储，无论在线或者离线，你都可以很快的在你的浏览器里玩愤怒的小鸟了，据说这个游戏在运行的时候可以达到60FPS，可能比本地运行游戏都要快一点，手机上更不用说（愤怒的小鸟在我的G2基本运行不起来，难得启动成功也是幻灯片）。

讲讲什么是WebGL，简单而言WebGL = Web + OpenGL。这二者相加的结果是一整套针对浏览器的3D图形硬件加速解决方案，类似于O3D（Google为了丰富网页的3D体验而开发的Open-Source图形硬件加速技术，Chrome浏览器中存在）。

WebGL还是比较稚嫩，要在短时间内达到普及的程度将非常困难，其还存在很多需要克服的困难。WebGL的主要发展方向是整合JavaScript和OpenGL ES 2.0，而JavaScript将成为其主要的瓶颈，它无法高效的处理大量的数据运算（换句话说就是 “太慢”）。当然这些仅仅是以目前的条件来分析，也许不久的将来针对于运算效率的问题将会有很大改善。

WebGL必须要面对和克服的困难：

  • 因为OpenGL ES 2.0并没有被大多数的硬件平台所支持，所以将会导致很多设备无法运行WebGL。
  • 因为OpenGL ES 2.0对JavaScript的依赖程度达到了100%，其利用JavaScript来处理应用程序的场景绘图，这些应用会因为JavaScript的计算瓶颈而受到不同程度的限制。
  • 无法高效的利用Javascript处理Skinning，如果利用GPU的运算能力来处理，势必会占用过多GPU的资源，从而无法更好的协调其它效果，例如：Shadow mapping（绘制软边的阴影贴图算法）
  • 借用一个例子来更进一步的剖析，例如：处理一个带有phong材质的物体，每一帧的渲染就接近多达10次以上的GL调用：
    • 一、给Shader传递所包含的Matrix信息（通常1-5个Matrices）。
    • 二、每个需要传递的Color参数信息都将占用一次GL调用，对于Phone材质而言，至少需要两次调用(Color & Shininess)。然而如果追求效果的最大化，那么可以把五个参数都用上（Emissive, Ambient, Diffuse,Specular, Shininess）一共产生五次GL调用。
    • 三、处理定点坐标。
    • 四、处理法线信息。
    • 五、如果模型包含有贴图信息，那么还需要增加一次GL调用来传递UV信息。
    • 六、最后再次执行GL调用完成对模型的绘制。
  • 从上面的结果来看，最少也需要5次GL调用，最多可以达到14次。如果结合最终项目的需求以每秒30帧的频率来计算，其效率可想而知。
  • WebGL并没有积极的去解决数据导入问题。目前为止，仅仅可以利用IMG tags来嵌入材质信息，暂不支持DXT图片压缩格式（而DXT已经被大多数的3D显卡硬件所支持）。暂无预处理技术，依然是在裸奔。在一个独立的File中不支持CubeMaps（是一个以较低性能损耗来描绘静态物体对周围环境的反射效果的捷径）。除了利用JavaScript的数组以外，没有更好的方式传递几何信息。

以上的信息可以对当前WebGL的情况有个基本的了解，其实无论比较的结果如何，未来遇到实际问题时，都是要根据实际情况来选择适用的解决方案。在这里没有谁有压倒性的优势，都各有利弊。对于开发者来讲，追求效率的同时，可以在要求不够严格的情况下选择最易上手的工具，缩短开发周期。

一些例子，还是很帅滴~~

发表评论

您的电子邮箱地址不会被公开。