# Games on the web!

PAX Dev 2018

# The Web is a
Universal
Operating System # The Web Browser is a Universal Operating System
User
App
Service
Operating System
Hardware
User
Tab
Tab
Web Browser
Hardware
User
Page
Web Browser
Operating System
Hardware
User
Tab
Tab
Tab
∞ Tabs
Web Browser
macOS
Windows
GladOS
iOS
HAL
Intel
ARM
# The Web Browser is a Universal Operating System # The Web Browser is a Universal Virtual Machine # A Crash Review of the Web Platform # Input
## The Gamepad API ```js addEventListener('gamepadconnected', function (e) { let gamepadId = e.gamepad.index; setupGamepad(gamepadId); }); function gameLoop() { // ... let gamepad = navigator.getGamepads()[gamepadId]; gamepad.buttons[0].pressed; // boolean gamepad.axes[1]; // -1..1 // ... } ``` https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API

The Gamepad API

## WebRTC ```js navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(function(stream) { let video = document.querySelector('video'); video.srcObject = stream; video.addEventListener('loadedmetadata', function(e) { video.play(); // Frame data will become available }); }).catch(function(err) { console.log(err.name + ": " + err.message); }); ```

WebRTC

# Output # Canvas2D ### Quartz-ish ```js ctx.fillRect(0, 0, 100, 100); ``` # WebGL ### OpenGL ES 3 (WebGl 2)
# WebVR!
```js let displays = await navigator.getVRDisplays(); let vrDisplay = displays[0]; vrDisplay.requestPresent([{ source: canvas }]); vrDisplay.getEyeParameters('left'); vrDisplay.requestAnimationFrame(drawVRScene); // each frame vrDisplay.getFrameData(frameData); let pose = frameData.pose; pose.position // 3D Vector pose.orientation // Quaternion ```
# WebAR! # WebMR! # WebXR!
# Networking # WebSockets ### Client ↔️ Server Messaging # WebRTC ### P2P TCP 📡 ### Audio/Video Streaming 🎙
# JavaScript! ### no wait please don't leave # ES6+ ### It ain't your great-grandma's
web scripting language *** ```coffeescript import { Entity } from 'core' class Crate extends Entity { break () { return randomItem() } } window.addEventListener(async () => { let assetList = await fetch('./assets.json') assetList = await assetList.json() loadAssets(assetList) }) ``` ## Modern Language,
Modern Performance ### Full Multi-Tier JIT ### Sandboxed VM

“Any Real Languages?”

The Legend

❧ of ☙

Emscripten

# WebAssembly * Treat the web as a compliation target * For the languages you already know! * Excellent C/C++ Support * Danged-Near Native Speed (Seriously) # WebAssembly How? * “A binary instruction format for a stack-based virtual machine” * Runs in the JavaScript VM * Backend for LLVM
![but why](img/butwhy.jpg)

Video decoding in the JavaScript platform: “ogv.js, how U work??”

We’ve started deploying my ogv.js JavaScript video/audio playback engine to Wikipedia and Wikimedia Commons for better media compatibility in Safari, Internet Explorer and the new Microsoft Edge browser.

brionv.com/log/2015/08/09/video-decoding-in-the-javascript-platform-ogv-js-how-u-work/
## Iodide * Full Scientific Python Stack * SciPy, NumPy, matplotlib * Running on CPython * In the Browser!
## “AutoCAD & WebAssembly: ### Moving a 30 Year Code Base to the Web” https://qconnewyork.com/ny2018/ny2018/presentation/web-assembly-autodesk.html *** ### “What do you hope a developer will take away from this talk?”

I want them to go away with the conviction that it is possible to reuse their legacy apps on the web rather than rewrite code from scratch. *** The web is ready for sophisitcated, performant software, built on extant technology

Unity Blog

WebAssembly is here!

Marco Trivellato, August 15, 2018
https://blogs.unity3d.com/2018/08/15/webassembly-is-here/
# How can I start? ### (How do I sell this?)
## Shared Resources / Second Screen * Character Customizer * Inventory/Auction House * Guild Management * Spectator Mode
# Demos! Humble Bundle FTL ↗️
Super Hexagon ↗️
(Late last year) blizzcon q+a field a question rust. Takeaway: retooling to a new language seems insurmountable. Large c++ codebase. Can’t interrupt velocity. Small teams may be a beachhead https://www.reddit.com/r/rust/comments/7c8fyn/blizzcon_have_you_programmed_in_rust/
I've got hundreds of thousands of lines of C++, and a full product pipeline.
## *David Bryant* #### Mozilla Fellow,
Former VP of Platform Engineering
## About that big codebase thing * Firefox (Gecko) is 6+ million lines of C++ * Runs untrusted content (yikes!) * The web is our test suite * Concurrency is increasingly important... * ...and hard
## New programming language * Catch flaws at compile time * Easier parallelism * Small and efficient executables * Fit into modern toolchains * Server and client
# Rust rust-lang.org *** Rust is a systems programming language that runs blazingly fast, prevents segfaults, and guarantees thread safety.
# Hack without Fear # Fearless Concurrency
## Firefox Quantum * Concurrency => Responsiveness * Influenced by Servo * "Stylo" parallel style system * Efficient, scaled use of hardware
## November 2017
## As of Today * Firefox is about 10% Rust * 132 Friends of Rust * "Most Loved" programming language * #15 in PR and projects on GitHub * Community driven
# Rust is Good™ ## Rust is Good For Games™®

Rust Case Study:

Chucklefish Taps Rust to Bring Safe Concurrency to Video Games

https://www.rust-lang.org/pdfs/Rust-Chucklefish-Whitepaper.pdf
Rust is one of the few languages that really gives you a large amount of confidence that your parallel and concurrent code is anywhere near correct.
[–] repilur 1 month ago

Yes we use Rust as our primary language in SEED since about 4-5 months ago, building a new future based on it. Loving it and this awesome community. Esp. after 20+ years of C++ for professional game and engine development.

We are hiring Rust programmers (or programmers keen on learning and embracing Rust) for a wide set of areas (gameplay, engine/graphics, full stack, and more) , primarily here in Stockholm but parts of our team is also in Los Angeles and remote (Netherlands, Montreal, BC).

Will write up and share more about our experiences with Rust and what we are working on. But feel free to comment and DM me here or on twitter (@repi)!

Andrea Pessino
@AndreaPessino

It's finally happening - after >30 years of pro use, 20 of which quite reluctantly, I am officially DONE with C/C++. Only maintenance from now on, everything new will be in @rustlang. THANKS Rust team for refining modern concepts into such a practical, elegant system. I love it.

4:06 PM - 23 Jul 2018
Ready At Dawn Studios
# arewegameyet.com
# Denoument

“You got Rust in my WebAssembly!”

# `wasm-bindgen` wasm ↔️ DOM FFI Generator *** ``` extern crate wasm_bindgen; use wasm_bindgen::prelude::*; #[wasm_bindgen] extern { fn alert(s: &str); } #[wasm_bindgen] pub fn greet(name: &str) { alert(&format!("Hello, {}!", name)); } ```
# The Future
## WebGPU * Successor to WebGL * Intended to work over both Vulkan and Metal
## Web Payments * Brokers payment flow * No credit card form! * Users can save CC info to their browser * Better conversion 💰💰
# In Conclusion The Web Is A Land Of Contrasts
The Real Web Assembly is the Friends We Made Along the Way