Top Banner
WebGL games with Minko Next Game Frontier 2014 Jean-Marc Le Roux CEO and co-founder of Aerys @Minko3D http://minko.io
59

WebGL games with Minko - Next Game Frontier 2014

May 10, 2015

Download

Documents

Minko3D
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: 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

Page 2: WebGL games with Minko - Next Game Frontier 2014

Join!

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

@WebGLFrance

Page 3: WebGL games with Minko - Next Game Frontier 2014

by

Page 4: WebGL games with Minko - Next Game Frontier 2014

3D, Everywhere.Deliver engaging, interactive and rich 3D content and applications on

desktops, mobiles and the web.

Page 5: WebGL games with Minko - Next Game Frontier 2014

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.

Page 6: WebGL games with Minko - Next Game Frontier 2014

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.

Page 7: WebGL games with Minko - Next Game Frontier 2014

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.

Page 8: WebGL games with Minko - Next Game Frontier 2014

International Gaming References

Page 9: WebGL games with Minko - Next Game Frontier 2014

Why?Motivations to build WebGL apps with C++

Page 10: WebGL games with Minko - Next Game Frontier 2014

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

Page 11: WebGL games with Minko - Next Game Frontier 2014

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

Page 12: WebGL games with Minko - Next Game Frontier 2014

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

Page 13: WebGL games with Minko - Next Game Frontier 2014

WHAT’S INSIDE MINKO?

Page 14: WebGL games with Minko - Next Game Frontier 2014

Core Framework Language Fast

Rich & expressive

Optimized for each target

Scripting Language Simple

Interpreted

Dynamic

VSC, C++, Java, C#... Javascript, Python, AS3…

Page 15: WebGL games with Minko - Next Game Frontier 2014

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

Page 16: WebGL games with Minko - Next Game Frontier 2014

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!

Page 17: WebGL games with Minko - Next Game Frontier 2014

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

Page 18: WebGL games with Minko - Next Game Frontier 2014

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)

Page 19: WebGL games with Minko - Next Game Frontier 2014

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)

Page 20: WebGL games with Minko - Next Game Frontier 2014

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)

Page 21: WebGL games with Minko - Next Game Frontier 2014

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

Page 22: WebGL games with Minko - Next Game Frontier 2014

Parallelization

Workers

Threads (except for HTML5)

Coroutines (Lua)

Page 23: WebGL games with Minko - Next Game Frontier 2014

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

Page 24: WebGL games with Minko - Next Game Frontier 2014

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

Page 25: WebGL games with Minko - Next Game Frontier 2014

C++ IN THE BROWSER?

Workflow and tools

Page 26: WebGL games with Minko - Next Game Frontier 2014

C++11 Example – Closures

// callback is removed when mouseWheel is set to nullptr

Page 27: WebGL games with Minko - Next Game Frontier 2014

C++11 Example – Shared pointers

Page 28: WebGL games with Minko - Next Game Frontier 2014

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

Page 29: WebGL games with Minko - Next Game Frontier 2014

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

Page 30: WebGL games with Minko - Next Game Frontier 2014

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

Page 31: WebGL games with Minko - Next Game Frontier 2014

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

Page 32: WebGL games with Minko - Next Game Frontier 2014

Compilation – em++

C++ app. code App. object file

LLVMOptimizations

Page 33: WebGL games with Minko - Next Game Frontier 2014

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

Page 34: WebGL games with Minko - Next Game Frontier 2014

Linkage - emar

Minko

Plugins Static Libraries

Physics

Particles

JPEG Parser

PNG Parser

MK Parser

Core framework static library

App. object file

application.js

Page 35: WebGL games with Minko - Next Game Frontier 2014

Optimization

application.js application_optimized.js Closure compiler

LZMA compression

Page 36: WebGL games with Minko - Next Game Frontier 2014

EXAMPLE: SPONZA HTML5!

http://minko.io/showcase/sponza-html5

Page 37: WebGL games with Minko - Next Game Frontier 2014

BUILDING GAMES WITH MINKO

Page 38: WebGL games with Minko - Next Game Frontier 2014

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…

Page 39: WebGL games with Minko - Next Game Frontier 2014

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

Page 40: WebGL games with Minko - Next Game Frontier 2014

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

Page 41: WebGL games with Minko - Next Game Frontier 2014
Page 42: WebGL games with Minko - Next Game Frontier 2014
Page 43: WebGL games with Minko - Next Game Frontier 2014
Page 44: WebGL games with Minko - Next Game Frontier 2014
Page 45: WebGL games with Minko - Next Game Frontier 2014
Page 46: WebGL games with Minko - Next Game Frontier 2014
Page 48: WebGL games with Minko - Next Game Frontier 2014

Conclusion

Page 49: WebGL games with Minko - Next Game Frontier 2014

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

Page 50: WebGL games with Minko - Next Game Frontier 2014

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

Page 51: WebGL games with Minko - Next Game Frontier 2014

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…)

Page 52: WebGL games with Minko - Next Game Frontier 2014

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

Page 53: WebGL games with Minko - Next Game Frontier 2014

Conclusion

C++ 2011 is very efficient to build interactive and rich apps

Emscripten is mature enough to start working on real life applications

Page 54: WebGL games with Minko - Next Game Frontier 2014

Merci !

Don’t forget to check http://minko.io !

Page 55: WebGL games with Minko - Next Game Frontier 2014

Bonus

Page 56: WebGL games with Minko - Next Game Frontier 2014

ASM.js – Micro-Benchmarks

Source: http://kripken.github.io/mloc_emscripten_talk/#/27

Page 57: WebGL games with Minko - Next Game Frontier 2014

ASM.js – Realistic Benchmarks

Source: http://kripken.github.io/mloc_emscripten_talk/#/28

Page 58: WebGL games with Minko - Next Game Frontier 2014

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

Page 59: WebGL games with Minko - Next Game Frontier 2014

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