Accelerating HTML5 and Android Web Experience Chris Dalton March 20, 2013

Agenda

NVIDIA Web Technologies Strategy

Web User Experience on Tegra 4

— Scrolling / Zoom

— Page Load

Web Performance on Tegra 4

— Canvas / WebGL

— JavaScript

Web Application Development on Tegra 4

— Tools

— Best Practices

NVIDIA Web Technologies Strategy

Goal: Every single browser pixel GPU accelerated!

Strategy

— Improve fundamental user experience

— Optimize for performance and power

— Accelerate key HTML5 and related features

— Drive Web standards

Web User Experience on Tegra 4 Zooming / Scrolling

Key issues:

— Fast scrolling -- can’t keep up

— Zooming in -- low resolution rendering

— Zooming out -– whiteout

Our optimizations:

— Smooth 60 FPS panning/scrolling

— Smooth consistent pinch/zoom Missing row of tiles scrolling

Browser does not keep up

zooming out

Low res rendering

zooming in

Web User Experience on Tegra 4 Page Load

Optimized page load performance

Benchmarked with 25 unique sites

espn

ebay

amazon

aol

google

blogspot

yahoo

nytimes

wiki

facebook

pinterest

craigslist

engadget

netflix

linkedin

twitter

bing

wsj

msn

ign

cnn

nba

paypal

tumblr

walmart

23

49

68

0

10

20

30

40

50

60

70

80

Web Page Load (25 Top Unique Sites)Seconds

(low

er

is f

ast

er)

Android Browser Chrome v.25.0 Firefox v.18.0

Canvas Performance on Tegra 4

0.0

10.0

20.0

30.0

40.0

50.0

60.0

GUIMark3 Bitmap GUIMark3 Vector GUIMark3 Compute IE FishTank (100)

Fra

mera

te (

FPS)

Android Browser Chrome v.25.0 Firefox v.18.0

WebGL Performance on Tegra 4

0

10

20

30

40

50

60

WebGL Aquarium (50fish)

Dynamic Cube Map Blob Cubes

Fra

mera

te (

FPS)

Android Browser Chrome v.25.0 Firefox v.18.0

JavaScript Performance on Tegra 4

0

200

400

600

800

1000

1200

1400

Peacekeeper SunSpider 0.9.1 (ms, lessbetter)

Android Browser Chrome v.25.0 Firefox v.18.0

Lower is better

Higher is better

Existing Developer Tools Develop and debug your web app on the PC (obviously)

Chrome Developer Tools

Firebug

Three.js

Logs Javascript errors

Prints messages from console.log

Evaluates expressions

The Javascript Console Your primary source for debugging web apps on Tegra

$ adb logcat | grep Console

I/browser (15640): Console: Hello world!

http://localhost:8080/buggy-script.html:2

E/browser (15640): Console: Uncaught ReferenceError: x is

not defined http://localhost:8080/buggy-script.html:4

To access, navigate to about:debug

The Javascript Console Your primary source for debugging web apps on Tegra

Measuring Javascript Performance

Use window.performance.now

— Provides a high resolution timer

— Available on Tegra Android browser

var startTime = window.performance.now();

// Do an operation.

var endTime = window.performance.now();

console.log('Took ' + (endTime - startTime) + ' milliseconds.');

Tegrastats

Reports usage statistics while your app is running

— System memory (RAM)

— CPU load and frequency

— CPU frequency cap (EDP)

— Memory load and frequency (EMC)

— GPU load and frequency (GR3D)

— Media engine statistics (AVP, VDE, IRAM)

Tegrastats

$ adb shell tegrastats &

$ adb logcat | grep TegraStats

E/TegraStats(24167): RAM 1045/1861MB (lfb 90x4MB) IRAM 0/255kB(lfb 255kB) cpu

[75%,51%,off,off]@1810 EMC 32%@480 AVP 9%@81 VDE 144 GR3D 57%@192 EDP limit

1810

E/TegraStats(24167): RAM 1045/1861MB (lfb 90x4MB) IRAM 0/255kB(lfb 255kB) cpu

[75%,51%,off,off]@1810 EMC 32%@480 AVP 9%@81 VDE 144 GR3D 57%@192 EDP limit

1810

E/TegraStats(24167): RAM 1045/1861MB (lfb 90x4MB) IRAM 0/255kB(lfb 255kB) cpu

[75%,51%,off,off]@1810 EMC 32%@480 AVP 9%@81 VDE 144 GR3D 57%@192 EDP limit

1810

E/TegraStats(24167): RAM 1045/1861MB (lfb 90x4MB) IRAM 0/255kB(lfb 255kB) cpu

[75%,51%,off,off]@1810 EMC 32%@480 AVP 9%@81 VDE 144 GR3D 57%@192 EDP limit

1810

Performance Tips

Use WebGL and 2D Canvas for animations

Avoid blocking WebGL calls

— gl.finish / gl.flush

— gl.getError / gl.getParameter

Use {alpha:false, preserveBackBuffer:false} with WebGL

Do not use getImageData / putImageData with 2D Canvas

Use web workers

Think Mobile Just because it works on a PC, does not mean it should work on mobile!

Handle touch events

Hardware limitations

— gl.MAX_TEXTURE_SIZE

— gl.MAX_VARYING_VECTORS

— gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS

— Robustness

Handle webglcontextlost / webglcontextrestored

Javascript execution speed

Floating point precision

Demos!

http://crypt-webgl.unigine.com/game.html

http://shatterquest.com/runfield/

http://shatterquest.com/

http://apps.playcanvas.com.s3-website-eu-west-1.amazonaws.com/will/doom3/gangnamstyle/