HighPerformanceComputationalGraphics-GWeb2

High Performance Computa3onal Graphics in the Browser The Graphical Web 2015 Nikos Andronikos CiSRA SVG Gradients are boring one-­‐dimensional h0p://jsfiddle.net/dodgeyhack/hgpd16am/ h0p://jsfiddle.net/dodgeyhack/hvmj3bf0/ 2 Mesh Based Gradients in SVG 2 !   An array of Coon’s patches !   With smoothing! Patches inherit top and leG sides where possible 3 Diffusion Curves 4 Demo! Me: I’d like to release a demo of our DC renderer My boss: Maybe you could release a JS version? Me: hahhahahahaha … hmmmmmm maybe I’ll try this emscripten thing? 5 What is Emscripten? An LLVM to JS compiler •  This means you can compile c and c++ programs as JavaScript to run in the browser Such as: •  Unreal Engine •  Unity Engine •  Quake3 •  Doom 6 What is Emscripten? An LLVM to JS compiler •  LLVM bytecode in, asm.js out .c
.js
emcc / em++
.cpp
clang
libc++
LLVM
fastcomp
libc
OpenGL
SDL
7 Emscripten Performance 1.5 x!
!
http://kripken.github.io/embenchen/
8 What makes emscripten possible? The level of opUmisaUon in modern JavaScript engines And.. ArrayBuffer Objects •  Enable representaUon of a heap •  Strongly typed so enable many opUmisaUons 9 What makes emscripten possible? ArrayBuffer Objects h0p://jsfiddle.net/dodgeyhack/97u6ojdg/ ArrayBuffer(8)
24
A7
5D
1A5DA724
1A
FF
FF
FF
DEFFFFFF
DE
UInt8Array
UInt32Array
10 Asm.js A restricUve subset of JavaScript with a defined validaUon schema that enables extreme opUmisaUon Comprised of: •  Various numeric types •  Minimal set of operators •  A staUc heap •  First class funcUons and funcUon pointers 11 What makes Asm.js fast? •  runUme type checks not required •  Available operaUons and types are limited •  Use of ArrayBuffer objects for memory representaUon •  No objects created that require garbage collecUon Ahead of Time compilaUon can offer more predictable performance 12 Asm.js Type is inferred with annota3ons and coercion. 13 JavaScript Engine Goals JavaScript engines must efficiently run many varied types of script. To offer best performance, a JS engine must offer: !  Low latency for scripts executed on load !  Extreme performance for computaUonally intensive code invoked regularly 14 Modes of opera3on Interpreta3on •  A virtual machine performs the instrucUons requested of it Just in 3me (JIT) compila3on •  AGer reaching a threshold of use, a porUon of code is compiled into a unit of machine code Ahead of 3me (AOT) compila3on •  Before it is needed (i.e. on load), a porUon of code is compiled into a unit of machine code 15 Basic JS Engine Architecture !
!
!
!
!
  Each level offers progressively be0er opUmisaUon OpUmisaUon is performed at the method level   Baseline JIT profiles during execuUon and stores type info   From observed types, speculaUve opUmisaUon is performed   If type checks fail, execuUon falls back to the previous level interpreter
