SlideShare a Scribd company logo
1 of 59
Download to read offline
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
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 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
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, 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
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 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 !
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/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

More Related Content

What's hot

codemotion-docker-2014
codemotion-docker-2014codemotion-docker-2014
codemotion-docker-2014Carlo Bonamico
 
Infrastructure as Data with Ansible
Infrastructure as Data with AnsibleInfrastructure as Data with Ansible
Infrastructure as Data with AnsibleCarlo Bonamico
 
Inside the Android application framework - Google I/O 2009
Inside the Android application framework - Google I/O 2009Inside the Android application framework - Google I/O 2009
Inside the Android application framework - Google I/O 2009Viswanath J
 
IBM Think Session 8598 Domino and JavaScript Development MasterClass
IBM Think Session 8598 Domino and JavaScript Development MasterClassIBM Think Session 8598 Domino and JavaScript Development MasterClass
IBM Think Session 8598 Domino and JavaScript Development MasterClassPaul Withers
 
Android : How Do I Code Thee?
Android : How Do I Code Thee?Android : How Do I Code Thee?
Android : How Do I Code Thee?Viswanath J
 
Jalimo Slides Linuxtag2007 (English)
Jalimo Slides Linuxtag2007 (English)Jalimo Slides Linuxtag2007 (English)
Jalimo Slides Linuxtag2007 (English)smancke
 
(java2days) Is the Future of Java Cloudy?
(java2days) Is the Future of Java Cloudy?(java2days) Is the Future of Java Cloudy?
(java2days) Is the Future of Java Cloudy?Steve Poole
 
Desktop Applications with NetBeans
Desktop Applications with NetBeansDesktop Applications with NetBeans
Desktop Applications with NetBeansHuu Bang Le Phan
 
10 Reasons Why Java Now Rocks More Than Ever
10 Reasons Why Java Now Rocks More Than Ever10 Reasons Why Java Now Rocks More Than Ever
10 Reasons Why Java Now Rocks More Than EverGeert Bevin
 
Electron - Build cross platform desktop apps
Electron - Build cross platform desktop appsElectron - Build cross platform desktop apps
Electron - Build cross platform desktop appsPriyaranjan Mohanty
 
Electron JS | Build cross-platform desktop applications with web technologies
Electron JS | Build cross-platform desktop applications with web technologiesElectron JS | Build cross-platform desktop applications with web technologies
Electron JS | Build cross-platform desktop applications with web technologiesBethmi Gunasekara
 
Introduction to node.js By Ahmed Assaf
Introduction to node.js  By Ahmed AssafIntroduction to node.js  By Ahmed Assaf
Introduction to node.js By Ahmed AssafAhmed Assaf
 
CollabSphere 2018 - Java in Domino After XPages
CollabSphere 2018 - Java in Domino After XPagesCollabSphere 2018 - Java in Domino After XPages
CollabSphere 2018 - Java in Domino After XPagesJesse Gallagher
 
Docker, how to use it. Organize a meeting with IBM products
Docker, how to use it. Organize a meeting with IBM productsDocker, how to use it. Organize a meeting with IBM products
Docker, how to use it. Organize a meeting with IBM productsAndrea Fontana
 
Bitter Java, Sweeten with JRuby
Bitter Java, Sweeten with JRubyBitter Java, Sweeten with JRuby
Bitter Java, Sweeten with JRubyBrian Sam-Bodden
 

What's hot (20)

codemotion-docker-2014
codemotion-docker-2014codemotion-docker-2014
codemotion-docker-2014
 
Infrastructure as Data with Ansible
Infrastructure as Data with AnsibleInfrastructure as Data with Ansible
Infrastructure as Data with Ansible
 
Inside the Android application framework - Google I/O 2009
Inside the Android application framework - Google I/O 2009Inside the Android application framework - Google I/O 2009
Inside the Android application framework - Google I/O 2009
 
IBM Think Session 8598 Domino and JavaScript Development MasterClass
IBM Think Session 8598 Domino and JavaScript Development MasterClassIBM Think Session 8598 Domino and JavaScript Development MasterClass
IBM Think Session 8598 Domino and JavaScript Development MasterClass
 
