Multiplatform C++ on the Web with Emscripten

Chad Austin
Chad AustinTechnical Director at IMVU

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.

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

Recommended

Operand and Opcode | Computer Science by
Operand and Opcode | Computer ScienceOperand and Opcode | Computer Science
Operand and Opcode | Computer ScienceTransweb Global Inc
21.5K views7 slides
Intel Core I5 by
Intel Core I5Intel Core I5
Intel Core I5Raafat Ismael
2.4K views4 slides
Ch3 by
Ch3Ch3
Ch3Ahmed Badawi
5.5K views20 slides
ARM Processor architecture by
ARM Processor  architectureARM Processor  architecture
ARM Processor architecturerajkciitr
393 views25 slides
Basics Of Semiconductor Memories by
Basics Of Semiconductor MemoriesBasics Of Semiconductor Memories
Basics Of Semiconductor MemoriesRahul Bandhe
24.8K views27 slides
MIPS Architecture by
MIPS ArchitectureMIPS Architecture
MIPS ArchitectureDr. Balaji Ganesh Rajagopal
493 views17 slides

More Related Content

What's hot

SIMDで整数除算 by
SIMDで整数除算SIMDで整数除算
SIMDで整数除算shobomaru
7.8K views28 slides
Lect 2 ARM processor architecture by
Lect 2 ARM processor architectureLect 2 ARM processor architecture
Lect 2 ARM processor architectureDr.YNM
1.1K views18 slides
Register transfer & microoperations moris mano ch 04 by
Register transfer & microoperations    moris mano ch 04Register transfer & microoperations    moris mano ch 04
Register transfer & microoperations moris mano ch 04thearticlenow
1.6K views17 slides
Gpu presentation by
Gpu presentationGpu presentation
Gpu presentationJosiah Lund
6.5K views18 slides
Unit 3-pipelining & vector processing by
Unit 3-pipelining & vector processingUnit 3-pipelining & vector processing
Unit 3-pipelining & vector processingvishal choudhary
458 views37 slides
3. Addressing Modes in 8085 microprocessor.pptx by
3. Addressing Modes in 8085 microprocessor.pptx3. Addressing Modes in 8085 microprocessor.pptx
3. Addressing Modes in 8085 microprocessor.pptxISMT College
169 views18 slides

What's hot(20)

SIMDで整数除算 by shobomaru
SIMDで整数除算SIMDで整数除算
SIMDで整数除算
shobomaru7.8K views
Lect 2 ARM processor architecture by Dr.YNM
Lect 2 ARM processor architectureLect 2 ARM processor architecture
Lect 2 ARM processor architecture
Dr.YNM 1.1K views
Register transfer & microoperations moris mano ch 04 by thearticlenow
Register transfer & microoperations    moris mano ch 04Register transfer & microoperations    moris mano ch 04
Register transfer & microoperations moris mano ch 04
thearticlenow1.6K views
Gpu presentation by Josiah Lund
Gpu presentationGpu presentation
Gpu presentation
Josiah Lund6.5K views
Unit 3-pipelining & vector processing by vishal choudhary
Unit 3-pipelining & vector processingUnit 3-pipelining & vector processing
Unit 3-pipelining & vector processing
vishal choudhary458 views
3. Addressing Modes in 8085 microprocessor.pptx by ISMT College
3. Addressing Modes in 8085 microprocessor.pptx3. Addressing Modes in 8085 microprocessor.pptx
3. Addressing Modes in 8085 microprocessor.pptx
ISMT College169 views
SSE4.2の文字列処理命令の紹介 by MITSUNARI Shigeo
SSE4.2の文字列処理命令の紹介SSE4.2の文字列処理命令の紹介
SSE4.2の文字列処理命令の紹介
MITSUNARI Shigeo8.8K views
AtCoder Regular Contest 032 解説 by AtCoder Inc.
AtCoder Regular Contest 032 解説AtCoder Regular Contest 032 解説
AtCoder Regular Contest 032 解説
AtCoder Inc.6.9K views
An introduction to digital signal processors 1 by Hossam Hassan
An introduction to digital signal processors 1An introduction to digital signal processors 1
An introduction to digital signal processors 1
Hossam Hassan2K views
Single &Multi Core processor by Justify Shadap
Single &Multi Core processorSingle &Multi Core processor
Single &Multi Core processor
Justify Shadap2.6K views
2015年度先端GPGPUシミュレーション工学特論 第4回 GPUのメモリ階層の詳細 (共有メモリ) by 智啓 出川
2015年度先端GPGPUシミュレーション工学特論 第4回 GPUのメモリ階層の詳細(共有メモリ)2015年度先端GPGPUシミュレーション工学特論 第4回 GPUのメモリ階層の詳細(共有メモリ)
2015年度先端GPGPUシミュレーション工学特論 第4回 GPUのメモリ階層の詳細 (共有メモリ)
智啓 出川990 views
Cache coherence problem and its solutions by Majid Saleem
Cache coherence problem and its solutionsCache coherence problem and its solutions
Cache coherence problem and its solutions
Majid Saleem23.1K views
CPU Architecture - Basic by Yong Heui Cho
CPU Architecture - BasicCPU Architecture - Basic
CPU Architecture - Basic
Yong Heui Cho14.1K views
Micro operation control of processor by Muhammad Ishaq
Micro operation control of processorMicro operation control of processor
Micro operation control of processor
Muhammad Ishaq12.2K views

