4. My Perspective on the Last Decade & Web Tech 4 GPU Acceleration C++ in Browser Chrome OS
5. April 1 2010 – Quake II in HTML5 Ray Cromwell, Stefan Haustein, Joel Webber – Google - WebGL, canvas - Web Sockets - Local Storage - Audio Chrome & Safari 5
6. No Plugins 6 Not discussing: Flash, Java, Silverlight, Unity
7. Plugin Use / Installation% of Chrome Users 7 iOS * Data from users opting in to reporting usage statistics, 2010
12. Mobile Trends iPhone Android Nokia BlackBerry Opera iPhone Nokia BlackBerry Android 12
13. Mobile Native or Web App? iOS & Android Monetize Native Apps WebApp wrappers: PhoneGap, appMobi Performance Native has greater perf, but On Android, can call through to C++ from JS Forms Input HTML5 input forms produce correct input device Touch 13
16. Chrome Web Store Discovery, Distribution and Monetization on the Web 16 Web Apps 120 million users In-app payments coming soongoogle.com/checkout/inapp … And Monetization
21. Canvas 2D – Overview Mostly Sprites Flash Widely supported (mobile & desktop) IE9 brings GPU performance Javscript Shim Libraries run on old IE, e.g. ExplorerCanvas GPU upgrades Hundreds to Thousands of Draws @30fps Immediate Mode Popular 21
22. Canvas 2D – API Primitives rect, circle arcs, lines, bezier curves, text, images Drawing fill and stroke Effects shadows, gradients, image patterns, line styles, clipping, compositing operations Transforms rotate, scale, matrix transform (2x2 + translation) 22 Text
23. Canvas 2D – Simple Sample <canvas id="e" width="200" height="100"></canvas><script> var context =document.getElementById("e").getContext("2d"); var cat = new Image(); cat.src = "images/cat.png"; cat.onload = function() { context.drawImage(cat, 0, 0); };</script> 23
28. SVG – Overview Vector markup language Declarative or retainedprocedural API Tools (Illustrator, Inkscape) HTML5 Enables SVG Markup Inline with HTML Retained API GPU Acceleration Friendly - Retained data structures allow caching Little Groundswell Complex API? Retained? 28
35. WebGL – Overview Open GL ES 2 Textures, Framebuffers, Blending Vertex and Fragment Shaders (GLSL) Khronos group specification 1.0 Q1 2011 Matrix libraries come separately What will Microsoft do? 35
44. WebGL – Availability Chrome – Firefox – Safari: Chrome Shipped. Soon in FF4 & Safari Internet Explorer: No Mobile: Waiting on Firefox 4, other browsers in progress. 44 - caniuse.com, Feb 2011
45. aka – your render loop requestAnimationFrame 45
46. requestAnimationFrame – Overview Status Quo: Draw, Draw, Draw, Blindly! setInterval(draw, 16) Browser Calls You (FireFox Beta 4, Chrome 10) function draw() { //... Do Drawing Work, then ask to called again: window.requestAnimationFrame(draw); } // kick off first frame: window.requestAnimationFrame(draw); 46 setInterval(draw, 16) setInterval(draw, 16) setInterval(draw, 16) setInterval(draw, 16) setInterval(draw, 16) setInterval(draw, 16) setInterval(draw, 16) setInterval(draw, 16)
47. requestAnimationFrame – Availability Chrome – Firefox – Safari: Soon in Chrome 10, FF4 Use a Shim, future compatible:// shim layer with setTimeout fallback – Paul Irish window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(/* function */ callback, /* DOMElement */ element){ window.setTimeout(callback, 1000 / 60); }; })(); 47
52. CSS 3D – Availability Chrome – Firefox – Safari: Soon in Chrome, FF No, Safari GO! Internet Explorer: No Mobile: iOS GO! – Android: No 52 - caniuse.com, Feb 2011
54. Web Fonts – Overview Game UI via HTML Serve Custom Fonts Easy Google Fonts API <link href='http://fonts…?family=Chewy‘rel='stylesheet' type='text/css'> In CSS: h1 { font-family: 'Chewy', arial, serif; } 54
55. Web Fonts – Availability Chrome – Firefox – Safari: GO! Internet Explorer: Best in IE9 Mobile: Mostly… 55 - caniuse.com, Feb 2011
58. <audio> – Sample var audio = new Audio(); audio.addEventListener("canplaythrough", function () { audio.play(); }); audio.src = “treasure.ogg”; 58
59. <audio> – Issues iOS >= 4 – only one sample at a time No one codec supported by all browsers. Pick 2 from: MP3, Vorbis, WAV detect suitability before loading, with e.g. new Audio().canPlayType(“audio/ogg”); 59
60. <audio> – Future1 FireFox Audio Data API supports Read/Write samples var output = new Audio(); output.mozSetup(1, 44100); var samples = new Float32Array(22050); varlen = samples.length; for (vari = 0; i < samples.length ; i++) { samples[i] = Math.sin( i / 20 ); } output.mozWriteAudio(samples); 60
61. <audio> – Future2 Web Audio API Node graph Low latency Spatialization, 3d Reverb Native implementation performance 61
68. WebSockets – Overview Low latency, persistent, full duplex Upgrades from HTTP handshake UTF8 Simple var socket = new WebSocket(“ws://server.com”); socket.onopen = function(event) { socket.send(“Hello Server”); } socket.onmessage = function(event) { alert(“Server says: “ + event.data); 68
69. WebSockets - Future FireFox and Opera Behind Flag Standard for protocol upgrade Binary Peer to Peer Unreliable (vs TCP) 69
70. WebSockets – Links socket.io Higher level library Transport on WebSockets, Flash, Ajax, … github.com/gimite/web-socket-js Shim implementation on top of Flash 70
71. Web Sockets – Availability Chrome – Firefox – Safari: Yes, Still Stabilizing, Some Behind a Flag Internet Explorer: In HTML5 Labs Mobile: iOS Stabilizing, Android? 71 - caniuse.com, Feb 2011
73. Node.JS – Overview Ease of Same Language and Client & Server Simple, lots of uptake Tools / Plugins WebSockets, manage connections, render server side, just lots... Visual Debugger 73
83. Web Storage – Overview Local Storage & Session Storage 5MB of key value pair strings localStorage["levels-unlocked"] = 5 // or .getItem() / .setItem() localStorage.removeItem() localStorage.clear(); // Dump everything Widely supported Non Transactional No good recourse if over limit 83
84. Web Storage – Availability Chrome – Firefox – Safari: GO! Internet Explorer: GO! Mobile: GO! 84 - caniuse.com, Feb 2011
85. File API: Directories & Systems – Availability Chrome: Yes for Apps and Extensions Firefox – Safari: No Internet Explorer: No Mobile: No 85
86. Application Cache – Overview Cache HTML pages and Resources Manifest File CACHE MANIFEST index.html stylesheet.css images/logo.png scripts/main.js 86
87. Application Cache – Availability Chrome – Firefox – Safari: GO! Internet Explorer: No Mobile: GO! 87 - caniuse.com, Feb 2011
93. Native Client – Overview Machine Code Served to Browser C/C++, Mono(C#), others NoPlugins Legacy C++ Codebase in your Web App Performance Cross Platform 93 A Web Page Full of text, lots of interesting stuff, links, blah blah. Don’t read all the links, all this text. JS A Web Page Full of text, lots of interesting stuff, links, blah blah. Don’t read all the links, all this text. C++
94. Native Client – Security Static analysis & Sandboxing Restricted instructions Isolate code Custom Toolchain 94 Browser NaCl v8 JS C++ Browser Plugin Operating System Operating System
95. Native Client – Availability Chrome: Behind flag Open Source 95
97. GPU Acceleration Chrome 9 WebGL shipped February 3rd Chrome Developer & Canary Video, 3D CSS, Canvas 2D, Compositing Firefox 4 Beta WebGL, Video, 2D CSS, Canvas 2D, SVG, Compositing IE 9 Beta “all graphics and text rendering” 97
98. Benchmarks Needed JSGameBench, Facebook “over 125 million people visit Facebook using HTML5 capable browsers just from their mobile phone” Sprite performance, options (WebGL, <canvas>, <img>, <div>, …) 1000-4000 @30fps on GPU 50-200 mid range desktops 20-30 iOS & Android 98
101. More! At GDC Google Sessions Today and Tomorrow Cloud Services, WebGL, Native Client, YouTube APIs Android AndroidAndroidAndroidAndroid Google Booth Sketchup,Web Store, WebGL Native Client, AppEngine, Android Other HTML5 Sessions WebGL News and Technology Updates (Khronos), Thursday Getting Your Games onto the BlackBerry PlayBook Tablet, Thursday HTML5: The New UI Library for Games, Friday 101
102. Thanks Alexis Deveria, caniuse.com feature tables Athena's Pix [flickr], overview image Chris Pruett Daniel Galpin Darius Kazemi Geoff Blair Gregg Tavares Mark DeLoura Mark Pilgrim (diveintohtml5.org) Matt Hackett 102
- New and Upcoming tech- Why care - Zero friction – available in browser, no plugins - Forward looking – Some tech ready today, more coming - Mobile – Many platforms, ubiquity
- No Flash on iOS browser- Security an issue with plugins
- Important metric is how many users will play, if a plugin is installed already or not
-Plugins worst – full permission for any web page
-Lots of options on desktop-iOS limited!-Webkit on several
-WebKit over 50%-HTML5 support pervasive
-WebKit over 50%-HTML5 support pervasive
- Android allows C++/Java from JS- Rich input if correct forms used- Android has simple touch, iOSmultitouch
120M Chrome users
- Synced between browsers- Easy offline- Permissions cleared at “install” time
CWS is a new platform for distributing games and apps on the webTargeted at 120M Chrome usersMonetization currently includes in-store payments and adsIn-app payments solution is coming soon and is a perfect fit for gamesSign up for early betaMore details at the booth
- 2D context, widely supported (IE9)- Procedural images- Dynamic OK, but not designed specifically for “animated frames”
-Simple 2D- Physics- Shooters (typing shooter) “Z-type”-Retro Sprite “Onslaught”- MMO Scrabble “Word Squared”-3D (mostly flat, though textured possible to)
-DrawImage takes Sub Regions as well
- Implementations around for 5 years, standard started 10 years ago
-EXTERNAL Javascript tool-Capturevis HUD-Step Draw Calls-State-Texture state-Texture Browser-Shader programs, view parameters-View shaders-View data buffers as well
-Optional to use Google API, but easy
-Larger API
-Larger API
-Editor’s Draft
-W3C Editors Draft of Spec
-3 component accelerations, rotations-interval in milliseconds
-Session storage clears at end of session
-HTML5
-Copies message data between processes-No DOM access
-Plugins have full access to OS-JS safely sandboxed, browser offers security-NaCl does the same for C++