Stage3D vs WebGL 性能较量 (补充了评论的翻译)

你想在浏览器里开发一些疯狂的次时代3D图形应用吗?目前有两个好的可用选项:Flash 11的Stage3D和JavaScript原生的WebGL。

Stage3D是Flash的API,支持GPU硬件加速的3D图形。

WebGL是一项开放的Javascript 3D图形标准,直接嵌入到浏览器中。

Demo和源代码

为了比较两者的性能,我搭建了一双简单的Demo,其中展示了100个半透明的立方体,还有额外的混合,以及两个点光源。显然这个demo不能全面的比较两者,但是从两个相同的3D场景中可以看出两者的性能。

Stage3D Demo  |   源代码

WebGL Demo    |   源代码

如果你运行时的帧率很低,试着缩小浏览器窗口。对于Stage3D的Demo,查看debug面板中的DRIV项是不是显示“OpenGL”或“Software”。

搭建Demo

我在Stage3D的Demo中使用了Away3D 4框架, 在WebGL的Demo中使用了Three.js框架。

Away3D 4是最流行的Flash 3D引擎的最新版本,基于Stage3D构建。Away3D有一个不错的线上社区,并且一系列的API文档都维护的很好。Away3D 4目前还处于alpha版本,一些特性还缺失,比如不支持粒子系统,而且滤镜和着色器的支持也很有限。你可以用这个教程来开始学习Away3D 4。

Three.js是一个开源WebGL 3D引擎,有大量积极的开发者在持续不断的为其增加新的特性。网上也有大量的教程来学习Three.js。

代码比较

Away3D和Three.js的语法以及模型逻辑都非常相似。比如创建一个立方体,在Away3D中你可以这么写:

var cube:Cube = new Cube(material, 100,100,100);

view.scene.addChild(cube);

而在Three.js中,你可以写成:

var geometry = new THREE.CubeGeometry(100, 100, 100);

var cube = new THREE.Mesh(geometry, material);

scene.addObject(cube);

支持平台

为了实现硬件加速,Stage3D需要Flash 11和最新的显卡。如果Stage3D不能使用硬件渲染,将会回滚使用软件渲染,这会慢5到10倍。

WebGL不需要插件就可以实现硬件加速,支持Chrome、Firefox、Safari和Opera浏览器(但是不支持IE,为微软欢呼吧!)。在Windows系统上的Chrome中,WebGL使用ANGLE将WebGL转换为DirectX,这提供了很好的性能。

Stage3D在Mac上使用OpenGL,在Windows上使用DirectX。它对显卡的要求非常严格。你可以在这里找到不支持Stage3D的GPU列表。你可以手动查询是否处于软件渲染模式,然后做出对应的解决措施。

Stage3D一个很大的优点就是可以在IE上运行,尽管在我的体验中,因为软件渲染的缘故,它慢的不能再慢了。在Mac上,Stage3D和WebGL都会转换为OpenGL运行,所以性能上没有什么太大的区别。

现在两者都不能运行于移动设备上(iOS / Android),但是在未来两者都值得期待。

性能比较

我在MacBook Pro(显卡是NVIDIA GeForce GT 330M)和一个中等配置的安装了Windows 7的Dell笔记本(显卡是Intel集成显卡)上测试了这两个Demo。在你机器上的性能将会有所不同。

Stage3D WebGL
Mac / Chrome 60 FPS (OpenGL) 60 FPS
Mac / Firefox 60 FPS (OpenGL) 60 FPS
Mac / Safari 60 FPS (OpenGL) 60 FPS
Windows / Chrome 8 FPS (Software) 50 FPS
Windows / Firefox 8 FPS (Software) 无法运行
Windows / IE 12 FPS (Software) 无法运行

总的来看,Stage3D的Demo初始化的更慢一些,帧率也比WebGL的Demo要低一些。看来Stage3D能提供更有趣的颜色混合和高光。

更新——很多评论说都可以在Windows下Stage3D跑到60FPS。以上的数字不代表大众范围的机器配置,是指我在我的机器上的测试结果。我的PC笔记本用的是集成GPU,因此不支持Stage3D的硬件渲染模式。这是一个中等配置的笔记本,我买了还不到6个月,因此也许可以代表大众的机器。

总结

Stage3D和WebGL都是在浏览器中创建交互3D内容的优秀技术。Away3D和Three.js提供了令人意料之外如此相似的API。

在Mac上,Stage3D和WebGL的性能都很不错。在Windows上,Stage3D的性能很可怜;而WebGL则在Chrome中运行的非常不错,但是其他浏览器都无法运行。

Stage3D的软件渲染模式是一个不错的注意,它会在不被支持的硬件上显示3D内容。问题在于性能实在是太慢了。与其在性能这么差的情况下去展示什么东西,是不是可以直接考虑用其他的非3D的方式展示呢?

因为Chrome在Mac和Windows上都是免费的,所以你可以考虑一下使用WebGL来获得更好的性能以及更多的用户。也许我们会开始见到越来越多的提示写着“请使用Chrome访问本站”。

 

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