Viewers also liked

From a native app to a webapp using Node.js and emscripten by
From a native app to a webapp using Node.js and emscriptenFrom a native app to a webapp using Node.js and emscripten
From a native app to a webapp using Node.js and emscriptenFlorian Rival
4.3K views19 slides
HTML5 - New UI Library for Games, Chad Austin, IMVU by
HTML5 - New UI Library for Games, Chad Austin, IMVUHTML5 - New UI Library for Games, Chad Austin, IMVU
HTML5 - New UI Library for Games, Chad Austin, IMVUChad Austin
3.2K views34 slides
IMVU: “But Does It Scale?” from Startup Lessons Learned Conference by
IMVU: “But Does It Scale?” from Startup Lessons Learned ConferenceIMVU: “But Does It Scale?” from Startup Lessons Learned Conference
IMVU: “But Does It Scale?” from Startup Lessons Learned ConferenceBrett Durrett
6.3K views28 slides
C++ on the Web: Run your big 3D game in the browser by
C++ on the Web: Run your big 3D game in the browserC++ on the Web: Run your big 3D game in the browser
C++ on the Web: Run your big 3D game in the browserAndre Weissflog
49.7K views34 slides
Allocate Stanford 2016 by
Allocate Stanford 2016Allocate Stanford 2016
Allocate Stanford 2016Stanford University
73.2K views31 slides
Share and Tell Stanford 2016 by
Share and Tell Stanford 2016Share and Tell Stanford 2016
Share and Tell Stanford 2016Stanford University
82.7K views57 slides

Viewers also liked(18)

From a native app to a webapp using Node.js and emscripten by Florian Rival
From a native app to a webapp using Node.js and emscriptenFrom a native app to a webapp using Node.js and emscripten
From a native app to a webapp using Node.js and emscripten
Florian Rival4.3K views
HTML5 - New UI Library for Games, Chad Austin, IMVU by Chad Austin
HTML5 - New UI Library for Games, Chad Austin, IMVUHTML5 - New UI Library for Games, Chad Austin, IMVU
HTML5 - New UI Library for Games, Chad Austin, IMVU
Chad Austin3.2K views
IMVU: “But Does It Scale?” from Startup Lessons Learned Conference by Brett Durrett
IMVU: “But Does It Scale?” from Startup Lessons Learned ConferenceIMVU: “But Does It Scale?” from Startup Lessons Learned Conference
IMVU: “But Does It Scale?” from Startup Lessons Learned Conference
Brett Durrett6.3K views
C++ on the Web: Run your big 3D game in the browser by Andre Weissflog
C++ on the Web: Run your big 3D game in the browserC++ on the Web: Run your big 3D game in the browser
C++ on the Web: Run your big 3D game in the browser
Andre Weissflog49.7K views
Trace Lessons Learned H4Dip Stanford 2016 by Stanford University
Trace Lessons Learned H4Dip Stanford 2016 Trace Lessons Learned H4Dip Stanford 2016
Trace Lessons Learned H4Dip Stanford 2016
Stanford University125.9K views
Aggregate db Lessons Learned H4Dip Stanford 2016 by Stanford University
Aggregate db Lessons Learned H4Dip Stanford 2016Aggregate db Lessons Learned H4Dip Stanford 2016
Aggregate db Lessons Learned H4Dip Stanford 2016
Stanford University131.8K views
Peacekeeping Lessons Learned H4Dip Stanford 2016 by Stanford University
Peacekeeping Lessons Learned H4Dip Stanford 2016Peacekeeping Lessons Learned H4Dip Stanford 2016
Peacekeeping Lessons Learned H4Dip Stanford 2016
Stanford University121.5K views
Space Evaders Lessons Learned H4Dip Stanford 2016 by Stanford University
Space Evaders Lessons Learned H4Dip Stanford 2016Space Evaders Lessons Learned H4Dip Stanford 2016
Space Evaders Lessons Learned H4Dip Stanford 2016
Stanford University122K views
Exodus Lessons Learned H4Dip Stanford 2016 by Stanford University
Exodus Lessons Learned H4Dip Stanford 2016Exodus Lessons Learned H4Dip Stanford 2016
Exodus Lessons Learned H4Dip Stanford 2016
Stanford University124.1K views
Hacking CT Lessons Learned H4Dip Stanford 2016 by Stanford University
Hacking CT Lessons Learned H4Dip Stanford 2016Hacking CT Lessons Learned H4Dip Stanford 2016
Hacking CT Lessons Learned H4Dip Stanford 2016
Stanford University128.6K views
Fatal journeys (Team 621) Lessons Learned H4Dip Stanford 2016 by Stanford University
Fatal journeys (Team 621) Lessons Learned H4Dip Stanford 2016Fatal journeys (Team 621) Lessons Learned H4Dip Stanford 2016
Fatal journeys (Team 621) Lessons Learned H4Dip Stanford 2016
Stanford University133.2K views

