The Bleeding Edge of Open Web Tech
Vincent Scheib http://scheib.net, Blog, Google+, Twitter.
Game Developers Conference, March 2012
Social and Online Games Summit / 60-Minute / Lecture / All
Web browsers from mobile to desktop devices are in a constant state of growth enabling ever richer and pervasive games. This presentation by Google software engineer Vincent Scheib focuses on the latest developments in client side web technologies, such as Web Sockets, WebGL, File API, Mouse Lock, Gamepads, Web Audio API and more.
TAKEAWAY: Attendees head back to R&D with awareness of new technologies, their state of development, and examples of their use in both shipping games and early tech demos.
This document: http://goo.gl/RbJOX
Video: http://www.youtube.com/watch?v=_adMEEAtDwE
Intro
Demo: SKiD Racer
Performance
Graphics
Demo: EVE ship viewer
Networking
Audio
Controls
Misc
Languages
Demo: GT Racing Motor Academy
Demo: AirMech
Out There
Apps & Stores
Browsers
Wrap up!
Intro
- Hey, I'm Vince
- Open Web Tech?
- Multiple Implementations
- Standards based
- Patent protection
- Open Source
- Adobe announced no more mobile flash, so beyond iOS also no Flash on Chrome for Android
- No flash in IE10 Windows 8 Metro style browser
- Adobe building tools for HTML5
- Free Market, Influence, Longevity
- The Bleeding Edge
- Overview
- Takeaway
- New Technologies
- State of platform
- Demos in shipping games
Demo: SKiD Racer
https://chrome.google.com/webstore/detail/bhoaojooagiaaiidlnfhkkafjpbbnnno
Performance
- IE adds them in IE10, bringing them to all major browsers
- in process in Chrome now, less memory footprint
- transfer of ownership for typedarray
- E.g. 32MB 300ms -> 7 ms
- Matrix4x4 object proposed public-fx list.
- JavaScript Virtual Machines
- Incremental GC in Chrome & FF
- Type inference optimizations
- e.g. FF reports recent 2x improvement in Box2D;
6x behind native code
Graphics
- FF, Chrome (+android), and IE10
- texture compression - S3TC==DXT shipping
- Errors to console (already in FF, new to Chrome)
- --enable-gpu-debugging glGetError always
- int32 indices (beyond current 16bit)
- GL_EXT_draw_instanced
- shared resources across canvases
- share resources across workers
- anisotropic filtering (fairly straight forward)
- depth textures (more of a challenge ANGLE/DX9)
Demo: EVE ship viewer
http://www.eveonline.com/universe/spaceships/
Networking
- client-server, bidirectional, low latency
- Text first, now Binary!
- Chrome, FF11 (unprefixing), IE10
- Codecs
- Echo cancellation, noise reduction (audio & video), automatic gain control
- Network jitter management
- NAT and firewall traversal technology
- Data API being actively discussed
- multiple channels
- reliable or unreliable
- DOMString, Blob, and ArrayBuffer
- check if data is being buffered
- Camera and Audio (Stream API)
- behind MediaStream flag in chrome
- Opera tech preview also
- Demo: Video In WebGL (Canary)
Audio
- History ..., and then <audio>
- Being sunset, in favor of next.
- Nov 2011 Intel starts optimizing Web Audio code in WebKit
- Jan 2012 <audio> tag as web audio api source: MediaElementAudioSourceNode
- Jan 2012 angry birds on web audio api
- recent backend work on Chrome
- multi-channel content reading <audio> can read now
- can't process this in WAAPI
- panning / spatialization / positioning & reverb - would be cool
- multi-bus for e.g. DJing, or workstation
- e.g. a DJ outputing to room and also to headphones
- webworker onaudioprocess calls
- Mixing / FFT / Convolution
- MediaStream Processing API
- MediaController (whatwg HTML spec)
Controls
- Chrome & FF developer builds
- Shipping in NaCl games on Chrome
- Chrome removing fullscreen requirement
- Chrome already ships for Native Client
- http://robhawkes.github.com/gamepad-demo/
- Gamepad, the 1-slide version:
- - available in Chrome for JS & NaCl behind flag, get your feedback in now!
- - available in NaCl
- - works across Windows/Linux/Mac
- - in Firefox nightlies, coming soon
- - being standardized via W3C, co-edited with Mozilla
Misc
- Mozilla supporting blob/File
- IE10 has it
- Not Safari (desktop or iOS)
- yes chrome on android
Languages
- Emscripten & Mandreel
- C/C++/ObjectiveC (and others via GCC front end)
- OpenGL ES 1.1, 2.0 apps ported
Demo: GT Racing Motor Academy
https://plus.google.com/u/0/games/777131296458 Port by http://mandreel.com
- Java -> Javascript
- AngryBirds
- Open source
- C/C++/C#, (and others)
- Shipped in Chrome Fall 2011
- Lots of Games:
- Available by March 5th 2012: Bastion, Mini Ninjas, Moon Breakers, Pocket Legends, Star Legends, Sleepy Jack, Cordy, Muffin Knight, Air Mech
- Coming soon: Dark legends, From Dust, Zombie Track Meat, Eets Munchies, Go Home Dinosaurs
- Havok, Unity, FMOD, Wwise, SDL, Bullet, BlitzTech, Ogre
Demo: AirMech
https://chrome.google.com/webstore/detail/hdahlabpinmfcemhcbcfoijcpoalfgdn
Out There
- Device Discovery
- Performance
- E.g. similar to Windows Experience Index
- high resolution profiling timing
- chrome --enable-benchmarking then
- interval = new chrome.Interval()
- interval.start();
- interval.microseconds()
- Input events (at least in chrome) are time stamped at dispatch
- keyboard layout
- input polling
- game mode
- LAN peer to peer detection
- Lightweight threads
Apps & Stores
- WebRT is a runtime for web applications that gives them a native-like look and feel along with platform integration APIs on Android, Windows, Mac, and other platforms.
Browsers
- IE, Chrome, Firefox - statcounter.com
- Opera, Android, Mobile Safari - statcounter.com
- IndexDB
- Web Workers
- Web Sockets
Wrap up!