原文地址:http://www.airtightinteractive.com/2011/10/stage3d-vs-webgl-performance/

 

补充评论翻译

Philippe says:

我在Win上所有的浏览器里Stage3D和WebGL都能跑到固定的60FPS,全屏1680×1050。这玩意儿很依赖显卡和显卡驱动。

Ricardo Sanchez says:

很有趣的文章,我想知道作者你做这个性能测试用的Mac和Windows机器的显卡

Felix Turner says:

October 28, 2011 at 12:13 pm

我加上,显卡信息了。

Mr.doob says:

你用不同配置的机器来测试是很没有道理的!这是我在我的MacMini上的测试结果,显卡是Nvidia GeForce 9400M。

Linux / Chrome – Stage3D: 4FPS (Software) WebGL: 60FPS
Linux / Firefox – Stage3D: 3FPS (Software) WebGL: 30FPS

Mr.doob says:

另外,“scene.addObject(cube)”已经被弃用了,现在应该写成“scene.add(cube)” ^^

呵呵,一个没有系统配置的评测? 看起来你Windows上的DirectX驱动好像有问题(或者你的显卡被列入黑名单了)从传统角度看,Stage3D在Windows上运行的效果应该比在Mac上好。

而且,你可以优化一下代码来获得更多速度,比如创建新的网格对象而不是立方体对象(立方体对象并不自动共享同一个集合体实例)。

// once
var referenceCube:Cube = new Cube(material, 100,100,100);

// repeatedly
var mesh:Mesh = new Mesh(material, referenceCube.geometry);
view.scene.addChild(mesh);

Anyway, this was for backwards compatibility with 3.6. Primitive creation is slated for heavy refactoring before beta so wasting geometry instances isn’t possible anymore

Mr.doob says:

天啊!Android版Firefox不支持WwebGL。(实际上Android版Firefox是部分支持WebGL的,此处为反讽。)虽然我没怎么测试。我觉得移动设备上的着色器需要一些微调才行(比如精确度)。

Felix Turner says:

October 28, 2011 at 12:33 pm

不知道为什么我的Firefox在Windows上不能跑WebGL。

Bart says:

我觉得Stage3D的软件渲染模式并不是硬件3D加速的回滚,而是为了代替旧的Flash 3D引擎(Away3D 3、PaperVision等等),它拥有完整API(使用框架)并有清晰的途径获得高速硬件支持。在支持硬件范围这么广的情况下,软件渲染模式下相应的性能调整可以引申去做很多有用的事情。

而且它在每台电脑上、每个浏览器中都可以工作,只要这个有自动更新的插件就行(对比一下,安装一个全新的浏览器)。也许运行的不好,但是至少可行。

(和我们这些技术人员比起来),真正的用户:我在我老爹老娘的电脑上也可以看一些相当不错的3D效果(尽管他们根本不知道什么新版本什么乱七八糟的)。

LightMan says:

我在我的iMac上测试了,配置是Lion, 3.06GHz core 2 duo, 4GB RAM, NVIDIA GeForce 9400 256 MB,窗口最大化,分辨率是1920×1080,使用了最新版的Flash Player 11

Firefox:
WebGL运行的非常流畅,53 FPS,54% CPU使用率 (平均值)
Stage3D运行的非常糟糕,FPS计数器都不听使唤啦!我猜应该是8FPS但是很卡。CPU占用率14-17%,Firefox失去响应,很长时间后才关闭了这个标签页。

Chrome:
WebGL运行的非常流畅,30 FPS,30% CPU占用率 (平均值)
Stage3D再一次运行的非常坑爹,FPS计数器又不听使唤了。我脑补了一下应该是23FPS,而且很卡,CPU占用率14-17%,Chrome完全失去响应,还有iMac也是,我只好选择了强制退出。

Safari:
开启WebGL后,它运行的非常流畅,就像在Chrome里一样,30 FPS,30% CPU占用率 (平均值)
Stage3D,还是和Chrome和Firefox一样。看起来Flash引擎应该有什么问题,或者是用的软件渲染,我不知道,但是它上面明明写着Driver: OpenGL…

所以结论很清楚,至少在Mac上,WebGL要比Flash好!

Corey says:

“在Windows上,Stage3D的性能很可怜”??你在搞笑吧?你只说了软件模式下的帧数,那硬件加速下的帧数跑哪里去了?

Felix Turner says:

October 28, 2011 at 12:36 pm

这已经足够公平了!就像我说的,“你机器上的性能可能会发生变化。我文章里也改了说法了:“在Windows上,如果你有支持的硬件,Stage3D的性能还不错,否则就很可怜。”

zz85 says:

我很好奇为什么你Windows的Firefox不能跑WebGL呢?

在我的windows 7 (32bit) 桌面电脑 (intel E8400) ,集成显卡(intel g41),FULL HD分辨率。

