Getting started with Emscripten – Transpiling C / C++ to JavaScript / HTML5
Download as PPTX, PDF4 likes6,943 views
Emscripten is a tool that transpiles C/C++ code to JavaScript and HTML5, enabling the use of high-performance code in web browsers. It leverages LLVM and allows integration with various libraries while addressing challenges like debugging and limited features. The benefits include smaller package sizes, rapid sharing capabilities, and reusability of existing code.
Getting started with Emscripten – Transpiling C / C++ to JavaScript / HTML5
- 1. Emscripten -Transpiling C / C++ to JS / HTML5 DaveVoyles Sr.Tech Evangelist, Philadelphia DaveVoyles.com
- 2. 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
- 3. Everything compiles to LLVM bitcode Which we can then turn into JavaScript
- 4. Native code has its perks (performance!) But so does rapid testing/sharing. Transpile to JS and just share a URL
- 5. This is nothing new (well, sort of…) C#, Python, Java,Typescript All transpile to JavaScript • Pyjs – Python • JSIL – C# • Java – GoogleWebToolkit
- 6. Why now? non-standardized approaches (ActiveX, Silverlight, Flash/Alchemy, PNaCl/PPAPI) have had limited success in the past
- 7. Why now? Plugins outside of HTML5 standards have not received widespread adoption for both technical and non-technical reasons
- 8. Besides, they are on their way out No plugins for iOS devices, Google nixes NPAPI, etc.
- 9. This is great for the web! Standards! JavaScript is a standard, so why not compile to that?
- 10. Example: gaming on the web Experience w/ typical games: • Go to platform-specific store, log in, find game, purchase, download, install, patch, play Experience w/ web games: • www.DaveVoyles.com (Launches the game!)
- 11. JS then vs JS now Then: JS began as a slow interpreted language
- 12. JS then vs JS now Implicit, statically typed code in JS, just like the competition
- 13. JS then vs JS now Now: Asm.js – highly optimized, performant subset of JS
- 14. asm.js overview
- 15. Emscripten overview •Open source (MIT/LLVM) •Began in 2010
- 16. Emscripten is built on LLVM • clang C++ frontend • LLVM optimizer • libc++ C++ standard library • libc++abi low-level C++ support
- 17. Clang supports nearly all C++ features, so Emscripten does as well Exception handling takes some work, though
- 20. What about other libraries? SDL & OpenGL are implemented viaWeb APIs, same with musl (Linux) • Bullet • Box2D • Python • Lua • Ruby • zlib
- 21. Not without its limitations •64-bit integer math will not work •No multithreading with shared state •No Direct3D support, only OpenGL
- 22. Debugging This 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.
- 23. How does it work?
- 24. Numerictypes JS • double LLVM •i8, i16, i32, float, double
- 25. 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.
- 26. Builds C++ •Need to recompile for each CPU / OS JS •One build to rule them all
- 27. Variables LLVM •Local vars have function scope JS •Local vars have function scope
- 28. Security concerns JS •Sandboxed • Cannot see the machine it is running on C++ •Apps can use system libs •Access local filesystem
- 29. 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….
- 30. More speed Loads in LLVM IR become reads from typed array (binary data in the browser) in JS, which become reads in machine code.
- 31. Why do this? • Download just parts of the app, stream the rest • Ex: Star Citizen: 100GB+Vs.Age ofAscent: 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
- 32. Browser support
- 35. Generating code The 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).
- 36. Porting process emcc is a drop-in replacement for gcc or clang In many cases, you can use your normal build system, plug in emcc
- 37. Porting process emcc is a drop-in replacement for gcc or clang In many cases, you can use your normal build system, plug in emcc
- 38. Connecting C / C++ and JS Call compiled C++ classes from JavaScript using bindings created with: • Embind orWebIDL-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.
- 39. Why not just turn your JavaScript code into asm.js? Run-time type checking takes time.
- 40. 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.
- 41. 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
- 42. Performance
- 44. (Higher is better) Unity WebGL Benchmarks
- 45. Unity WebGL Benchmarks • In benchmarks which stressWebGL 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 thanWebGL for areas heavily optimized to use multi-threading and/or SIMD, such as the 3D physics tests.
- 46. 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
- 49. 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.
- 50. Some missing features • Networking other thanWWW 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
- 51. Conclusion The 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
- 53. References Thank you to Alon Zakai (@Kripken)and his wonderful work on the project! • http://twvideo01.ubm- us.net/o1/vault/gdconline12/Presentations/Emscripten%20(pt%201).pdf • https://www.reddit.com/r/programming/comments/2k3b4j/alon_zakai_emscripten_and_as mjs_cs_role_in_the/http://llvm.org/devmtg/2013-11/slides/Zakai-Emscripten.pdf • http://llvm.org/devmtg/2013-11/slides/Zakai-Emscripten.pdf
Editor's Notes
- #4: The Low Level Virtual Machine (LLVM) is a library that is used to construct, optimize and produce intermediate and/or binary machine code. It can be used as a compiler framework, where you provide the "front end" – Clang- (parser and lexer) and the "back end" (code that converts LLVM's representation to actual machine code). Starting in 2005, Apple has made extensive use of LLVM in a number of commercial systems,[6] including theiPhone development kit and Xcode 3.1GLSL, and others.
- #14: Subset of JavaScript, largely led by Mozilla, and specifically Alon Zakai and Luke Wagner The principal benefit of asm.js over whole new technologies like NaCl and PNaCl is that it works today: existing JavaScript engines already optimize this style of code quite well. Plan is to keep optimizing JIT compilers, but JIT compilers have less predictable performance based on complicated heuristics. The asm.js model provides a model closer to C/C++ by eliminating dynamic type guards, boxed values, and garbage collection. - Box Values: data structures that are minimal wrappers around primitive types*. Boxed values are typically stored as pointers to objects on the heap.
- #16: Emscripten is an LLVM based project that compiles C and C++ into highly performant JavaScript in the asm.js format. In short: near native speeds, using C and C++, inside of the browser. Even better, emscripten converts OpenGL, a desktop graphics API, into WebGL, which is the web variant of that API.
- #17: JavaScript typed arrays are array-like objects and provide a mechanism for accessing raw binary data. As you already know, Array objects grow and shrink dynamically and can have any JavaScript value. JavaScript engines perform optimizations so that these arrays are fast.
- #18: JavaScript typed arrays are array-like objects and provide a mechanism for accessing raw binary data. As you already know, Array objects grow and shrink dynamically and can have any JavaScript value. JavaScript engines perform optimizations so that these arrays are fast.
- #19: This operator allows inserting expressions that produce side effects into places where an expression that evaluates to undefined is desired. The void operator is often used merely to obtain the undefined primitive value, usually using "void(0)" (which is equivalent to "void 0"). In these cases, the global variable undefined can be used instead (assuming it has not been assigned to a non-default value).
- #20: Emscripten mplements C++ exceptions using JS exceptions, JS VM provides stack unwinding Perf depends on the speed of JS exceptions
- #25: We build for a 32-bit target, because 64-bit integers cannot all fit in doubles (but 32-bit ones can)
- #26: Resource Acquisition Is Initialization (RAII) is a programming idiom used in several object-oriented languages, most prominently C++, where it originated, but also D, Ada, Vala, and Rust. n RAII, holding a resource is tied to object lifetime: resource allocation (acquisition) is done during object creation (specifically initialization), by the constructor, while resource deallocation (release) is done during object destruction, by thedestructor. If objects are destroyed properly, resource leaks do not occur.
- #27: Having a single build does prevent some optimizations, though
- #29: Applications must ship their own system libraries. Emscripten "fakes" a filesystem to make porting easy.
- #30: Applications must ship their own system libraries. Emscripten "fakes" a filesystem to make porting easy.
- #31: JavaScript typed arrays are array-like objects and provide a mechanism for accessing raw binary data. A Typed Array is a slab of memory with a typed view into it, much like how arrays work in C. Because a Typed Array is backed by raw memory, the JavaScript engine can pass the memory directly to native libraries without having to painstakingly convert the data to a native representation. As a result, typed arrays perform a lot better than JavaScript arrays for passing data to WebGL and other APIs dealing with binary data. Typed array views act like single-type arrays to a segment of an ArrayBuffer. There are views for all the usual numeric types, with self-descriptive names like Float32Array, Float64Array, Int32Array and Uint8Array.
- #32: This is a pretty common question. The one I hear most though is “who would want to download a 60MB website? And you’re right — 60mb for a website is massive! But I suppose the same people who are downloading gigabytes worth of video content from YouTube and Netflix each day are those same people. Jonas Echterhoff pointed out that in Untiy, streaming assets is already possibly by using AssetBundles. Alternatively, you can try this Asset Store package, which repackages the WebGL build data, so that scenes in your build are split across multiple files, and your content can start once the first scene is loaded.
- #33: CanIUse.com
- #39: I know what you’re thinking. “This is great, but if there isn’t any sort of interoperability between my C++ and JavaScript, then this isn’t very useful.” Fortunately, there is!
- #40: JavaScript can’t really be compiled to asm.js and offer much of a benefit, because of its dynamic nature. It’s the same problem as when trying to compile it to C or even to native code – a VM with it would be necessary to take care of those non-static aspects. You could write asm.js by hand, however. To better understand this, it is important to comprehend why asm.js offers a performance benefit at all; or why statically-typed languages perform better than dynamically-typed ones. One reason is “run-time type checking takes time,” and a more thought out answer would include the enhanced feasibility of optimizing statically-typed code. A final perk of going from a statically typed language such as C is the fact that the compiler knows the type of each object when it is being compiled.
- #41: JavaScript can’t really be compiled to asm.js and offer much of a benefit, because of its dynamic nature. It’s the same problem as when trying to compile it to C or even to native code – a VM with it would be necessary to take care of those non-static aspects. You could write asm.js by hand, however. To better understand this, it is important to comprehend why asm.js offers a performance benefit at all; or why statically-typed languages perform better than dynamically-typed ones. One reason is “run-time type checking takes time,” and a more thought out answer would include the enhanced feasibility of optimizing statically-typed code. A final perk of going from a statically typed language such as C is the fact that the compiler knows the type of each object when it is being compiled.
- #42: It would be wise to have a mix of local and remote content for your app. Technologies like IndexedDB, localStorage, and AppCache, which are supported by Microsoft Edge, allow for this. A number of browsers support all of these technologies as well, including Firefox and Chrome. A local page can be kept in your app package that can still provide a basic offline experience. Finally, Service Workers are a useful option for offline caching, too. Matt Gaunt has a fantastic article on Service Workers.
- #43: http://beta.unity3d.com/jonas/WebGLBenchmark/
- #44: http://beta.unity3d.com/jonas/WebGLBenchmark/
- #45: http://beta.unity3d.com/jonas/benchmark2015/ http://blogs.unity3d.com/2015/12/15/updated-webgl-benchmark-results/#comment-239858 Here are the overall scores of the different browsers running the benchmark suite on an Windows 10 machine with a 3.3.GHz i7 CPU and an Nvidia GTX 960 GPU some common performance-enhancing techniques, like multi-threading and SIMD, are not available yet; and we are relying on a completely new scripting runtime, IL2Cpp, to run user script code. So we need to find out: Will it be fast enough to play games?
- #46: This is the case for tests which rely a lot on script performance (Mandelbrot and CryptoHash, both implement their algorithms in C#).
- #47: The team at Owlchemy labs converted their game Aaaaa! In 2014 and put together a great postmortem about the process. Using the pre-alpha version of the WebGL exporter in June of last year, they were able to take all of their C# code and turn it into one JavaScript file which was more than 1 million lines of code long!
- #48: Not just for games. Architecture too. Dozens of these online. Unreal Engine 4 -> HTML5
- #53: Source: Brendan Eich
- #54: Many of these slides were compiled from information I’ve gathered from Alon Zakai’s presentations online, but in powerpoint and video form.