Hi, my name is Chad Austin, and I’m here to tell you about
what led IMVU to select Emscripten as a key part of our
strategy to have a single C++ engine across all platforms,
including web browsers.




                                                             1
LLVM is an open source compiler infrastructure, mostly
commonly used as the foundation of the clang C/C++
compiler.
Emscripten translates LLVM into JavaScript suitable for web
browsers.




                                                              2
3
4
5
6
IMVU is a place where members use 3D avatars to meet new
people, chat, and play games.




                                                           7
8
Today IMVU is a downloadable application for Windows and
Mac.




                                                           9
10
11
Making best use of the hardware is key on mobile devices.




                                                            12
13
14
15
16
My testing methodology: run the benchmark in all compilers
with all optimization settings and pick the fastest.




                                                             17
At this point, I’m willing to pay a reduction in performance in
order to have a single C++ engine codebase.




                                                                  18
19
Same benchmark as before for comparison purposes.




                                                    20
asm.js is a big win. (But lack of SIMD makes it still slower
than native.)




                                                               21
So let’s look at a benchmark that doesn’t rely so much on
SIMD.




                                                            22
23
24
25
26
27
28
29
30
Note the excessive redundancy of the generated code. After Emscripten runs,
a series of JavaScript optimizers transform the generated code until it looks
like this:




                                                                                31
32
33
34
35
36
37
Note that LLVM has no high-level control flow, just branch
instructions.




                                                             38
Naive translation to JS results in an infinite loop containing a
switch. In effect, implementing goto.




                                                                   39
40
41
42
43
44
45
46
Another reason we prefer SCons over emcc is in the case where a change to
some C++ doesn’t necessarily modify the generated code. In that case, emcc
would attempt to relink, the slowest part, whereas SCons would know that
the linker inputs haven’t changed and finish the build early.




                                                                             47
48
Engine.min.js is the most important build, but it’s painful to
build and work with.
Engine.debug.js is ideal for debugging, but still takes time to
build.
Engine.iteration.js is for running unit tests.




                                                                  49
50
51
52
53
Pointer_stringify is a helper that takes the char* address and
creates a JS string from the heap.




                                                                 54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

Multiplatform C++ on the Web with Emscripten

  • 1.
    Hi, my nameis Chad Austin, and I’m here to tell you about what led IMVU to select Emscripten as a key part of our strategy to have a single C++ engine across all platforms, including web browsers. 1
  • 2.
    LLVM is anopen source compiler infrastructure, mostly commonly used as the foundation of the clang C/C++ compiler. Emscripten translates LLVM into JavaScript suitable for web browsers. 2
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
    IMVU is aplace where members use 3D avatars to meet new people, chat, and play games. 7
  • 8.
  • 9.
    Today IMVU isa downloadable application for Windows and Mac. 9
  • 10.
  • 11.
  • 12.
    Making best useof the hardware is key on mobile devices. 12
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
    My testing methodology:run the benchmark in all compilers with all optimization settings and pick the fastest. 17
  • 18.
    At this point,I’m willing to pay a reduction in performance in order to have a single C++ engine codebase. 18
  • 19.
  • 20.
    Same benchmark asbefore for comparison purposes. 20
  • 21.
    asm.js is abig win. (But lack of SIMD makes it still slower than native.) 21
  • 22.
    So let’s lookat a benchmark that doesn’t rely so much on SIMD. 22
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
    Note the excessiveredundancy of the generated code. After Emscripten runs, a series of JavaScript optimizers transform the generated code until it looks like this: 31
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
    Note that LLVMhas no high-level control flow, just branch instructions. 38
  • 39.
    Naive translation toJS results in an infinite loop containing a switch. In effect, implementing goto. 39
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
    Another reason weprefer SCons over emcc is in the case where a change to some C++ doesn’t necessarily modify the generated code. In that case, emcc would attempt to relink, the slowest part, whereas SCons would know that the linker inputs haven’t changed and finish the build early. 47
  • 48.
  • 49.
    Engine.min.js is themost important build, but it’s painful to build and work with. Engine.debug.js is ideal for debugging, but still takes time to build. Engine.iteration.js is for running unit tests. 49
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
    Pointer_stringify is ahelper that takes the char* address and creates a JS string from the heap. 54
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.