Corey Clark PhD
Daniel Montgomery
Web Dev Platform
Cross
Platform
Cross
Browser
HTML5
WebGL
Web
Socket
Web
Worker
Hardware
Acceleration
Optimized
Communicat...
JaHOVA OS
Kernel
Internal APIs
Threading
Network
Graphics
Web
Workers
Web
Sockets
WebGL
Web Workers and Multithreading
§  Parallel Execution
§  Communicates
through Message
§  Executes in
Isolated Thread
● N...
Time to Create First Worker
•  Varies depending on Worker Size
•  Can take a second to start
•  Initialize at beginning wi...
Web Worker Variations
● Inline vs. External
●  BlobBuilder
●  Inline only supported by FF and Chrome
●  No difference in p...
Nested Shared
Worker
Nested Worker
Main Thread
Nested Worker
Nested Worker
Window Window
iframe
Shared Worker
Platform Support
● Chrome/Firefox/Safari
●  Chrome/Safari supports Shared Only
●  Firefox supports Nested Only
● Android –...
Command
Module
Internal APIs
Thread
Thread Core
Instruction
Module
Thread
Thread /
iframe
Thread /
iframe
…
Thread
Control...
What is WebGL?
OpengGL ES 2.0
WebGL
The Basics Sample API/Libraries
● JavaScript Wrapper
for OpenGL ES 2.0
● Programmable
Graphics Pipeline
(GLSL)
● Har...
WebGL Hardware Test
Verts Polys Draw FPS CPU RAM Video OS
858,750 485,292 654 30 2.2GHz
Intel i7
Quad
Core
4GB AMD
Radeon
...
Browser vs Browser
Browser Verts Polys Draw Calls
Chrome 590,898 333,924 450
Aurora 426,773 241,174 325
WebKit Nightly 393...
WebGL Tid Bits
Tips Up and coming
● DebugContex
● WebGL Inspector
● requestAnimFrame
● BMP Support
● No IE Support with ou...
+ +
Web Sockets
● Full Duplex Communication
● No HTTP overhead
● Has Secure Transport Protocol
● Cross Origin Communication
● ...
Nitty Gritty
● 2 Bytes Overhead Per Message
●  XHR ~871 Bytes
● Constant Connection
●  No need to re-establish connection ...
Daniel Montgomery
WebSocket Server Side
● Standard HTTP Request/
Response model performs
poorly for high number of
users
● Server Needs
●  T...
● Google V8 Engine
● JavaScript
● Event Driven
● Event Loop with Callbacks
● Non-Blocking
● Native C++ Bindings
● Fast!!
F...
• Well Kept After
• Documented
• Quick Response
• Use existing Git
• npm dependencies
• Fast!
• (“Hello World!” in 1 minut...
Other hosting options…
http://no.de
eSession
("Omega"["gunner"
, "pilot"]);
http://heroku.com
http://nodejitsu.com
http://...
JaHOVA OS Server Module
●  Connect to Multiple Applications on
same server
●  Remote Stream Functions
●  User Creation on ...
JOSSM: Breakdown
●  Multiple Sessions
●  Multiple Session Types
●  Defined in a single line!
●  Streamed Sessions, Modules...
JOSSM: Session Breakdown
●  Session Specific Properties
●  On Events
●  Open
●  Close
●  Message
●  Error
●  Multiple Modu...
Engine Architecture
● Dynamic Nested/Shared Web Worker
●  Thread Controller
●  Shared Memory Pool
● Custom Event Managemen...
3rd Party
Extensions
Application
JaHOVA OS
Kernel Internal APIs
Resource and
Schedule Manager
Module
Instruction
Module
Co...
Resource and Schedule Manager Module
Event Manager
Event
Manager
Interface
Event Object
Event
Event
…
Event Object
Event
E...
Resource and
Schedule Manager
Module
Instruction Module
Router
Route
Resource
Instruction Q
Resource
Instruction Q
Resourc...
Engine Demonstration
● WebGL, WebSockets, Web Workers
● HTML5 Audio
● Thread Controller
●  Networking and Physics
● Node.j...
Final Thoughts
● Initialize Threads at Startup
● Initialization Timing
●  Serialize for dependencies and registration
● Ca...
Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScript To Connect Native and Browser-Based Games
Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScript To Connect Native and Browser-Based Games
Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScript To Connect Native and Browser-Based Games
Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScript To Connect Native and Browser-Based Games
Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScript To Connect Native and Browser-Based Games
Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScript To Connect Native and Browser-Based Games
Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScript To Connect Native and Browser-Based Games
Upcoming SlideShare
Loading in...5
×

Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScript To Connect Native and Browser-Based Games

3,448

Published on

As hardware developer’s push away from creating faster processors in lieu of multicore architectures game developers have to leverage multithreading technologies to capitalize on these new devices. With multicore mobile devices the need for a multithreaded web based game engine is a reality. This talk will discuss design of various multithreaded web engine architectures. Two specific threading implementations will be discussed. First technique shows how to create a static thread that is registered with the engine with the same techniques as other loaded resource. A second technique will focus on using a Thread Controller, which has the ability to create dynamic generic threads that can be passed functions during run time and process them in parallel. This also allows for coupling threaded commands together thereby creating critical sections and other common multithreading techniques utilized in C++ coding.

Focus will also be placed on design consideration and operation performance. An example will be show that demonstrates how the proper coding style and data structures can make or break your design. Also timing and performance standards will be given for various browsers so users can understand the overall overhead and operational considerations that need to be considered when using threads in a browser based environment.

Technology and capability limitations will also be discussed so developers can understand the differences between multithreading in C++ native applications and JavaScript browser-based application. This will also include some tricks on how to design an architecture that allows for some workarounds. Other JavaScript APIs such as WebGL, and WebSockets will also be discussed and demonstrated to help show the full realization of a web based game engine.

Coding samples and architectural layouts will be shown to the audience to help drive home the concepts being discussed during the lecture. A functional HTML5 JavaScript Multithreaded Web Engine will be demonstrated during the lectured to show the overall functionality and performance of the techniques described.

A summary write up of a sample engine architecture is attached in the supplemental documents that gives a brief description and architectural figures. These will be integrated into the lecture to help visualize some of the concepts being discussed.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,448
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
19
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScript To Connect Native and Browser-Based Games"

  1. 1. Corey Clark PhD Daniel Montgomery
  2. 2. Web Dev Platform Cross Platform Cross Browser HTML5 WebGL Web Socket Web Worker Hardware Acceleration Optimized Communication Channel Parallel Processing
  3. 3. JaHOVA OS Kernel Internal APIs Threading Network Graphics Web Workers Web Sockets WebGL
  4. 4. Web Workers and Multithreading §  Parallel Execution §  Communicates through Message §  Executes in Isolated Thread ● No Access To ●  DOM, Window ●  Document, Parent ●  No Shared Memory ● But You Do Have… ●  XHR / WebSockets ●  Navigator,Location ●  setTimeout/setInterval ●  App Cache, importScript
  5. 5. Time to Create First Worker •  Varies depending on Worker Size •  Can take a second to start •  Initialize at beginning with a startup routine
  6. 6. Web Worker Variations ● Inline vs. External ●  BlobBuilder ●  Inline only supported by FF and Chrome ●  No difference in performance ● Dynamic ●  Method determined at run time from JSON string ●  Altered and changed by user at run time
  7. 7. Nested Shared Worker Nested Worker Main Thread Nested Worker Nested Worker Window Window iframe Shared Worker
  8. 8. Platform Support ● Chrome/Firefox/Safari ●  Chrome/Safari supports Shared Only ●  Firefox supports Nested Only ● Android – (via Firefox and Opera Browser) ● iOS ● IE 10
  9. 9. Command Module Internal APIs Thread Thread Core Instruction Module Thread Thread / iframe Thread / iframe … Thread Controller ThreadThread Pool Thread Manager Shared Memory
  10. 10. What is WebGL? OpengGL ES 2.0
  11. 11. WebGL The Basics Sample API/Libraries ● JavaScript Wrapper for OpenGL ES 2.0 ● Programmable Graphics Pipeline (GLSL) ● Hardware Acceleration ● SpiderGL ● Copperlicht ● CubicVR ● Gladius
  12. 12. WebGL Hardware Test Verts Polys Draw FPS CPU RAM Video OS 858,750 485,292 654 30 2.2GHz Intel i7 Quad Core 4GB AMD Radeon 6750M 1GB OSX 634,179 353,386 483 30 2.53GH z Intel Core 2 Duo 4GB NVIDIA 9800+ 1GB Windows 7 590,898 333,924 450 33.33 2.53GH z Intel Core 2 Duo 8GB NVIDIA GeForce 9600M GT 512MB OSX Chrome
  13. 13. Browser vs Browser Browser Verts Polys Draw Calls Chrome 590,898 333,924 450 Aurora 426,773 241,174 325 WebKit Nightly 393,948 222,624 300 Safari 295,473 166,974 225 Firefox 262,648 148,424 200
  14. 14. WebGL Tid Bits Tips Up and coming ● DebugContex ● WebGL Inspector ● requestAnimFrame ● BMP Support ● No IE Support with out plugins and Hackery ● WebGL Running in Web Worker ● Swapping Memory Buffer rather than copy
  15. 15. + +
  16. 16. Web Sockets ● Full Duplex Communication ● No HTTP overhead ● Has Secure Transport Protocol ● Cross Origin Communication ● Very Simple Client Side API ●  Socket.onmessage = function(){} ●  Socket.onopen = function(){} ●  Socket.open(), Socket.send(), Socket.close()
  17. 17. Nitty Gritty ● 2 Bytes Overhead Per Message ●  XHR ~871 Bytes ● Constant Connection ●  No need to re-establish connection (COMET) ● Connecting to Non Browser Applications (via Proxy/Server) ●  Byte Arrays ●  Bit Shifting
  18. 18. Daniel Montgomery
  19. 19. WebSocket Server Side ● Standard HTTP Request/ Response model performs poorly for high number of users ● Server Needs ●  Thread or Non Blocking IO Design ●  High concurrency at Low Performance cost ● Existing Servers ●  Node.js ●  Jetty (Java) ●  Ruby (Event Machine) ●  Python (Twisted)
  20. 20. ● Google V8 Engine ● JavaScript ● Event Driven ● Event Loop with Callbacks ● Non-Blocking ● Native C++ Bindings ● Fast!! FEATURES • WebSocket Server • Socket.IO • Kaazing Gateway • TCP Server • File Server • MySQL, MongoDB, NoSQL Modules (NPM)
  21. 21. • Well Kept After • Documented • Quick Response • Use existing Git • npm dependencies • Fast! • (“Hello World!” in 1 minute) Free!!! FEATURES
  22. 22. Other hosting options… http://no.de eSession ("Omega"["gunner" , "pilot"]); http://heroku.com http://nodejitsu.com http://cloudno.de
  23. 23. JaHOVA OS Server Module ●  Connect to Multiple Applications on same server ●  Remote Stream Functions ●  User Creation on the fly ●  Support for Multiple Connection Types ●  TCP ●  WebSockets ●  Socket.IO and Express node.js modules
  24. 24. JOSSM: Breakdown ●  Multiple Sessions ●  Multiple Session Types ●  Defined in a single line! ●  Streamed Sessions, Modules, and Functions ●  Easily add and connect users to multiple sessions handler.createSession("Omega", "", ["gunner", "pilot"]);
  25. 25. JOSSM: Session Breakdown ●  Session Specific Properties ●  On Events ●  Open ●  Close ●  Message ●  Error ●  Multiple Modules ●  Remote Module Requests
  26. 26. Engine Architecture ● Dynamic Nested/Shared Web Worker ●  Thread Controller ●  Shared Memory Pool ● Custom Event Management System ● Available Engines ●  Akihabara (2D) ●  Effect Game (2D) ●  Isogenic Engine ●  Johmoho
  27. 27. 3rd Party Extensions Application JaHOVA OS Kernel Internal APIs Resource and Schedule Manager Module Instruction Module Command Module Threading Network DOM Graphics …
  28. 28. Resource and Schedule Manager Module Event Manager Event Manager Interface Event Object Event Event … Event Object Event Event …… Subscriber Callback Subscriber Callback Subscriber Callback Subscriber Callback Core Manager Command Module
  29. 29. Resource and Schedule Manager Module Instruction Module Router Route Resource Instruction Q Resource Instruction Q Resource Instruction Q Add Request … … Event Manager Core Manager Command Module Resource Dispatcher Resource Dispatcher Resource Dispatcher
  30. 30. Engine Demonstration ● WebGL, WebSockets, Web Workers ● HTML5 Audio ● Thread Controller ●  Networking and Physics ● Node.js ●  JaHOVA OS Server Module ●  WebSocket - SocketIO ● Developed in under a week
  31. 31. Final Thoughts ● Initialize Threads at Startup ● Initialization Timing ●  Serialize for dependencies and registration ● Careful with Debuggers and Web Workers ● See more at ●  http://jahovaos.com : Descriptions and Blog ●  http://demo.jahovaos.com : Code ● Expo Floor 2-4 on Wed @ DeVry Booth
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×