1. HTML5 Meetup XIII
Build HTML5/WebGL applications with C++ and ASM.js
Jean-Marc Le Roux
CEO and co-founder of Aerys
jeanmarc@aerys.in
@promethe42

2. by

3. 3D. Everywhere.
Deliver engaging, interactive and rich 3D content and applications on
desktops, mobiles and the web.

4. Augment your processes.
Minko « Entreprise » Edition
W
Share massive 3D files on the cloud thanks to Minko’s exclusive
3D compression and streaming algorithms. Go mobile, integrate your
3D content in documents and work in augmented reality.

5. Focus on design. Boost with code.
Minko « Studio » Edition
Designers integrate 3D content, customize materials, setup lights and animations.
Developers plug in scripts and interactivity.

6. The sky is the limit.
Minko « Community » Edition
Build desktop, web and mobile 3D applications with
Minko’s free and open source SDK including
a fully-featured 3D engine and plugins.

7. Why?
Motivations to build WebGL apps with C++

8. 3D apps tends to be more complex
 3D apps are usually bigger projects
 Bigger teams
 Bigger expectations
 C++ is more expressive (but more complex)
 Reuse existing C++ libraries

9. 3D apps require more performances
 GPU programming, 3D maths, 3D physics, 3D AI, Massive
files loading
 Javascript suffers from its dynamic nature
 Dynamic typing
 Dynamic execution

10. WebGL VS Stage3D - Penetration Rate
WebGL
Flash
53%
96%
Firefox 4+, Chrome 9+, IE11
Any browser with Flash 11+
Source: Statcounter

11. WebGL VS Stage3D – HW Compatibility
WebGL
Flash
?
96% *
* 2006 and newer hardware, software fallback otherwise

12. WebGL => Flash Fallback!
 Start working with standards today, but keep adressing the largest audience possible
Is WebGL
available?
yes
Run WebGL/JS app.
no
Run Flash app.

13. Target native platforms
 Android, iOS, Windows, Mac, Linux, Tizen
 Embedding a JS/HTML5/WebGL app in a web view would work but
– Would be very slow
– Cumbersome to develop/deploy/debug

14. How?
Workflow & tools

15. C++ 2011
 Standard, fast, well documented and supported by a vast community
 Already fully supported by all major compilers (VS, GCC, LLVM…)
 New additions make it closer to what we’re used to with AS3/Javascript
– Closures/lambda functions
– Type inference (instead of dynamic typing)
– Shared pointers

16. Emscripten https://github.com/kripken/emscripten
 Open source project driven by Mozilla
– Based on LLVM, which is supported by Google, Apple, Intel and many more
 Cross-compile C++ code to Javascript code
– Binds OpenGL to WebGL
– Provide virtual file system
– C++  Javascript bindings
 Code optimizations
– Closure compiler
– asm.js (2x performances of native code!)
 Code compression using LZMA

17. AbstractContext
 Mimics flash.display3D.Context3D interface
– Leverages Adobe’s work on wrapping DirectX/OpenGL
– Mainly uses simple native types (int, float…) to make it easier to wrap/bind in multiple
languages
 Defines all you need to work with OpenGL ES 2-compliant APIs
– Enforces compatibility
– Can be extended to provide more « custom » capabilities if you want
AbstractContext
OpenGLES2Context
WebGLContext

18. OpenGLES2Context
 Extends AbstractContext
 Implement all required methods using the OpenGL API

Actually uses OpenGL bindings, but limited only to what is actually available in OpenGL ES 2
– Should work out of the box with any OpenGL ES 2 compliant implementation
– But also on any OpenGL implementation (ex: Windows, Mac and Linux)
AbstractContext
OpenGLES2Context
WebGLContext

19. WebGLContext
 Extends OpenGLES2Context
– Actually inherits more than 95% of its code
 Override a few methods to handle some minor WebGL quirks
– Some methods do not work properly/exist and have to be wrapped using (simple)
workarounds
AbstractContext
OpenGLES2Context
WebGLContext

20. Compilation – em++
C++ app. code
LLVM
Optimizations
App. object file

