Speedy Web UIs

Attempting fast 2D/3D graphics for desktop & mobile web

Fast snail

Peter O'Shaughnessy   @poshaughnessy

Code Ahead

Developer, Future Technologies, Pearson

ZamBlocks

ZamBlocks 1
ZamBlocks 2
ZamBlocks 3
ZamBlocks 4
ZamBlocks 5
ZamBlocks 6

Development starts... now

Presumptions

  • Panning
  • Zooming
  • Other 3D (or pseudo-3D) effects
  • Mobile Best
ZamBlocks 6

How?

Web Tech

  • DOM
  • CSS3D
  • Canvas
  • WebGL
  • SVG
  • Flash
  • DOM
  • CSS3D
  • Canvas
  • WebGL
  • SVG
  • Flash
  • (DOM)
  • CSS3D
  • Canvas
  • (WebGL)
  • (SVG)
  • Flash

Which library?

Three.js?

Loading...

Three.js for WebGL (desktop-focussed):

http://bit.ly/third-dimension

Attempt #1

Three.js CSS3DRenderer

One I made earlier

(You can spin it around)

So far...

  • 60 FPS on Desktop (Chrome)
  • 58-60 FPS on iPhone 5 (iOS Safari)
  • 50-60 FPS on iPhone 4 (iOS Safari)
  • 50-60 FPS on Galaxy Nexus (Chrome for Android)
:-)

Taking it a bit further

  • 30-50 FPS on Desktop (Chrome)
  • 55-60 FPS on iPhone 5 (iOS Safari)
  • 5-22 FPS on iPhone 4 (iOS Safari)
  • 3-4 FPS on Galaxy Nexus (Chrome for Android)
:-(

Attempt #2

Three.js CanvasRenderer

One I made earlier

(You can spin it around)

So far...

  • 50-60 FPS on Desktop (Chrome)
  • 52-60 FPS on iPhone 5 (iOS Safari)
  • 25-35 FPS on iPhone 4 (iOS Safari)
  • 30-60 FPS on Galaxy Nexus (Chrome for Android)
:-)

Taking it a bit further

  • 20-30 FPS on Desktop (Chrome)
  • 4-7 FPS on iPhone 5 (iOS Safari)
  • 1-2 FPS on iPhone 4 (iOS Safari)
  • 1-3 FPS on Galaxy Nexus (Chrome Beta for Android)
:-(

'Optimisations' that didn't really help

  • Rendering the text using the CSS3DRenderer, on top of the canvas
  • Only updating scene on input, rather than continuously (but may help battery life!)

Key Optimisation 1

Reduce the curve segments for any Three.js-rendered text

var labelGeometry = new THREE.ShapeGeometry(
    labelShapes, {curveSegments: 1} );
                                

Default is 12.

Key Optimisation 2

If you don't need z-ordering...

Disable 'sortObjects' and 'sortElements' on CanvasRenderer

renderer = new THREE.CanvasRenderer();

renderer.sortObjects = false;
renderer.sortElements = false;
                                
  • 20-30 50-60 FPS on Desktop (Chrome)
  • 4-7 24-35 FPS on iPhone 5 (iOS Safari)
  • 1-2 5-10 FPS on iPhone 4 (iOS Safari)
  • 1-3 3-5 FPS on Galaxy Nexus (Chrome Beta for Android)
:-|

File size optimisation

Build your own custom three.min.js

python build.py
    --include canvas
    --include extras
    --minify
                                

402 KB -> 246 KB!

Meanwhile, design goes flat!

New design

So the finished prototype...

  • 55-60 FPS on Desktop (Chrome)
  • 28-35 FPS on iPhone 5 (iOS Safari)
  • 6-10 FPS on iPhone 4 (iOS Safari)
  • 10-15 FPS on Galaxy Nexus (Chrome Beta for Android)
:-|

Another library?

Good list: html5gameengine.com

With 100 blocks...

  • 60 FPS on Desktop (Chrome)
  • 55-60 FPS on iPhone 5 (iOS Safari)
  • 15-21 FPS on iPhone 4 (iOS Safari)
  • 20-28 FPS on Galaxy Nexus (Chrome for Android)
:-)

But...

  • Only launched 6 months ago
  • Not that many examples or tutorials yet
  • Having problems with mouse & touch drags...

Conclusions

  • For 3D on desktop, Three.js is brilliant
  • For 3D on mobile, CSS3D looks good for small numbers of objects
  • For 2D, Pixi.js is not very mature yet, but looks a good bet for the future
  • But for ZamBlocks, next time I'd probably just use DOM or <canvas> directly!

Final thoughts

  • Smooth web UIs are hard right now, especially on mobile
  • But gap between web & native is narrowing
  • HTML5 games about to hit the big time
  • Lines between web sites, apps & games are blurring
  • We'll be doing more & more with rich, interactive graphics
  • Start now & get a head start!

Thanks!

Loading...

Follow / give feedback / poke fun @poshaughnessy

The code is on GitHub

Credits

Special thanks to...

  • Our Future Technologies Champions for their ideas and help with ZamBlocks
  • Dorling Kindersley for their dinosaur model - used with permission
  • Tony Parisi for his 'WebGL Up & Running Book', especially the robot example
  • The creator of the robot model - it's no longer up at the URL referenced in the book. If you're the creator, please get in touch with me and I'll happily pay to use it!
  • MrDoob and AlteredQualia for their amazing work on Three.js