Category Archives: Flash

Stage3D vs WebGL Performance

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.

It’s a Good Time to be a Web Developer.

I think this graph from Google I/O says it all:

Webs Up!

With all the FUD around Flash and the iPad its easy to forget that we are living in a golden age of web development. The web is fulfilling all but the most outlandish predictions of its success from back in the 90s. Things are just starting to get interesting.

The other take-away I got from the I/O keynote is how a lot of HTML5 is basically HTML playing catchup with Flash. Many of the coolest new features have been available in Flash for years. This means all the skills you honed as a Flash developer are directly applicable to the newly emerging platforms of HTML5, Unity, Android and even iApps:

  • Creating animations and transitions that enhance static content.
  • Optimizing for performance and fast page loads (including preloading).
  • Handling rich media: video, audio and images.
  • Custom text layouts and font handling.
  • Asynchronously querying the backend.

Only the syntax has changed – the end result remains the same.

Which Way Now? Web Development in the iPad Era.

Flash? No Thanks!

So it turns out Steve Jobs does not like Flash, and won’t be allowing it onto the iPad in the foreseeable future. This creates the first dent in the Flash player’s ubiquity for many years and leaves a more complex set of web development choices ahead of us.

Rather than get into the debate over whether Flash is good or evil, I would like to discuss what options are available for delivering rich interactive experiences on the web today. Most developers don’t have a philosophical preference over which tools they use, they simply want the technology that can provide the best experience while reaching the most users. With that in mind, let’s look at some numbers.

How Big is the iPad?

The iPad is selling phenomenally well and may be the herald of a new era in computing. That said, if we look at the web usage numbers for the iPad’s progenitors, we see that the usage numbers do not equate to the amount of media buzz these devices get.

In the last 12 months, mobile web usage accounted for 1.48% of total web usage, versus desktop usage at 98.52%.

Of that number 32% came from iDevices (iPhone + iPod Touch). That gives iDevices a whopping 0.45% of total web usage. Lets be generous and say the iPad doubles this usage in the coming year. That will give iDevices around 1% of total web usage in the coming year. Admittedly, mobile usage is about to explode and iDevices will be part of that, but I think it’s important to keep some perspective on the current state of the market.

What About HTML5?

Steve Jobs has suggested that we should drop Flash for HTML5. HTML5 holds a great deal of promise, however it is currently unsupported on the great majority of web browsers.

For example, based on current browser usage, 71% of web users cannot view the HTML5 video tag. This means that that building a website solely in HTML5 is not currently an option. Since IE9 will support HTML5, the IE9 adoption rates will be the deciding factor as to when we can start targeting HTML5

Where Does this Leave Web Developers Now?

So what should we recommend to our clients who want a brand experience or RIA today? It depends :)

  • If you can simplify the requirements enough, build it in plain HTML with a few jQuery animations thrown in. This will work in many situations. The truth is that many sites that are currently in Flash do not need to be. Most sites can get by with plain HTML, images and simple javascript animations.
  • If you need complex animations, interactivity, games, video, audio, web cam support, etc – build it in Flash. Your content will be viewable by the vast majority of web users. In addition, build a simplified HTML version for non-Flash devices. This is typically what we have been doing since the first web accessible mobile devices came around.

Looking Forward

Personally I find it hard to believe that Apple can single-handedly kill Flash when it is so ubiquitous on the web and has such a huge and loyal developer community. I still hold out hope that Flash will eventually come to the iPad in the same way that multitasking came to the iPhone. In the short-term, iPad users will be locked out from a lot of great content. Only when HTML5 browser support and tooling is broadly available can we start looking at developing RIAs with it.

[Credit to Noel Billing for pointing me to the StatCounter global data.]

Fix for Flash Builder Content Assist 'did not complete normally'

One of the best features in Flash Builder is the content assist. Start typing a class name and hit Control+Space for the IDE to suggest a list of valid class names. As a bonus it will automatically import the specified class into your file. Unfortunately in Flash Builder Beta 2 this functionality is broken in some cases. Often you will get an error like this:

“Content Assist” did not complete normally. Please see the log for more information. java.lang.NullPointerException

I found a solution that worked for me here:

1) Quit FB
2) Delete this folder: .metadata\.plugins\com.adobe.flexbuilder.codemodel [in the top level of your workspace folder]
3) Restart FB

[UPDATE - this fix seems to be only temporary. Once I imported some new assets from an assets SWC into my project, the error re-appeared. Anyone got a long term fix?]

[UPDATE 2 - The quickest fix is to close and re-open the FB Project.]

SimpleViewer 2.0 Released!

Big news over at SimpleViewer.net – SimpleViewer, the free customizable Flash image gallery has been upgraded to version 2.0. Check out a run-down of the new features here and grab yourself a copy here.

YouTube Overload

youtube demo

What’s better than a YouTube video? Sixteen YouTube videos – in 3D! :)

This is a for-fun, proof-of-concept demo loading in multiple instances of the new YouTube chromeless player and displaying them with Flash 10’s native 3D . Warning – this demo will probably run at a crawl and may crash your browser.