WebGL games with Minko - Next Game Frontier 2014

WebGL games with MinkoNext Game Frontier 2014

Jean-Marc Le Roux

CEO and co-founder of Aerys

@Minko3D

http://minko.io

Join!

WebGL Francehttp://www.meetup.com/WebGL-France

@WebGLFrance

by

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 gamesbecause we think it’s a highly professional […] solution in termsof 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

WHAT’S INSIDE MINKO?

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, NeverwinterNights, …)– 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, deployeverywhere– 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

LLVMOptimizations

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.jsJavascript code

C++ 2011code

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

Final result…

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 muchpowerful

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 !

Bonus

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/configuringcomplicated 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 justa single command line! Ubuntu virtual machine Uses Premake4 + gmake Will do the same for Flash/Crossbridge