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

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

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

ctx.fillRect(0, 0, 100, 100);

WebGL

OpenGL ES 3 (WebGl 2)

WebVR!

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

WebSockets

Client ↔️ Server Messaging

WebRTC

P2P TCP 📡

Audio/Video Streaming 🎙

WebRTC

P2P TCP 📡

Audio/Video Streaming 🎙

WebRTC

P2P TCP 📡

Audio/Video Streaming 🎙

JavaScript!

no wait please don't leave

JavaScript!

no wait please don't leave

ES6+

It ain't your great-grandma's
web scripting language

ES6+

It ain't your great-grandma's
web scripting language

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

Modern Language,
Modern Performance

Full Multi-Tier JIT

Sandboxed VM

Modern Language,
Modern Performance

Full Multi-Tier JIT

Sandboxed VM

“Any Real Languages?”

The Legend

❧ of ☙

Emscripten

WebAssembly

WebAssembly

WebAssembly

WebAssembly

WebAssembly

WebAssembly How?

  • “A binary instruction format for a stack-based virtual machine”
  • Runs in the JavaScript VM
  • Backend for LLVM

    • WebAssembly How?

  • “A binary instruction format for a stack-based virtual machine”
  • Runs in the JavaScript VM
  • Backend for LLVM

    • WebAssembly How?

  • “A binary instruction format for a stack-based virtual machine”
  • Runs in the JavaScript VM
  • Backend for LLVM

    • WebAssembly How?

  • “A binary instruction format for a stack-based virtual machine”
  • Runs in the JavaScript VM
  • Backend for LLVM

    • but why

    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

    Iodide

    Iodide

    Iodide

    Iodide

    “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

    Shared Resources / Second Screen

    Shared Resources / Second Screen

    Shared Resources / Second Screen

    Shared Resources / Second Screen

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

    About that big codebase thing

    About that big codebase thing

    About that big codebase thing

    About that big codebase thing

    About that big codebase thing

    New programming language

    New programming language

    New programming language

    New programming language

    New programming language

    New programming language

    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

    Firefox Quantum

    Firefox Quantum

    Firefox Quantum

    Firefox Quantum

    November 2017

    As of Today

    As of Today

    As of Today

    As of Today

    As of Today

    As of Today

    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

    Web Payments

    In Conclusion

    The Web Is A Land Of Contrasts
    The Real Web Assembly is the Friends We Made Along the Way