minko - build webgl applications with c++ and asm.js

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

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

Merci !

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