21. Compilation – em++
C++ app. code
Minko Sources
Minko
Core framework C++ code
C++ 2011
code
App. object file
Core framework static library
Plugins C++ Code
Plugins Static Libraries
Physics
Physics
Particles
Particles
JPEG Parser
JPEG Parser
PNG Parser
PNG Parser
MK Parser
MK Parser
ASM.js
Javascript code

22. Linkage - emar
App. object file
Minko
Core framework static library
Plugins Static Libraries
Physics
Particles
JPEG Parser
PNG Parser
MK Parser
application.js

23. Optimization
application.js
application_optimized.js


Closure compiler
LZMA compression

24. ASM.js
 Research project from Mozilla
 Now enabled by default since Firefox 22
 Subset of Javascript
 Fully retro-compatible with all JS compilers/engines
 Designed for performances
 Low-level & compiler compliant syntax
 Emscripten now outputs ASM.js code by default

25. ASM.js - Example
function strlen(ptr) {
// calculate length of C string
ptr = ptr | 0;
var curr = 0;
curr = ptr;
while (MEM8[curr] | 0 != 0)
{
curr = (curr + 1) | 0;
}
return (curr - ptr) | 0;
}
 Ensure that ptr is always an
integer
 Read an integer from
address curr
 Additions and subtractions
are all 32 bits

26. ASM.js – Micro-Benchmarks
Source: http://kripken.github.io/mloc_emscripten_talk/#/27

27. ASM.js – Realistic Benchmarks
Source: http://kripken.github.io/mloc_emscripten_talk/#/28

28. http://minko.io/showcase/sponza-html5
EXAMPLE: SPONZA HTML5!

29. Bonus

30. Premake http://industriousone.com/premake
 Cross-platform build system
 Windows, Mac and Linux
 Reference in the video game industry
 Well documented
 Compatible with most IDEs/tools
 gmake
 Visual Studio
 XCode
 Easy to extend and customize
 Based on LUA script configuration files
 Adding support for emscripten was easy

31. Vagrant http://www.vagrantup.com/
 Goal: easily cross-compile without installing/configuring
complicated stuff
 Virtualized build environment
 Based on VirtualBox
 Will install and bootstrap everything for you
 Will auto-update itself to make sure you always use the latest stable toolchain
 We provide the configuration file to compile to HTML5/WebGL in just
a single command line!
 Ubuntu virtual machine
 Uses Premake4 + gmake
 Will do the same for Flash/Crossbridge

32. Conclusion

33. My Feedback – The Good Parts
 Working with C++ 2011 is amazing
 More complex but so much powerful/expressive than AS3/JS
 Useful and reliable STL containers (list, maps, sets, etc…)
 Shared pointers make memory management just as easy as with managed
languages: not a single memory leak so far!
 Visual Studio/XCode are very good IDEs
 Minko 3’s implementation is much lighter and yet just as much
powerful
 Vagrant + Premake provides an efficient build system with crosscompilation

34. My Feedback – The Good Parts
 Compatibility
 The app runs on Windows, Mac, Linux and WebGL withouth a single modification!
 Haven’t tested iOS/Android yet, but should work out of the box
 Binary size
 Closure compiler will make the binary 2 to 3x lighter
 LZMA compression will make the binary 5 to 6x lighter
 Combine both to get a final binary even lighter than the native one!
 Speed
 2x speed of native code thanks to asm.js!
 Possiblity much faster than an AS3 implementation
 Integration
 Emscripten « modules » system make it easy to generate a *.js file and run it in any web page

35. My Feedback – The Bad Parts
 Workflow
 Haven’t figured out how to make dynamic libraries for now
 Speed
 WebGL API is the bottleneck 
 Memory consumption
 256MB of required memory seems excessive (I haven’t make a comparison
with AS3 so far though…)
 I miss the Flash API
 How do to a 2D UI using HTML5 comps?
 URLRequest?

36. Conclusion
 C++ 2011 is very efficient to build interactive and rich apps
 Emscripten is mature enough to start working on largescale applications
 Using #ifdef for portability of C++ code is a bit
cumbersome
 But it can easily be fixed by wrapping the app. init

37. Don’t forget to check http://minko.io !
Merci !