Chrome:
stage3d   15 fps
webgl   30fps
FF:
stage3d: 15fps
webgl: 35fps

在我的macbook air上,分辨率是1440×900,
FF:
都跑到了 60fps

Chrome:
Stage 3d: 60fps
Webgl: 35fps (很奇怪,我把窗口宽度缩小100像素,就能跑到60fps了)

Fathah Noor says:

一下是我在我电脑上测试的结果

————————————————————–
操作系统: Microsoft Windows 7 Ultimate
CPU: DualCore Intel Core i3 550, 3200 MHz (24 x 133)
内存: 3959 MB (DDR3-1333 DDR3 SDRAM)
显卡: NVIDIA GeForce GTS 450 (1024 MB)
————————————————————–
Windows / Chrome: Stage3D – 12 FPS (Software) – 62 FPS (DirectX9) | WebGL – 61 FPS
Windows / Firefox: Stage3D – 12 FPS (Software) – 62 FPS (DirectX9) | WebGL – 62 FPS
Windows / IE: Stage3D – 16 FPS (Software) – 62 FPS (DirectX9) | WebGL – 不能运行
Windows / Opera: Stage3D – 24 FPS (Software) – 62 FPS (DirectX9) | WebGL – 不能运行

Andrei says:

October 28, 2011 at 12:35 pm

Opera不能运行是因为它用的语法和Javascript的语法稍有不同,有点像ECMAScript的语法。

daniel says:

“在Windows上,Stage3D的性能很可怜”这简直是大错特错!我在Windows上的所有浏览器里,Stage3D都能跑到60FPS。另外,WebGL的成绩才相当可怜,只有不到35FPS。

测试机:Windows XP 64-bit sp3, GF 7600GS, FF7,IE8,Opera11,Chrome14

CS says:

当你在Windows上测试Stage3D的时候应当配置好GPU,不要用软件渲染模式(它是给配置很差没有GPU的电脑用的,比如集成显卡)。Flash在这里之所以表现的这么差都是因为你的破电脑和烂配置导致的。牛逼的Flash在Windows上通常都会跑到60FPS!

nystep says:

这是一个很有趣的测试,谢谢!

你试过在Windows上的Firefox中开启WebGL了吗?还是一直无法运行?

这儿有一个如何在Firefox中开启WebGL支持的教程:

http://support.mozilla.com/fr/questions/720087

你应该在“about:config”页面中开启“webgl.prefer-native-g”选项,这样就会默认用direct3d运行WebGL了。再次感谢。

Harry says:

“在Windows上,Stage3D的性能很可怜”?!我的Windows上,在Chrome、Firefox、IE上都能跑到60FPS!你肯定是什么地方搞错了……

Mike K says:

很有趣的对比!如果再来测试下使用不同的AS3/JS库,结果是否相似就好了。下面是我的测试结果:

硬件: Dell OptiPlex 745, Intel Core2 CPU 6400 2.13 GHz (2 CPUs), 4 GB RAM
操作系统: Windows 7 Enterprise SP1, 32 bit

所有测试都是在小窗口(800×480像素)和全屏(1440×900像素)下测试的

Stage 3D: DirectX9
IE 9: 58 小窗口, 24 全屏
Chrome 15: 58小窗口, 25全屏
Firefox 7: 59小窗口, 27全屏

Safari 5: 60小窗口, 25全屏
Opera 11.52: 58小窗口, 24全屏

WebGL:
IE 9: “你的浏览器不支持WebGL”
Chrome 15: 43小窗口, 32 全屏
Firefox 7: “你的浏览器不支持WebGL”
Safari 5.1.1: “你的浏览器不支持WebGL”
Opera 11.52: “你的浏览器不支持WebGL”

Eduardo says:

大哥们,这里都是Apple的五毛吗?哈哈,开个玩笑……真的。

如果你们说的是移动领域,那么说WebGL比Stage3D性能好也许是对的。但是在桌面和笔记本上,没有显卡就不能渲染3D内容啦?我的笔记本是intel 3000集成显卡,太TM丢人了,还有i5处理器。WebGL还没有Stage3D跑的好。请发一下硬件加速下的两者的性能测试!而且是在集成浏览器里!这非常关键!因为一半以上的实际用户不会使用纯Chrome和Firefox。

Daniel N says:

在我的Mac上很有趣的是,它们都能在Chrome中跑到60FPS,但是如果你同时运行这两个测试,Stage3D会抢走WebGL的资源,Stage3D还是60FPS,但是WebGL就下降到了12FPS。我猜(也许是错的),Stage3D用某周手段获取到了显卡端的更高的优先级。

Tom Carden says:

如果你一直只能跑在软件渲染模式下,那你真得好好检查一下你的Flash的设置了。右键单击,选择“设置”,最左边的选项卡里选中“开启硬件加速”。我在几个版本之前关闭了这个选项,所以对最近稳定版的Flash的性能有所影响。

 

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

Post a Comment

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

*

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