IMVU is using Emscripten to bring its multiplatform C++ codebase to web browsers with HTML5 and WebGL. See how Emscripten works, how to use, and what you can expect.

1. 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

2. 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. 3

4. 4

5. 5

6. 6

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

8. 8

9. Today IMVU is a downloadable application for Windows and
Mac.
9

10. 10

11. 11

12. Making best use of the hardware is key on mobile devices.
12

13. 13

14. 14

15. 15

16. 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. 19

20. Same benchmark as before for comparison purposes.
20

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

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

23. 23

24. 24

25. 25

26. 26

27. 27

28. 28

29. 29

30. 30

31. 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. 32

33. 33

34. 34

35. 35

36. 36

37. 37

38. Note that LLVM has no high-level control flow, just branch
instructions.
38

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

40. 40

41. 41

42. 42

43. 43

44. 44

45. 45

46. 46

47. 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. 48

49. 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. 50

51. 51

52. 52

53. 53

54. Pointer_stringify is a helper that takes the char* address and
creates a JS string from the heap.
54

55. 55

56. 56

57. 57

58. 58

59. 59

60. 60

61. 61

62. 62

63. 63

64. 64

65. 65

66. 66

67. 67

68. 68

69. 69

70. 70

71. 71

72. 72

73. 73

74. 74