Behavior, Content, Money – 3 Things you should never give away for free!!!

BCmoney MobileTV

Interactive Web Graphics: A look at HTML5 Canvas .vs. SVG .vs. Flash .vs. Silverlight .vs. Unity .vs. Java .vs. VRML

Posted by bcmoney on February 9, 2011 in Flash, Mobile, Multimedia with 1 Comment


No Gravatar
Earth

Image by tonynetone via Flickr

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 y y x x x x x
No Editor Needed y y y % % y y
Editor available x y y y y y y
Scripting Language JavaScript JavaScript,
SMIL
ActionScript,
Flex
VBscript,
C#,
XAML
UnityScript,
C#
JavaFX script,
FXML
VRML
script, Java
Rectangles y y y y y y y
Lines y y y y y y y
Elipses y y y y y y y
Fills y y y y y y y
Arcs y y y y y y y
Shadows y y y y y y y
Bézier Curves y y y x y y x
Quadratic Curves y y y x y y x
Animation y y y y y y y
Image manipulation y % y y y y y
Sprites y x y y x x x
Rasters y x y y y y y
Vectors y y y x y x x
Audio % x y y y % x
Video % x y y y % x
3D support y % y % y y y
GPU Acceleration % x y y y y x
Mobile support y % % % x % x

 

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 library (like Java promised all those years ago). 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

 

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

<br /> <a title="Get Adobe Flash player" href="http://get.adobe.com/flashplayer/" target="_blank"><br /> <img alt="Get Adobe Flash player" src="https://i1.wp.com/www.adobe.com/images/shared/download_buttons/get_flash_player.gif" style="border-style:none" data-recalc-dims="1" data-lazy-src="https://i1.wp.com/www.adobe.com/images/shared/download_buttons/get_flash_player.gif?is-pending-load=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class=" jetpack-lazy-image"><noscript><img alt="Get Adobe Flash player" src="https://i1.wp.com/www.adobe.com/images/shared/download_buttons/get_flash_player.gif" style="border-style:none" data-recalc-dims="1" /></noscript><br /> </a><br />

Impressive DEMO

 

Silverlight


Get Microsoft Silverlight

Impressive DEMO

 

Unity


Impressive DEMO

 

Java

Applet, JavaFX

Impressive DEMO

 

VRML

Download VRML Plugin (suggest Cortona VRML Viewer)

 

DHTML and Animated GIFs

Before these technologies became mature, the only option was Animated GIFs or vicious browser-specific DHTML hacks:

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.

 

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.

 

 

  1. Roland ZolmanMay 20, 2013 - 4:27 pm #1

    The iPhone 3G was internally similar to its predecessor, but included several new hardware features, such as Assisted GPS, 3G data and tri-band UMTS/HSDPA. The device also benefited from software improvements introduced with iPhone OS 2.0, which was launched at the same time. As well as other features (including Push email and turn-by-turn navigation), this new operating system introduced the App Store—Apple’s new distribution platform for third-party applications. I remember it didn’t handle most interactive graphics very well, but the new ones iPhone 5+ seem to do a much better job…

    Reply
Leave a Reply

No trackbacks yet.

No post with similar tags yet.

Posts in similar categories

BC$ = Behavior, Content, Money

The goal of the BC$ project is to raise awareness and make changes with respect to the three pillars of information freedom - Behavior (pursuit of interests and passions), Content (sharing/exchanging ideas in various formats), Money (fairness and accessibility) - bringing to light the fact that:

1. We regularly hand over our browser histories, search histories and daily online activities to companies that want our money, or, to benefit from our use of their services with lucrative ad deals or sales of personal information.

2. We create and/or consume interesting content on their services, but we aren't adequately rewarded for our creative efforts or loyalty.

3. We pay money to be connected online (and possibly also over mobile), yet we lose both time and money by allowing companies to market to us with unsolicited advertisements, irrelevant product offers and unfairly structured service pricing plans.

  • Archives