Android : How Do I Code Thee?
Android : How Do I Code Thee?Android : How Do I Code Thee?
Android : How Do I Code Thee?
 
Jalimo Slides Linuxtag2007 (English)
Jalimo Slides Linuxtag2007 (English)Jalimo Slides Linuxtag2007 (English)
Jalimo Slides Linuxtag2007 (English)
 
(java2days) Is the Future of Java Cloudy?
(java2days) Is the Future of Java Cloudy?(java2days) Is the Future of Java Cloudy?
(java2days) Is the Future of Java Cloudy?
 
Desktop Applications with NetBeans
Desktop Applications with NetBeansDesktop Applications with NetBeans
Desktop Applications with NetBeans
 
Demystifying Docker
Demystifying DockerDemystifying Docker
Demystifying Docker
 
10 Reasons Why Java Now Rocks More Than Ever
10 Reasons Why Java Now Rocks More Than Ever10 Reasons Why Java Now Rocks More Than Ever
10 Reasons Why Java Now Rocks More Than Ever
 
Electron - Build cross platform desktop apps
Electron - Build cross platform desktop appsElectron - Build cross platform desktop apps
Electron - Build cross platform desktop apps
 
Netbeans gui tutorial
Netbeans gui tutorialNetbeans gui tutorial
Netbeans gui tutorial
 
Chapter 1 java
Chapter 1 java Chapter 1 java
Chapter 1 java
 
Electron JS | Build cross-platform desktop applications with web technologies
Electron JS | Build cross-platform desktop applications with web technologiesElectron JS | Build cross-platform desktop applications with web technologies
Electron JS | Build cross-platform desktop applications with web technologies
 
Electron
ElectronElectron
Electron
 
Introduction to node.js By Ahmed Assaf
Introduction to node.js  By Ahmed AssafIntroduction to node.js  By Ahmed Assaf
Introduction to node.js By Ahmed Assaf
 
Proposal
ProposalProposal
Proposal
 
CollabSphere 2018 - Java in Domino After XPages
CollabSphere 2018 - Java in Domino After XPagesCollabSphere 2018 - Java in Domino After XPages
CollabSphere 2018 - Java in Domino After XPages
 
Docker, how to use it. Organize a meeting with IBM products
Docker, how to use it. Organize a meeting with IBM productsDocker, how to use it. Organize a meeting with IBM products
Docker, how to use it. Organize a meeting with IBM products
 
Bitter Java, Sweeten with JRuby
Bitter Java, Sweeten with JRubyBitter Java, Sweeten with JRuby
Bitter Java, Sweeten with JRuby
 

Viewers also liked

paperless fax machion using single touch panel by divyajyothi
paperless fax machion using single touch panel by divyajyothipaperless fax machion using single touch panel by divyajyothi
paperless fax machion using single touch panel by divyajyothidivyajyothi405
 
PRESENTACION DE GRADO MEDIO Y SUPPEIOR
PRESENTACION DE GRADO MEDIO Y SUPPEIORPRESENTACION DE GRADO MEDIO Y SUPPEIOR
PRESENTACION DE GRADO MEDIO Y SUPPEIORPROFEIMPLANTACION
 
Tarifas 2014 TeleElx
Tarifas 2014 TeleElxTarifas 2014 TeleElx
Tarifas 2014 TeleElxTeleElx
 
Dusseldeals de proposal
Dusseldeals de proposalDusseldeals de proposal
Dusseldeals de proposalGirard Brewer
 
Presentación CESTUR por Arik Staropolsky
Presentación CESTUR por Arik StaropolskyPresentación CESTUR por Arik Staropolsky
Presentación CESTUR por Arik StaropolskySMCMX TURISMO
 
Textbook of-digital-photography-samples
Textbook of-digital-photography-samplesTextbook of-digital-photography-samples
Textbook of-digital-photography-sampleskiruba kiruba
 
MiniCRM Bemutató
MiniCRM BemutatóMiniCRM Bemutató
MiniCRM BemutatóMiniCRM
 
