So you want to build some crazy next-gen 3D graphics in the browser? Right now there are 2 good options available: Flash 11’s Stage3D versus JavaScript’s native WebGL.
Demos and Source Code
To compare the performance of both options I built a couple of simple demos that show 100 semi-transparent cubes with Additive Blending and 2 point lights.The purpose of these demos is to compare 2 equivalent 3D scenes built with the 2 technologies.
If you are getting low frame rates, try reducing the size of the browser window. On the Stage3D demo, check the debug panel DRIV field for if it says “OpenGL” or “Software” (see below for what this means).
Building the Demos
For these demos I used Away3D 4 for Stage3D and Three.js for WebGL.
Away3D 4 is the latest version of the popular Flash 3D engine, built to utilize Stage3D. Away3D has a great online community and a well maintained set of API docs. Away3D 4 is currently in alpha and some features are missing, for example there is no Particle System object and the filters/shaders support is pretty limited. Use this tutorial to get started with Away3D 4.
Three.js is an open source WebGL 3D engine that has an energetic community who are constantly adding new features. There are plenty of tutorials showing how to get started with Three.js.
Code Comparison
Away3D and Three.js have very similar logical models and syntax. For example to create a Cube in Away3D, you do this:
var cube:Cube = new Cube(material, 100,100,100);
view.scene.addChild(cube); To do the same in Three.js, you do this:
var geometry = new THREE.CubeGeometry(100, 100, 100);
var cube = new THREE.Mesh(geometry, material);
scene.add(cube); Supported Platforms
To run with hardware acceleration, Stage3D requires Flash 11 and a recent graphics card. If Stage3D cannot use hardware rendering it will fall back to software rendering which is around 5-10 times slower. For a list of Stage3D unsupported GPUs, check here. You can manually detect for software rendering mode, and handle it appropriately. Stage3D uses OpenGL on Mac and DirectX on Windows. The big advantage for Stage3D is that it will run in IE.
WebGL requires no plugins and is currently supported in Chrome, Firefox, Safari and Opera. (But not IE – cheers Microsoft!). WebGL in Chrome on Windows uses ANGLE which converts WebGL to DirectX and gives good performance.
On the Mac, both Stage3D and WebGL translate to OpenGL, so there is not much difference in performance. Neither options currently run on mobile devices (iOS / Android), however both are expected to in the future.
Performance Comparison
I tested the 2 demos on a MacBook Pro (with an NVIDIA GeForce GT 330M) and a mid-range Windows 7 Dell laptop (with integrated Intel(R) HD Graphics). Your mileage will vary.
| 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) | Does not run |
| Windows / IE | 12 FPS (Software) | Does not run |
On the Mac, Stage3D and WebGL both perform well. On Windows, Stage3D performs well if you have supported hardware, otherwise poorly. On Windows, WebGL performs well in Chrome, otherwise it does not run. It’s interesting that Windows / Chrome with WebGL gives good performance even with an integrated GPU.
On the Mac, the Stage3D demo is slower to initialize and the frame-rate has more stutters than the WebGL equivalent. Stage3D gives more interesting color blending and specular highlights.
Summary
Stage3D and WebGL are both great technologies for delivering interactive 3D content in the browser. Away3D and Three.js provide surprisingly similar APIs for developing 3D content.
When the hardware supports it, both options give great performance. Unfortunately neither option runs well across the most common hardware configurations. If you want to target the general population, you will need to provide alternative content for non-supported machines.
Stage3D’s software mode is a nice idea, in that it will show 3D content on unsupported machines. The problem is that the performance is unusably slow. Is it better to show something that performs badly, or to redirect to alternative content?
Since Chrome is a free install on Mac and Windows, you could argue that using WebGL gives a broader reach with decent performance. Perhaps we will start seeing more ‘View this site in Chrome’ banners?
Want more stuff like this? Follow me on Twitter.
UPDATE – There are many comments reporting 60FPS with Windows/Stage3D. The numbers above do not claim to represent a broad range of machine configurations, just what I observed on the 2 machines closest to me. My test PC laptop has an integrated GPU and therefore does not support Stage3D hardware mode. It is a mid-range laptop, less than 6 months old and as such is probably a good indication of where the general public is at.
UPDATE 2 – I’ve updated the demos to allow you to add more cubes, so please go crazy with 1000s of cubes! I also added a mouse look and updated Three.js to r46. On my MBP, WebGL handles 1000 cubes a lot better than Stage3D.
Latest Tweets
Got a solid 60fps in all browsers on Win for both Stage3D & WebGl in fullscreen 1680×150. This stuff is very dependent of your video card & drivers.
Interesting article, it will be nice to know the graphics hardware on both Mac and Windows used in this performance test
Graphics card info added.
Doesn’t make sense if it’s not the same machine you used but this is what I get with my MacMini with a Nvidia GeForce 9400M.
Linux / Chrome – Stage3D: 4FPS (Software) WebGL: 60FPS
Linux / Firefox – Stage3D: 3FPS (Software) WebGL: 30FPS
Also, “scene.addObject(cube)” is now deprecated, should be “scene.add(cube)” ^^
fixed. I updated the demos to use r46.
Ho there, a benchmark without system specs? 😉 Sounds like you may have some DirectX driver issues on your Windows machine (or is your graphics card blacklisted?). Traditionally, Stage3D gives better results on Windows than on Mac.
Also, you could get some speed gains by constructing the scene differently but not creating new Cube objects (they don’t automatically share the same geometry instance), but new Mesh objects.
// 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 😉
thanks for the tips. I’ve implemented shared geometry as you suggested.
Oh! And Firefox for Android does support WebGL. I haven’t tested it much though. The shaders require some tweaks for mobile devices I think (precission, etc ).
Not sure why my Windows/Firefox is not running WebGL.
I like to interpreted the Stage3D software mode not as a fallback for hardware accelerated 3D but as replacement for the old-style Flash 3D engines (Away3D 3, PaperVision etc), one with a full API (using a framework) and a clear path to hyperspeed by hardware support. And with the wide range of speed of the actually supported hardware a performance scaling solution is a good idea anyway so might be stretched to do something usefull in software mode.
And it works on every browser, on every computer with only an automated plugin update (vs installing and learning a completely new browser). Maybe not great, but it does work 🙂
To translate to real-world users (vs us, the creators): I can have some decent looking 3D stuff up on my mum & dad’s computer (who don’t give a damn about, and don’t even understand really, newest versions of anything at all).
I tested both in my iMac with (Lion, 3.06GHz core 2 duo, 4GB RAM, NVIDIA GeForce 9400 256 MB) window maximized at 1920×1080, with the latest version of Flash Player 11
Firefox:
WebGL runs smoothly at 53 FPS with 54% CPU usage (average)
Stage3D runs really bad, the FPS counter does not work, I guess it’s like 8FPS but very jumpy. 14-17% CPU. Firefox becomes unresponsive, it took a long time the tab to close..
Chrome:
WebGL runs smoothly at 30 FPS with 30% CPU usage (average)
Stage3D again runs really bad, the FPS counter does not work, I guess it’s like 23FPS but very jumpy. 14-17% CPU . The Chrome becomes totally unresponsive, and the iMac, I had to do the “force quit” option.
Safari:
WebGL (enabled) it runs smoothly (like Chrome) at 30 FPS at 20% CPU usage.
Stage3D, just like Firefox and Chrome. It seems that there must be some problem with the Flash engine, or maybe it is using software rendering, I don’t know, but it says Driver: OpenGL…
It’s clear that at least in mac, WebGL is much better than Stage3D….
Same here on my MacBook Pro 2.8Ghz, I assume it’s the 9400 we have in common.
I have had a couple of users report the same thing/behavior for stage3d. Mac osx and nvidia 9400 seems to be the common thing.
It´s not blacklisted gpu or drivers since it dosen´t fallback on software… Wonder what adobe recommends in that scenario?
The drivers and blacklists could definetly be what holds back 3d in the browser for another couple of years.. :/
The same thing happens on my iMac with Radeon HD2600
Same thing here mac + gf9400 + stage3d = really bad performance. WebGL runs smooth even with 1000 cubes o.O
“On Windows, Stage3D performs poorly.” ?? Are you kidding me? You only reported software fallback numbers, where are your hardware accelerated numbers?
Fair enough. Like I said “Your mileage will vary”. I’ve updated the post above to state that: “On Windows, Stage3D performs well if you have supported hardware, otherwise poorly.”
I’m curious to why WebGL doesn’t run on your windows firefox.
On my windows 7 (32bit) desktop (intel E8400) with a integrated graphics card (intel g41), at full HD resolution.
Chrome:
stage3d gives 15 fps
webgl gives 30fps
FF:
stage3d: 15fps
webgl: 35fps
on my macbook air at 1440×900,
FF:
Both runs at 60fps
Chrome:
Stage 3d: 60fps
Webgl: 35fps (i’m curious to this, if I resize the width to 100px less, it runs at 60fps)
The following are the results I get when running on my computer:
————————————————————–
Operating System: Microsoft Windows 7 Ultimate
CPU Type: DualCore Intel Core i3 550, 3200 MHz (24 x 133)
System Memory: 3959 MB (DDR3-1333 DDR3 SDRAM)
Video Adapter: 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 – Does not run
Windows / Opera: Stage3D – 24 FPS (Software) – 62 FPS (DirectX9) | WebGL – Does not run
Opera didn’t work because it’s use a little bit different Javascript syntax, closer to the ECMAScript syntax
you should check this for turn on webgl in opera, paste this to opera’s adres bar:
opera:config#WebGL
opera:config#Hardware%20Acceleration
and set to 1 (from 0)
on windows every this test run very well in all browsers, with min 60fps frame rate, it jump sometimes to 100 etc but it is i think not really.
Statement “On Windows, Stage3D performs poorly. ” is completly wrong. I’ve got 60 fps with Stage3D on Windows in all browsers. On th other hand i’ve got poor result with WebGL <35FPS
tested machine:
Windows XP 64-bit sp3, GF 7600GS, FF7,IE8,Opera11,Chrome14
[…] 原文地址：http://www.airtightinteractive.com/2011/10/stage3d-vs-webgl-performance/ 分享到： 更多 Posted in 博文精选. Bookmark the permalink. ← Google 用 WebGL 打造 Bookcase 3D 书架 […]
When you are testing stage3D on Windows, you should configure it to use GPU , not software rendering (software rendering is used only for very poor pc with no GPU (for example integrated)). In this case, Flash demonstrated that the program can be handled and with the simplest devices (and poor configuration). Flash FTW. Usually on Windows it is running with 60fps
This is a very interesting test, thank you for this! 🙂
Could you try enabling WebGL in firefox on windows? Or doesn’t it ever works?
There seems to be a bit of insight about how to configure firefox for webgl here:
http://support.mozilla.com/fr/questions/720087
You might want to enable “webgl.prefer-native-gl” in about:config in firefox, as it redirects webgl to direct3d by default apparently. Thanks again.
“On Windows, Stage3D performs poorly” ?! Windows here, getting 60 fps in Chrome, Firefox and IE. You are definitely doing something wrong…
[…] 原文地址：http://www.airtightinteractive.com/2011/10/stage3d-vs-webgl-performance/ 此条目由 admin 发表在 Flash业界、Stage3D 分类目录，并贴了 stage3d、WebGL、性能比较 标签。将固定链接加入收藏夹。 […]
Interesting comparison! It would be interesting to see if results would be the similar with different AS3/JS libraries. Here’s my results:
Hardware: Dell OptiPlex 745, Intel Core2 CPU 6400 2.13 GHz (2 CPUs), 4 GB RAM
OS: Windows 7 Enterprise SP1, 32 bit
All tests done with small window size approx 800×480 px and full screen (1440×900 px)
Stage 3D: DirectX9
IE 9: 58 small, 24 full screen
Chrome 15: 58 small, 25 full screen
Firefox 7: 59 small, 27 full screen
Safari 5: 60 small, 25 full screen
Opera 11.52: 58 small, 24 full screen
WebGL:
IE 9: “Your browser does not seem to support WebGL”
Chrome 15: 43 small, 32 full screen
Firefox 7: “Your graphics card does not seem to support WebGL”
Safari 5.1.1: “Your browser does not seem to support WebGL”
Opera 11.52: “Your browser does not seem to support WebGL”
Guys… please, anyone here is sponsored by Apple 😀 hey just kiddin… really.
Please if you talk in mobile area. Maybe you’re right and WebGL perfoms better that Stage3D… but in the real world (with a desktop or laptop) we do not render 3D content without a graphic card. My laptop have an intel 3000… what a shame. 🙂 and a i5. WebGL performs less better that stage3D. Please post here the a Stage3D vs WebGL perfomance test with hardware acceleration. And browser integration! That is very important you know… because half of the clients in the world do not use Chrome or Firefox.
An interesting thing I noticed on my Mac is that individually, they both run at 60 fps in chrome, but if you run both at the same time side by side, the stage3D seems to trump the webGL with the stage3D still running at 60 fps and webGL going down to 12 or so: I suspect (though I could be wrong) that it somehow gets priority on the graphics card.
It’s worth checking your Flash settings if you’re stuck in software mode. Right-click, choose “Settings…” and in the left-most tab make sure “Enable Hardware Acceleration” is checked. I recall disabling this several versions ago so it’s a sticky setting that might be hurting performance in more recent (stable?) builds of Flash.
[…] lots of other things like textures, materials, lighting, and meshes.Stage3D vs WebGL PerformanceIn Stage3D vs WebGL Performance, Felix Turner compares Flash 11’s Stage3D API with WebGL. Two demos of equivalent code are […]
Windows with a NVidia GeForce GT55M
Stage 3D:
Chrome 15: 60fps
Firefox 7: 60fps
WebGL
Chrome 15: 60fps
Firefox 7: Your graphics card does not seem to support WebGL. 🙁
Have to say the Stage3D textures look the smoothest.
Tested in Chrome on Windows 7(x64) with Intel’s Integrated GPU:
Stage3D 35FPS 14% CPU Usage
WebGL 50FPS 50% CPU Usage
Definitely WebGL have better FPS on my Windows machine. However it sucks more CPU than Stage3D.
With hardware acceleration Stage3D overcomes WebGL. I stated this when i tested the same project made by me in WebGL and Stage3D versions.
The difficult to make something in WebGL have no comparation… Only to parse a 3d file… In Flash we could adopt a 3d Engine like Flare/Alternativa or Away…
I can understand this because frameworks like these implies hard work.
The CPU/GPU load is very high in WebGL when we increase the volume of polygons.
The maximum of polygons in Stage3D (Flare3D tests) is around 12 million polys… i couldn’t do this in WebGL.
Sorry WebGL… web standards will be standard when the world sees only one browser. Until HTML5 (that is a web spec not a technology) reaches IE and renders content the same way across all browsers, until that Flash will exist. And (Flash) will be the only commercial solution for clients that needs to deliver universal content.
And yes do not test this technology without hardware acceleration. It is like ride a Ferrari with bicycle tires… Guys get real. And look if Stage3D is really using DirectX in Windows.
There are a couple of important things about your AS3 code, both of which impact on Stage3D performance:
1) Your SWF appears to be a debug swf. Publish it in Release mode. There’s stuff going on internally in debug that you don’t need.
2) You didn’t disable the Context3D error checking. Away3D leaves it on by default. Extremely useful during development, extremely performance damaging once live. Especially noticeable on GPUs that are on the lower-end of the performance range.
view.stage3DProxy.context3D.enableErrorChecking = falseThe above won’t impact when Stage3D just doesn’t work on your GPU of course. If it does’t run, it doesn’t run. But if performance is “jerky” or FPS rates are low, both the above are essential.
Thanks for the optimization tips. I made the 2 changes you mentioned + updated the source. It didn’t seem to make a huge impact on performance – the Windows / Chrome version went up from 8 to 12 fps. It did half the SWF file size which is nice.
I wonder if there’s any overhead with the actual libraries used?
Odd… I really expected Stage3D to have better Performance. There you go brand bias…
Dell Precision T5400, Intel XEON E5410 @ 2.33GHz, 8GB Ram, 2 x NVidia Quadro FX 570 – no SLI mode, Vista Ultimate 64bit
Windows Client Area Size about 1140×900
**** Chrome 15.0.874.106 m
– Stage3D: 30 fps
Interesting: fps drops to 15 if I drag Window to the other gfx card while running. Goes back to 30fps if I F5 on the new card.
– WebGL: 60 fps
drops to 30fps on second gfx card. F5 doesn’t change that.
**** Firefox
– Stage3D: see above
– WebGL: 39 – 57 fps, stuttering
Stage3D driver shows DirectX9, although DX11 is installed.
Interesting… but, this benchmark has a serious lack of logic. Or perhaps it’s just designed to prove the conclusion.
You obtain 60 fps in both cases, and it only proves that for “some” situation, both solutions can achieve 60 FPS. Why not using only one, flat-shaded cube? This would establish peace on Earth as any solution (including flash player 5 etc..) would fit 😉
Suggestion: add a keyboard shortcut for increasing (doubling?) the amount of cube, or other parameters (cube sizes, …) as suggested above. Then anybody will be able to see which solution performs the best.
ps: on my pc, Stage3d usually starts at 58 fps, wherease webGL has 60 fps.
You are correct the demos max out at 60 FPS with hardware support. This is because I wanted the demos to be nice and smooth, in addition to providing a performance comparison. I’ll add an option to increase the number of cubes at some point.
I was just going to say this. It’s definitely an interesting area – and thanks for spending time on it – but without rendering enough geometry to push the examples to organically limited framerates, you’re not really conducting any kind of comparison (beyond which configurations successfully use hardware acceleration, at least partially covered elsewhere in the past).
OK – I added the ability to add cubes to the demos. Please go crazy with 1000s of cubes!
Yeah, I agree with gludion.. it’s not a performance test if you can’t push the code to the max.
63fps on WebGL/Chrome
57fps on Flash/Chrome
Seems WebGL is using about 20% CPU and flash around 7/10%. My machine is an intel Core2 Quad 2.5Ghz, 4Gb ram and a Nvidia GT240, running Windows 7, 1600×1200
I got Phenom II X4 and 8600GT:
1- Using FFOX8:
60FPS with Stage3D
18FPS WebGL
2- Chrome 9
30FPS Stage3D I suspect chrome limits the FPS to 30 in porpouse (not in a bad way)
60FPS WebGL
3- Explorer 9
30FPS I suspect IElimits the FPS to 30 (same as chrome)
N/A WebGL
In Flash Player test did you use Away3D Alpha version?
windowsXP, dual core, Directx9 (ati radeon xt1600)
stage3D : 60 fps
webgl : not rendering
In my macbookpro, video card 8600M gt, handle over 1500 cubes, webgl better than flash 11(25fps vs 5fps).
windows 7, chrome.
The Stage3D demo runs around 60 fps even at 1000-1500 cubes for me; on Windows in hardware mode. Hard to tell at exactly what point that I don’t get 60 fps as the framerate is jumpy; which could be a framework issue. WebGL gives similiar results without the bouncing, up to around 1100-1200. Software mode does not perform that well in Stage3D and is not a great benchmark of potential, so it might be good to post some benchmarks on supported hardware if possible.
I have been able to render 3500 independently moving cubes in Stage3D myself in our own framework at a steady, non-jumpy 60 fps; even without much demo specific optimization.
Have you tried different 3D engine for Flash?
Fe. Flare3D might fare better.
flash: 3500 at 14fps
webgl: 3500 at 18fps
Windows 7, HD 6950
What we all really want to know is if the Amiga version is faster than the ST one 😉
WebGL:
“your graphics card does not seems to support webGL”
Stage3D:
smooth on winXP with chrome
Beeing that the api for three.js and Away3D are structured similarly… Anyone seen a scripted fallback for three.js to Away3D so you could code once and deploy to support the broadest audience?
While Stage3d runs in all my browsers at 30fps (software) webGL does not run in any browser included chrome 16.0.912.75 m.
Please do that test again with AIR 3.2 SDK that enables GPU whose driver was released before Jan 2008, and use another Stage3D engine named Minko. Surely will be different this time 😉
Stage3D vs WEBGL
http://t.co/jwvlPKDs
Well, seems now the latest Stage3D demo can handle 870 million triangles!! Check this out with Minko2 Flash 3D engine: http://blogs.aerys.in/jeanmarc-leroux/2012/02/16/minko-flash-11_2-870-million-triangles-per-second/
i decided to start making 3d website firs i started with webgl but i found out webgl is not usable at all for example it is not working on dual gpu which almost all notebook since 2 or 3 years before use that technology as my own laptop. chrome and firefox are intended to use webgl in my case chrome didn’t work at all and firefox just used poor intel graphic and there is no way to force it to use my nvidia if i force it by nvidia control panel it doesn’t work there are many reports that says this tech has problem with dual gpu by the way there is no way to turn off intel graphic. imagine how many people are using dual gpu almost everyone who bought a laptop 3 years ago and another thing to mention , microsoft dose not support webgl and will not support it in IE. microsoft says webgl is not secure. i thik this can be true cause flash has it’s own plugin and therefore it can apply the security. however i tested some flash 3d website and i’m very happy with the result it automatically uses my nvidia card and has a nice performance.
[…] Por un lado tenemos WebGL que es muy cercano a la especificación del OpenGL. Y acá tenemos un Benchmark entre ambas. Los resultados son muy similares y varían mucho dependiendo de la tarjeta de video y […]
[…] Por un lado tenemos WebGL que es muy cercano a la especificación del OpenGL. Y acá tenemos un Benchmark entre ambas. Los resultados son muy similares y varían mucho dependiendo de la tarjeta de video y […]
A few of my tests:
—
WebGL Cube Demo
Added cubes to lower FPS to 30:
Chrome 24: 2300 Cubes
Firefox 18: ? – won’t display cube count
Opera 12.12 x64 w/ HWA+WebGL enabled: 300 cubes
IE10: Won’t run
Stage3D Cube Demo
Added cubes to lower FPS to 30:
Chrome 24: 2100 Cubes
Firefox 18: 2400 cubes
Opera 12.12 x64 w/ HWA+WebGL enabled: 2200 cubes
IE10: 2500 cubes
WebGL Fish Tank @ 60000 Fish
Chrome 24: 34 FPS
Firefox 18: 44 FPS
Opera 12.12 x64 w/ HWA+WebGL enabled: 12 FPS
IE10: Won’t run
—
A few notes here:
I double-checked that I had Opera’s hardware acceleration enabled using opera:gpu. I was surprised that it performed the worst of the three that supports WebGL seeing that Opera flies with HWA when browsing.
I’m also not sure why Firefox 18 wouldn’t display the cube count on the WebGL cube demo, but it seems to have the best WebGL support.
I also ran a WebGL version of IEFishTank with descent results.
—
PC specs:
Windows 7 64 bit
AMD HD 7950
8 GB RAM
when stage3D was in beta most macs had software mode as default … dont know if this i still the case ? – have heard alot of mac user say that they cant turn it on…
but 3d in flash has always been poor on mac .. now shure why – some 5 years ago adobe claimed that apple was not letting them into the hardware – not shure if shreds of this still remains… at least now apples web strategy has clearly change towards html5′ gain – could this be a reason flash cant plug into macs hardware – im pretty shure it lies on adobe and not away 🙂
intel core 2 vpro (my job’s computer)
ati x1300(shitty card)
same screen size 200 x 200
stage3d: firefox 60/60 – chrome 58-62/60
webgl: firefox doesn’t run 🙁 – chrome 31/33
webgl mobile comp (outdated)
http://www.ichemlabs.com/1375
also IE11 support coming
http://www.theverge.com/2013/3/30/4165204/microsoft-bringing-webgl-support-internet-explorer-11-windows-blue
cheers
Hey
On windows this tests run very well, in opera you should check this to turn on webgl
opera:config#Enable%20Hardware%20Acceleration
opera:config#Enable%20WebGL