Published on March 14, 2014
WebGL games with Minko Next Game Frontier 2014 Jean-Marc Le Roux CEO and co-founder of Aerys @Minko3D http://minko.io
Join! WebGL France http://www.meetup.com/WebGL-France @WebGLFrance
3D, Everywhere. Deliver engaging, interactive and rich 3D content and applications on desktops, mobiles and the web.
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.
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.
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.
International Gaming References
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
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
WHAT’S INSIDE MINKO?
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
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)
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
Parallelization Workers Threads (except for HTML5) Coroutines (Lua)
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
C++ IN THE BROWSER? Workflow and tools
C++11 Example – Closures // callback is removed when mouseWheel is set to nullptr
C++11 Example – Shared pointers
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
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
EXAMPLE: SPONZA HTML5! http://minko.io/showcase/sponza-html5
BUILDING GAMES WITH MINKO
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…
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
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
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…)
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
Conclusion C++ 2011 is very efficient to build interactive and rich apps Emscripten is mature enough to start working on real life applications
Merci ! Don’t forget to check http://minko.io !
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
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
1.WebGL games with Minko Next Game Frontier 2014 Jean-Marc Le Roux CEO and co-founder of Aerys @Minko3D http://minko.io 2. Join! WebGL France http://www ...
Microsoft and Samsung have co-organized the first edition of the Next Game Frontier ... Next Game Frontier 2014: ... Create a 3d game with webgl ...
... during our Next Game Frontier 2014 ... or let you play to the full game itself using WebGL. ... on “ The web: the next game frontier? ”
How To Make Games in Three.js by Jerome Etienne ... Create a 3D game with WebGL and Babylon.js ... WebGL games with Minko - Duration: ...
I am glad to announce that Microsoft and Samsung will organize the first technical conference purely dedicated to Web Gaming: www ...
... 13th of March 2014. Next Game Frontier on ... 9:45 - 10:45 Microsoft session - Create a 3D game with WebGL and ... 17:30 Minko.io (Jean-Marc Le ...
View 1024 Minko posts, presentations, experts, and more. Get the professional knowledge you need on LinkedIn. LinkedIn Home What is LinkedIn? Join Today