Mozilla Dino Head Logo

Improving Game

Performance on the Web

Nick Desaulniers - @LostOracle

Web VR

Experience the Web in a whole new way

Time to render a single frame

60 Hz === 16.6 ms

90 Hz === 11 ms

oh, and you have to render everything twice

from two different viewpoints


Ability to share depth information between WebGL and CSS

web-vr-discuss Mailing list

Web Assembly

Minimize load times

Binary and text representation

30% smaller than gzipped asm.js

Can be parsed 23x faster than large asm.js modules

Are we removing JS?

Hell no

Concurrency vs Parallelism

Interruptible? Concurrent

Independant? Parallel

Not mutually exclusive, could have both, either, neither

JavaScript's single threaded event loop is great for IO bound workloads. Highly concurrent, but we're not utilizing additional resources that we could be.



Workers can share read/write access to a TypedArray instead of postMessage


Problems with shared memory

Shared memory can lead to

  • Data Race Conditions
  • Deadlock
You must be this tall to write multithreaded code

SharedArrayBuffer gives us synchronization primitives to help

  • "Futexes"
  • Atomics

From there, we can build:

  • Mutexes
  • Condition Variables
  • Semaphores
  • Spin Locks


Grim Reaper

Prefer task level parallelism (postMessage) to data level parallelism (SharedArrayBuffer)

WebGL 2

Minimize CPU <-> GPU synchronization

OpenGL Family Tree

What's new in WebGL2

  • Many WebGL1 extensions now mandatory
    • Vertex Array Objects (VAOs)
    • Instancing
    • Multiple Render Targets
  • Uniform Buffer Objects (UBOs)
  • Memory Barriers (Fences)
  • Still no geometry shaders


Increased parallelism with no synchronization

vector multiply
vector select

Working on implementing SIMD optimizations to gl-matrix

WebGL in Workers

Stay off the main thread

For the first time, you'll be able to modify what's shown to the user from another thread.


We'll begin to see more and more work being pushed off of the main thread


Nick Desaulniers - @LostOracle