baseline JIT
Optimising JIT
16 SpiderMonkey (Mozilla’s JS Engine) !   Very similar to the theoreUcal engine, with the addiUon of an AOT compiler for asm.js ! asm.js is converted to IONMonkey IR and then opUmised and compiled in IONMonkey !   AOT compilaUon aims to offer predictable performance ODINMonkey
(AOT compiler)
interpreter
baseline JIT
IONMonkey
(JIT compiler)
17 V8 (Google’s JS Engine) !   No interpreter! !   Turbofan is currently only parUally enabled !  It is used for asm.js CrankShaft
(JIT compiler)
Full-codegen
(JIT compiler)
Turbofan
(JIT compiler)
18 JavaScriptCore (WebKit’s JS Engine) ! JavaScriptCore has two levels of opUmising JIT !   FTL JIT is built upon LLVM LLInt (interpreter)
baseline JIT
DFG JIT
FTL JIT
LLVM
19 The big ques3on… Are they fast yet? 20 What’s to come? SIMD.js (Single Instruc3on Mul3ple Data) No SIMD 😴 With SIMD 😎 1
1
2
1
1
2
3
4
7
2
7
9
0
3
3
•  Proposed for ES7 [haps://github.com/tc39/ecmascript_simd] •  Implemented in FF Nightly h0p://jsfiddle.net/dodgeyhack/q9y1at1p/ 21 What’s to come? Web Assembly (wasm) •  An evoluUon of asm.js •  wasm will address the gaps in JS that are difficult to fill without adding a lot of complexity in the language •  IniUally a simple translaUon to asm.js – wasm can be polyfilled •  Uses a binary Abstract Syntax Tree (AST) representaUon, but ‘view source’ will work h0ps://www.w3.org/community/webassembly/ 22 What are diffusion curves? !   A type of vector drawing primiUve !   The curve itself doesn’t render. It sets the posiUons of colour constraints for a gradient !   Colour diffuses outwards, and mixes with the colour from other diffusion curves to produce a complex gradient image = 23 SVG Gradients are boring one-­‐dimensional h0p://jsfiddle.net/dodgeyhack/hgpd16am/ h0p://jsfiddle.net/dodgeyhack/hvmj3bf0/ 24 Advanced gradients are mul3-­‐dimensional! 25 Advanced gradients are mul3-­‐dimensional! 26 Advanced gradients are mul3-­‐dimensional! 27 Sunset and silhoue0e by Don McCullough is licensed under CC BY 2.0 h0ps://www.flickr.com/photos/69214385@N04/7469641132/ 28 B707-­‐138B/QANTAS/JETT CLIPPER JOHNNY/N707JT by philippe ARHAB is licensed under CC BY-­‐SA 2.0 h0ps://www.flickr.com/photos/phinalanji/1585881314/ 29 Image rendered from diffusion curve data (© Alexandrina Orzan and Adrien Bousseau) provided by INRIA. 30 Image rendered from diffusion curve data (© Alexandrina Orzan and Adrien Bousseau) provided by INRIA. 31 32 Examples… 33 Proposal h0ps://github.com/nikosandronikos/svg-­‐adv-­‐grad 34 Diffusion Curves in the context of SVG A real example 35 Diffusion Curves in the context of SVG A real example 36 Diffusion Curves in the context of SVG A real example 37 Diffusion Curves in the context of SVG A real example 38 Diffusion Curves in the context of SVG A real example 39 A fast and accurate DC renderer !   To make DC viable in SVG we have implemented a mul3-­‐
grid based diffusion curves renderer !  MulU-­‐grid is an approach which has been used previously, but never perfected !   Generally, a mul3-­‐grid renderer is: !  Accurate at the constraints. Approximate (but close) in between. !   Our renderer: !  Doesn’t exhibit the issues typically seen in a mg renderer (leakage, etc) !  Constraints retain relaUonship with curve data, allowing the constraints to be determined from the curve data, not the mulU-­‐grid image pixel values !  Is fast !  10x faster than comparable fastest prior art method 40 A fast and accurate DC renderer 41 A fast and accurate DC renderer 512 x 512 42 A fast and accurate DC renderer Leakage 43 A fast and accurate DC renderer 256 x 256 44 A fast and accurate DC renderer 128 x 128 45 A fast and accurate DC renderer 64 x 64 46 A fast and accurate DC renderer 32 x 32 47 A fast and accurate DC renderer 8 x 8 48 A fast and accurate DC renderer 49 A fast and accurate DC renderer 50 A fast and accurate DC renderer 51 A fast and accurate DC renderer 52 A fast and accurate DC renderer 53 A fast and accurate DC renderer 54 A fast and accurate DC renderer 55 A fast and accurate DC renderer 56 Finishing up !  QuesUons? !  Thankyou for having me! !  Contact: ! [email protected] !  @nandronikos 57