Slide 1

Slide 1 text

EMSCRIPTEN A Quick Introduction To By Bryan Rockwood

Slide 2

Slide 2 text

What Is Emscripten? ! • A bridge between C/C++ and JavaScript! • Works with LLVM bitcode (produced by llvm-gcc or clang)! • Generates asm.js formatted JavaScript! • Works anywhere JavaScript will run (browsers, node, etc)

Slide 3

Slide 3 text

How Do You Use It? • Visit https://github.com/kripken/emscripten for install instructions (or simply Google ‘emscripten’) • SDK provides a toolchain to interact with C/C++ • emconfigure/emmake to compile an existing project • emcc to compile .c/.cpp files manually

Slide 4

Slide 4 text

What’s My Use Case? • HTML5 Weather Application • Contouring • Library originally written in JavaScript • Converted to C • Compiled back to JavaScript • Queue Inception *BONGGG*

Slide 5

Slide 5 text

Why Go To All This Trouble? • Large files, lots of grid points (example is 614x428) • Original JS code was around ~130ms to ~160ms in Chrome and Firefox, respectively • Native C version is ~26ms • Chrome was ~88ms per grid • Firefox hit ~40ms per grid (?!) • Code is cross platform • OpenGL is compiled to WebGL

Slide 6

Slide 6 text

A Few Gotchas… • The other browsers don’t fair so well (IE11 looks much better) • Not all C calls optimized for JS (hypot) • Editing and debugging code “difficult” • Have to get into the mindset of working on a heap with things like ‘malloc’ and ‘free’

Slide 7

Slide 7 text

Future Work • Up next is finishing integrating emscripten compiled Proj4 • Start learning OpenGL ES for Emscripten WebGL work • Tie C libraries into iOS application

Slide 8

Slide 8 text

Questions/Comments? • Reach me on Twitter @BRock97 • I’m also on Google+ at 
 https://plus.google.com/+BryanRockwood • Email at [email protected]