Similar to Multiplatform C++ on the Web with Emscripten

Minko - Build WebGL applications with C++ and asm.js by
Minko - Build WebGL applications with C++ and asm.jsMinko - Build WebGL applications with C++ and asm.js
Minko - Build WebGL applications with C++ and asm.jsMinko3D
8.8K views37 slides
ASP.NET Session 1 by
ASP.NET Session 1ASP.NET Session 1
ASP.NET Session 1Sisir Ghosh
1.3K views19 slides
Node js by
Node jsNode js
Node jsChirag Parmar
2.9K views28 slides
Getting started with Emscripten – Transpiling C / C++ to JavaScript / HTML5 by
Getting started with Emscripten – Transpiling C / C++ to JavaScript / HTML5Getting started with Emscripten – Transpiling C / C++ to JavaScript / HTML5
Getting started with Emscripten – Transpiling C / C++ to JavaScript / HTML5David Voyles
6.9K views53 slides
Where should I run my code? Serverless, Containers, Virtual Machines and more by
Where should I run my code? Serverless, Containers, Virtual Machines and moreWhere should I run my code? Serverless, Containers, Virtual Machines and more
Where should I run my code? Serverless, Containers, Virtual Machines and moreBret McGowen - NYC Google Developer Advocate
800 views100 slides
The Next Leap in JavaScript Performance by
The Next Leap in JavaScript PerformanceThe Next Leap in JavaScript Performance
The Next Leap in JavaScript PerformanceIntel® Software
1.6K views39 slides

Similar to Multiplatform C++ on the Web with Emscripten(20)

Minko - Build WebGL applications with C++ and asm.js by Minko3D
Minko - Build WebGL applications with C++ and asm.jsMinko - Build WebGL applications with C++ and asm.js
Minko - Build WebGL applications with C++ and asm.js
Minko3D8.8K views
ASP.NET Session 1 by Sisir Ghosh
ASP.NET Session 1ASP.NET Session 1
ASP.NET Session 1
Sisir Ghosh1.3K views
Getting started with Emscripten – Transpiling C / C++ to JavaScript / HTML5 by David Voyles
Getting started with Emscripten – Transpiling C / C++ to JavaScript / HTML5Getting started with Emscripten – Transpiling C / C++ to JavaScript / HTML5
Getting started with Emscripten – Transpiling C / C++ to JavaScript / HTML5
David Voyles6.9K views
The Next Leap in JavaScript Performance by Intel® Software
The Next Leap in JavaScript PerformanceThe Next Leap in JavaScript Performance
The Next Leap in JavaScript Performance
Intel® Software1.6K views
Adventures in docker compose by LinkMe Srl
Adventures in docker composeAdventures in docker compose
Adventures in docker compose
LinkMe Srl1.5K views
Ajax Performance by kaven yan
Ajax PerformanceAjax Performance
Ajax Performance
kaven yan1.8K views
Webinar: Começando seus trabalhos com Machine Learning utilizando ferramentas... by Embarcados
Webinar: Começando seus trabalhos com Machine Learning utilizando ferramentas...Webinar: Começando seus trabalhos com Machine Learning utilizando ferramentas...
Webinar: Começando seus trabalhos com Machine Learning utilizando ferramentas...
Embarcados97 views
TestUpload by ZarksaDS
TestUploadTestUpload
TestUpload
ZarksaDS405 views
(java2days) Is the Future of Java Cloudy? by Steve Poole
(java2days) Is the Future of Java Cloudy?(java2days) Is the Future of Java Cloudy?
(java2days) Is the Future of Java Cloudy?
Steve Poole204 views
Java-light-speed NebraskaCode.pdf by RichHagarty
Java-light-speed NebraskaCode.pdfJava-light-speed NebraskaCode.pdf
Java-light-speed NebraskaCode.pdf
RichHagarty26 views
javalightspeed-jakartatech-2023.pdf by RichHagarty
javalightspeed-jakartatech-2023.pdfjavalightspeed-jakartatech-2023.pdf
javalightspeed-jakartatech-2023.pdf
RichHagarty21 views
Hacking the Codename One Source Code - Part I - Transcript.pdf by ShaiAlmog1
Hacking the Codename One Source Code - Part I - Transcript.pdfHacking the Codename One Source Code - Part I - Transcript.pdf
Hacking the Codename One Source Code - Part I - Transcript.pdf
ShaiAlmog1294 views
Clean Infrastructure as Code by QAware GmbH
Clean Infrastructure as CodeClean Infrastructure as Code
Clean Infrastructure as Code
QAware GmbH311 views
mloc.js 2014 - JavaScript and the browser as a platform for game development by David Galeano
mloc.js 2014 - JavaScript and the browser as a platform for game developmentmloc.js 2014 - JavaScript and the browser as a platform for game development
mloc.js 2014 - JavaScript and the browser as a platform for game development
David Galeano1.2K views

Multiplatform C++ on the Web with Emscripten

  • 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