Estatutos del Casino de Rociana
Estatutos del Casino de RocianaEstatutos del Casino de Rociana
Estatutos del Casino de Rocianacasinoderociana
 
Propuesta Para Servicio De Internet
Propuesta Para Servicio De InternetPropuesta Para Servicio De Internet
Propuesta Para Servicio De InternetAugusto Hidalgo
 
L'esperienza del Numero Verde. Assistenza ai rispondenti e interviste telefon...
L'esperienza del Numero Verde. Assistenza ai rispondenti e interviste telefon...L'esperienza del Numero Verde. Assistenza ai rispondenti e interviste telefon...
L'esperienza del Numero Verde. Assistenza ai rispondenti e interviste telefon...Istituto nazionale di statistica
 
Beneficios de SeguroyProtegido - Infografía
Beneficios de SeguroyProtegido - InfografíaBeneficios de SeguroyProtegido - Infografía
Beneficios de SeguroyProtegido - InfografíaSeguroyProtegido
 
Valhalla Gaming Hub Presentation 3
Valhalla Gaming Hub Presentation 3Valhalla Gaming Hub Presentation 3
Valhalla Gaming Hub Presentation 3valhallagh
 
Las Vacunas (Lucia 1º B)
Las Vacunas (Lucia 1º B)Las Vacunas (Lucia 1º B)
Las Vacunas (Lucia 1º B)manuelangel11
 
Tutoriel agora project Cietice
Tutoriel agora project CieticeTutoriel agora project Cietice
Tutoriel agora project CieticeDominique Thomas
 
La Silaba Comunicacion Y Lenguaje
La Silaba Comunicacion Y LenguajeLa Silaba Comunicacion Y Lenguaje
La Silaba Comunicacion Y LenguajeGrupoNo1
 
Participación de Johannes Uske en el Congreso de los Niños del 3er milenio en...
Participación de Johannes Uske en el Congreso de los Niños del 3er milenio en...Participación de Johannes Uske en el Congreso de los Niños del 3er milenio en...
Participación de Johannes Uske en el Congreso de los Niños del 3er milenio en...Johannes Uske
 
Descubre La Comunidad Salesforce
Descubre La Comunidad SalesforceDescubre La Comunidad Salesforce
Descubre La Comunidad SalesforceCarolEnLaNube
 

Viewers also liked (20)

paperless fax machion using single touch panel by divyajyothi
paperless fax machion using single touch panel by divyajyothipaperless fax machion using single touch panel by divyajyothi
paperless fax machion using single touch panel by divyajyothi
 
Sustentación
SustentaciónSustentación
Sustentación
 
PRESENTACION DE GRADO MEDIO Y SUPPEIOR
PRESENTACION DE GRADO MEDIO Y SUPPEIORPRESENTACION DE GRADO MEDIO Y SUPPEIOR
PRESENTACION DE GRADO MEDIO Y SUPPEIOR
 
Tarifas 2014 TeleElx
Tarifas 2014 TeleElxTarifas 2014 TeleElx
Tarifas 2014 TeleElx
 
Dusseldeals de proposal
Dusseldeals de proposalDusseldeals de proposal
Dusseldeals de proposal
 
Presentación CESTUR por Arik Staropolsky
Presentación CESTUR por Arik StaropolskyPresentación CESTUR por Arik Staropolsky
Presentación CESTUR por Arik Staropolsky
 
Ia agentes comportamiento simplepdf
Ia   agentes comportamiento simplepdfIa   agentes comportamiento simplepdf
Ia agentes comportamiento simplepdf
 
Textbook of-digital-photography-samples
Textbook of-digital-photography-samplesTextbook of-digital-photography-samples
Textbook of-digital-photography-samples
 
MiniCRM Bemutató
MiniCRM BemutatóMiniCRM Bemutató
MiniCRM Bemutató
 
Estatutos del Casino de Rociana
Estatutos del Casino de RocianaEstatutos del Casino de Rociana
Estatutos del Casino de Rociana
 
