SlideShare a Scribd company logo
Corey Clark PhD
Daniel Montgomery
Web Dev Platform
Cross
Platform
Cross
Browser
HTML5
WebGL
Web
Socket
Web
Worker
Hardware
Acceleration
Optimized
Communication
Channel
Parallel
Processing
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
● No Access To
●  DOM, Window
●  Document, Parent
●  No Shared Memory
● But You Do Have…
●  XHR / WebSockets
●  Navigator,Location
●  setTimeout/setInterval
●  App Cache, importScript
Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScript To Connect Native and Browser-Based Games
Time to Create First Worker
•  Varies depending on Worker Size
•  Can take a second to start
•  Initialize at beginning with a startup routine
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
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
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 – (via Firefox and Opera Browser)
● iOS
● IE 10
Command
Module
Internal APIs
Thread
Thread Core
Instruction
Module
Thread
Thread /
iframe
Thread /
iframe
…
Thread
Controller
ThreadThread
Pool
Thread
Manager
Shared
Memory
Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScript To Connect Native and Browser-Based Games
What is WebGL?
OpengGL ES 2.0
WebGL
The Basics Sample API/Libraries
● JavaScript Wrapper
for OpenGL ES 2.0
● Programmable
Graphics Pipeline
(GLSL)
● Hardware
Acceleration
● SpiderGL
● Copperlicht
● CubicVR
● Gladius
Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScript To Connect Native and Browser-Based Games
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
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
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
+ +
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()
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
Daniel Montgomery
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)
● 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)
• Well Kept After
• Documented
• Quick Response
• Use existing Git
• npm dependencies
• Fast!
• (“Hello World!” in 1 minute)
Free!!!
FEATURES
Other hosting options…
http://no.de
eSession
("Omega"["gunner"
, "pilot"]);
http://heroku.com
http://nodejitsu.com
http://cloudno.de
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
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"]);
JOSSM: Session Breakdown
●  Session Specific Properties
●  On Events
●  Open
●  Close
●  Message
●  Error
●  Multiple Modules
●  Remote Module Requests
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
3rd Party
Extensions
Application
JaHOVA OS
Kernel Internal APIs
Resource and
Schedule Manager
Module
Instruction
Module
Command
Module
Threading
Network
DOM
Graphics
…
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
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
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
Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScript To Connect Native and Browser-Based Games
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
Ad

Recommended

Bringing The Sexy Back To WebWorkers
Bringing The Sexy Back To WebWorkers
Corey Clark, Ph.D.
 
Searching for the framework of my dreams in node.js ecosystem by Mykyta Semen...
Searching for the framework of my dreams in node.js ecosystem by Mykyta Semen...
Binary Studio
 
Conquering AngularJS Limitations
Conquering AngularJS Limitations
Valeri Karpov
 
BP101: A Modernized Workflow w/ Domino/XPages
BP101: A Modernized Workflow w/ Domino/XPages
edm00se
 
Testing your Single Page Application
Testing your Single Page Application
Wekoslav Stefanovski
 
Introducing the Seneca MVP framework for Node.js
Introducing the Seneca MVP framework for Node.js
Richard Rodger
 
Lessons in Open Source from the MongooseJS ODM
Lessons in Open Source from the MongooseJS ODM
Valeri Karpov
 
Blazor - An Introduction
Blazor - An Introduction
JamieTaylor112
 
ClubAJAX Basics - Server Communication
ClubAJAX Basics - Server Communication
Mike Wilcox
 
Introduction to Node.js
Introduction to Node.js
Aaron Rosenberg
 
PHP Indonesia - Nodejs Web Development
PHP Indonesia - Nodejs Web Development
Irfan Maulana
 
MongoDB MEAN Stack Webinar October 7, 2015
MongoDB MEAN Stack Webinar October 7, 2015
Valeri Karpov
 
Testing Single Page Webapp
Testing Single Page Webapp
Akshay Mathur
 
Isomorphic web application
Isomorphic web application
Oliver N
 
