Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5 and Other Modern Browser Game Tech

18,351 views

Published on

Overview of HTML5 and other modern browser game technologies. Presented at Game Developers Conference 2011 by Vincent Scheib

Published in: Technology
  • Be the first to comment

HTML5 and Other Modern Browser Game Tech

  1. 1. HTML5 and other Modern Browser Game Tech<br />Vincent Scheib<br />Software Engineer, Chrome GPU team<br />February 28, 2011<br />1<br />
  2. 2. This is an Overview<br />Overview & Motivation<br />Browsers, Platforms<br />Technology Survey<br />Graphics, Audio, Networking, Storage…<br />Libraries, Benchmarks<br />2<br />
  3. 3. Overview & Motivation<br />3<br />
  4. 4. My Perspective on the Last Decade & Web Tech<br />4<br />GPU Acceleration<br />C++ in Browser<br />Chrome OS<br />
  5. 5. April 1 2010 – Quake II in HTML5<br />Ray Cromwell, Stefan Haustein, Joel Webber – Google<br />- WebGL, canvas<br />- Web Sockets<br />- Local Storage<br />- Audio<br />Chrome & Safari<br />5<br />
  6. 6. No Plugins<br />6<br />Not discussing: Flash, Java, Silverlight, Unity<br />
  7. 7. Plugin Use / Installation% of Chrome Users<br />7<br />iOS<br />* Data from users opting in to reporting usage statistics, 2010<br />
  8. 8. Low Friction, Better Security<br />8<br />
  9. 9. Browsers and Platforms<br />9<br />
  10. 10. Browser Trends<br />10<br />IE<br />Firefox<br />Chrome<br />
  11. 11. Mobile Trends<br />Opera<br />iPhone<br />Nokia<br />BlackBerry<br />Android<br />11<br />
  12. 12. Mobile Trends<br />iPhone<br />Android<br />Nokia<br />BlackBerry<br />Opera<br />iPhone<br />Nokia<br />BlackBerry<br />Android<br />12<br />
  13. 13. Mobile Native or Web App?<br />iOS & Android Monetize Native Apps<br />WebApp wrappers: PhoneGap, appMobi<br />Performance<br />Native has greater perf, but<br />On Android, can call through to C++ from JS<br />Forms Input<br />HTML5 input forms produce correct input device<br />Touch<br />13<br />
  14. 14. Chrome Web Store – Distribution & Monetization<br />14<br />
  15. 15. Chrome Web Store – Chrome Integration<br />15<br />
  16. 16. Chrome Web Store<br />Discovery, Distribution and Monetization on the Web<br />16<br />Web Apps<br />120 million users<br />In-app payments coming soongoogle.com/checkout/inapp<br />… And Monetization<br />
  17. 17. The Browser is the Platform<br />ChromeOS<br />webOS<br />17<br />
  18. 18. Browser Technologies<br />18<br />
  19. 19. Canvas 2D<br />19<br />
  20. 20. Canvas 2D –Examples<br />20<br />
  21. 21. Canvas 2D – Overview<br />Mostly Sprites<br />Flash <br />Widely supported (mobile & desktop)<br />IE9 brings GPU performance<br />Javscript Shim Libraries run on old IE, e.g. ExplorerCanvas<br />GPU upgrades Hundreds to Thousands of Draws @30fps<br />Immediate Mode<br />Popular<br />21<br />
  22. 22. Canvas 2D – API<br />Primitives<br />rect, circle arcs, lines, bezier curves, text, images<br />Drawing<br />fill and stroke<br />Effects<br />shadows, gradients, image patterns, line styles, clipping, compositing operations<br />Transforms<br />rotate, scale, matrix transform (2x2 + translation)<br />22<br />Text<br />
  23. 23. Canvas 2D – Simple Sample<br /><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><br />23<br />
  24. 24. Canvas 2D – Fill and Stroke Sample<br />// Draw eyesctx.fillRect(160, 130, 20, 80);ctx.fillRect(220, 130, 20, 80);// Draw mouthctx.beginPath();ctx.moveTo(100, 230); // Start smilectx.bezierCurveTo(100, 230, 200, 380, 300, 230);ctx.moveTo(219, 298); // Start tonguectx.bezierCurveTo(278, 351, 315, 315, 277, 258);ctx.lineWidth = 20;ctx.stroke();<br />(adapted from IE9 sample)<br />24<br />
  25. 25. Canvas 2D – Availability<br />Chrome – Firefox – Safari: GO!<br />Internet Explorer: Soon in IE9<br />Mobile: GO!<br />25<br />- caniuse.com, Feb 2011 <br />
  26. 26. Scalable Vector Graphics<br />SVG<br />26<br />
  27. 27. SVG – Examples<br />27<br />
  28. 28. SVG – Overview<br />Vector markup language<br />Declarative or retainedprocedural API<br />Tools (Illustrator, Inkscape)<br />HTML5 Enables SVG Markup Inline with HTML<br />Retained API<br />GPU Acceleration Friendly - Retained data structures allow caching<br />Little Groundswell<br />Complex API? Retained?<br />28<br />
  29. 29. SVG – Sample<br /><!DOCTYPE html><html><body> <br /> <svg id=“mySVG”> <br /> <circle id="circle0" <br />cx="100" cy="75" r="50" <br /> fill="grey" <br /> stroke="black" <br /> stroke-width="5“<br />onmousedown="alert('clicked');"> <br /> <text x="60" y="155">Hello World</text> <br /> </svg><br />...<br />29<br />
  30. 30. SVG – Sample<br /> <script><br />var circle = document.createElementNS(<br /> "http://www.w3.org/2000/svg", "circle");<br />circle.setAttribute('cx', 90); <br />circle.setAttribute('cy', 90);<br />circle.setAttribute('r', 30);<br />circle.setAttribute('onmousedown', "alert('no, me!');");<br />document.getElementById("svg0").appendChild(circle);<br /> </script><br /></body></html><br />30<br />
  31. 31. SVG – Links<br />raphaeljs.com<br />Ease of use, charts, etc.<br />burst.bocoup.com<br />Renders SVG into Canvas 2D<br />31<br />
  32. 32. SVG – Availability<br />Chrome – Firefox – Safari: GO!<br />Internet Explorer: Soon in IE9<br />Mobile: iOS GO! – Android: No<br />32<br />- caniuse.com, Feb 2011 <br />
  33. 33. Canvas 3D<br />WebGL<br />33<br />
  34. 34. WebGL – Examples<br />34<br />
  35. 35. WebGL – Overview<br />Open GL ES 2<br />Textures, Framebuffers, Blending<br />Vertex and Fragment Shaders (GLSL)<br />Khronos group specification 1.0 Q1 2011<br />Matrix libraries come separately<br />What will Microsoft do?<br />35<br />
  36. 36. WebGL – Libraries<br />Many Higher Level Libraries<br />C3DL<br />Copperlicht<br />GLGE<br />O3D<br />Processing.js<br />SpiderGL<br />SceneJS<br />three.js<br />WebGLU<br />XB PointStream<br />36<br />
  37. 37. WebGL Inspector (Ben Vanik)<br />37<br />
  38. 38. WebGL – Sample Spinning Box<br />38<br />
  39. 39. WebGL – Sample Spinning Box<br /><script id="vshader" type="x-shader/x-vertex"> <br /> uniform mat4 u_modelViewProjMatrix;<br /> uniform mat4 u_normalMatrix;<br /> uniform vec3 lightDir;<br /> attribute vec3 vNormal;<br /> attribute vec4 vColor;<br /> attribute vec4 vPosition;<br /> varying float v_Dot; <br /> varying vec4 v_Color;<br /> void main() {<br />gl_Position = u_modelViewProjMatrix * vPosition;<br />v_Color = vColor;<br /> vec4 transNormal = u_normalMatrix * vec4(vNormal, 1);<br />v_Dot = max(dot(transNormal.xyz, lightDir), 0.0);<br />39<br />
  40. 40. WebGL – Sample Spinning Box<br /><script id="fshader" type="x-shader/x-fragment"> <br /> varying float v_Dot;<br /> varying vec4 v_Color;<br /> void main()<br /> {<br />gl_FragColor = vec4(v_Color.xyz * v_Dot, v_Color.a);<br /> }<br /></script><br />40<br />
  41. 41. WebGL – Sample Spinning Box<br />gl = canvas.getContext(“webgl”, args);<br />gl.createShader(shaderType);<br />gl.shaderSource(shader, shaderScript.text);<br />gl.compileShader(shader);<br />var colors = new Uint8Array( [ 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1,<br /> 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, <br /> //…<br />gl.box.colorObject = gl.createBuffer();<br />gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.colorObject);<br />gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);<br />//…<br />41<br />
  42. 42. WebGL – Sample Spinning Box<br />function drawPicture(gl) {<br />reshape(gl);<br />gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);<br />// Make a model/view matrix.<br />gl.mvMatrix.makeIdentity();<br />gl.mvMatrix.rotate(20, 1,0,0);<br />gl.mvMatrix.rotate(currentAngle, 0,1,0);<br />//…<br />gl.drawElements( gl.TRIANGLES, gl.box.numIndices, gl.UNSIGNED_BYTE, 0);<br />42<br />
  43. 43. WebGL – Demos<br />NinePointFive<br />Aquarium<br />Google Body<br />43<br />
  44. 44. WebGL – Availability<br />Chrome – Firefox – Safari: Chrome Shipped. Soon in FF4 & Safari<br />Internet Explorer: No<br />Mobile: Waiting on Firefox 4, other browsers in progress.<br />44<br />- caniuse.com, Feb 2011 <br />
  45. 45. aka – your render loop<br />requestAnimationFrame<br />45<br />
  46. 46. requestAnimationFrame – Overview<br />Status Quo: Draw, Draw, Draw, Blindly! <br />setInterval(draw, 16)<br />Browser Calls You (FireFox Beta 4, Chrome 10)<br />function draw() {<br /> //... Do Drawing Work, then ask to called again:<br />window.requestAnimationFrame(draw);<br />}<br />// kick off first frame:<br />window.requestAnimationFrame(draw);<br />46<br />setInterval(draw, 16)<br />setInterval(draw, 16)<br />setInterval(draw, 16)<br />setInterval(draw, 16)<br />setInterval(draw, 16)<br />setInterval(draw, 16)<br />setInterval(draw, 16)<br />setInterval(draw, 16)<br />
  47. 47. requestAnimationFrame – Availability<br />Chrome – Firefox – Safari: Soon in Chrome 10, FF4<br />Use a Shim, future compatible:// shim layer with setTimeout fallback – Paul Irish<br />window.requestAnimFrame = (function(){<br /> return window.requestAnimationFrame || <br />window.webkitRequestAnimationFrame || <br />window.mozRequestAnimationFrame || <br />window.oRequestAnimationFrame || <br />window.msRequestAnimationFrame || <br /> function(/* function */ callback, /* DOMElement */ element){<br />window.setTimeout(callback, 1000 / 60);<br /> };<br />})();<br />47<br />
  48. 48. Cascading Style Sheets – 3D Transformations<br />CSS 3D<br />48<br />
  49. 49. CSS 3D – Examples<br />CSS3D<br />49<br />
  50. 50. CSS 3D – Overview<br />Add 3D to Any Web Content<br />Helps make cool HUD<br />50<br />
  51. 51. CSS 3D – Sample<br /><!DOCTYPE html><html><body> <br /><div style="-webkit-perspective: 400;"><br /><iframe<br />src="http://www.gdconf.com/" width = 1024 height = 768<br /> style="-webkit-transform: rotate3d(1,0,0, 15deg)"><br /></iframe><br /></div><br /></body></html><br />51<br />
  52. 52. CSS 3D – Availability<br />Chrome – Firefox – Safari: Soon in Chrome, FF No, Safari GO!<br />Internet Explorer: No<br />Mobile: iOS GO! – Android: No<br />52<br />- caniuse.com, Feb 2011 <br />
  53. 53. Web Fonts<br />53<br />
  54. 54. Web Fonts – Overview<br />Game UI via HTML<br />Serve Custom Fonts<br />Easy Google Fonts API<br /><link href='http://fonts…?family=Chewy‘rel='stylesheet' type='text/css'><br />In CSS:<br />h1 { font-family: 'Chewy', arial, serif; }<br />54<br />
  55. 55. Web Fonts – Availability<br />Chrome – Firefox – Safari: GO!<br />Internet Explorer: Best in IE9<br />Mobile: Mostly… <br />55<br />- caniuse.com, Feb 2011 <br />
  56. 56. <audio><br />56<br />
  57. 57. <audio> – Overview<br />Tags in HTML, or created by javascript<br />57<br />
  58. 58. <audio> – Sample <br />var audio = new Audio();<br />audio.addEventListener("canplaythrough", function () { audio.play(); });<br />audio.src = “treasure.ogg”;<br />58<br />
  59. 59. <audio> – Issues<br />iOS >= 4 – only one sample at a time<br />No one codec supported by all browsers. <br />Pick 2 from: MP3, Vorbis, WAV<br />detect suitability before loading, with e.g. new Audio().canPlayType(“audio/ogg”);<br />59<br />
  60. 60. <audio> – Future1<br />FireFox Audio Data API supports Read/Write samples<br />var output = new Audio();<br />output.mozSetup(1, 44100);<br />var samples = new Float32Array(22050);<br />varlen = samples.length;<br /> for (vari = 0; i < samples.length ; i++) {<br /> samples[i] = Math.sin( i / 20 );<br /> }<br />output.mozWriteAudio(samples);<br />60<br />
  61. 61. <audio> – Future2<br />Web Audio API<br />Node graph<br />Low latency<br />Spatialization, 3d<br />Reverb<br />Native implementation performance<br />61<br />
  62. 62. <audio> – Links<br />SoundManager 2<br />Flash fallback<br />www.schillmania.com/projects/soundmanager2<br />62<br />
  63. 63. <audio> – Availability<br />Chrome – Firefox – Safari: GO!<br />Internet Explorer: Soon in IE9<br />Mobile: (With limits)<br />63<br />- caniuse.com, Feb 2011 <br />
  64. 64. <video><br />64<br />
  65. 65. <video> – Overview<br />Source for textures in <canvas> 2D or WebGLvideoElement.play(); <br />videoElement.addEventListener("timeupdate",updateTexture, true); <br /> function updateTexture() { <br />gl.bindTexture(gl.TEXTURE_2D, cubeTexture); <br /> gl.texImage2D(gl.TEXTURE_2D, 0, videoElement, true); <br />gl.generateMipmap(gl.TEXTURE_2D);<br /> }<br />Demo<br />65<br />
  66. 66. <video> – Availability<br />Chrome – Firefox – Safari: GO!<br />Internet Explorer: Soon in IE9<br />Mobile: GO!<br />66<br />- caniuse.com, Feb 2011 <br />
  67. 67. WebSockets<br />67<br />
  68. 68. WebSockets – Overview<br />Low latency, persistent, full duplex <br />Upgrades from HTTP handshake<br />UTF8<br />Simple<br />var socket = new WebSocket(“ws://server.com”);<br />socket.onopen = function(event) { socket.send(“Hello Server”); }<br />socket.onmessage = function(event) { <br />alert(“Server says: “ + event.data);<br />68<br />
  69. 69. WebSockets - Future<br />FireFox and Opera Behind Flag<br />Standard for protocol upgrade<br />Binary<br />Peer to Peer<br />Unreliable (vs TCP)<br />69<br />
  70. 70. WebSockets – Links<br />socket.io<br />Higher level library<br />Transport on WebSockets, Flash, Ajax, …<br />github.com/gimite/web-socket-js<br />Shim implementation on top of Flash<br />70<br />
  71. 71. Web Sockets – Availability<br />Chrome – Firefox – Safari: Yes, Still Stabilizing, Some Behind a Flag<br />Internet Explorer: In HTML5 Labs<br />Mobile: iOS Stabilizing, Android?<br />71<br />- caniuse.com, Feb 2011 <br />
  72. 72. Javascript on your Server<br />Node.JS<br />72<br />
  73. 73. Node.JS – Overview<br />Ease of Same Language and Client & Server<br />Simple, lots of uptake<br />Tools / Plugins<br />WebSockets, manage connections, render server side, just lots...<br />Visual Debugger<br />73<br />
  74. 74. GeoLocation<br />74<br />
  75. 75. GeoLocation – Sample<br />Mobile, and Desktops too<br />navigator.geolocation.getCurrentPosition( <br /> function (location) {<br />doSomething(location.coords.latitude, location.coords.longitude); });<br />75<br />
  76. 76. GeoLocation – Availability<br />Chrome – Firefox – Safari: GO!<br />Internet Explorer: Soon in IE9<br />Mobile: GO!<br />76<br />- caniuse.com, Feb 2011 <br />
  77. 77. DeviceOrientationDeviceMotionEvent<br />77<br />
  78. 78. DeviceOrientation – Overview<br />iOS >= 4.2<br />Chrome on Mac<br />78<br />
  79. 79. DeviceOrientation – Sample<br />window.addEventListener("devicemotion", function(event) {<br /> // event.acceleration, // event.accelerationIncludingGravity,<br /> // event.rotationRate,<br /> // event.interval<br /> }, true);<br />79<br />
  80. 80. DeviceOrientation – Availability<br />Chrome – Firefox – Safari: Yes, but not on all devices<br />Internet Explorer: ?<br />Mobile: Only iOS >= 4.2<br />80<br />
  81. 81. Some options…<br />Saving Data on the Client<br />81<br />
  82. 82. 82<br />
  83. 83. Web Storage – Overview<br />Local Storage & Session Storage<br />5MB of key value pair strings<br />localStorage["levels-unlocked"] = 5 // or .getItem() / .setItem()<br />localStorage.removeItem()<br />localStorage.clear(); // Dump everything<br />Widely supported<br />Non Transactional<br />No good recourse if over limit<br />83<br />
  84. 84. Web Storage – Availability<br />Chrome – Firefox – Safari: GO!<br />Internet Explorer: GO!<br />Mobile: GO!<br />84<br />- caniuse.com, Feb 2011 <br />
  85. 85. File API: Directories & Systems – Availability<br />Chrome: Yes for Apps and Extensions<br />Firefox – Safari: No<br />Internet Explorer: No<br />Mobile: No<br />85<br />
  86. 86. Application Cache – Overview<br />Cache HTML pages and Resources<br />Manifest File<br /> CACHE MANIFEST<br /> index.html<br /> stylesheet.css<br /> images/logo.png<br /> scripts/main.js<br />86<br />
  87. 87. Application Cache – Availability<br />Chrome – Firefox – Safari: GO!<br />Internet Explorer: No<br />Mobile: GO!<br />87<br />- caniuse.com, Feb 2011 <br />
  88. 88. window.navigator.onLinedocument.body.addEventListener(“online”, callback);<br />Offline<br />88<br />
  89. 89. Multithreading Javascript<br />Web Workers<br />89<br />
  90. 90. Web Workers – Sample<br />html5rocks.com/tutorials/workers/basics/<br />main.js (main thread):<br />var worker = new Worker('doWork.js');<br />worker.addEventListener('message', <br /> function(e) { console.log('Worker said: ', e.data); }, false);<br />worker.postMessage('Hello World'); // Send data to our worker.<br />doWork.js (the worker):<br />self.addEventListener('message', function(e) {<br />self.postMessage(e.data + “? ” + e.data + “!”); }, false);<br />// Output “Worker said: Hello World? Hello World!”<br />90<br />
  91. 91. Web Workers – Availability<br />Chrome – Firefox – Safari: GO!<br />Internet Explorer: No<br />Mobile: No<br />91<br />- caniuse.com, Feb 2011 <br />
  92. 92. C++ for your web app<br />Native Client<br />92<br />
  93. 93. Native Client – Overview<br />Machine Code Served to Browser<br />C/C++, Mono(C#), others<br />NoPlugins<br />Legacy C++ Codebase in your Web App<br />Performance<br />Cross Platform<br />93<br />A Web Page<br />Full of text, lots of interesting stuff, links, blah blah. Don’t read all the links, all this text.<br />JS<br />A Web Page<br />Full of text, lots of interesting stuff, links, blah blah. Don’t read all the links, all this text.<br />C++<br />
  94. 94. Native Client – Security<br />Static analysis & Sandboxing<br />Restricted instructions<br />Isolate code<br />Custom Toolchain<br />94<br />Browser<br />NaCl<br />v8<br />JS<br />C++<br />Browser<br />Plugin<br />Operating System<br />Operating System<br />
  95. 95. Native Client – Availability<br />Chrome: Behind flag<br />Open Source<br />95<br />
  96. 96. How much time is left?<br />Whew<br />96<br />
  97. 97. GPU Acceleration<br />Chrome 9<br />WebGL shipped February 3rd<br />Chrome Developer & Canary<br />Video, 3D CSS, Canvas 2D, Compositing<br />Firefox 4 Beta<br />WebGL, Video, 2D CSS, Canvas 2D, SVG, Compositing<br />IE 9 Beta<br />“all graphics and text rendering”<br />97<br />
  98. 98. Benchmarks Needed<br />JSGameBench, Facebook<br />“over 125 million people visit Facebook using HTML5 capable browsers just from their mobile phone”<br />Sprite performance, options (WebGL, <canvas>, <img>, <div>, …)<br />1000-4000 @30fps on GPU<br />50-200 mid range desktops<br />20-30 iOS & Android<br />98<br />
  99. 99. Libraries<br />Canvas 2D<br />ImpactJS, Akihabara<br />WebGL<br />GLGE, C3DL, Copperlicht, SpiderGL, SceneJS, O3D, Processing.js and XB PointStream, WebGLU<br />Document Object Model (DOM)<br />Rocket Engine, Zynga Germany (was Aves Engine)<br />Physics<br />Box2DWeb, Jiglib 3D<br />99<br />
  100. 100. What’s Missing<br />Mouse Capture<br />Gamepads<br />Audio input<br />Webcam input<br />100<br />
  101. 101. More! At GDC<br />Google Sessions Today and Tomorrow<br />Cloud Services, WebGL, Native Client, YouTube APIs<br />Android AndroidAndroidAndroidAndroid<br />Google Booth<br />Sketchup,Web Store, WebGL Native Client, AppEngine, Android<br />Other HTML5 Sessions<br />WebGL News and Technology Updates (Khronos), Thursday<br />Getting Your Games onto the BlackBerry PlayBook Tablet, Thursday<br />HTML5: The New UI Library for Games, Friday<br />101<br />
  102. 102. Thanks<br />Alexis Deveria, caniuse.com feature tables<br />Athena's Pix [flickr], overview image<br />Chris Pruett<br />Daniel Galpin<br />Darius Kazemi<br />Geoff Blair<br />Gregg Tavares<br />Mark DeLoura<br />Mark Pilgrim (diveintohtml5.org)<br />Matt Hackett<br />102<br />
  103. 103. Q&A<br />103<br />code.google.com/games<br />@GoogleGameDev<br />

×