Propuesta Para Servicio De Internet
Propuesta Para Servicio De InternetPropuesta Para Servicio De Internet
Propuesta Para Servicio De Internet
 
L'esperienza del Numero Verde. Assistenza ai rispondenti e interviste telefon...
L'esperienza del Numero Verde. Assistenza ai rispondenti e interviste telefon...L'esperienza del Numero Verde. Assistenza ai rispondenti e interviste telefon...
L'esperienza del Numero Verde. Assistenza ai rispondenti e interviste telefon...
 
Beneficios de SeguroyProtegido - Infografía
Beneficios de SeguroyProtegido - InfografíaBeneficios de SeguroyProtegido - Infografía
Beneficios de SeguroyProtegido - Infografía
 
Portfolio architettura
Portfolio architetturaPortfolio architettura
Portfolio architettura
 
Valhalla Gaming Hub Presentation 3
Valhalla Gaming Hub Presentation 3Valhalla Gaming Hub Presentation 3
Valhalla Gaming Hub Presentation 3
 
Las Vacunas (Lucia 1º B)
Las Vacunas (Lucia 1º B)Las Vacunas (Lucia 1º B)
Las Vacunas (Lucia 1º B)
 
Tutoriel agora project Cietice
Tutoriel agora project CieticeTutoriel agora project Cietice
Tutoriel agora project Cietice
 
La Silaba Comunicacion Y Lenguaje
La Silaba Comunicacion Y LenguajeLa Silaba Comunicacion Y Lenguaje
La Silaba Comunicacion Y Lenguaje
 
Participación de Johannes Uske en el Congreso de los Niños del 3er milenio en...
Participación de Johannes Uske en el Congreso de los Niños del 3er milenio en...Participación de Johannes Uske en el Congreso de los Niños del 3er milenio en...
Participación de Johannes Uske en el Congreso de los Niños del 3er milenio en...
 
Descubre La Comunidad Salesforce
Descubre La Comunidad SalesforceDescubre La Comunidad Salesforce
Descubre La Comunidad Salesforce
 

Similar to WebGL games with Minko - Next Game Frontier 2014

Minko - Build WebGL applications with C++ and asm.js
Minko - Build WebGL applications with C++ and asm.jsMinko - Build WebGL applications with C++ and asm.js
Minko - Build WebGL applications with C++ and asm.jsMinko3D
 
Minko - Windows App Meetup Nov. 2013
Minko - Windows App Meetup Nov. 2013Minko - Windows App Meetup Nov. 2013
Minko - Windows App Meetup Nov. 2013Minko3D
 
Minko - Why we created our own Flash platform and why you should care
Minko - Why we created our own Flash platform and why you should careMinko - Why we created our own Flash platform and why you should care
Minko - Why we created our own Flash platform and why you should careMinko3D
 
Minko - Scripting 3D apps with Lua and C++
Minko - Scripting 3D apps with Lua and C++Minko - Scripting 3D apps with Lua and C++
Minko - Scripting 3D apps with Lua and C++Minko3D
 
Paris Android User Group - Build 3D web, mobile and desktop applications with...
Paris Android User Group - Build 3D web, mobile and desktop applications with...Paris Android User Group - Build 3D web, mobile and desktop applications with...
Paris Android User Group - Build 3D web, mobile and desktop applications with...Minko3D
 
Minko - Targeting Flash/Stage3D with C++ and GLSL
Minko - Targeting Flash/Stage3D with C++ and GLSLMinko - Targeting Flash/Stage3D with C++ and GLSL
Minko - Targeting Flash/Stage3D with C++ and GLSLMinko3D
 
Cross platform development with C#
Cross platform development with C#Cross platform development with C#
Cross platform development with C#Michele Scandura
 
AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...
AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...
AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...DevClub_lv
 
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3DJS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3DJSFestUA
 
Rapid and Reliable Developing with HTML5 & GWT
Rapid and Reliable Developing with HTML5 & GWTRapid and Reliable Developing with HTML5 & GWT
Rapid and Reliable Developing with HTML5 & GWTManuel Carrasco Moñino
 
