Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScript To Connect Native and Browser-Based Games
5 likes5,349 views
The document discusses the technical aspects of building a web development platform using HTML5, WebGL, and WebSockets, focusing on multi-threading and parallel processing capabilities through web workers. It details performance comparisons of various browsers and implementations alongside server-side considerations for handling multiple concurrent users efficiently. Additionally, it presents the Jahova OS architecture and its modules for managing resources, events, and sessions.
![Other hosting options…
http://no.de
eSession
("Omega"["gunner"
, "pilot"]);
http://heroku.com
http://nodejitsu.com
http://cloudno.de](https://image.slidesharecdn.com/clarkcoreybuildingamultithreaded-130628142240-phpapp02/85/Building-a-Multithreaded-Web-Based-Game-Engine-Using-HTML5-CSS3-and-JavaScript-To-Connect-Native-and-Browser-Based-Games-28-320.jpg)
![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"]);](https://image.slidesharecdn.com/clarkcoreybuildingamultithreaded-130628142240-phpapp02/85/Building-a-Multithreaded-Web-Based-Game-Engine-Using-HTML5-CSS3-and-JavaScript-To-Connect-Native-and-Browser-Based-Games-30-320.jpg)
Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScript To Connect Native and Browser-Based Games
- 1. Corey Clark PhD Daniel Montgomery
- 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
- 6. Time to Create First Worker • Varies depending on Worker Size • Can take a second to start • Initialize at beginning with a startup routine
- 10. 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
- 11. Nested Shared Worker Nested Worker Main Thread Nested Worker Nested Worker Window Window iframe Shared Worker
- 12. Platform Support ● Chrome/Firefox/Safari ● Chrome/Safari supports Shared Only ● Firefox supports Nested Only ● Android – (via Firefox and Opera Browser) ● iOS ● IE 10
- 13. Command Module Internal APIs Thread Thread Core Instruction Module Thread Thread / iframe Thread / iframe … Thread Controller ThreadThread Pool Thread Manager Shared Memory
- 15. What is WebGL? OpengGL ES 2.0
- 16. WebGL The Basics Sample API/Libraries ● JavaScript Wrapper for OpenGL ES 2.0 ● Programmable Graphics Pipeline (GLSL) ● Hardware Acceleration ● SpiderGL ● Copperlicht ● CubicVR ● Gladius
- 18. 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
- 19. 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
- 20. 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
- 21. + +
- 22. 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()
- 23. 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
- 25. 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)
- 26. ● 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)
- 27. • Well Kept After • Documented • Quick Response • Use existing Git • npm dependencies • Fast! • (“Hello World!” in 1 minute) Free!!! FEATURES
- 28. Other hosting options… http://no.de eSession ("Omega"["gunner" , "pilot"]); http://heroku.com http://nodejitsu.com http://cloudno.de
- 29. 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
- 30. 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"]);
- 31. JOSSM: Session Breakdown ● Session Specific Properties ● On Events ● Open ● Close ● Message ● Error ● Multiple Modules ● Remote Module Requests
- 32. 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
- 33. 3rd Party Extensions Application JaHOVA OS Kernel Internal APIs Resource and Schedule Manager Module Instruction Module Command Module Threading Network DOM Graphics …
- 34. 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
- 35. 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
- 36. 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
- 38. 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