Drupal, Android and iPhone
Drupal, Android and iPhone
Alexandru Badiu
 
In-browser storage and me
In-browser storage and me
Jason Casden
 
The Dark Side of Single Page Applications
The Dark Side of Single Page Applications
Dor Kalev
 
Blazor
Blazor
Sandun Perera
 
JavaScript as a Server side language (NodeJS): JSConf 2011, Dhaka
JavaScript as a Server side language (NodeJS): JSConf 2011, Dhaka
Nurul Ferdous
 
20120306 dublin js
20120306 dublin js
Richard Rodger
 
Node.js In The Enterprise - A Primer
Node.js In The Enterprise - A Primer
Naveen S.R
 
MEAN Stack - Google Developers Live 10/03/2013
MEAN Stack - Google Developers Live 10/03/2013
Valeri Karpov
 
Nodejs - Building a RESTful API
Nodejs - Building a RESTful API
Sang Cù
 
[Blibli Brown Bag] Nodejs - The Other Side of Javascript
[Blibli Brown Bag] Nodejs - The Other Side of Javascript
Irfan Maulana
 
LinkedIn Mobile: How do we do it?
LinkedIn Mobile: How do we do it?
phegaro
 
TDD a REST API With Node.js and MongoDB
TDD a REST API With Node.js and MongoDB
Valeri Karpov
 
Flash And Dom
Flash And Dom
Mike Wilcox
 
10 things you should know about django
10 things you should know about django
Adieu
 
Nodejs - A quick tour (v6)
Nodejs - A quick tour (v6)
Felix Geisendörfer
 
HTML5 New Features and Resources
HTML5 New Features and Resources
Ron Reiter
 

More Related Content

What's hot (20)

ClubAJAX Basics - Server Communication
ClubAJAX Basics - Server Communication
Mike Wilcox
 
Introduction to Node.js
Introduction to Node.js
Aaron Rosenberg
 
PHP Indonesia - Nodejs Web Development
PHP Indonesia - Nodejs Web Development
Irfan Maulana
 
MongoDB MEAN Stack Webinar October 7, 2015
MongoDB MEAN Stack Webinar October 7, 2015
Valeri Karpov
 
Testing Single Page Webapp
Testing Single Page Webapp
Akshay Mathur
 
Isomorphic web application
Isomorphic web application
Oliver N
 
Drupal, Android and iPhone
Drupal, Android and iPhone
Alexandru Badiu
 
In-browser storage and me
In-browser storage and me
Jason Casden
 
The Dark Side of Single Page Applications
The Dark Side of Single Page Applications
Dor Kalev
 
Blazor
Blazor
Sandun Perera
 
JavaScript as a Server side language (NodeJS): JSConf 2011, Dhaka
JavaScript as a Server side language (NodeJS): JSConf 2011, Dhaka
Nurul Ferdous
 
20120306 dublin js
20120306 dublin js
Richard Rodger
 
Node.js In The Enterprise - A Primer
Node.js In The Enterprise - A Primer
Naveen S.R
 
MEAN Stack - Google Developers Live 10/03/2013
MEAN Stack - Google Developers Live 10/03/2013
Valeri Karpov
 
Nodejs - Building a RESTful API
Nodejs - Building a RESTful API
Sang Cù
 
[Blibli Brown Bag] Nodejs - The Other Side of Javascript
[Blibli Brown Bag] Nodejs - The Other Side of Javascript
Irfan Maulana
 
LinkedIn Mobile: How do we do it?
LinkedIn Mobile: How do we do it?
phegaro
 
TDD a REST API With Node.js and MongoDB
TDD a REST API With Node.js and MongoDB
Valeri Karpov
 
Flash And Dom
Flash And Dom
Mike Wilcox
 
10 things you should know about django
10 things you should know about django
Adieu
 
ClubAJAX Basics - Server Communication
ClubAJAX Basics - Server Communication
Mike Wilcox
 
