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

Weitere ähnliche Inhalte

Was ist angesagt?

Creating GUI container components in Angular and Web Components
Creating GUI container components in Angular and Web ComponentsCreating GUI container components in Angular and Web Components
Creating GUI container components in Angular and Web ComponentsRachael L Moore
 
Front End Development: The Important Parts
Front End Development: The Important PartsFront End Development: The Important Parts
Front End Development: The Important PartsSergey Bolshchikov
 
Building Rich Internet Applications with HTML5 and WebGL
Building Rich Internet Applications with HTML5 and WebGLBuilding Rich Internet Applications with HTML5 and WebGL
Building Rich Internet Applications with HTML5 and WebGLTony Parisi
 
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJRealize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJLeonardo Balter
 
Web Projects: From Theory To Practice
Web Projects: From Theory To PracticeWeb Projects: From Theory To Practice
Web Projects: From Theory To PracticeSergey Bolshchikov
 
I Can't Believe It's Not Flash
I Can't Believe It's Not FlashI Can't Believe It's Not Flash
I Can't Believe It's Not FlashThomas Fuchs
 
Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)Remy Sharp
 
Developing Web Graphics with WebGL
Developing Web Graphics with WebGLDeveloping Web Graphics with WebGL
Developing Web Graphics with WebGLTony Parisi
 
Scalable vector ember
Scalable vector emberScalable vector ember
Scalable vector emberMatthew Beale
 
JavaScript Advanced - Useful methods to power up your code
JavaScript Advanced - Useful methods to power up your codeJavaScript Advanced - Useful methods to power up your code
JavaScript Advanced - Useful methods to power up your codeLaurence Svekis ✔
 
What Web Developers Need to Know to Develop Windows 8 Apps
What Web Developers Need to Know to Develop Windows 8 AppsWhat Web Developers Need to Know to Develop Windows 8 Apps
What Web Developers Need to Know to Develop Windows 8 AppsDoris Chen
 
Reactive Type-safe WebComponents
Reactive Type-safe WebComponentsReactive Type-safe WebComponents
Reactive Type-safe WebComponentsMartin Hochel
 
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]Aaron Gustafson
 
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)Carles Farré
 
WordCamp ABQ 2013: Making the leap from Designer to Designer/Developer
WordCamp ABQ 2013: Making the leap from Designer to Designer/DeveloperWordCamp ABQ 2013: Making the leap from Designer to Designer/Developer
WordCamp ABQ 2013: Making the leap from Designer to Designer/Developermy easel
 

Was ist angesagt? (20)

Creating GUI container components in Angular and Web Components
Creating GUI container components in Angular and Web ComponentsCreating GUI container components in Angular and Web Components
Creating GUI container components in Angular and Web Components
 
Front End Development: The Important Parts
Front End Development: The Important PartsFront End Development: The Important Parts
Front End Development: The Important Parts
 
Building Rich Internet Applications with HTML5 and WebGL
Building Rich Internet Applications with HTML5 and WebGLBuilding Rich Internet Applications with HTML5 and WebGL
Building Rich Internet Applications with HTML5 and WebGL
 
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJRealize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
 
Web Projects: From Theory To Practice
Web Projects: From Theory To PracticeWeb Projects: From Theory To Practice
Web Projects: From Theory To Practice
 
I Can't Believe It's Not Flash
I Can't Believe It's Not FlashI Can't Believe It's Not Flash
I Can't Believe It's Not Flash
 
Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)
 
Developing Web Graphics with WebGL
Developing Web Graphics with WebGLDeveloping Web Graphics with WebGL
Developing Web Graphics with WebGL
 
Scalable vector ember
Scalable vector emberScalable vector ember
Scalable vector ember
 
JavaScript Advanced - Useful methods to power up your code
JavaScript Advanced - Useful methods to power up your codeJavaScript Advanced - Useful methods to power up your code
JavaScript Advanced - Useful methods to power up your code
 
Hardboiled Web Design
Hardboiled Web DesignHardboiled Web Design
Hardboiled Web Design
 
The Devil and HTML5
The Devil and HTML5The Devil and HTML5
The Devil and HTML5
 
Html5 intro
Html5 introHtml5 intro
Html5 intro
 
What Web Developers Need to Know to Develop Windows 8 Apps
What Web Developers Need to Know to Develop Windows 8 AppsWhat Web Developers Need to Know to Develop Windows 8 Apps
What Web Developers Need to Know to Develop Windows 8 Apps
 
Reactive Type-safe WebComponents
Reactive Type-safe WebComponentsReactive Type-safe WebComponents
Reactive Type-safe WebComponents
 
jQuery UI and Plugins
jQuery UI and PluginsjQuery UI and Plugins
jQuery UI and Plugins
 
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]
 
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)
 
Html5
Html5Html5
Html5
 
