Download as PDF, PPTX
![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](https://image.slidesharecdn.com/aeryshtml5meetup13-131023081229-phpapp02/85/Minko-Build-WebGL-applications-with-C-and-asm-js-25-320.jpg)
![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](https://image.slidesharecdn.com/aeryshtml5meetup13-131023081229-phpapp02/75/Minko-Build-WebGL-applications-with-C-and-asm-js-25-2048.jpg)
Uploaded byMinko3D
Minko - Build WebGL applications with C++ and asm.js
This document summarizes an HTML5 Meetup about building WebGL applications with C++ and ASM.js. It discusses how C++ is more expressive than JavaScript for complex 3D applications and allows leveraging existing C++ libraries and performance through GPU programming. It outlines using Emscripten to cross-compile C++ to JavaScript, generating optimized ASM.js code. It also discusses tools like Premake for cross-platform building and Vagrant for consistently provisioning the build environment. Examples are given of building a 3D application with C++ and WebGL that runs across desktop, mobile and web with good performance and binary size.
More Related Content
Similar to Minko - Build WebGL applications with C++ and asm.js
Minko - Build WebGL applications with C++ and asm.js
- 1. HTML5 Meetup XIII BuildHTML5/WebGL applications with C++ and ASM.js Jean-Marc Le Roux CEO and co-founder of Aerys jeanmarc@aerys.in @promethe42
- 2.
- 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 isthe 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 buildWebGL apps with C++
- 8. 3D apps tendsto 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 requiremore 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 => FlashFallback! ï§ 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.
- 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 ï§ Opensource 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.Context3Dinterface â 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.
- 24. ASM.js ï§ Research projectfrom 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 functionstrlen(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 â RealisticBenchmarks Source: http://kripken.github.io/mloc_emscripten_talk/#/28
- 28.
- 29.
- 30. Premake http://industriousone.com/premake ï§ Cross-platformbuild 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.
- 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++ 2011is 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 tocheck http://minko.io ! Merci !