High Performance/Real-Time Web Applications can suffer from serial program execution, which can greatly decrease user experience, usability, application capabilities and overall performance. The new HTML5 WebWorker JavaScript API allows for multithreading in browser environment, which has removed serial code bottleneck that has always been an issue for processor intensive applications. Specifically at Game Theory Labs we were able to increase the performance of our application by 55% utilizing the techniques discussed. This meetup will show off the variations in the WebWorker API, associated overhead using the API, various WebWorker architectures (Inline vs External, Static vs Dynamic, Nested vs Shared) as well as implementing a 2-Tier Thread Management system that allows for generating child process outside of the main thread thereby increasing performance of handling/merging data between threads and the main application.

1. Multithreading for
High Performance Real
Time Web Apps
@CoreyClarkPhD
@GameTheoryLabs

2. Who Am I?
! Professor of Game and
Simulation Programming
! Founder of Game Theory
Labs
! Nanoscale Semiconductor
Growth Kinetics
! Flexible Embedded
Electronics for ABL
! SWARM and C4ISR
Embedded Systems
! Building HTML5 Web
Apps Utilizing:
! Cloud Cluster
Computing
! Game Technology
! Artificial Intelligence
Modeling, Learning and
Optimization
What I Do:What I Did:

3. HTML5 JavaScript APIs
WebGL
WebSockets
Gamepad API
WebRTC
WebAudio
WebVideo
GetUserMediaFullscreen
The Sexy Ones….

4. And Then There Is
WebWorkers
Powerful…… But not Sexy

5. What I Want To Do Today
Bring the Sexy Back to WebWorkers

6. What Is A WebWorker And
What Can I Use It For…
! Isolated Thread
! Parallel Execution
! JSON Message Based
Communication
! No Shared Memory*
! Asset Loading
! Computationally
Intensive Processes
! Increase Overall App
Performance via
Parallel Processing
! Keeping UI Responsive
! Take advantage of
multi-core processors
*Shared Objects discussed Later

7. What are the Limitations?
! No Access:
! DOM
! Window
! Document
! Parent
! Main App Memory/Objects
! You Do Have Access To:
! XHR
! Navigator, Location
! setTimeout/setInterval
! App Cache
! Import Script

8. But First:
A Simple Demo
http://demo.jahovaos.com/JaHOVA/0v5_0/main.html?Console=threads2

9. Lets Talk Performance
! Creating a First
WebWorker
! Create a Second
WebWorker (same js file)
! Sending Small/Normal
Sized Message
! Sending Large (100K
Array Objects) Messages
Dependent on JS File
Seen >100ms
~ < 1ms
~ < 1ms
~10ms

10. WebWorker Variations
! Inline
! Dynamically created code file using BlobBuilder
! External
! Standard WebWorker, using a separate JavaScript File
! Nested
! WebWorker Inception…. A worker within a worker
! Shared
! Worker that allows for communication between other windows
and iframes

11. Show Me The API
! wrk = new Worker(thread.js);
! wrk.postMessage(jsonObject);
! self.postMessage(jsonObject);
! Callbacks
! Message
! Error

12. Show Me The API
! sw = new SharedWorker(thread.js, [“Worker Name”]);
! sw.port.start()
! sw.port.postMessaget(jsonObject)
! port.postMessage(jsonObject);
! Callbacks
! connect – (gets the port) e.port[0]
! port.onmessage
! port.onerror

13. Browser Support
! WebWorkers
! Chrome, Safari, FireFox, IE10,
Opera
! iOS, FF Mobile, Blackberry
! Shared Workers
! Chrome, Safari, iOS, BlackBerry,
! Nested
! FireFox

14. Is One Worker Enough?
Multi Tier Thread Architecture
Worker
Nested Worker
Nested Worker
Nested Worker
Window
iframe

15. Building a 3D Game using
HTML5
! WebWorker
! Physics
! Networking
! AI
! Main App
! User Input
! WebGL*
*At some point may be possible to place in WebWorker
So With All These Threads….
Where do you sync the memory?

16. Lets Step Up Our Design
Thread
Thread
Thread / iframe
Thread / iframe
…
Thread
Thread Pool
Thread Manager
Shared
Memory

17. Omega Resistance v 0.1
! Shared Workers (Chrome)
! Physics
! Networking
! Node.js server
! Shared Memory
! Multithreaded:
! 100% > 35 FPS
! Single Threaded
! 55% < 30FPS
http://omega.gametheorylabs.com

18. Show Me The Numbers!

19. Can I Make It More
Complicated?
YES! Shared Objects
Main Application Web Worker
JavaScript
Object

20. Sample JavaScript Game Engine
Main App
GUI/HUD
WebGL
Thread
Manager
Entity Data
Entity Data
Thread
Controller
Physics
Thread
AI
Thread
Network
Thread*
*If possible

21. Asset Loading
When Apps Give Me….
I Get a WebWorker!

22. Omega Resistance 0v2
! WebGL
! Gamepad API
! 3D Rigid Body Physics
! AI Autonomous
Movement
! WebWorkers

23. http://or.gametheorylabs.com

24. Lessons Learned…
The Hard Way
! Develop a way to properly identify them on Connection, or
Load SharedWorker Threads Serially
! Initialize WebWorkers at Startup
! Debugging used to really suck, but now it sucks normal
! Minimize the number of messages
! Careful with automated generated messages in nested/shared
worker architecture
! Developed in single thread (With MT in mind), then
transition to multithread, IMHO
! Careful with recursive JavaScript Entities that you want to
pass to WebWorker

25. Our Next Step
JaHOVA OS GEn3CIS

27. Questions?
Twitter/Facebook:
@CoreyClarkPhD
@GameTheoryLabs
Blog: blog.gametheorylabs.com
Dev Wiki: wiki.gametheorylabs.com
Git: git.gametheorylabs.com