WordCamp ABQ 2013: Making the leap from Designer to Designer/Developer
WordCamp ABQ 2013: Making the leap from Designer to Designer/DeveloperWordCamp ABQ 2013: Making the leap from Designer to Designer/Developer
WordCamp ABQ 2013: Making the leap from Designer to Designer/Developer
 

Andere mochten auch

Do More With Message Queue
Do More With Message QueueDo More With Message Queue
Do More With Message QueueHean Hong Leong
 
The Art of Message Queues - TEKX
The Art of Message Queues - TEKXThe Art of Message Queues - TEKX
The Art of Message Queues - TEKXMike Willbanks
 
WTF Is Messaging And Why You Should Use It?
WTF Is Messaging And Why You Should Use It?WTF Is Messaging And Why You Should Use It?
WTF Is Messaging And Why You Should Use It?James Russell
 
Martin sustrik future_of_messaging
Martin sustrik future_of_messagingMartin sustrik future_of_messaging
Martin sustrik future_of_messagingSkills Matter Talks
 

Andere mochten auch (6)

Message Broker System and RabbitMQ
Message Broker System and RabbitMQMessage Broker System and RabbitMQ
Message Broker System and RabbitMQ
 
Do More With Message Queue
Do More With Message QueueDo More With Message Queue
Do More With Message Queue
 
The Art of Message Queues - TEKX
The Art of Message Queues - TEKXThe Art of Message Queues - TEKX
The Art of Message Queues - TEKX
 
Message queueing
Message queueingMessage queueing
Message queueing
 
WTF Is Messaging And Why You Should Use It?
WTF Is Messaging And Why You Should Use It?WTF Is Messaging And Why You Should Use It?
WTF Is Messaging And Why You Should Use It?
 
Martin sustrik future_of_messaging
Martin sustrik future_of_messagingMartin sustrik future_of_messaging
Martin sustrik future_of_messaging
 

Ähnlich wie HTML5 and Other Modern Browser Game Tech

Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?Patrick Chanezon
 
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET DevelopersAccelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET DevelopersTodd Anglin
 
JavaOne 2009 - 2d Vector Graphics in the browser with Canvas and SVG
JavaOne 2009 -  2d Vector Graphics in the browser with Canvas and SVGJavaOne 2009 -  2d Vector Graphics in the browser with Canvas and SVG
JavaOne 2009 - 2d Vector Graphics in the browser with Canvas and SVGPatrick Chanezon
 
Mobile Java with GWT: Still "Write Once, Run Everywhere"
Mobile Java with GWT: Still "Write Once, Run Everywhere"Mobile Java with GWT: Still "Write Once, Run Everywhere"
Mobile Java with GWT: Still "Write Once, Run Everywhere"Alex Theedom
 
IE 8 et les standards du Web - Chris Wilson - Paris Web 2008
IE 8 et les standards du Web - Chris Wilson - Paris Web 2008IE 8 et les standards du Web - Chris Wilson - Paris Web 2008
IE 8 et les standards du Web - Chris Wilson - Paris Web 2008Association Paris-Web
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Sadaaki HIRAI
 
JavaScript 2.0 in Dreamweaver CS4
JavaScript 2.0 in Dreamweaver CS4JavaScript 2.0 in Dreamweaver CS4
JavaScript 2.0 in Dreamweaver CS4alexsaves
 
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at GoogleWeb Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at GoogleEstelle Weyl
 
Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0Estelle Weyl
 
Analyzing the Performance of Mobile Web
Analyzing the Performance of Mobile WebAnalyzing the Performance of Mobile Web
Analyzing the Performance of Mobile WebAriya Hidayat
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるSadaaki HIRAI
 
Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Adam Lu
 
Sergey Ilinsky Presentation Ample Sdk
Sergey Ilinsky Presentation Ample SdkSergey Ilinsky Presentation Ample Sdk
Sergey Ilinsky Presentation Ample SdkAjax Experience 2009
 
Academy PRO: HTML5 API graphics
Academy PRO: HTML5 API graphicsAcademy PRO: HTML5 API graphics
Academy PRO: HTML5 API graphicsBinary Studio
 
HTML5 Introduction
HTML5 IntroductionHTML5 Introduction
HTML5 Introductionbeforeach
 
Five Pound App talk: hereit.is, Web app architecture, REST, CSS3
Five Pound App talk: hereit.is, Web app architecture, REST, CSS3Five Pound App talk: hereit.is, Web app architecture, REST, CSS3
Five Pound App talk: hereit.is, Web app architecture, REST, CSS3Jamie Matthews
 
WebGL, HTML5 and How the Mobile Web Was Won
WebGL, HTML5 and How the Mobile Web Was WonWebGL, HTML5 and How the Mobile Web Was Won
WebGL, HTML5 and How the Mobile Web Was WonTony Parisi
 

Ähnlich wie HTML5 and Other Modern Browser Game Tech (20)

Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?
 
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET DevelopersAccelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
 
