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

ks.uiuc.edu voltagegate.scientopia.org

High Performance Computing

Inter node Processor Intra node GPU (coprocessor)

High Performance Computing

MPI, sockets C/C++ pthreads, OpenMP CUDA, OpenCL

Consumer Electronics

Web Browsers

HPC in Web Browsers

? ? ? ?

JavaScript

? JavaScript ? ?

JavaScript in HTML DOM

kirupa.com

JavaScript Type System

• Dynamically typed
• Object-oriented
• Classless
• Prototypes

JavaScript Object Notation (JSON)

var car _pr

• t
• t

ype = { " Br and": " Audi ", " Pl at e" : " M US TER 00", " M ax. km / h": 250, " O w ner ": { " Nam e": " M ax" , " M al e" : t r ue, " Hobbi es": [ "D r i vi ng", " Readi ng"] , " Age": 42, } }; var car _copy = O bj ect . cr eat e( car _pr

• t
• t

ype) ; car _copy[ "Pr i ce"] = 10000; car _copy[ "O w ner "] [ " Hobbi es"] . push( "Spor t " ) ;

Garbage Collection

Provided by Browsers Frees unused objects

• Implicit
• No leaks
• Undefined time

Mark and Sweep

adobe.com

Performance Example

var pr i m es = [ ] ; f

• r

( var p = 2; p < = m ax; p+ + ) { var i s_pr i m e = t r ue; f

• r

( var i = 2; i < = M at h. sqr t ( m ax) ; i + + ) i f ( p % i = = & & 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

var pr i m es = [ ] ; f

• r

( var p = 2; p < = m ax; p+ + ) { var i s_pr i m e = t r ue; f

• r

( var i = 2; i < = M at h. sqr t ( m ax) ; i + + ) i f ( p % i = = & & p ! = i ) { i s_pr i m e = f al se; br eak; } pr i m es[ p] = i s_pr i m e; } var pr i m es = new I nt32A rray(m ax) ; f

• r

( var p = (2| 0) ; p < = m ax; p+ + ) { var i s_pr i m e = (1| 0) ; f

• r

( 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; } pr i m es[ p] = i s_pr i m e; }

“optimizable, low-level subset of JS” - Mozilla

asm.js

var pr i m es = new I nt32A rray(m ax) ; f

• r

( var p = (2| 0) ; p < = m ax; p+ + ) { var i s_pr i m e = (1| 0) ; f

• r

( 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; } pr i m es[ p] = i s_pr i m e; }

+24% +0.4%

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

< scri pt> 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

• n(

e) { consol e. l

• g(

e. dat a) ; }, f al se) ; w or ker . postM essage( “Hel l

• !

”) ; < / scr i pt > w orker_scri pt. j s: sel f . addEvent Li st ener ( “m essage”, f unct i

• n(

e) { / / Async com put at i

• ns

go her e sel f . postM essage( e. dat a) ; }, f al se) ;

Threads communicating via Message Passing

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

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

HTTP HTML5 WebSocket

• Stateless
• GET, POST, …
• Cookies
• Client server arch.
• TCP only

developer.mozilla.org hilmanr.blogspot.com

WebRTC

html5rocks.org

WebRTC DataChannel

webrtc.org

WebCL, WebGL

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

GPU Computing

arstechnica.net wccftech.com

• Like OpenCL
• Hardware exposure
• IEEE 754 float
• Heterogeneous
• Drivers
• Adaption

“__ker nel voi d vect

• r

Add __gl

• bal

const fl

• at

* x, __gl

• bal

const fl

• at

* y, __gl

• bal

fl

• at

* r est r i ct z) { i nt i ndex = get _gl

• bal

_i d( 0) ; z[ i ndex] = x[ i ndex] + y[ i ndex] ; }”

D r i v e r

Compute Shaders

• Since 4.3 (ES 3.1)
• GLSL, adaption
• Graphics abstraction
• No IEEE 754 float
• WebGL 1.0/2.0

l ayout ( l

• cal

_si ze_x = 16, l

• cal

_si ze_y = 16) i n; uni f

• r

m r eadonl y i m age2D f r

• m T

ex; uni f

• r

m w r i t eonl y i m age2D t

• T

ex; voi d m ai n( ) { i vec2 t exel Coor ds = i vec2( gl _G l

• bal

I nvocat i

• nI

D . xy) ; vec4 pi xel = i m ageLoad( f r

• m T

ex, t exel Coor ds) ; pi xel . r g = pi xel . gr ; i m ageSt

• r

e( t

• T

ex, t exel Coor ds, pi xel ) ; }