Need For Speed

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
d
on’t

try drugs.

Speed is awesome


•
Apps feel lightweight.


•
Brings the web to a

whole 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


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
o
ptimisations

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 frame

renderParticles
();

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

Firefox

OSX

44,000

20,000

10,000

Win7

50,000

-

-

Chrome

OSX

92,000

70,000

45,000

Win7

70,000

-

-

Safari Crashed

Internet 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

//Google

http://www.google.com


//Fractals

http://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 Bytecode

http://www.adobe.com/devnet/actionscript/articles/avm2overview.pdf



//alchemy

http://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 AS3

http://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/



//Haxe

http://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

//
Javascript

http://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 Applet

http://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


//O3d

http://code.google.com/apis/o3d/



//Web GL

http://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/



//
openGL

http://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/



//
Silverlight

http://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 GPU

http://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/trun
k


SVN
-

http://svn.rocketboots.com/os/webdu2010_need_for_speed/trunk

Say ‘Hi’ to us

Manoj

Vekaria

@
nojified

www.codeexplode.com

noj@rocketboots.com

Sushant

Verma

@
sushified

www.trynull.com

sushant@rocketboots.com