O futuro do .NET : O que eu preciso saber
O futuro do .NET : O que eu preciso saberO futuro do .NET : O que eu preciso saber
O futuro do .NET : O que eu preciso saberDanilo Bordini
 
Frontend Monoliths: Run if you can!
Frontend Monoliths: Run if you can!Frontend Monoliths: Run if you can!
Frontend Monoliths: Run if you can!Jonas Bandi
 
Silverlight
SilverlightSilverlight
Silverlightvishakpb
 
Past, present, and future of web assembly - Devfest Nantes 2017
Past, present, and future of web assembly - Devfest Nantes 2017Past, present, and future of web assembly - Devfest Nantes 2017
Past, present, and future of web assembly - Devfest Nantes 2017Alexandre Morgaut
 
Crosswalk and the Intel XDK
Crosswalk and the Intel XDKCrosswalk and the Intel XDK
Crosswalk and the Intel XDKIntel® Software
 
QNX, C/C++, Qt, Cascades, HTML5… So what’s now BlackBerry 10 application deve...
QNX, C/C++, Qt, Cascades, HTML5… So what’s now BlackBerry 10 application deve...QNX, C/C++, Qt, Cascades, HTML5… So what’s now BlackBerry 10 application deve...
QNX, C/C++, Qt, Cascades, HTML5… So what’s now BlackBerry 10 application deve...Codemotion
 
Flex For Java Architects Ledroff Breizh Jug V Blog Cc
Flex For Java Architects Ledroff Breizh Jug V Blog CcFlex For Java Architects Ledroff Breizh Jug V Blog Cc
Flex For Java Architects Ledroff Breizh Jug V Blog CcFrançois Le Droff
 
Apache Flex and the imperfect Web
Apache Flex and the imperfect WebApache Flex and the imperfect Web
Apache Flex and the imperfect Webmasuland
 
Open Kode, Airplay And The New Reality Of Write Once Run Anywhere
Open Kode, Airplay And The New Reality Of Write Once Run AnywhereOpen Kode, Airplay And The New Reality Of Write Once Run Anywhere
Open Kode, Airplay And The New Reality Of Write Once Run Anywhereguest991eb3
 
Html5 workshop part 1
Html5 workshop part 1Html5 workshop part 1
Html5 workshop part 1NAILBITER
 

Similar to WebGL games with Minko - Next Game Frontier 2014 (20)

Minko - Build WebGL applications with C++ and asm.js
Minko - Build WebGL applications with C++ and asm.jsMinko - Build WebGL applications with C++ and asm.js
Minko - Build WebGL applications with C++ and asm.js
 
Minko - Windows App Meetup Nov. 2013
Minko - Windows App Meetup Nov. 2013Minko - Windows App Meetup Nov. 2013
Minko - Windows App Meetup Nov. 2013
 
Minko - Why we created our own Flash platform and why you should care
Minko - Why we created our own Flash platform and why you should careMinko - Why we created our own Flash platform and why you should care
Minko - Why we created our own Flash platform and why you should care
 
Minko - Scripting 3D apps with Lua and C++
Minko - Scripting 3D apps with Lua and C++Minko - Scripting 3D apps with Lua and C++
Minko - Scripting 3D apps with Lua and C++
 
Paris Android User Group - Build 3D web, mobile and desktop applications with...
Paris Android User Group - Build 3D web, mobile and desktop applications with...Paris Android User Group - Build 3D web, mobile and desktop applications with...
Paris Android User Group - Build 3D web, mobile and desktop applications with...
 
Minko - Targeting Flash/Stage3D with C++ and GLSL
Minko - Targeting Flash/Stage3D with C++ and GLSLMinko - Targeting Flash/Stage3D with C++ and GLSL
Minko - Targeting Flash/Stage3D with C++ and GLSL
 
Cross platform development with C#
Cross platform development with C#Cross platform development with C#
Cross platform development with C#
 
AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...
AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...
AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...
 
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3DJS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
 
Rapid and Reliable Developing with HTML5 & GWT
Rapid and Reliable Developing with HTML5 & GWTRapid and Reliable Developing with HTML5 & GWT
Rapid and Reliable Developing with HTML5 & GWT
 
