Stage3D vs WebGL 性能较量 （补充了评论的翻译）

by admin

at 2011-10-28 19:55:52

original http://www.hiwebgl.com/?p=535

你想在浏览器里开发一些疯狂的次时代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/

 

补充评论翻译

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

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

Felix Turner says:

October 28, 2011 at 12:13 pm

我加上，显卡信息了。

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

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

另外，“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

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

Felix Turner says:

October 28, 2011 at 12:33 pm

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

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

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

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

我在我的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好！

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

Felix Turner says:

October 28, 2011 at 12:36 pm

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

我很好奇为什么你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了)

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

————————————————————–
操作系统: 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的语法。

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

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

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

这是一个很有趣的测试，谢谢！

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

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

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

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

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

很有趣的对比！如果再来测试下使用不同的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”

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

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

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

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