BCmoney MobileTV

Something has happened recently on the World Wide Web that really impresses me. The web has finally begun to come alive with rich, interactive, high-performance, animated graphics. Not only are these graphics becoming comparable to any previously achievable only in a Desktop Application running on the OS, but they are also pushing the boundaries in terms of what’s possible in UI design, HCI and Data Visualization. From graphs and plots for mathematics to 3D maps and models for architecture, and from immersive panoramic real estate tours to high fidelity gaming engines for emergency healthcare scenarios, the possibilities are endless.

This all serves to help in bringing about a ubiquitous Semantic Web not just for document archiving and sharing information, but for the development of a shared understanding (Knowledge Base), that has long been envisioned by the World Wide Web’s founders. These new interaction platforms offer an incredible venue for cutting through immense amounts of data and explaining complicated ideas in an easy to comprehend manner. Now is the time to take stock of the leading technologies and attempt to make sense of which technologies will be most useful going forward towards a 3D Web. The obvious leaders are Canvas, SVG, Flash, Unity, Silverlight, Java and VRML.

Side-by-Side Comparison

	Canvas spec	SVG spec	Flash spec	Silverlight spec	Unity spec	Java spec	VRML spec
No Plugin Needed	%	%	x	x	x	%	x
Major Vendor	Google & Apple	W3C	Adobe	Microsoft	Unity	Oracle	X3D
Free/Open License			x	x	x	x	x
No Editor Needed				%	%
Editor available	x
Scripting Language	JavaScript	JavaScript, SMIL	ActionScript, Flex	VBscript, C#, XAML	UnityScript, C#	JavaFX script, FXML	VRML script, Java
Rectangles
Lines
Elipses
Fills
Arcs
Shadows
Bézier Curves				x			x
Quadratic Curves				x			x
Animation
Image manipulation		%
Sprites		x			x	x	x
Rasters		x
Vectors				x		x	x
Audio	%	x				%	x
Video	%	x				%	x
3D support		%		%
GPU Acceleration	%	x					x
Mobile support		%	%	%	x	%	x

DHTML and Animated GIFs

Before all these other technologies became mature, the only option was Animated GIFs or vicious browser-specific DHTML hacks (image swapping/replacements and moving by pixels to simulate animation):

Impressive DEMO (DHTML)

Let’s not go back to that time; but hey, even Animated GIFs have their appropriate time and place (i.e. message board avatars or with restraint, in email newsletters). DHTML can probably R.I.P. forever, in favour of HTML5 and clean JavaScript (i.e. using jQuery or prototypes) though.

VRML

SVG

The SVG standard has reached W3C Recommendation status (meaning all modern browsers have either already implemented it natively, or are working on it… native support currently in: IE9+, FF3.6+, Safari 4+, Chrome 5+, Opera 10+). It’s main advantage is that everything is a Vector (lines between co-ordinates) rather than pixels that are colored or not, thus images look incredibly smooth and can scale to look the same on practically any screen size.

The following library helps for working with or scripting SVG files in the client:
Raphael.js

This library helps for working with SVG from within Flash:
Degrafa

Impressive DEMO

Flash

Flash core
Flash community visualization libraries

Impressive DEMO

Silverlight

Impressive DEMO

Unity

Impressive DEMO

Java

Applet, JavaFX

Impressive DEMO

HTML5 Canvas

The main advantage of HTML5 Canvas is that it will eventually be a part of all modern browsers, meaning that finally, we could truly have a “write-once run everywhere” graphics rendering option (like Java promised all those years ago and sort of delivered on, but which the web is even better suited for). The two main technologies used to animate graphics are the Canvas element and a (possibly browser-specific) native implementation of WebGL.

Another option is to use an external JavaScript library to render and script HTML5, the best-known and highest quality such library is:
Processing.js

Impressive DEMO

Conclusion

As usual, it’s up to the developer which technology to use. While I don’t see many going with Java or VRML these days, even they have their charm. Unity can also do great things but has almost as steep a learning curve as Flash and ActionScript. If I were a betting man, I’d be investing more of my time, money and energy into HTML5 Canvas and/or SVG. Ironically enough though, I just noticed that on my iPhone 3GS with the latest iOS v5.0.1 installed, only the HTML5 Canvas and Animated GIF work as expected. The SVG renders nicely but the animation doesn’t run. None of the other plugin-requiring platforms work (i.e. Flash, Silverlight, Unity, VRML).

UPDATE (2011-11-10):
I’ll stick by this conclusion even more, what with the latest round of layoffs and cuts at Adobe to the Flash Lite mobile platform, which is on its way out.

Related Articles

• SVG, JavaScript and the DOM (i-programmer.info)
• How to Choose Between Canvas and SVG for your Site (sourceforge.net)
• Building the 3D Web (sixrevisions.com)
• Living on the Edge – new Adobe animation tool sparks necessary conversations (hacks.mozilla.org)
• Google’s Swiffy does Flash to HTML5 (i-programmer.info)
• Premiere: One Millionth Tower High-Rise Documentary Takes Format to New Heights (wired.com)
• No Browser Left Behind: An HTML5 Adoption Strategy (MSDN)
• Spinning Globe Tutorial (sketchpad.net)
• How jQuery is Killing Flash (aext.net)