O futuro do .NET : O que eu preciso saber
O futuro do .NET : O que eu preciso saberO futuro do .NET : O que eu preciso saber
O futuro do .NET : O que eu preciso saber
 
Frontend Monoliths: Run if you can!
Frontend Monoliths: Run if you can!Frontend Monoliths: Run if you can!
Frontend Monoliths: Run if you can!
 
Silverlight
SilverlightSilverlight
Silverlight
 
Past, present, and future of web assembly - Devfest Nantes 2017
Past, present, and future of web assembly - Devfest Nantes 2017Past, present, and future of web assembly - Devfest Nantes 2017
Past, present, and future of web assembly - Devfest Nantes 2017
 
Crosswalk and the Intel XDK
Crosswalk and the Intel XDKCrosswalk and the Intel XDK
Crosswalk and the Intel XDK
 
QNX, C/C++, Qt, Cascades, HTML5… So what’s now BlackBerry 10 application deve...
QNX, C/C++, Qt, Cascades, HTML5… So what’s now BlackBerry 10 application deve...QNX, C/C++, Qt, Cascades, HTML5… So what’s now BlackBerry 10 application deve...
QNX, C/C++, Qt, Cascades, HTML5… So what’s now BlackBerry 10 application deve...
 
Flex For Java Architects Ledroff Breizh Jug V Blog Cc
Flex For Java Architects Ledroff Breizh Jug V Blog CcFlex For Java Architects Ledroff Breizh Jug V Blog Cc
Flex For Java Architects Ledroff Breizh Jug V Blog Cc
 
Apache Flex and the imperfect Web
Apache Flex and the imperfect WebApache Flex and the imperfect Web
Apache Flex and the imperfect Web
 
Open Kode, Airplay And The New Reality Of Write Once Run Anywhere
Open Kode, Airplay And The New Reality Of Write Once Run AnywhereOpen Kode, Airplay And The New Reality Of Write Once Run Anywhere
Open Kode, Airplay And The New Reality Of Write Once Run Anywhere
 
Html5 workshop part 1
Html5 workshop part 1Html5 workshop part 1
Html5 workshop part 1
 

WebGL games with Minko - Next Game Frontier 2014

  • 1. WebGL games with Minko Next Game Frontier 2014 Jean-Marc Le Roux CEO and co-founder of Aerys @Minko3D http://minko.io
  • 3. by
  • 4. 3D, Everywhere. Deliver engaging, interactive and rich 3D content and applications on desktops, mobiles and the web.
  • 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.  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. 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.
  • 9. Why? Motivations to build WebGL apps with C++
  • 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. 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. 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. Core Framework Language  Fast  Rich & expressive  Optimized for each target Scripting Language  Simple  Interpreted  Dynamic VSC, C++, Java, C#... Javascript, Python, AS3…
  • 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. 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. 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. 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. 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. 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. 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. Parallelization  Workers  Threads (except for HTML5)  Coroutines (Lua)
  • 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. 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. C++ IN THE BROWSER? Workflow and tools
  • 26. C++11 Example – Closures // callback is removed when mouseWheel is set to nullptr
  • 27. C++11 Example – Shared pointers
  • 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. 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. 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. 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. Compilation – em++ C++ app. code App. object file LLVM Optimizations
  • 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. Linkage - emar Minko Plugins Static Libraries Physics Particles JPEG Parser PNG Parser MK Parser Core framework static library App. object file application.js
  • 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. 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. 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.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 49. 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
  • 50. 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
  • 51. 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…)
  • 52. 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
  • 53. Conclusion  C++ 2011 is very efficient to build interactive and rich apps  Emscripten is mature enough to start working on real life applications
  • 54. Merci ! Don’t forget to check http://minko.io !
  • 55. Bonus
  • 56. ASM.js – Micro-Benchmarks Source: http://kripken.github.io/mloc_emscripten_talk/#/27
  • 57. ASM.js – Realistic Benchmarks Source: http://kripken.github.io/mloc_emscripten_talk/#/28
  • 58. 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
  • 59. 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