getting started with emscripten – transpiling c / c++ to javascript / html5
TRANSCRIPT
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