The video for this talk can be found here:https://channel9.msdn.com/Blogs/raw-tech/Getting-started-with-Emscripten--Transpiling-C--C-to-JavaScript--HTML5
I cover how to transpile code from C/C++ to HTML5/JS using Emscripten, an open source compiler tool from Mozilla and Alon Zakai.
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
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
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.
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.
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
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
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
52.
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
Notas do Editor
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.
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.
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.
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.
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.
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).
Emscripten mplements C++ exceptions using JS exceptions, JS VM provides stack unwinding
Perf depends on the speed of JS exceptions
We build for a 32-bit target, because 64-bit integers cannot all fit in doubles (but 32-bit ones can)
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.
Having a single build does prevent some optimizations, though
Applications must ship their own system libraries.
Emscripten "fakes" a filesystem to make porting easy.
Applications must ship their own system libraries.
Emscripten "fakes" a filesystem to make porting easy.
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.
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.
CanIUse.com
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!
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.
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.
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.
http://beta.unity3d.com/jonas/WebGLBenchmark/
http://beta.unity3d.com/jonas/WebGLBenchmark/
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?
This is the case for tests which rely a lot on script performance (Mandelbrot and CryptoHash, both implement their algorithms in C#).
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!
Not just for games.Architecture too. Dozens of these online.Unreal Engine 4 -> HTML5
Source: Brendan Eich
Many of these slides were compiled from information I’ve gathered from Alon Zakai’s presentations online, but in powerpoint and video form.