accelerating html5 and android web...
TRANSCRIPT
![Page 1: Accelerating HTML5 and Android Web Experienceon-demand.gputechconf.com/gtc/2013/presentations/S3549...Experienc… · GUIMark3 Bitmap GUIMark3 Vector GUIMark3 Compute IE FishTank](https://reader031.vdocuments.mx/reader031/viewer/2022022600/5b3aef1c7f8b9a26728bf72b/html5/thumbnails/1.jpg)
Accelerating HTML5 and Android Web Experience Chris Dalton March 20, 2013
![Page 2: Accelerating HTML5 and Android Web Experienceon-demand.gputechconf.com/gtc/2013/presentations/S3549...Experienc… · GUIMark3 Bitmap GUIMark3 Vector GUIMark3 Compute IE FishTank](https://reader031.vdocuments.mx/reader031/viewer/2022022600/5b3aef1c7f8b9a26728bf72b/html5/thumbnails/2.jpg)
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
![Page 3: Accelerating HTML5 and Android Web Experienceon-demand.gputechconf.com/gtc/2013/presentations/S3549...Experienc… · GUIMark3 Bitmap GUIMark3 Vector GUIMark3 Compute IE FishTank](https://reader031.vdocuments.mx/reader031/viewer/2022022600/5b3aef1c7f8b9a26728bf72b/html5/thumbnails/3.jpg)
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
![Page 4: Accelerating HTML5 and Android Web Experienceon-demand.gputechconf.com/gtc/2013/presentations/S3549...Experienc… · GUIMark3 Bitmap GUIMark3 Vector GUIMark3 Compute IE FishTank](https://reader031.vdocuments.mx/reader031/viewer/2022022600/5b3aef1c7f8b9a26728bf72b/html5/thumbnails/4.jpg)
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
![Page 5: Accelerating HTML5 and Android Web Experienceon-demand.gputechconf.com/gtc/2013/presentations/S3549...Experienc… · GUIMark3 Bitmap GUIMark3 Vector GUIMark3 Compute IE FishTank](https://reader031.vdocuments.mx/reader031/viewer/2022022600/5b3aef1c7f8b9a26728bf72b/html5/thumbnails/5.jpg)
Web User Experience on Tegra 4 Page Load
Optimized page load performance
Benchmarked with 25 unique sites
espn
ebay
amazon
aol
blogspot
yahoo
nytimes
wiki
craigslist
engadget
netflix
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
![Page 6: Accelerating HTML5 and Android Web Experienceon-demand.gputechconf.com/gtc/2013/presentations/S3549...Experienc… · GUIMark3 Bitmap GUIMark3 Vector GUIMark3 Compute IE FishTank](https://reader031.vdocuments.mx/reader031/viewer/2022022600/5b3aef1c7f8b9a26728bf72b/html5/thumbnails/6.jpg)
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
![Page 7: Accelerating HTML5 and Android Web Experienceon-demand.gputechconf.com/gtc/2013/presentations/S3549...Experienc… · GUIMark3 Bitmap GUIMark3 Vector GUIMark3 Compute IE FishTank](https://reader031.vdocuments.mx/reader031/viewer/2022022600/5b3aef1c7f8b9a26728bf72b/html5/thumbnails/7.jpg)
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
![Page 8: Accelerating HTML5 and Android Web Experienceon-demand.gputechconf.com/gtc/2013/presentations/S3549...Experienc… · GUIMark3 Bitmap GUIMark3 Vector GUIMark3 Compute IE FishTank](https://reader031.vdocuments.mx/reader031/viewer/2022022600/5b3aef1c7f8b9a26728bf72b/html5/thumbnails/8.jpg)
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
![Page 9: Accelerating HTML5 and Android Web Experienceon-demand.gputechconf.com/gtc/2013/presentations/S3549...Experienc… · GUIMark3 Bitmap GUIMark3 Vector GUIMark3 Compute IE FishTank](https://reader031.vdocuments.mx/reader031/viewer/2022022600/5b3aef1c7f8b9a26728bf72b/html5/thumbnails/9.jpg)
Existing Developer Tools Develop and debug your web app on the PC (obviously)
Chrome Developer Tools
Firebug
Three.js
![Page 10: Accelerating HTML5 and Android Web Experienceon-demand.gputechconf.com/gtc/2013/presentations/S3549...Experienc… · GUIMark3 Bitmap GUIMark3 Vector GUIMark3 Compute IE FishTank](https://reader031.vdocuments.mx/reader031/viewer/2022022600/5b3aef1c7f8b9a26728bf72b/html5/thumbnails/10.jpg)
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
![Page 11: Accelerating HTML5 and Android Web Experienceon-demand.gputechconf.com/gtc/2013/presentations/S3549...Experienc… · GUIMark3 Bitmap GUIMark3 Vector GUIMark3 Compute IE FishTank](https://reader031.vdocuments.mx/reader031/viewer/2022022600/5b3aef1c7f8b9a26728bf72b/html5/thumbnails/11.jpg)
To access, navigate to about:debug
The Javascript Console Your primary source for debugging web apps on Tegra
![Page 12: Accelerating HTML5 and Android Web Experienceon-demand.gputechconf.com/gtc/2013/presentations/S3549...Experienc… · GUIMark3 Bitmap GUIMark3 Vector GUIMark3 Compute IE FishTank](https://reader031.vdocuments.mx/reader031/viewer/2022022600/5b3aef1c7f8b9a26728bf72b/html5/thumbnails/12.jpg)
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.');
![Page 13: Accelerating HTML5 and Android Web Experienceon-demand.gputechconf.com/gtc/2013/presentations/S3549...Experienc… · GUIMark3 Bitmap GUIMark3 Vector GUIMark3 Compute IE FishTank](https://reader031.vdocuments.mx/reader031/viewer/2022022600/5b3aef1c7f8b9a26728bf72b/html5/thumbnails/13.jpg)
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)
![Page 14: Accelerating HTML5 and Android Web Experienceon-demand.gputechconf.com/gtc/2013/presentations/S3549...Experienc… · GUIMark3 Bitmap GUIMark3 Vector GUIMark3 Compute IE FishTank](https://reader031.vdocuments.mx/reader031/viewer/2022022600/5b3aef1c7f8b9a26728bf72b/html5/thumbnails/14.jpg)
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
![Page 15: Accelerating HTML5 and Android Web Experienceon-demand.gputechconf.com/gtc/2013/presentations/S3549...Experienc… · GUIMark3 Bitmap GUIMark3 Vector GUIMark3 Compute IE FishTank](https://reader031.vdocuments.mx/reader031/viewer/2022022600/5b3aef1c7f8b9a26728bf72b/html5/thumbnails/15.jpg)
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
![Page 16: Accelerating HTML5 and Android Web Experienceon-demand.gputechconf.com/gtc/2013/presentations/S3549...Experienc… · GUIMark3 Bitmap GUIMark3 Vector GUIMark3 Compute IE FishTank](https://reader031.vdocuments.mx/reader031/viewer/2022022600/5b3aef1c7f8b9a26728bf72b/html5/thumbnails/16.jpg)
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
![Page 17: Accelerating HTML5 and Android Web Experienceon-demand.gputechconf.com/gtc/2013/presentations/S3549...Experienc… · GUIMark3 Bitmap GUIMark3 Vector GUIMark3 Compute IE FishTank](https://reader031.vdocuments.mx/reader031/viewer/2022022600/5b3aef1c7f8b9a26728bf72b/html5/thumbnails/17.jpg)
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/