74
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

Multiplatform C++ on the Web with Emscripten

Embed Size (px)

DESCRIPTION

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.

Citation preview

Page 1: Multiplatform C++ on the Web with Emscripten

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

Page 2: Multiplatform C++ on the Web with Emscripten

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

Page 3: Multiplatform C++ on the Web with Emscripten

3

Page 4: Multiplatform C++ on the Web with Emscripten

4

Page 5: Multiplatform C++ on the Web with Emscripten

5

Page 6: Multiplatform C++ on the Web with Emscripten

6

Page 7: Multiplatform C++ on the Web with Emscripten

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

7

Page 8: Multiplatform C++ on the Web with Emscripten

8

Page 9: Multiplatform C++ on the Web with Emscripten

Today IMVU is a downloadable application for Windows and Mac.

9

Page 10: Multiplatform C++ on the Web with Emscripten

10

Page 11: Multiplatform C++ on the Web with Emscripten

11

Page 12: Multiplatform C++ on the Web with Emscripten

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

12

Page 13: Multiplatform C++ on the Web with Emscripten

13

Page 14: Multiplatform C++ on the Web with Emscripten

14

Page 15: Multiplatform C++ on the Web with Emscripten

15

Page 16: Multiplatform C++ on the Web with Emscripten

16

Page 17: Multiplatform C++ on the Web with Emscripten

My testing methodology: run the benchmark in all compilers with all optimization settings and pick the fastest.

17

Page 18: Multiplatform C++ on the Web with Emscripten

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

18

Page 19: Multiplatform C++ on the Web with Emscripten

19

Page 20: Multiplatform C++ on the Web with Emscripten

Same benchmark as before for comparison purposes.

20

Page 21: Multiplatform C++ on the Web with Emscripten

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

21

Page 22: Multiplatform C++ on the Web with Emscripten

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

22

Page 23: Multiplatform C++ on the Web with Emscripten

23

Page 24: Multiplatform C++ on the Web with Emscripten

24

Page 25: Multiplatform C++ on the Web with Emscripten

25

Page 26: Multiplatform C++ on the Web with Emscripten

26

Page 27: Multiplatform C++ on the Web with Emscripten

27

Page 28: Multiplatform C++ on the Web with Emscripten

28

Page 29: Multiplatform C++ on the Web with Emscripten

29

Page 30: Multiplatform C++ on the Web with Emscripten

30

Page 31: Multiplatform C++ on the Web with Emscripten

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

Page 32: Multiplatform C++ on the Web with Emscripten

32

Page 33: Multiplatform C++ on the Web with Emscripten

33

Page 34: Multiplatform C++ on the Web with Emscripten

34

Page 35: Multiplatform C++ on the Web with Emscripten

35

Page 36: Multiplatform C++ on the Web with Emscripten

36

Page 37: Multiplatform C++ on the Web with Emscripten

37

Page 38: Multiplatform C++ on the Web with Emscripten

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

38

Page 39: Multiplatform C++ on the Web with Emscripten

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

39

Page 40: Multiplatform C++ on the Web with Emscripten

40

Page 41: Multiplatform C++ on the Web with Emscripten

41

Page 42: Multiplatform C++ on the Web with Emscripten

42

Page 43: Multiplatform C++ on the Web with Emscripten

43

Page 44: Multiplatform C++ on the Web with Emscripten

44

Page 45: Multiplatform C++ on the Web with Emscripten

45

Page 46: Multiplatform C++ on the Web with Emscripten

46

Page 47: Multiplatform C++ on the Web with Emscripten

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

Page 48: Multiplatform C++ on the Web with Emscripten

48

Page 49: Multiplatform C++ on the Web with Emscripten

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

Page 50: Multiplatform C++ on the Web with Emscripten

50

Page 51: Multiplatform C++ on the Web with Emscripten

51

Page 52: Multiplatform C++ on the Web with Emscripten

52

Page 53: Multiplatform C++ on the Web with Emscripten

53

Page 54: Multiplatform C++ on the Web with Emscripten

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

54

Page 55: Multiplatform C++ on the Web with Emscripten

55

Page 56: Multiplatform C++ on the Web with Emscripten

56

Page 57: Multiplatform C++ on the Web with Emscripten

57

Page 58: Multiplatform C++ on the Web with Emscripten

58

Page 59: Multiplatform C++ on the Web with Emscripten

59

Page 60: Multiplatform C++ on the Web with Emscripten

60

Page 61: Multiplatform C++ on the Web with Emscripten

61

Page 62: Multiplatform C++ on the Web with Emscripten

62

Page 63: Multiplatform C++ on the Web with Emscripten

63

Page 64: Multiplatform C++ on the Web with Emscripten

64

Page 65: Multiplatform C++ on the Web with Emscripten

65

Page 66: Multiplatform C++ on the Web with Emscripten

66

Page 67: Multiplatform C++ on the Web with Emscripten

67

Page 68: Multiplatform C++ on the Web with Emscripten

68

Page 69: Multiplatform C++ on the Web with Emscripten

69

Page 70: Multiplatform C++ on the Web with Emscripten

70

Page 71: Multiplatform C++ on the Web with Emscripten

71

Page 72: Multiplatform C++ on the Web with Emscripten

72

Page 73: Multiplatform C++ on the Web with Emscripten

73

Page 74: Multiplatform C++ on the Web with Emscripten

74