Multiplatform C++ on the Web with Emscripten

21,528 views

Published on

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 Comment
16 Likes
Statistics
Notes
  • Slide 15 makes me ☹, Native Client is *exactly* comparable to Flash wrt the Web; it doesn’t ‘integrate with HTML5’, distributes binary blobs of application, and in effect its still a plugin - just deeply integrated into one browser’s engine.
    If you must compile to javascript, emscripten→asm.js is the way to go, browsers will improve their performance with that code…
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
21,528
On SlideShare
0
From Embeds
0
Number of Embeds
12,919
Actions
Shares
0
Downloads
101
Comments
1
Likes
16
Embeds 0
No embeds

No notes for slide

Multiplatform C++ on the Web with Emscripten

  1. 1. Hi, my name is Chad Austin, and I’m here to tell you aboutwhat led IMVU to select Emscripten as a key part of ourstrategy to have a single C++ engine across all platforms,including web browsers. 1
  2. 2. LLVM is an open source compiler infrastructure, mostlycommonly used as the foundation of the clang C/C++compiler.Emscripten translates LLVM into JavaScript suitable for webbrowsers. 2
  3. 3. 3
  4. 4. 4
  5. 5. 5
  6. 6. 6
  7. 7. IMVU is a place where members use 3D avatars to meet newpeople, chat, and play games. 7
  8. 8. 8
  9. 9. Today IMVU is a downloadable application for Windows andMac. 9
  10. 10. 10
  11. 11. 11
  12. 12. Making best use of the hardware is key on mobile devices. 12
  13. 13. 13
  14. 14. 14
  15. 15. 15
  16. 16. 16
  17. 17. My testing methodology: run the benchmark in all compilerswith all optimization settings and pick the fastest. 17
  18. 18. At this point, I’m willing to pay a reduction in performance inorder to have a single C++ engine codebase. 18
  19. 19. 19
  20. 20. Same benchmark as before for comparison purposes. 20
  21. 21. asm.js is a big win. (But lack of SIMD makes it still slowerthan native.) 21
  22. 22. So let’s look at a benchmark that doesn’t rely so much onSIMD. 22
  23. 23. 23
  24. 24. 24
  25. 25. 25
  26. 26. 26
  27. 27. 27
  28. 28. 28
  29. 29. 29
  30. 30. 30
  31. 31. Note the excessive redundancy of the generated code. After Emscripten runs,a series of JavaScript optimizers transform the generated code until it lookslike this: 31
  32. 32. 32
  33. 33. 33
  34. 34. 34
  35. 35. 35
  36. 36. 36
  37. 37. 37
  38. 38. Note that LLVM has no high-level control flow, just branchinstructions. 38
  39. 39. Naive translation to JS results in an infinite loop containing aswitch. In effect, implementing goto. 39
  40. 40. 40
  41. 41. 41
  42. 42. 42
  43. 43. 43
  44. 44. 44
  45. 45. 45
  46. 46. 46
  47. 47. Another reason we prefer SCons over emcc is in the case where a change tosome C++ doesn’t necessarily modify the generated code. In that case, emccwould attempt to relink, the slowest part, whereas SCons would know thatthe linker inputs haven’t changed and finish the build early. 47
  48. 48. 48
  49. 49. Engine.min.js is the most important build, but it’s painful tobuild and work with.Engine.debug.js is ideal for debugging, but still takes time tobuild.Engine.iteration.js is for running unit tests. 49
  50. 50. 50
  51. 51. 51
  52. 52. 52
  53. 53. 53
  54. 54. Pointer_stringify is a helper that takes the char* address andcreates a JS string from the heap. 54
  55. 55. 55
  56. 56. 56
  57. 57. 57
  58. 58. 58
  59. 59. 59
  60. 60. 60
  61. 61. 61
  62. 62. 62
  63. 63. 63
  64. 64. 64
  65. 65. 65
  66. 66. 66
  67. 67. 67
  68. 68. 68
  69. 69. 69
  70. 70. 70
  71. 71. 71
  72. 72. 72
  73. 73. 73
  74. 74. 74

×