High Performance Computing in Web Browsers CE Seminar WT14/15 - PowerPoint PPT Presentation

High Performance Computing in Web Browsers CE Seminar WT14/15 Henning Lohse

High Performance Computing voltagegate.scientopia.org ks.uiuc.edu

High Performance Computing Processor Intra node Inter node GPU (coprocessor)

High Performance Computing C/C++ pthreads, OpenMP MPI, sockets CUDA, OpenCL

Consumer Electronics

Web Browsers

HPC in Web Browsers ? ? ? ?

JavaScript JavaScript ? ? ?

JavaScript in HTML DOM kirupa.com

JavaScript Type System ● Dynamically typed var car _pr ot ot ype = { " Br and": " Audi ", " Pl at e" : " M US TER 00", ● Object-oriented " M ax. km / h": 250, " O w ner ": { " Nam e": " M ax" , ● Classless " M al e" : t r ue, " Hobbi es": [ "D r i vi ng", " Readi ng"] , ● Prototypes " Age": 42, } }; var car _copy = O bj ect . cr eat e( car _pr ot ot ype) ; car _copy[ "Pr i ce"] = 10000; car _copy[ "O w ner "] [ " Hobbi es"] . push( "Spor t " ) ; JavaScript Object Notation (JSON)

Garbage Collection Provided by Browsers Mark and Sweep Frees unused objects ● Implicit ● No leaks ● Undefined time adobe.com

Performance Example var pr i m es = [ ] ; f or ( var p = 2; p < = m ax; p+ + ) { var i s_pr i m e = t r ue; f or ( var i = 2; i < = M at h. sqr t ( m ax) ; i + + ) i f ( p % i = = 0 & & p ! = i ) { i s_pr i m e = f al se; br eak; } pr i m es[ p] = i s_pr i m e; } +24%

asm.js JavaScript, asm.js ? ? ?

asm.js “optimizable, low-level subset of JS” - Mozilla var pr i m es = [ ] ; var pr i m es = new I nt32A rray(m ax) ; f or ( var p = 2; p < = m ax; p+ + ) { f or ( var p = (2| 0) ; p < = m ax; p+ + ) { var i s_pr i m e = t r ue; var i s_pr i m e = (1| 0) ; f or ( var i = 2; i < = M at h. sqr t ( m ax) ; i + + ) f or ( var i = ( 2| 0) ; i < = (M ath. sqrt(m ax)| 0) ; i + + ) i f ( p % i = = 0 & & p ! = i ) { i f ( p % i = = (0| 0) & & p ! = i ) { i s_pr i m e = f al se; i s_pr i m e = (0| 0) ; br eak; br eak; } } pr i m es[ p] = i s_pr i m e; pr i m es[ p] = i s_pr i m e; } }

asm.js var pr i m es = new I nt32A rray(m ax) ; f or ( var p = (2| 0) ; p < = m ax; p+ + ) { var i s_pr i m e = (1| 0) ; f or ( var i = ( 2| 0) ; i < = (M ath. sqrt(m ax)| 0) ; i + + ) i f ( p % i = = (0| 0) & & p ! = i ) { i s_pr i m e = (0| 0) ; br eak; +24% +0.4% } pr i m es[ p] = i s_pr i m e; }

LLVM ISA of a virtual machine + compilation passes C, C++, Java, Python, … → LLVM IR → Binary

Emscripten C/C++ → LLVM IR → asm.js clang Emscripten

asm.js Support https://hacks.mozilla.org/2014/05/asm-js-performance-improvements-in-the-latest-version-of-firefox-make-games-fly/

asm.js Summary ● JavaScript subset ● Annotation-based optimization detection ● Aims at near-native performance ● Compilable from C/C++ ● Growing browser support

HTML5 Web Workers JavaScript, asm.js HTML5 Web Workers ? ?

HTML5 Web Workers Threads communicating via Message Passing < scri pt> w orker_scri pt. j s: var w or ker = new W or ker ( “w or ker _scr i pt . j s”) ; w or ker . addEvent Li st ener ( “ m essage ”, f unct i on( e) { sel f . addEvent Li st ener ( “ m essage ”, f unct i on( e) { consol e. l og( e. dat a) ; / / Async com put at i ons go her e }, f al se) ; sel f . postM essage ( e. dat a) ; }, f al se) ; w or ker . postM essage ( “Hel l o! ”) ; < / scr i pt >

postMessage: Structured Cloning Garbage collection!

postMessage: Transferable Objects var ar r ay = new Ar r ayBuff er ( 1024) ; / / 1kB w or ker . post M essage( ar r ay . buff er , [ ar r ay . buff er ] ) ; Transferred data switch contexts!

WebRTC DataChannel JavaScript, asm.js HTML5 Web Workers WebRTC Data- Channel ?

HTTP HTML5 WebSocket ● Stateless ● Client server arch. ● GET, POST, … ● TCP only ● Cookies developer.mozilla.org hilmanr.blogspot.com

WebRTC html5rocks.org

WebRTC DataChannel webrtc.org

WebCL, WebGL JavaScript, asm.js HTML5 Web Workers WebRTC Data- Channel WebCL, WebGL

GPU Computing arstechnica.net wccftech.com

“__ker nel voi d vect or Add __gl obal const fl oat * x, __gl obal const fl oat * y, __gl obal fl oat * r est r i ct z) { ● Like OpenCL i nt i ndex = get _gl obal _i d( 0) ; z[ i ndex] = x[ i ndex] + y[ i ndex] ; }” ● Hardware exposure ● IEEE 754 float ● Heterogeneous D r i v e r ● Drivers ● Adaption

Compute Shaders ● Since 4.3 (ES 3.1) l ayout ( l ocal _si ze_x = 16, l ocal _si ze_y = 16) i n; uni f or m r eadonl y i m age2D f r om T ex; uni f or m w r i t eonl y i m age2D t oT ex; ● GLSL, adaption voi d m ai n( ) { i vec2 t exel Coor ds = i vec2( gl _G l obal I nvocat i onI D . xy) ; vec4 pi xel = i m ageLoad( f r om T ex, t exel Coor ds) ; pi xel . r g = pi xel . gr ; i m ageSt or e( t oT ex, t exel Coor ds, pi xel ) ; ● Graphics abstraction } ● No IEEE 754 float ● WebGL 1.0/2.0