HTML5 2D游戏性能测试分析

SCIRRA是一套可以快速制作简易2D游戏的套件,用户只要通过拖拽和简单的设置属性,甚至不需要编写代码就可以完成游戏制作,并且支持DirectX渲染和HTML5 Canvas 2D渲染,未来还将支持WebGL渲染。SCIRRA对以上三种渲染做了一次性能评测。

GPU如何绘制2D图形

首先,让我们先来讲解一下渲染流程,这样你就能明白评测的工作原理。这里说的可能有些简单化,但是可以让你明白基本原理。要在低等级的渲染器(例如WebGL或DirectX)中绘制一个2D图形,需要绘制一个四元数。这基本上相当于一个围绕着图形的盒子,你需要提供每个顶角的X坐标和Y坐标。每个顶角称之为“顶点(Vertex)”,如下图所示。

在绘制大量的2D图形的过程中,你需要建立一个巨大的顶点列表。这个列表被储存在顶点数组(Vertex Buffer)中,然后显卡会调用顶点数组来进行绘制。在下面的图片中,有5个海盗王子,被进行了旋转和缩放操作,一共有20个顶点。

显卡是一门历史悠久的复杂技术。多年以来,价值数百万的游戏工业不断推动其发展,这种闭着眼一个劲的发展让显卡可以非常迅速的渲染2D图形。是的,非常迅速,甚至过于迅速了,因为它能在你还没反应过来的时候就完成了绘制。换句话说,计算出顶点位置并传送到显卡端只需要2微秒,然后显卡再用1微秒完成渲染,然后就静静等待下一个命令了。如果你并不对此感到奇怪,那也没什么,因为CPU现在也同样这么快。

好吧,这里要强调的重点其实是,2D游戏性能的瓶颈在于填充顶点数组的速度。你大概可以猜到显卡渲染的速度比你填充的速度要快,那问题就在于:你能多快计算出这些顶点位置然后放到顶点数组中呢?

性能测试

为了测试每种渲染器的性能,我们编写了一个标准的测试程序。这里有一个简单的蓝色方块,我们不断的绘制它,充满屏幕,直到帧率下降到30FPS为止。这样每帧计算的效果最小,并且可以保证我们是在衡量原始的顶点填充速度。方块是透明的,所以你能看到它们堆叠在一起,像下面这样。

你可以自己用不同的浏览器来试一下:

另外,请确认在WebGL性能测试中,顶端显示的是“renderer: webgl”,如果你的浏览器或电脑不支持WebGL,那么它会回滚到Canvas 2D模式。

测试环境

  • CPU:Intel Core i5-2500 (4 cores @ 3.3 GHz)
  • 内存:8 GB RAM
  • 显卡:AMD Radeon HD 6500 (1 GB VRAM)
  • 操作系统:Windows 7 64-bit (体验指数 6.8)
  • 浏览器:Internet Explorer 9、Chrome 15、Firefox 8以上均为稳定版,Opera 12 alpha版

Canvas 2D渲染

HTML5通过定义2D Canvas元素来绘制2D内容,比如游戏。这要比WebGL要高出很多等级。实际上你并不需要传递顶点。你只需要告诉浏览器需要在哪个位置绘制一个2D图形就可以,浏览器会完成顶点位置的计算(这里是指硬件加速下的2D Canvas,这也是当前大多数浏览器都支持的。)以下为测试结果,成绩是不断绘制蓝色方块的数量,直到帧率下降到30FPS为止,所以分数越高越好。

各个浏览器都非常接近,但IE9比Firefox 8要快了42%。

WebGL 渲染

在WebGL渲染中要说明一件事情,那就是我们的图形引擎会为物理碰撞引擎跟踪物体的顶点位置。这也就是说,不需要计算顶点在哪了,顶点位置是已知的。这让浏览器不再需要自己计算顶点位置,而只需要直接拷贝到顶点数组中就可以了。显然免去了计算的过程,可以让性能大幅度提升。

现在你可以看出填充顶点数组是一个多么大的负担。Firefox 8在之前的测试中是最差的,但是使用WebGL渲染之后,可以超过IE9足足70%,不过IE9并不支持WebGL,所以也许不能这么比。Chrome 15在使用WebGL渲染下,比它自己用2D渲染的速度提升了356%,比IE9的2D渲染快了3倍。显然,WebGL将性能提升到了一个全新的档次。

Opera 12目前仍然处于alpha版阶段,所以未能纳入正式测试结果,但我们仍然对Opera 12的alpha版本进行了测试,成绩居然达到了惊人的约21000分!比Chrome 15快了44%!要知道不支持WebGL的Opera 11在2D渲染测试中只跑出了400分!可以说使用了WebGL的Opera的成绩比上一版本提升了50倍!希望Opera能在正式版中保持这个成绩。

C++/DirectX 渲染

现在,让我们来看看古老的C++/DirectX渲染。C++比JavaScript快很多,这谁都知道,它本身就是为速度而生的,并且历史悠久。DirectX和OpenGL在显卡端的工作方式类似,所以成绩可以类比。

C++/DirectX渲染的成绩为85290分。很明显,浏览器应用还不能达到本地应用的性能。但是,请想想JavaScript一开始被设计用来干什么的(互联网初期那些所谓“特效“),而C++是用来干什么的,但Chrome 15只比C++/DirectX慢了5.8倍而已。

补充

另外一个衡量标准是渲染每个图形所用的平均时间。C++/DirectX渲染绘制每个图形需要0.39微秒,Chrome 15需要2.3微秒(仍然是慢了约5.8倍),IE9需要7.1微秒。让我们来计算一下,比如有个游戏在屏幕上要显示1000个物体,要达到满帧60FPS,那每帧必须在16毫秒(16000微秒)内绘制完成。这样,IE9需要7.1毫秒,Chrome 15需要2.3毫秒,而C++/DirectX只需要0.39毫秒。但这仅仅是绘制所需要的时间,除此之外,实际上同时还需要运行游戏的应用逻辑。IE9的绘制时间占据了每帧时间的44%,这就压缩了应用逻辑时间,如果应用逻辑非常复杂,那无疑会降低帧率。高帧率看起来很酷,但是实际上只要渲染器为应用逻辑留下了大部分时间,那它的工作就是成功的!

结语

  • 硬件加速的Canvas 2D很快,但WebGL更胜一筹。
  • JavaScript和C++在语言本身的用途和性能上差距如此之大,但是测试成绩差距如此之小,那些编写JIT引擎的人实在太牛了!
  • 真为IE9不支持WebGL感到羞耻。
  • 我们基本上也是在测试JavaScript的性能,因为填充顶点数组都是由JavaScript代码完成的。
  • 移动设备上的硬件指标通常较低,那么WebGL带来的高性能,无疑对游戏的可玩性是至关重要的!我们确信WebGL将成为HTML5移动游戏的未来!

 

原文地址:http://www.scirra.com/blog/58/html5-2d-gaming-performance-analysis 

HiWebGL翻译整理,转载请注明出处!

分享到: 更多
Posted in 博文精选. Bookmark the permalink.

2 trackbacks

阿里云应用开发失败总结 | 编程
2011 年 12 月 19 日 下午 3:30
阿里云应用开发失败总结
2011 年 12 月 31 日 下午 1:04

Post a Comment

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

*

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