Parallel Web Programming

Parallel Web Programming Tobias Groß, Björn Meier Hardware/Software Co-Design, University of Erlangen-Nuremberg May 23, 2013

Outline WebGL OpenGL Rendering Pipeline Shader WebCL Motivation Development Design A portable javascript thread library for Ajax applications Ajax Multithread library Web Workers Motivation Programing with Web Workers Load distribution by using Web Workers for a real-time web aaplication May 23, 2013 Tobias Groß, Björn Meier Hardware/Software Co-Design Parallel Web Programming 2

WebGL cross-browser and cross-platform API to create 2D/3D graphics based on OpenGL ES 2.0 uses OpenGL shading language GLSL runs in HTML5 canvas elements low-level API can be simplified by WebGL libraries (three.js, GLGE,...) Matrix libraries May 23, 2013 Tobias Groß, Björn Meier Hardware/Software Co-Design Parallel Web Programming 3

Figure: OpenGL ES 2.0 rendering pipeline[1] May 23, 2013 Tobias Groß, Björn Meier Hardware/Software Co-Design Parallel Web Programming 4

Rendering Pipeline 1. Vertex Shader 2. Triangle assembly 3. Rasterization 4. Fragment Shader 1 2 3 4 Figure: Example for rendering an object. May 23, 2013 Tobias Groß, Björn Meier Hardware/Software Co-Design Parallel Web Programming 5

Shader Vertex Shader receives a single vertex composed of a series of Vertex Attributes produces an output vertex 1:1 mapping from input vertices to output vertices Fragment Shader processes a Fragment from the rasterization process into a set of colors and a single depth value < s c r i p t i d ="2d vertex shader " type ="x shader / x vertex " > a t t r i b u t e vec2 a _ p o s i t i o n ; void main ( ) { g l _ P o s i t i o n = vec4 ( a_position, 0, 1) ; } </ s c r i p t > Figure: vertex shader < s c r i p t i d ="2d fragment shader " type ="x shader / x fragment " > void main ( ) { gl_fragcolor = vec4 ( 0, 1, 0, 1 ) ; / / green } </ s c r i p t > Figure: fragment shader May 23, 2013 Tobias Groß, Björn Meier Hardware/Software Co-Design Parallel Web Programming 6

WebGL is gather system fast for a special purpose lack of flexibility gather read The program will write to a fixed position (like the target fragment position of a fragment shader), but has fast access to arbitrary data sources (textures, uniforms, etc.). scatter write The program receives a stream of input data which it cannot arbitarily address, but can do fast writes to arbitrary memory locations. May 23, 2013 Tobias Groß, Björn Meier Hardware/Software Co-Design Parallel Web Programming 7

Outline WebGL OpenGL Rendering Pipeline Shader WebCL Motivation Development Design A portable javascript thread library for Ajax applications Ajax Multithread library Web Workers Motivation Programing with Web Workers Load distribution by using Web Workers for a real-time web aaplication May 23, 2013 Tobias Groß, Björn Meier Hardware/Software Co-Design Parallel Web Programming 8

Motivation for WebCL increasing number of compute intensive browser applications complex image and audio processing scientific simulations games augmented reality... JavaScript is insufficient use of heterogeneous resources OpenCL kernel vs GLSL shader OpenCL has functionality not available in GLSL shaders Scattered writes Local memory Thread synchronization Atomic memory operations May 23, 2013 Tobias Groß, Björn Meier Hardware/Software Co-Design Parallel Web Programming 9

Development Specification of an JavaScript binding to the Khronos OpenCL standard is still in progress by the Khronos Group. Implementation prototypes Nokia (Firefox extension) Samsung (WebKit) Motorola (NodeJS) May 23, 2013 Tobias Groß, Björn Meier Hardware/Software Co-Design Parallel Web Programming 10

Design for Samsung implementation[2] (Nokia and Motorola are similar) interface above OpenCL (drivers with OpenCL support are required) single WebCL object Error handling: JavaScript-like exception handling mechanism Interoperability with HTML Canvas, Image and Video Elements kernel source code must be part of web page WebGL interoperability May 23, 2013 Tobias Groß, Björn Meier Hardware/Software Co-Design Parallel Web Programming 11

