Minko - Build WebGL applications with C++ and asm.js


Published on

Published in: Technology, Art & Photos
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Minko - Build WebGL applications with C++ and asm.js

  1. 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. 2. by
  3. 3. 3D. Everywhere. Deliver engaging, interactive and rich 3D content and applications on desktops, mobiles and the web.
  4. 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. 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. 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. 7. Why? Motivations to build WebGL apps with C++
  8. 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. 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. 10. WebGL VS Stage3D - Penetration Rate WebGL Flash 53% 96% Firefox 4+, Chrome 9+, IE11 Any browser with Flash 11+ Source: Statcounter
  11. 11. WebGL VS Stage3D – HW Compatibility WebGL Flash ? 96% * * 2006 and newer hardware, software fallback otherwise
  12. 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. 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. 14. How? Workflow & tools
  15. 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. 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. 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. 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. 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. 20. Compilation – em++ C++ app. code LLVM Optimizations App. object file
  21. 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. 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. 23. Optimization application.js application_optimized.js   Closure compiler LZMA compression
  24. 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. 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. 26. ASM.js – Micro-Benchmarks Source: http://kripken.github.io/mloc_emscripten_talk/#/27
  27. 27. ASM.js – Realistic Benchmarks Source: http://kripken.github.io/mloc_emscripten_talk/#/28
  28. 28. http://minko.io/showcase/sponza-html5 EXAMPLE: SPONZA HTML5!
  29. 29. Bonus
  30. 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. 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. 32. Conclusion
  33. 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. 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. 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. 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. 37. Don’t forget to check http://minko.io ! Merci !