minko - flash conference #5
TRANSCRIPT
Flash Online Conference #5
Targeting mobiles, WebGL and Stage3D... with a single app!
@Minko3D http://minko.io
LATEST ADDITIONS Available today on minko.io
New Editor Features
Dynamic framerate
Multi-selection
First-person camera mode
New layer WYSIWYG interface
Integration of CrystalATF – 6 to 9x faster ATF conversion – Only for texture loading in the editor, not yet for publishing
Minor bug fixes…
New Framework Features
Support for 4096 textures
Context-loss handling
Compatibility with 2D frameworks (Starling…)
Minor bug fixes…
New Community Features
Better search engine for the forum
Already existing threads suggestions when your create a new one – Avoid asking questions that have already been answered
Discussions feed available directly from the blog’s right
column
New Game Released: IronForce
Published by EA/Chillingo – http://www.chillingo.com/games/iron-force/
Tank MMORPG
– Already available on iOS – Available soon on Android
New Game Released: IronForce
« We chose Minko to be the 3D engine in one of our new Flash-based games because we think it’s a highly professional Stage3D based solution
in terms of development ecosystem and high performance. »
André Weissflog, Head of Development at BigPoint
MINKO 3 Codename « Normandie »
Motivations
Target new platforms – Keep the « design once, deploy everywhere » workflow – Larger community
Increase performances, epecially CPU-wise
– Multi-threading?
Leverage existing codebase
New Platforms
Platform Status Target Languages
iOS OK Native C/C++
Android OK Native C/C++
Flash (Stage3D) WIP X-Compilation C/C++, AS3
Windows (DirectX) WIP Native C/C++
Mac OK Native C/C++
Windows (OpenGL) OK Native C/C++
Linux OK Native C/C++
HTML5 (WebGL) OK X-Compilation C/C++, Javascript
Windows Phone WIP Native C/C++
BlackBerry 10 NA Native C/C++
Firefox OS NA Native C/C++
Current status
Feature Status Comments
Signals 100%
Scene Graph 90% Assets loading, scene manipulations, signals, layers
Post-Processing 30%
Effects/Shaders 100% Vertex/fragment shaders, effects parser, render to texture, multi-pass
Über shaders 80% Init. OK, but won’t fork automatically afterward
Dynamic lights 100% Ambient, directional, point and spot lights
Dynamic shadows 50%
Particles 90% Missing some modifiers
Physics 90% Missing joints, triangle collider and heightmap collider
MK files parser 80% Missing compression
JPEG parser 100%
PNG parser 100%
Collada parser NA
OBJ parser NA
About Collada and OBJ
Might be supported in the future as a plugin using the ASSIMP project
Still supported in the editor to be exported as MK – Smaller files – Faster to load – More features (physics, particles…)
TECHNOLOGICAL CHOICES
WebGL
In the browser implementation of the OpenGL API – Based on the specifications of OpenGL ES2 (like Stage3D!)
Supported by most modern browsers
– Supported by IE11 next year!
Not as fast as Stage3D – But that’s another story…
53%
WebGL
96%
Flash
WebGL VS Stage3D - Penetration Rate
Firefox 4+, Chrome 9+ Any browser with Flash 11+
Source: Statcounter
?
WebGL
96%
Flash
WebGL VS Stage3D – HW Compatibility
*
* 2006 and newer hardware, software fallback otherwise
WebGL => Flash Fallback!
Start working with standards today, but keep adressing the largest audience possible
Is WebGL
available?
Run WebGL/JS app.
Run Flash app. no
yes
C++ 2011
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
FlasCC/Crossbridge http://adobe-flash.github.io/crossbridge/
Open source project driven by Adobe – Based on LLVM, which is supported by Google, Apple, Intel and
many more
Cross-compiles C++ code to ActionScript 3.0 – No (stable) OpenGL bindings – Provides virtual file system – C++ AS3 bindings using SWIG
Leverages LLVM/C++ based optimizations
– Strong typing – Low level memory management: no GC!
Still suffers from AS3/AVM2 performance issues
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
ANGLE https://code.google.com/p/angleproject/
Almost Native Graphics Layer Engine
Open source project driven by Google – Used by Chrome and Firefox WebGL implementations
OpenGL wrapper that will map OGL calls to the DirectX API
– Provide better performances on Windows – Makes it possible to target DirectX with an OpenGL based
implementation – Should provide Windows Phone 8 compatibility out of the box
Also converts GLSL shaders to HLSL
– Completely transparent to the developer! – Write once, deploy everywhere
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
IMPLEMENTATION
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 qirks
– Some methods do not work properly/exist and have to be wrapped using (simple) workarounds
AbstractContext OpenGLES2Context WebGLContext
NEW FEATURES
Components
Goal: provide an extensible API to add behaviors to scene nodes with concepts shared by artists and developers
Replace « controllers » – Scene nodes just describe a hierarchy – Components add behaviors
One scene one can have multiple components
– Ex: the scene node of a torchlight can have a component for the mesh and a component for the actual light source
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
GLSL
Support for GLSL 1 as defined by the OpenGL ES 2 standard – Vertex shaders – Fragment shaders
Implementation could easily support earlier/more powerful
versions of GLSL – Gives you the ability to leverage extended hardware capabilities
when available!
Vast codebase, tutorials and various documentation articles available on the web
Shader Optimizer
Open source project created by Unity – Used by default since Unity 3 – Based on Mesa’s GLSL compiler open source implementation
Provides significant performance boost on mobile GPUs
– Compensate the lack of proper drivers on both iOS and Android
Completely transparent to the user: you don’t have to do anything – JIT optimizations
Not working with WebGL (yet!)
Effects
Data-driven API to create rendering effects – Everything defined in JSON data files – Loaded natively by the core framework – Interact seemlessly with the scene and the existing assets/effects
Create even the most complicated effects without a single line of C++
code – Only GLSL and some flags/properties to setup – Support every rendering states/properties you might need: blending,
filtering, render target, etc… – Both rendering and post-processing – Techniques and fallbacks (WIP)
Dependencies injection to create libraries of re-usable GLSL
shader functions – Ex: Phong.glsl gives you everything you need to implement Phong
lighting
Effect Bindings
Goal: copy/paste existing GLSL code and « plug it » in the engine without a single shader code modification
Declare « links » between effect/shader « properties » and what is actually provided by components in the scene – Uniforms – Vertex Attributes – Macros
Makes it possible to have macros that will be defined only if
some scene/component properties actually exist – Uber shaders!
CROSS-COMPILATION WORKFLOW
Minko Minko Sources
Compilation
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
Minko
Plugins Static Libraries
Physics
Particles
JPEG Parser
PNG Parser
MK Parser
Core framework static library
App. object file
application.js
Optimization
Run the closure compiler on the generated Javascript code
application.js application_optimized.js
Workflow - Compression
Use LZMA compression – Emscripten will embed LZMA decompression code all by itself – Decompression can be watched when the app. runs
application.js application_compressed.js
EXAMPLE: SPONZA HTML5! http://minko.io/showcase/sponza-html5
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…)
I miss the Flash API – How do to a 2D UI using HTML5 comps? – URLRequest?
Conclusion
C++ 2011 is very efficient to build interactive and rich apps
Emscripten is mature enough to start working on large-scale applications
Using #ifdef for portability of C++ code is a bit cumbersome – But it can easily be fixed by wrapping the app. init
Minko 3
– Alpha in september – Beta in december – Final release in April 2014