< s c r i p t i d =" square " type ="x k e r nel " > kernel void square ( global f l o a t input, global f l o a t output, const unsigned i n t count ) { i n t i = g e t _ g l o b a l _ i d ( 0 ) ; i f ( i < count ) output [ i ] = i n p u t [ i ] i n p u t [ i ] ; } </ s c r i p t > < s c r i p t > f u n c t i o n getkernel ( i d ) { var k e r n e l S c r i p t = document. getelementbyid ( i d ) ; i f ( k e r n e l S c r i p t === n u l l k e r n e l S c r i p t. type!== " x kernel " ) r e t u r n n u l l ; r e t u r n k e r n e l S c r i p t. f i r s t C h i l d. textcontent ; } </ s c r i p t > < s c r i p t >... var kernelsource = getkernel ( " square " ) ;... program = context. createprogram ( kernelsource ) ; / / B u i l d the program executable program. b u i l d ( device ) ; / / Create the compute k e r n e l i n the program we wish to run kernel = program. createkernel ( " square " ) ;... / / Set the arguments to our compute kernel kernel. setarg ( 0, i n p u t ) ;... queue. enqueuendrangekernel ( kernel, n u l l, globalworksize, localworksize ) ;... </ s c r i p t > May 23, 2013 Tobias Groß, Björn Meier Hardware/Software Co-Design Parallel Web Programming 12

Outline WebGL OpenGL Rendering Pipeline Shader WebCL Motivation Development Design A portable javascript thread library for Ajax applications Ajax Multithread library Web Workers Motivation Programing with Web Workers Load distribution by using Web Workers for a real-time web aaplication May 23, 2013 Tobias Groß, Björn Meier Hardware/Software Co-Design Parallel Web Programming 13

Ajax (Asynchronous JavaScript and XML) asynchronous web applications dynamicly changing web pages Figure: classic web application[7] Figure: Ajax web application[7] Problem: event driven asynchronous programs on a single thread May 23, 2013 Tobias Groß, Björn Meier Hardware/Software Co-Design Parallel Web Programming 14

Multithread library[4][3] Features: JavaScript library concurrent programming with threads preemptive scheduler object-oriented API portability May 23, 2013 Tobias Groß, Björn Meier Hardware/Software Co-Design Parallel Web Programming 15

API Public methods: create stop sleep yield kill Http.get Http.post... f u n c t i o n load ( u r l ) { var th = Thread. create ( nowloading ) ; t r y { var res = Thread. Http. get ( u r l ) ; document. w r i t e ( res. responsetext ) ; } catch ( e ) { document. w r i t e ( "ERROR: " + e ) ; } th. k i l l ( ) ; } f u n c t i o n nowloading ( ) { var bar = [ " ", " / ", " ", " \ " ] ; var i = 0; while ( t r u e ) { window. s t a t u s = "Now loading... " + bar [ i =( i +1) %4]; Thread. sleep (125) ; } } Thread. create ( load, " h t t p : / /... " ) ; Figure: example for the multithread library[3] May 23, 2013 Tobias Groß, Björn Meier Hardware/Software Co-Design Parallel Web Programming 16

Design timesharing the UI-thread for pseudo multithreading program break-up into basic blocks continuation-based multithreading f u n c t i o n f ( ) { var c = getc ( ) ; / / ( ) document. w r i t e ( c, " \ n " ) ; } f u n c t i o n f ( ) { var c = getc ( ) ; f u n c t i o n r e s t ( ) { document. w r i t e ( c, " \ n " ) ; } r e s t ( ) ; } Figure: Original program[7] Figure: Rewriting result[7] trampolined style do { t r y { context = context. c o n t i n u a t i o n. procedure. c a l l ( context. c o n t i n u a t i o n. t h i s _ v a l, context. r e t _ v a l ) ; } catch ( e ) { exception handling } } while ( context. timeout == undefined && time s l i c e remains ) ; Figure: trampoline[7] May 23, 2013 Tobias Groß, Björn Meier Hardware/Software Co-Design Parallel Web Programming 17

