minko - build webgl applications with c++ and asm.js
TRANSCRIPT
HTML5 Meetup XIII Build HTML5/WebGL applications with C++ and ASM.js
Jean-Marc Le Roux CEO and co-founder of Aerys [email protected] @promethe42
by
3D. Everywhere. Deliver engaging, interactive and rich 3D content and applications on
desktops, mobiles and the web.
Augment your processes. Minko « Entreprise » Edition
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.
W
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.
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.
Why? Motivations to build WebGL apps with C++
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
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
53%
WebGL
96%
Flash
WebGL VS Stage3D - Penetration Rate
Firefox 4+, Chrome 9+, IE11 Any browser with Flash 11+
Source: Statcounter
?
WebGL
96%
Flash
WebGL VS Stage3D – HW Compatibility
*
* 2006 and newer hardware, software fallback otherwise
WebGL => Flash Fallback!
Start working with standards today, but keep adressing the largest audience possible
Is WebGL available?
Run WebGL/JS app.
Run Flash app. no
yes
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
How? Workflow & tools
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
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
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
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
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
Compilation – em++
C++ app. code App. object file
LLVM Optimizations
Minko Minko Sources
Compilation – em++
C++ app. code
Plugins C++ Code
Physics
Particles
JPEG Parser
PNG Parser
MK Parser
Core framework C++ code
Plugins Static Libraries
Physics
Particles
JPEG Parser
PNG Parser
MK Parser
Core framework static library
App. object file
ASM.js Javascript code
C++ 2011 code
Linkage - emar
Minko
Plugins Static Libraries
Physics
Particles
JPEG Parser
PNG Parser
MK Parser
Core framework static library
App. object file
application.js
Optimization
application.js application_optimized.js Closure compiler LZMA compression
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
ASM.js - Example
Ensure that ptr is always an integer Read an integer from
address curr Additions and subtractions
are all 32 bits
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; }
ASM.js – Micro-Benchmarks
Source: http://kripken.github.io/mloc_emscripten_talk/#/27
ASM.js – Realistic Benchmarks
Source: http://kripken.github.io/mloc_emscripten_talk/#/28
EXAMPLE: SPONZA HTML5! http://minko.io/showcase/sponza-html5
Bonus
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
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
Conclusion
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 cross-
compilation
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
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?
Conclusion
C++ 2011 is very efficient to build interactive and rich apps Emscripten is mature enough to start working on large-
scale applications Using #ifdef for portability of C++ code is a bit
cumbersome But it can easily be fixed by wrapping the app. init
