HTML5 and Other Modern Browser Game Tech

HTML5 and other Modern Browser Game Tech Vincent Scheib Software Engineer, Chrome GPU team February 28, 2011 1

This is an Overview Overview & Motivation Browsers, Platforms Technology Survey Graphics, Audio, Networking, Storage… Libraries, Benchmarks 2

My Perspective on the Last Decade & Web Tech 4 GPU Acceleration C++ in Browser Chrome OS

April 1 2010 – Quake II in HTML5 Ray Cromwell, Stefan Haustein, Joel Webber – Google - WebGL, canvas - Web Sockets - Local Storage - Audio Chrome & Safari 5

No Plugins 6 Not discussing: Flash, Java, Silverlight, Unity

Plugin Use / Installation% of Chrome Users 7 iOS * Data from users opting in to reporting usage statistics, 2010

Low Friction, Better Security 8

Browser Trends 10 IE Firefox Chrome

Mobile Trends Opera iPhone Nokia BlackBerry Android 11

Mobile Trends iPhone Android Nokia BlackBerry Opera iPhone Nokia BlackBerry Android 12

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

Chrome Web Store – Distribution & Monetization 14

Chrome Web Store – Chrome Integration 15

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

The Browser is the Platform ChromeOS webOS 17

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

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

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

Canvas 2D – Fill and Stroke Sample // 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(); (adapted from IE9 sample) 24

Canvas 2D – Availability Chrome – Firefox – Safari: GO! Internet Explorer: Soon in IE9 Mobile: GO! 25 - caniuse.com, Feb 2011

Scalable Vector Graphics SVG 26

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

SVG – Sample <!DOCTYPE html><html><body> <svg id=“mySVG”> <circle id="circle0" cx="100" cy="75" r="50" fill="grey" stroke="black" stroke-width="5“ onmousedown="alert('clicked');"gt; <text x="60" y="155">Hello World</text> </svg> ... 29

SVG – Sample <script> var circle = document.createElementNS( "http://www.w3.org/2000/svg", "circle"); circle.setAttribute('cx', 90); circle.setAttribute('cy', 90); circle.setAttribute('r', 30); circle.setAttribute('onmousedown', "alert('no, me!');"); document.getElementById("svg0").appendChild(circle); </script> </body></html> 30

SVG – Links raphaeljs.com Ease of use, charts, etc. burst.bocoup.com Renders SVG into Canvas 2D 31

SVG – Availability Chrome – Firefox – Safari: GO! Internet Explorer: Soon in IE9 Mobile: iOS GO! – Android: No 32 - caniuse.com, Feb 2011

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

WebGL – Libraries Many Higher Level Libraries C3DL Copperlicht GLGE O3D Processing.js SpiderGL SceneJS three.js WebGLU XB PointStream 36

WebGL Inspector (Ben Vanik) 37

WebGL – Sample Spinning Box 38

