need for speed - comparison of current web technologies
DESCRIPTION
Comparison of Current Web Technlogies, Flash, Silverlight, Javascript - HTML5 CanvasTRANSCRIPT
Need For Speed
Every car has a lot of speed in it. The trick is getting the speed out of it. – A J Foyt.
RocketBoots
Speed
Its Addictive
DISCLAIMER: We acknowledge that wikipedia makes it sound so cool but don’t try drugs.
Speed is awesome
• Apps feel lightweight.
• Brings the web to awhole new experience.
• Faster Pixel Math e.g. Computer Vision.
And it can be deadly too
• Premature optimization is the root of all evil - Donald Knuth.
• Design first, optimize later.
Sharpening the tools
• Faster Algorithms
• Code Tricks & Best Practices
• Better Compiler Optimisations
• Bytecode Manipulation
• Thin Runtimes
Why its important to us
• The only way of discovering the limits of the possible is to venture a little way past them into the impossible. - Arthur Clarke.
Contestants, start your engines
Who can push most pixels ?• JavaScript (HTML5)• Java (Applet)• ActionScript 2.0• ActionScript 3.0• Silverlight 3.0• Alchemy v0.5a / + Pixel Bender• Haxe 2.05 with memory API• Objective-C / + GCD• WebGL• OpenGL
Pixel
The rules… No Cheating!!
• Create a massive amount of points in 3D Pixel Cloud.
• Draw the pixel cloud on the screen every frame.
• Reduce/increase particles until frame rate is close to 20 FPS.
• Language specific optimisations allowed.
The Creature
Mac Book Pro 15”
2.66GHz Core 2 Duo
4GB Ram
GeForce 9400m(256 MB)
Mac OSX (10.6.3)
The Algorithm
1. initBitmap();
2. createParticles();
3. //every framerenderParticles();
4. Adjust particles until frameRate ~= 20FPS.
Performance Comparisons
• Show each demo. (The fun stuff)
• Briefly explain code.• Measure number of
particles when they become stable.
• Plot in Excel Chart.
Java Applet
50ms 40ms 30ms
Mac OSX 100,000 80,000 65,000
Windows 7 60,000 - -
Action Script 2
50ms 40ms 30ms
Mac OSX 3,500 2,300 2,000
Windows 7 3,000 - -
Action Script 3
50ms 40ms 30ms
Mac OSX 88,000 71,000 50,000
Windows 7 60,000 - -
Alchemy v0.5a
50ms 40ms 30ms
Mac OSX 126,000 107,000 76,000
Windows 7 143,000 - -
Alchemy v0.5a with Pixel Bender
50ms 40ms 30ms
Mac OSX 400,000 320,000 221,000
Windows 7 ? - -
HAXE 2.05 with memory API
50ms 40ms 30ms
Mac OSX 600,000 460,000 320,000
Windows 7 530,000 - -
HTML 5.0 + JavaScript
50ms 40ms 30ms
FirefoxOSX 44,000 20,000 10,000
Win7 50,000 - -
ChromeOSX 92,000 70,000 45,000
Win7 70,000 - -
Safari CrashedInternet Explorer 8
Doesn’t support it yet
Silverlight 3.0
50ms 40ms 30ms
Mac OSX 980,000 720,000 500,000
Windows 7 1,050,000 - -
To Infinity and Beyond• Nightly Builds of May 6 2010
• Chromium – Chrome
• Minefield - Firefox
• Webkit - Safari
Redemption (Nightly Builds)
50ms 40ms 30ms
Minefield 120,000 80,000 56,000
Chromium 89,000 67,000 51,000
WebKit 117,000 80,000 30,000
Internet Explorer 9 preview went blank
WebGL – Hardware Acceleration
50ms 40ms 30ms
Minefield 4,180,000 3,880,000 2,660,000
Chromium 4,530,000 4,180,000 2,830,000
WebKit 2,400,000 2,040,000 1,400,000
The Natives
• Thought we’d try to make native apps to see the difference.
• Objective C (Cocoa)
• Open GL + GLUT
Objective C (Cocoa)
50ms 40ms 30ms
Simple 1,030,000 600,000 170,000
Multi Thread(GC
D)800,000 450,000 110,000
OpenGL – The God of Particles
50ms 40ms 30ms
OMG! 5,000,000 3,400,000 2,800,000
This wouldn’t be possible without//Googlehttp://www.google.com
//Fractalshttp://local.wasp.uwa.edu.au/~pbourke/fractals/ http://local.wasp.uwa.edu.au/~pbourke/fractals/fractalgallery/ http://local.wasp.uwa.edu.au/~pbourke/fractals/peterdejong/
//AVM2 Bytecodehttp://www.adobe.com/devnet/actionscript/articles/avm2overview.pdf
//alchemyhttp://labs.adobe.com/technologies/alchemy/ http://labs.adobe.com/wiki/index.php/Alchemy:Documentation:Getting_Started http://www.unitzeroone.com/blog/2009/03/18/flash-10-massive-amounts-of-3d-particles-with-alchemy-source-included/ http://drawlogic.com/category/alchemy/ http://www.automatastudios.com/2008/11/21/understanding-adobe-alchemy/ http://www.unitzeroone.com/blog/2008/11/28/adobe-alchemy-is-it-actionscript-heresy/
//Experimental Mem API in AS3http://blog.joa-ebert.com/2009/04/03/massive-amounts-of-3d-particles-without-alchemy-and-pixelbender/ http://blog.joa-ebert.com/2009/08/05/tdsi-examples/ http://blog.joa-ebert.com/2009/12/03/the-scalable-apparat/
//Haxehttp://webr3.org/experiments/haxe-particle-pusher/300k/ http://haxe.org/api/flash9/memory http://haxe.org/doc/why http://haxe.org/doc/start/flash/as3migration http://ncannasse.fr/blog/adobe_alchemy http://ncannasse.fr/blog/the_failure_of_as3
There were heaps more, but … No space//Javascripthttp://mrdoob.com/lab/javascript/strangeattractor/ http://www.leichtgewicht.at/387/pushing-javascript-particles/ http://www.andrew-hoyer.com/experiments/cloth https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas
//Java Applethttp://java.sun.com/docs/books/tutorial/2d/images/drawimage.html http://blog.debit.nl/?p=79 http://java.sun.com/applets/ http://java.sun.com/docs/books/tutorial/2d/index.html
//O3dhttp://code.google.com/apis/o3d/
//Web GLhttp://www.taranfx.com/chrome-webgl-graphics-hardware-acceleration http://noscope.com/journal/2010/04/webgl-in-google-chrome https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/doc/spec/WebGL-spec.html http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation http://github.com/gpjt/webgl-lessons/blob/master/lesson07/
//openGLhttp://cgi.cse.unsw.edu.au/~cs3421/wordpress/ http://nehe.gamedev.net/ http://www.dei.isep.ipp.pt/~matos/cg/docs/manual/ http://glprogramming.com/red/chapter07.html http://www.opengl.org/resources/libraries/glut/
//Silverlighthttp://blog.efvincent.com/concurrency-optimization-silverlight/ http://blog.joa-ebert.com/2009/08/10/flirting-with-silverlight/ http://www.silverlight.net/getstarted/
//Skyrails - This is an example of an interface that could take advantage of GPUhttp://www.youtube.com/watch?v=I2d312_dXEs&feature=related <- One of my Uni tutors PHD project
Questions“ When people stop asking good questions,
bad things seem to happen ” – Robin Hilliard
Feel the Speed
“Speed, it seems to me, provides the one genuinely modern pleasure. ” – Aldous Huxley
TRAC - http://trac.rocketboots.com/os/browser/webdu2010_need_for_speed/trunk
SVN - http://svn.rocketboots.com/os/webdu2010_need_for_speed/trunk
Say ‘Hi’ to us
Manoj Vekaria
@nojified
www.codeexplode.com
Sushant Verma
@sushified
www.trynull.com