getting started with emscripten – transpiling c / c++ to javascript / html5

Emscripten - Transpiling C / C++

to JS / HTML5Dave Voyles

Sr. Tech Evangelist, PhiladelphiaDaveVoyles.com

JavaScript is standards-based and the only language that runs in all web

browsers

You can run only JavaScript in browsers, but you can write in another language - if you compile it to JavaScript

Everything compiles to LLVM bitcode

Which we can then turn into JavaScript

Native code has its perks (performance!)

But so does rapid testing/sharing.

Transpile to JS and just share a URL

This is nothing new (well, sort of…)

C#, Python, Java, TypescriptAll transpile to JavaScript

• Pyjs – Python• JSIL – C#• Java – Google Web

Toolkit

Why now?

non-standardized approaches (ActiveX, Silverlight, Flash/Alchemy, PNaCl/PPAPI) have had limited

success in the past

Why now?

Plugins outside of HTML5 standards have not received widespread adoption for both technical

and non-technical reasons

Besides, they are on their way out

No plugins for iOS devices, Google nixes NPAPI, etc.

This is great for the web! Standards!

JavaScript is a standard, so why not compile to that?

Example: gaming on the web

Experience w/ typical games:• Go to platform-specific store, log in, find game,

purchase, download, install, patch, playExperience w/ web games:

• www.DaveVoyles.com (Launches the game!)

JS then vs JS now

Then: JS began as a slow interpreted language

JS then vs JS nowImplicit, statically typed code in JS, just like the competition

JS then vs JS nowNow: Asm.js – highly optimized, performant subset of JS

asm.js overview

Emscripten overview• Open source (MIT/LLVM) • Began in 2010

Emscripten is built on LLVM• clang C++ frontend• LLVM optimizer• libc++ C++ standard library• libc++abi low-level C++ support

Clang supports nearly all C++ features, so Emscripten does as well

Exception handling takes some work, though

Runtime functions

What about other libraries?

SDL & OpenGL are implemented via Web APIs, same with musl (Linux)

• Bullet • Box2D • Python

• Lua• Ruby• zlib

Not without its limitations• 64-bit integer math will not work

• No multithreading with shared state

• No Direct3D support, only OpenGL

DebuggingThis is a problem in general with compiling for the web. Source maps can help, but browsers do have more work to do to make debugging compiled code a smoother experience.

Start with your compiled code.

How does it work?

Numeric types

JS• double

LLVM•i8, i16, i32, float,

double

Performance LLVM

• types & operations map ~1:1 to CPU• RAII offers

Predictability

JS• virtual machine (VM)• just in time (JIT) compilers

w/ type profiling• garbage collection• Etc.

Builds C++

•Need to recompile for each CPU / OS

JS•One build to rule

them all

Variables

LLVM• Local vars have

function scope

JS• Local vars have

function scope

Security concernsJS

• Sandboxed• Cannot see the

machine it is running on

C++•Apps can use system

libs•Access local

filesystem

Security concerns (cont’d)

The JS stack is managed and unobservable/unmodifiable by executing code.

Compiled C++ is immune to some types of buffer overflow attacks

Can be beneficial, though….

More speedLoads in LLVM IR become reads from typed array (binary data in the browser) in JS, which become reads in machine code.

Why do this?

• Download just parts of the app, stream the rest• Ex: Star Citizen: 100GB+ Vs. Age of Ascent: 50Mb

• Circumvent app stores• Want to push updates? Just update your web app• No more 1 week waiting period, iOS

• Distribution through sources other than curated app stores• Release apps on your website

Browser support

native executable

Compiling with Emscripten

Generating codeThe target file name extension defines the output type to be generated:

<name> .js : JavaScript.

<name> .html : HTML + separate JavaScript file (<name>.js). (Having the separate JavaScript file improves page load time.)

<name> .bc : LLVM bitcode (default).

Porting processemcc is a drop-in replacement for gcc or clang

In many cases, you can use your normal build system, plug in emcc

Porting processemcc is a drop-in replacement for gcc or clang

In many cases, you can use your normal build system, plug in emcc

Connecting C / C++ and JS

Call compiled C++ classes from JavaScript using bindings created with:• Embind or WebIDL-Binder

Call compiled C functions from normal JavaScript:• Using ccall or cwrap.• Using direct function calls (faster but more complicated).

Call JavaScript functions from C/C++:• Using emscripten_run_script().• Using EM_ASM() (faster).• Using a C API implemented in JavaScript.• As function pointers from C.• Using the Embind val class.

Why not just turn your JavaScript code into asm.js?

Run-time type checking takes time.

Why not just turn your JavaScript code into asm.js?

In statically typed languages, such as C, the compiler knows the type of each

object when it is being compiled.

Offline experience

• IndexedDB• Local database of records, holding simple values

and hierarchical objects

• AppCache• Offline browsing, stores content on the disk

instead of network

• Service Workers• Coming soon

Performance

Unity WebGL benchmark

(Higher is better)

Unity WebGL Benchmarks

Unity WebGL Benchmarks• In benchmarks which stress WebGL rendering performance

(Particles, Asteroid Field), Edge performs best of all tested browsers.

• When you are mostly GPU-bound, you can expect WebGL to perform very similar to native code.

• In some areas, WebGL will actually outperform native code significantly. (Mandlebrot & Cryptohash)

• Native code can still be several times faster than WebGL for areas heavily optimized to use multi-threading and/or SIMD, such as the 3D physics tests.

Case study: Owlchemy Labs• 200+ levels

• 300 assets can be spawned a runtime

• 38 full length songs

• 1 million lines of JavaScript

• WebGL build (With Unity engine!) = 68.8Mb

• PC build = 192 Mb

Exporting with Unity

What goes in must come out

When you build a WebGL project, Unity will create a folder with the following files:

•  index.html file that embeds your content in a web page.

• JavaScript file containing the code for your player.

• .mem file containing a binary image to initialize the heap memory for your player.

• .data file containing the asset data and scenes.• some supporting JavaScript files to initialize and

load the player.

Some missing features• Networking other than WWW class (a WebSockets

plug-in is available)

• Support for WebCam and Microphone access

• Threads

• Any .NET features requiring dynamic code generation

• Runtime generation of Substance textures

ConclusionThe advantages of porting C/C++ to JavaScript are clear:

• Often a smaller package size• Easily demo or share projects on the

web• Reuse existing code

ReferencesThank you to Alon Zakai (@Kripken)and his wonderful work on the project!• http://twvideo01.ubm-us.net/o1/vault/gdconline12/Presentations/Emscript

en%20(pt%201).pdf

• https://www.reddit.com/r/programming/comments/2k3b4j/alon_zakai_emscripten_and_asmjs_cs_role_in_the/http://llvm.org/devmtg/2013-11/slides/Zakai-Emscripten.pdf

• http://llvm.org/devmtg/2013-11/slides/Zakai-Emscripten.pdf