PHP Indonesia - Nodejs Web Development
PHP Indonesia - Nodejs Web Development
Irfan Maulana
 
MongoDB MEAN Stack Webinar October 7, 2015
MongoDB MEAN Stack Webinar October 7, 2015
Valeri Karpov
 
Testing Single Page Webapp
Testing Single Page Webapp
Akshay Mathur
 
Isomorphic web application
Isomorphic web application
Oliver N
 
Drupal, Android and iPhone
Drupal, Android and iPhone
Alexandru Badiu
 
In-browser storage and me
In-browser storage and me
Jason Casden
 
The Dark Side of Single Page Applications
The Dark Side of Single Page Applications
Dor Kalev
 
JavaScript as a Server side language (NodeJS): JSConf 2011, Dhaka
JavaScript as a Server side language (NodeJS): JSConf 2011, Dhaka
Nurul Ferdous
 
Node.js In The Enterprise - A Primer
Node.js In The Enterprise - A Primer
Naveen S.R
 
MEAN Stack - Google Developers Live 10/03/2013
MEAN Stack - Google Developers Live 10/03/2013
Valeri Karpov
 
Nodejs - Building a RESTful API
Nodejs - Building a RESTful API
Sang Cù
 
[Blibli Brown Bag] Nodejs - The Other Side of Javascript
[Blibli Brown Bag] Nodejs - The Other Side of Javascript
Irfan Maulana
 
LinkedIn Mobile: How do we do it?
LinkedIn Mobile: How do we do it?
phegaro
 
TDD a REST API With Node.js and MongoDB
TDD a REST API With Node.js and MongoDB
Valeri Karpov
 
10 things you should know about django
10 things you should know about django
Adieu
 

Similar to Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScript To Connect Native and Browser-Based Games (20)

Nodejs - A quick tour (v6)
Nodejs - A quick tour (v6)
Felix Geisendörfer
 
HTML5 New Features and Resources
HTML5 New Features and Resources
Ron Reiter
 
Node.js Presentation
Node.js Presentation
Exist
 
Nodejs a-practical-introduction-oredev
Nodejs a-practical-introduction-oredev
Felix Geisendörfer
 
Realtime rocks
Realtime rocks
Vanbosse
 
Nodejs - A quick tour (v4)
Nodejs - A quick tour (v4)
Felix Geisendörfer
 
Introduction to node.js
Introduction to node.js
Jakub Nesetril
 
Nodejs - A quick tour (v5)
Nodejs - A quick tour (v5)
Felix Geisendörfer
 
Developing realtime apps with Drupal and NodeJS
Developing realtime apps with Drupal and NodeJS
drupalcampest
 
Nodejs on 02/22/2012
Nodejs on 02/22/2012
Hidetomo Morimoto
 
Building real time applications with Symfony2
Building real time applications with Symfony2
Antonio Peric-Mazar
 
Hangouts in 30 minutes Socket.io
Hangouts in 30 minutes Socket.io
Aleksandar Mihajlovski
 
Zing Me Real Time Web Chat Architect
Zing Me Real Time Web Chat Architect
Chau Thanh
 
Fast, concurrent ruby web applications with EventMachine and EM::Synchrony
Fast, concurrent ruby web applications with EventMachine and EM::Synchrony
Kyle Drake
 
Integrating Node.js with PHP
Integrating Node.js with PHP
Lee Boynton
 
GeekCampSG - Nodejs , Websockets and Realtime Web
GeekCampSG - Nodejs , Websockets and Realtime Web
Bhagaban Behera
 
WebSockets-Revolutionizing-Real-Time-Communication.pptx
WebSockets-Revolutionizing-Real-Time-Communication.pptx
YasserLina
 
Node.js scaling in highload
Node.js scaling in highload
Timur Shemsedinov
 
Dragoncraft Architectural Overview
Dragoncraft Architectural Overview
jessesanford
 
Event-driven IO server-side JavaScript environment based on V8 Engine
Event-driven IO server-side JavaScript environment based on V8 Engine
Ricardo Silva
 
