WebGL games with Minko - Next Game Frontier 2014

50 %
50 %
Information about WebGL games with Minko - Next Game Frontier 2014

Published on March 14, 2014

Author: Minko3D

Source: slideshare.net

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

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

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


Core Framework Language  Fast  Rich & expressive  Optimized for each target Scripting Language  Simple  Interpreted  Dynamic VSC, C++, Java, C#... Javascript, Python, AS3…

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

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!

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

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)

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)

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

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

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

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

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

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


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

Final result…


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

Add a comment

Related pages

WebGL games with Minko - Next Game Frontier 2014 - Documents

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 ...
Read more

Next Game Frontier 2014: videos & content | David Rousset ...

Microsoft and Samsung have co-organized the first edition of the Next Game Frontier ... Next Game Frontier 2014: ... Create a 3d game with webgl ...
Read more

The web: the next game frontier? – David Rousset

... during our Next Game Frontier 2014 ... or let you play to the full game itself using WebGL. ... on “ The web: the next game frontier? ”
Read more

NGF2014 - How To Make Games in Three.js - YouTube

How To Make Games in Three.js by Jerome Etienne ... Create a 3D game with WebGL and Babylon.js ... WebGL games with Minko - Duration: ...
Read more

Next Game Frontier: The first event around web gaming ...

I am glad to announce that Microsoft and Samsung will organize the first technical conference purely dedicated to Web Gaming: www ...
Read more

Next Game Frontier, The conference dedicated to Web Gaming ...

... 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 ...
Read more

Minko | LinkedIn

View 1024 Minko posts, presentations, experts, and more. Get the professional knowledge you need on LinkedIn. LinkedIn Home What is LinkedIn? Join Today
Read more