WebGL games with Minko - Next Game Frontier 2014


Published on

  • Be the first to comment

  • Be the first to like this

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

No notes for slide

WebGL games with Minko - Next Game Frontier 2014

  1. 1. WebGL games with Minko Next Game Frontier 2014 Jean-Marc Le Roux CEO and co-founder of Aerys @Minko3D http://minko.io
  2. 2. Join! WebGL France http://www.meetup.com/WebGL-France @WebGLFrance
  3. 3. by
  4. 4. 3D, Everywhere. Deliver engaging, interactive and rich 3D content and applications on desktops, mobiles and the web.
  5. 5. Minko Enterprise “We chose Minko because its exclusive compression algorithms help us distributing cutting edge 3D content on mobiles and the web.” Gaël Seydoux, Chief of the NBO lab at  It’s like Dropbox for 3D files  Visualize, share, annotate, collaborate…  On mobiles, tablets, the web and desktops  Exclusive 3D streaming algorithms  Load and display 3D files up to 200 times faster Cloud. Light. Mobile.
  6. 6.  Compatible with all major 3D CAO/design tools  77+ supported file formats  What You See Is What You Get  Physics  Animations  Lights  Materials  .... …Minko Studio Design. Integrate. Live.
  7. 7. Minko Engine  Develop once, deploy everywhere  The power of native, the reach of the web  Open source, with enterprise-class support “We chose Minko to be the 3D engine in one of our new Flash-based games because we think it’s a highly professional […] solution in terms of development ecosystem and high performance.” André Weissflog, Head of Development at Skyrama 2 by BigPoint Mobile. Web. Native.
  8. 8. International Gaming References
  9. 9. Why? Motivations to build WebGL apps with C++
  10. 10. 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
  11. 11. 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
  12. 12. 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. Core Framework Language  Fast  Rich & expressive  Optimized for each target Scripting Language  Simple  Interpreted  Dynamic VSC, C++, Java, C#... Javascript, Python, AS3…
  15. 15. Native: C++11  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. Scripting: Lua  Fits all the requirements of a scripting language  Vastly used by the video game industry (World of Warcraft, Fable II & III, Neverwinter Nights, …) – Complete list of games scripted with Lua  Very (very) fast – LuaJIT is comparable to Javascript V8, if not faster  Designed to be embedded  Designed to script games – Simple but very efficient syntax – Minimalistic set of features but very extensible – Coroutines!
  17. 17. Features  Develop once, deploy everywhere – HTML5 – iOS, Android, nVidia Shield – Windows, Mac, Linux  Free  Open source  3D graphics engine  GPU particles engine  GLSL GPU programming – Dynamic über-shaders – Optimization & obfuscation – Post-processing  C++11 / Lua scripting  Plugins (Oculus, Leap Motion…)  DirectX/OpenGL backends
  18. 18. Minko VS Unity - Architecture Unity Core Library Mono VM Application OS Minko Core Framework & Plugins Lua VM Application OS Native Plugins Javascript VM Javascript VM (WIP)
  19. 19. Minko VS Unity – Open Source Unity Core Library Mono VM Application OS Minko Core Framework & Plugins Lua VM Application OS Native Plugins Javascript VM Javascript VM (WIP)
  20. 20. Supported Platforms Platforms Minko Windows YES WinRT / Windows 8 UI / Windows Store YES OS X YES Linux Desktop (Ubuntu, SteamOS, TVs…) YES Linux Server YES HTML5 YES iOS YES Android YES Flash Player WIP Windows Phone WIP (WP 8.1)
  21. 21. Minko coming to Windows Phone! (WIP)  Windows Phone 8.1 only  But all existing Windows Phones should be supported!  Games have a big success on the Windows Store. Windows Store, Downloads per category – Worldwide, Jan. 2014
  22. 22. Parallelization  Workers  Threads (except for HTML5)  Coroutines (Lua)
  23. 23. HTML5 UI (WIP)  Portable – Chromium on desktop – WebView on mobiles – DOMElement on the web  Responsive UI design  Leverage existing HTML5 tools and frameworks  Video 3D backbuffer HTML5 UI overlay
  24. 24. Features Feature Flash Minko IDEs Flash Builder, Flash Develop, FDT, IntelliJ Visual Studio, Xcode, Eclipse Compiler ASC 2.0, mxmlc GCC, LLVM Shader programming AGAL GLSL User Interface DisplayList, Flex HTML5, CSS, SVG 3D editor Minko Studio 2D editor Flash CC Flash CC, Edge, Google Web Designer Programming languages ActionScript 3.0, MXML C, C++, Lua, Javascript, HTML5 Media Video, Sound, Webcam Video, Sound Integrated Physics Bullet 3D engine Minko Engine Supported file formats 5+ 70+ Collaboration Creative Cloud Minko Enterprise Parallelism Workers Workers, Threads, Coroutines
  25. 25. C++ IN THE BROWSER? Workflow and tools
  26. 26. C++11 Example – Closures // callback is removed when mouseWheel is set to nullptr
  27. 27. C++11 Example – Shared pointers
  28. 28. 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
  29. 29. 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
  30. 30. 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
  31. 31. 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
  32. 32. Compilation – em++ C++ app. code App. object file LLVM Optimizations
  33. 33. MinkoMinko 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
  34. 34. Linkage - emar Minko Plugins Static Libraries Physics Particles JPEG Parser PNG Parser MK Parser Core framework static library App. object file application.js
  35. 35. Optimization application.js application_optimized.js  Closure compiler  LZMA compression
  36. 36. EXAMPLE: SPONZA HTML5! http://minko.io/showcase/sponza-html5
  38. 38. Components – Ex: Directional Light  The Transform component is not mandatory – Scene nodes do not necessarily have a 3D transform: lighter and more customizable – Yet our directional light is pointless without a configurable direction…
  39. 39. Components – Ex: Camera  Our camera has 3 components: – Transform will make our Camera position/orientation customizable – PerspectiveCamera will provide actual camera related data to the rendering API – Renderer will do the actual DrawCall storage/frame rendering
  40. 40. Lua Coroutines function myScript() doSomething() while isIdle do say(‘hello how are you?’) wait(seconds(3)) end while not isIdle do wait(keyboard.anyKeyDown) handleKeyboard() end end
  41. 41. Final result…
  42. 42. Conclusion
  43. 43. 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
  44. 44. 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
  45. 45. 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…)
  46. 46. Some numbers…  1 000 000 lines of code  100% open source  70+ supported file formats  20+ open source projects  6 supported platforms  Around 20 architectures  50+ tutorials  10+ example projects  17 plugins
  47. 47. Conclusion  C++ 2011 is very efficient to build interactive and rich apps  Emscripten is mature enough to start working on real life applications
  48. 48. Merci ! Don’t forget to check http://minko.io !
  49. 49. Bonus
  50. 50. ASM.js – Micro-Benchmarks Source: http://kripken.github.io/mloc_emscripten_talk/#/27
  51. 51. ASM.js – Realistic Benchmarks Source: http://kripken.github.io/mloc_emscripten_talk/#/28
  52. 52. 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
  53. 53. 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