HTML5 New Features and Resources
HTML5 New Features and Resources
Ron Reiter
 
Node.js Presentation
Node.js Presentation
Exist
 
Nodejs a-practical-introduction-oredev
Nodejs a-practical-introduction-oredev
Felix Geisendörfer
 
Realtime rocks
Realtime rocks
Vanbosse
 
Introduction to node.js
Introduction to node.js
Jakub Nesetril
 
Developing realtime apps with Drupal and NodeJS
Developing realtime apps with Drupal and NodeJS
drupalcampest
 
Building real time applications with Symfony2
Building real time applications with Symfony2
Antonio Peric-Mazar
 
Zing Me Real Time Web Chat Architect
Zing Me Real Time Web Chat Architect
Chau Thanh
 
Fast, concurrent ruby web applications with EventMachine and EM::Synchrony
Fast, concurrent ruby web applications with EventMachine and EM::Synchrony
Kyle Drake
 
Integrating Node.js with PHP
Integrating Node.js with PHP
Lee Boynton
 
GeekCampSG - Nodejs , Websockets and Realtime Web
GeekCampSG - Nodejs , Websockets and Realtime Web
Bhagaban Behera
 
WebSockets-Revolutionizing-Real-Time-Communication.pptx
WebSockets-Revolutionizing-Real-Time-Communication.pptx
YasserLina
 
Dragoncraft Architectural Overview
Dragoncraft Architectural Overview
jessesanford
 
Event-driven IO server-side JavaScript environment based on V8 Engine
Event-driven IO server-side JavaScript environment based on V8 Engine
Ricardo Silva
 
Ad

Recently uploaded (20)

Connecting Data and Intelligence: The Role of FME in Machine Learning
Connecting Data and Intelligence: The Role of FME in Machine Learning
Safe Software
 
Coordinated Disclosure for ML - What's Different and What's the Same.pdf
Coordinated Disclosure for ML - What's Different and What's the Same.pdf
Priyanka Aash
 
Lessons Learned from Developing Secure AI Workflows.pdf
Lessons Learned from Developing Secure AI Workflows.pdf
Priyanka Aash
 
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
caoyixuan2019
 
A Constitutional Quagmire - Ethical Minefields of AI, Cyber, and Privacy.pdf
A Constitutional Quagmire - Ethical Minefields of AI, Cyber, and Privacy.pdf
Priyanka Aash
 
"How to survive Black Friday: preparing e-commerce for a peak season", Yurii ...
"How to survive Black Friday: preparing e-commerce for a peak season", Yurii ...
Fwdays
 
EIS-Webinar-Engineering-Retail-Infrastructure-06-16-2025.pdf
EIS-Webinar-Engineering-Retail-Infrastructure-06-16-2025.pdf
Earley Information Science
 
Quantum AI Discoveries: Fractal Patterns Consciousness and Cyclical Universes
Quantum AI Discoveries: Fractal Patterns Consciousness and Cyclical Universes
Saikat Basu
 
The Future of Product Management in AI ERA.pdf
The Future of Product Management in AI ERA.pdf
Alyona Owens
 
Enhance GitHub Copilot using MCP - Enterprise version.pdf
Enhance GitHub Copilot using MCP - Enterprise version.pdf
Nilesh Gule
 
Salesforce Summer '25 Release Frenchgathering.pptx.pdf
Salesforce Summer '25 Release Frenchgathering.pptx.pdf
yosra Saidani
 
AI Agents and FME: A How-to Guide on Generating Synthetic Metadata
AI Agents and FME: A How-to Guide on Generating Synthetic Metadata
Safe Software
 
Hyderabad MuleSoft In-Person Meetup (June 21, 2025) Slides
Hyderabad MuleSoft In-Person Meetup (June 21, 2025) Slides
Ravi Tamada
 
Curietech AI in action - Accelerate MuleSoft development
Curietech AI in action - Accelerate MuleSoft development
shyamraj55
 