JavaOne 2009 - 2d Vector Graphics in the browser with Canvas and SVG
JavaOne 2009 -  2d Vector Graphics in the browser with Canvas and SVGJavaOne 2009 -  2d Vector Graphics in the browser with Canvas and SVG
JavaOne 2009 - 2d Vector Graphics in the browser with Canvas and SVG
 
Mobile Java with GWT: Still "Write Once, Run Everywhere"
Mobile Java with GWT: Still "Write Once, Run Everywhere"Mobile Java with GWT: Still "Write Once, Run Everywhere"
Mobile Java with GWT: Still "Write Once, Run Everywhere"
 
GWT Extreme!
GWT Extreme!GWT Extreme!
GWT Extreme!
 
IE 8 et les standards du Web - Chris Wilson - Paris Web 2008
IE 8 et les standards du Web - Chris Wilson - Paris Web 2008IE 8 et les standards du Web - Chris Wilson - Paris Web 2008
IE 8 et les standards du Web - Chris Wilson - Paris Web 2008
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
 
JavaScript 2.0 in Dreamweaver CS4
JavaScript 2.0 in Dreamweaver CS4JavaScript 2.0 in Dreamweaver CS4
JavaScript 2.0 in Dreamweaver CS4
 
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at GoogleWeb Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
 
Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0
 
Analyzing the Performance of Mobile Web
Analyzing the Performance of Mobile WebAnalyzing the Performance of Mobile Web
Analyzing the Performance of Mobile Web
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
 
Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)
 
WebGL Awesomeness
WebGL AwesomenessWebGL Awesomeness
WebGL Awesomeness
 
Sergey Ilinsky Presentation Ample Sdk
Sergey Ilinsky Presentation Ample SdkSergey Ilinsky Presentation Ample Sdk
Sergey Ilinsky Presentation Ample Sdk
 
Academy PRO: HTML5 API graphics
Academy PRO: HTML5 API graphicsAcademy PRO: HTML5 API graphics
Academy PRO: HTML5 API graphics
 
HTML5 Introduction
HTML5 IntroductionHTML5 Introduction
HTML5 Introduction
 
Shifting Gears
Shifting GearsShifting Gears
Shifting Gears
 
Five Pound App talk: hereit.is, Web app architecture, REST, CSS3
Five Pound App talk: hereit.is, Web app architecture, REST, CSS3Five Pound App talk: hereit.is, Web app architecture, REST, CSS3
Five Pound App talk: hereit.is, Web app architecture, REST, CSS3
 
WebGL, HTML5 and How the Mobile Web Was Won
WebGL, HTML5 and How the Mobile Web Was WonWebGL, HTML5 and How the Mobile Web Was Won
WebGL, HTML5 and How the Mobile Web Was Won
 

Kürzlich hochgeladen

Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServiceRenan Moreira de Oliveira
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.francesco barbera
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataSafe Software
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxYounusS2
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 

Kürzlich hochgeladen (20)

Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptx
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 

HTML5 and Other Modern Browser Game Tech

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.
  • 100.
  • 101.
  • 102.
  • 103.

Hinweis der Redaktion

  1. - 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
  2. - No Flash on iOS browser- Security an issue with plugins
  3. - Important metric is how many users will play, if a plugin is installed already or not
  4. -Plugins worst – full permission for any web page
  5. -Lots of options on desktop-iOS limited!-Webkit on several
  6. -WebKit over 50%-HTML5 support pervasive
  7. -WebKit over 50%-HTML5 support pervasive
  8. - Android allows C++/Java from JS- Rich input if correct forms used- Android has simple touch, iOSmultitouch
  9. 120M Chrome users
  10. - Synced between browsers- Easy offline- Permissions cleared at “install” time
  11. 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
  12. - 2D context, widely supported (IE9)- Procedural images- Dynamic OK, but not designed specifically for “animated frames”
  13. -Simple 2D- Physics- Shooters (typing shooter) “Z-type”-Retro Sprite “Onslaught”- MMO Scrabble “Word Squared”-3D (mostly flat, though textured possible to)
  14. -DrawImage takes Sub Regions as well
  15. - Implementations around for 5 years, standard started 10 years ago
  16. -EXTERNAL Javascript tool-Capturevis HUD-Step Draw Calls-State-Texture state-Texture Browser-Shader programs, view parameters-View shaders-View data buffers as well
  17. -Optional to use Google API, but easy
  18. -Larger API
  19. -Larger API
  20. -Editor’s Draft
  21. -W3C Editors Draft of Spec
  22. -3 component accelerations, rotations-interval in milliseconds
  23. -Session storage clears at end of session
  24. -HTML5
  25. -Copies message data between processes-No DOM access
  26. -Plugins have full access to OS-JS safely sandboxed, browser offers security-NaCl does the same for C++