WebGL – Sample Spinning Box <script id="vshader" type="x-shader/x-vertex"> uniform mat4 u_modelViewProjMatrix; uniform mat4 u_normalMatrix; uniform vec3 lightDir; attribute vec3 vNormal; attribute vec4 vColor; attribute vec4 vPosition; varying float v_Dot; varying vec4 v_Color; void main() { gl_Position = u_modelViewProjMatrix * vPosition; v_Color = vColor; vec4 transNormal = u_normalMatrix * vec4(vNormal, 1); v_Dot = max(dot(transNormal.xyz, lightDir), 0.0); 39

WebGL – Sample Spinning Box <script id="fshader" type="x-shader/x-fragment"> varying float v_Dot; varying vec4 v_Color; void main() { gl_FragColor = vec4(v_Color.xyz * v_Dot, v_Color.a); } </script> 40

WebGL – Sample Spinning Box gl = canvas.getContext(“webgl”, args); gl.createShader(shaderType); gl.shaderSource(shader, shaderScript.text); gl.compileShader(shader); var colors = new Uint8Array( [ 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, //… gl.box.colorObject = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.colorObject); gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW); //… 41

WebGL – Sample Spinning Box function drawPicture(gl) { reshape(gl); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // Make a model/view matrix. gl.mvMatrix.makeIdentity(); gl.mvMatrix.rotate(20, 1,0,0); gl.mvMatrix.rotate(currentAngle, 0,1,0); //… gl.drawElements( gl.TRIANGLES, gl.box.numIndices, gl.UNSIGNED_BYTE, 0); 42

WebGL – Demos NinePointFive Aquarium Google Body 43

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

aka – your render loop requestAnimationFrame 45

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)

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

Cascading Style Sheets – 3D Transformations CSS 3D 48

CSS 3D – Overview Add 3D to Any Web Content Helps make cool HUD 50

CSS 3D – Sample <!DOCTYPE html><html><body> <div style="-webkit-perspective: 400;"> <iframe src="http://www.gdconf.com/" width = 1024 height = 768 style="-webkit-transform: rotate3d(1,0,0, 15deg)"> </iframe> </div> </body></html> 51

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

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

Web Fonts – Availability Chrome – Firefox – Safari: GO! Internet Explorer: Best in IE9 Mobile: Mostly… 55 - caniuse.com, Feb 2011

<audio> – Overview Tags in HTML, or created by javascript 57

<audio> – Sample var audio = new Audio(); audio.addEventListener("canplaythrough", function () { audio.play(); }); audio.src = “treasure.ogg”; 58

<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

<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

<audio> – Future2 Web Audio API Node graph Low latency Spatialization, 3d Reverb Native implementation performance 61

<audio> – Links SoundManager 2 Flash fallback www.schillmania.com/projects/soundmanager2 62

<audio> – Availability Chrome – Firefox – Safari: GO! Internet Explorer: Soon in IE9 Mobile: (With limits) 63 - caniuse.com, Feb 2011

<video> – Overview Source for textures in <canvas> 2D or WebGLvideoElement.play(); videoElement.addEventListener("timeupdate",updateTexture, true); function updateTexture() { gl.bindTexture(gl.TEXTURE_2D, cubeTexture); gl.texImage2D(gl.TEXTURE_2D, 0, videoElement, true); gl.generateMipmap(gl.TEXTURE_2D); } Demo 65

<video> – Availability Chrome – Firefox – Safari: GO! Internet Explorer: Soon in IE9 Mobile: GO! 66 - caniuse.com, Feb 2011

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

WebSockets - Future FireFox and Opera Behind Flag Standard for protocol upgrade Binary Peer to Peer Unreliable (vs TCP) 69

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

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

Javascript on your Server Node.JS 72

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

GeoLocation – Sample Mobile, and Desktops too navigator.geolocation.getCurrentPosition( function (location) { doSomething(location.coords.latitude, location.coords.longitude); }); 75

GeoLocation – Availability Chrome – Firefox – Safari: GO! Internet Explorer: Soon in IE9 Mobile: GO! 76 - caniuse.com, Feb 2011

DeviceOrientationDeviceMotionEvent 77

DeviceOrientation – Overview iOS >= 4.2 Chrome on Mac 78

DeviceOrientation – Sample window.addEventListener("devicemotion", function(event) { // event.acceleration, // event.accelerationIncludingGravity, // event.rotationRate, // event.interval }, true); 79

DeviceOrientation – Availability Chrome – Firefox – Safari: Yes, but not on all devices Internet Explorer: ? Mobile: Only iOS >= 4.2 80

Some options… Saving Data on the Client 81

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

Web Storage – Availability Chrome – Firefox – Safari: GO! Internet Explorer: GO! Mobile: GO! 84 - caniuse.com, Feb 2011

File API: Directories & Systems – Availability Chrome: Yes for Apps and Extensions Firefox – Safari: No Internet Explorer: No Mobile: No 85

Application Cache – Overview Cache HTML pages and Resources Manifest File CACHE MANIFEST index.html stylesheet.css images/logo.png scripts/main.js 86

Application Cache – Availability Chrome – Firefox – Safari: GO! Internet Explorer: No Mobile: GO! 87 - caniuse.com, Feb 2011

window.navigator.onLinedocument.body.addEventListener(“online”, callback); Offline 88

Multithreading Javascript Web Workers 89

Web Workers – Sample html5rocks.com/tutorials/workers/basics/ main.js (main thread): var worker = new Worker('doWork.js'); worker.addEventListener('message', function(e) { console.log('Worker said: ', e.data); }, false); worker.postMessage('Hello World'); // Send data to our worker. doWork.js (the worker): self.addEventListener('message', function(e) { self.postMessage(e.data + “? ” + e.data + “!”); }, false); // Output “Worker said: Hello World? Hello World!” 90

Web Workers – Availability Chrome – Firefox – Safari: GO! Internet Explorer: No Mobile: No 91 - caniuse.com, Feb 2011

C++ for your web app Native Client 92

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++

Native Client – Security Static analysis & Sandboxing Restricted instructions Isolate code Custom Toolchain 94 Browser NaCl v8 JS C++ Browser Plugin Operating System Operating System

Native Client – Availability Chrome: Behind flag Open Source 95

How much time is left? Whew 96

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

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

Libraries Canvas 2D ImpactJS, Akihabara WebGL GLGE, C3DL, Copperlicht, SpiderGL, SceneJS, O3D, Processing.js and XB PointStream, WebGLU Document Object Model (DOM) Rocket Engine, Zynga Germany (was Aves Engine) Physics Box2DWeb, Jiglib 3D 99

What’s Missing Mouse Capture Gamepads Audio input Webcam input 100

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

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

Q&A 103 code.google.com/games @GoogleGameDev

HTML5 and Other Modern Browser Game Tech

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (6)

Semelhante a HTML5 and Other Modern Browser Game Tech

Semelhante a HTML5 and Other Modern Browser Game Tech (20)

Último

Último (20)

HTML5 and Other Modern Browser Game Tech

Notas do Editor