Agentic AI for Developers and Data Scientists Build an AI Agent in 10 Lines o...
Agentic AI for Developers and Data Scientists Build an AI Agent in 10 Lines o...
All Things Open
 
Cyber Defense Matrix Workshop - RSA Conference
Cyber Defense Matrix Workshop - RSA Conference
Priyanka Aash
 
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC
 
10 Key Challenges for AI within the EU Data Protection Framework.pdf
10 Key Challenges for AI within the EU Data Protection Framework.pdf
Priyanka Aash
 
" How to survive with 1 billion vectors and not sell a kidney: our low-cost c...
" How to survive with 1 billion vectors and not sell a kidney: our low-cost c...
Fwdays
 
"Database isolation: how we deal with hundreds of direct connections to the d...
"Database isolation: how we deal with hundreds of direct connections to the d...
Fwdays
 
Connecting Data and Intelligence: The Role of FME in Machine Learning
Connecting Data and Intelligence: The Role of FME in Machine Learning
Safe Software
 
Coordinated Disclosure for ML - What's Different and What's the Same.pdf
Coordinated Disclosure for ML - What's Different and What's the Same.pdf
Priyanka Aash
 
Lessons Learned from Developing Secure AI Workflows.pdf
Lessons Learned from Developing Secure AI Workflows.pdf
Priyanka Aash
 
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
caoyixuan2019
 
A Constitutional Quagmire - Ethical Minefields of AI, Cyber, and Privacy.pdf
A Constitutional Quagmire - Ethical Minefields of AI, Cyber, and Privacy.pdf
Priyanka Aash
 
"How to survive Black Friday: preparing e-commerce for a peak season", Yurii ...
"How to survive Black Friday: preparing e-commerce for a peak season", Yurii ...
Fwdays
 
EIS-Webinar-Engineering-Retail-Infrastructure-06-16-2025.pdf
EIS-Webinar-Engineering-Retail-Infrastructure-06-16-2025.pdf
Earley Information Science
 
Quantum AI Discoveries: Fractal Patterns Consciousness and Cyclical Universes
Quantum AI Discoveries: Fractal Patterns Consciousness and Cyclical Universes
Saikat Basu
 
The Future of Product Management in AI ERA.pdf
The Future of Product Management in AI ERA.pdf
Alyona Owens
 
Enhance GitHub Copilot using MCP - Enterprise version.pdf
Enhance GitHub Copilot using MCP - Enterprise version.pdf
Nilesh Gule
 
Salesforce Summer '25 Release Frenchgathering.pptx.pdf
Salesforce Summer '25 Release Frenchgathering.pptx.pdf
yosra Saidani
 
AI Agents and FME: A How-to Guide on Generating Synthetic Metadata
AI Agents and FME: A How-to Guide on Generating Synthetic Metadata
Safe Software
 
Hyderabad MuleSoft In-Person Meetup (June 21, 2025) Slides
Hyderabad MuleSoft In-Person Meetup (June 21, 2025) Slides
Ravi Tamada
 
Curietech AI in action - Accelerate MuleSoft development
Curietech AI in action - Accelerate MuleSoft development
shyamraj55
 
Agentic AI for Developers and Data Scientists Build an AI Agent in 10 Lines o...
Agentic AI for Developers and Data Scientists Build an AI Agent in 10 Lines o...
All Things Open
 
Cyber Defense Matrix Workshop - RSA Conference
Cyber Defense Matrix Workshop - RSA Conference
Priyanka Aash
 
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC
 
10 Key Challenges for AI within the EU Data Protection Framework.pdf
10 Key Challenges for AI within the EU Data Protection Framework.pdf
Priyanka Aash
 
" How to survive with 1 billion vectors and not sell a kidney: our low-cost c...
" How to survive with 1 billion vectors and not sell a kidney: our low-cost c...
Fwdays
 
"Database isolation: how we deal with hundreds of direct connections to the d...
"Database isolation: how we deal with hundreds of direct connections to the d...
Fwdays
 
Ad

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

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