Outline WebGL OpenGL Rendering Pipeline Shader WebCL Motivation Development Design A portable javascript thread library for Ajax applications Ajax Multithread library Web Workers Motivation Programing with Web Workers Load distribution by using Web Workers for a real-time web aaplication May 23, 2013 Tobias Groß, Björn Meier Hardware/Software Co-Design Parallel Web Programming 18

Motivation What are Web Workers? extension for JavaScript available in all modern browsers allows to run scripts in the background are relatively heavy-weight high start-up performance cost high per-instance memory cost Why using Web Workers? they allow to write client-side code, that utilize threads, which run in background this threads don t block the frontend (keeps the webpage responsive) you can relocate computing power from server-side to client-side May 23, 2013 Tobias Groß, Björn Meier Hardware/Software Co-Design Parallel Web Programming 19

Example using Web Workers < s c r i p t > var worker = new Worker ( worker. js ) ; worker. onmessage = f u n c t i o n ( event ) { document. getelementbyid ( r e s u l t ). textcontent = event. data ; } ; </ s c r i p t > Figure: compute prime numbers 1 [6] var n = 1; search : while ( t r u e ) { n += 1; f o r ( var i = 2; i <= Math. s q r t ( n ) ; i += 1) i f ( n % i == 0) continue search ; / / found a prime! postmessage ( n ) ; } Figure: compute prime numbers 2 [6] May 23, 2013 Tobias Groß, Björn Meier Hardware/Software Co-Design Parallel Web Programming 20

Web Workers API (extract) Constructors Worker( script.js ) Communication main thread uses postmessage method to communicate with the worker worker handle messages with a onmessage function, which must be implemented communication in other direction uses function postmessage and a messagehandler as well May 23, 2013 Tobias Groß, Björn Meier Hardware/Software Co-Design Parallel Web Programming 21

The web application Initial situation it s a web-based multiplayer online role-playing game every user operates an avatar the avatars interact with other avatars or NPCs to interact, avatars have to move arround the movement is computed depending on forces which affect the avatar Problem Server has to compute forces of all avatars and NPCs the latency has to be smaller than 500 ms this limits the number of avatars a server can handle at once Solution Load distribution from server to client using Web Workers May 23, 2013 Tobias Groß, Björn Meier Hardware/Software Co-Design Parallel Web Programming 22

Program flow with Web Worker Figure: System with Web Worker[5] May 23, 2013 Tobias Groß, Björn Meier Hardware/Software Co-Design Parallel Web Programming 23

Evaluation Figure: Web Worker performance based on browser implementation[5] May 23, 2013 Tobias Groß, Björn Meier Hardware/Software Co-Design Parallel Web Programming 24

Evaluation Figure: CPU Usage of server[5] May 23, 2013 Tobias Groß, Björn Meier Hardware/Software Co-Design Parallel Web Programming 25

Evaluation Figure: Data transfer rate[5] May 23, 2013 Tobias Groß, Björn Meier Hardware/Software Co-Design Parallel Web Programming 26

References I [1] Khronos Group. The standard for embedded accelerated 3d graphics, 2013. [Online; accessed 23-Mai-2013]. [2] Won Jeon, Tasneem Brutch, and Simon Gibbs. Webcl for hardware-accelerated web applications. 2012. [3] Daisuke Maki and Hideya Iwasaki. Javascript multithread framework for asynchronous processing. IPSJ Transactions on Programming, 48:1 18. [4] Daisuke Maki and Hideya Iwasaki. A portable javascript thread library for ajax applications. In Companion to the 22nd ACM SIGPLAN conference on Object-oriented programming systems and applications companion, OOPSLA 07, pages 817 818, New York, NY, USA, 2007. ACM. May 23, 2013 Tobias Groß, Björn Meier Hardware/Software Co-Design Parallel Web Programming 27

References II [5] Shusuke Okamoto and Masaki Kohana. Load distribution by using web workers for a real-time web application. In International Journal of Web Information Systems, pages 381 395, 2011. [6] W3C. Web workers, 2012. [Online; accessed 20-Mai-2013]. [7] Wikipedia. Ajax (programmierung), 2013. [Online; accessed 20-Mai-2013]. May 23, 2013 Tobias Groß, Björn Meier Hardware/Software Co-Design Parallel Web Programming 28