SlideShare une entreprise Scribd logo
1  sur  65
Télécharger pour lire hors ligne
Jean-Marc Le Roux
@promethe42
http://blogs.aerys.in/jeanmarc-leroux
Resources
 Sources
 https://github.com/aerys/minko
 Forum
 http://answers.aerys.in
 Samples
 http://github.com/aerys/minko-examples
 Documentation
 http://hub.aerys.in/index.php/Minko:Tutorials
 http://hub.aerys.in/minko/reference/index.html
Minko SDKs
Community SDK
 Free and open
source framework
 Free tools
Minko SDKs
Professional SDK
 Advanced Features
Community SDK
 Free and open
source framework
 Free tools
PART 1: SCRIPTING
Community SDK
The bigger the app.,
the cleaner you want to be.
should?
I – or someone else – already did this,
I want to re-use the existing code.
ISceneNode
Mesh Camera GroupLight
AbstractController
ISceneNode.addController()
AnimationController AbstractScriptController
DataProvider
ISceneNode.bindings.addDataProvider()
CameraDataProvider LightDataProvider
ModelControllerView
Material
ISceneNode
Mesh Camera GroupLight
AbstractController
ISceneNode.addController()
AnimationController AbstractScriptController
DataProvider
ISceneNode.bindings.addDataProvider()
CameraDataProvider LightDataProvider
ModelControllerView
Material
MyScript
To create a script:
 Extend AbstractScriptController
 Override the update() method
You can keep working the way you want.
You don’t have to use scripts or controllers.
But with scripts & controllers…
Re-usable loosely coupled code
 Target multiple scene nodes with a single script
 Easily build and share your own library of useful scripts
 Easily fetch and use the communities code snippets
// only 1 script
var kbScript : KeyboardMoveScript = new KeyboardMoveScript();
// but it controls 2 targets
cube.addController(kbScript);
sphere.addController(kbScript);
Easy access to
 Mouse/keyboard properties and signals
 time, deltaTime
 Scene
 A lot of other properties useful to script stuff…
// if the right arrow key is down…
if (keyboard.keyIsDown(Keyboard.RIGHT))
target.transform.appendTranslation(.1);
Similar to Event.ENTER_FRAME but
 Lighter
 Customisable per-script « frame rate »
// execute this script only once per second
this.framerate = 1;
Example: move objects with the
keyboard
public class KeyboardMoveController extends AbstractScriptController
{
override protected function update(target : ISceneNode) : void
{
if (keyboard.keyIsDown(Keyboard.RIGHT))
target.transform.appendTranslation(.1);
if (keyboard.keyIsDown(Keyboard.LEFT))
target.transform.appendTranslation(-.1);
if (keyboard.keyIsDown(Keyboard.UP))
target.transform.appendTranslation(0., .1);
if (keyboard.keyIsDown(Keyboard.DOWN))
target.transform.appendTranslation(0., -.1);
if (keyboard.keyIsDown(Keyboard.PAGE_UP))
target.transform.appendTranslation(0., 0., .1);
if (keyboard.keyIsDown(Keyboard.PAGE_DOWN))
target.transform.appendTranslation(0., 0., -.1);
}
}
Usage
// instanciate the script
var kbScript : KeyboardMoveScript = new KeyboardMoveScript();
// add the script to a target
cube.addController(kbScript);
// remove the script from a target
cube.removeController(kbScript);
More about scripts and controllers…
 Write your first controller
 A Script To Move Objects With The Keyboard
 Handle Mouse Focus With A Script
 Switching Material With a Controller
 Create Procedural 3D Animations
PART 2: SHADERS AND GPU
PROGRAMMING
Community SDK
HDR Rendering
Dynamic lights
Static lights
Dynamic shadows
Static shadows
Diffuse texture
Noise
Diffuse texture
Kids, this is the story of how I met your shader…
1992 2001 2004 2011
Mortal Kombat GTA III Doom 3 Crysis 2
1996
Evolution of shader languages
What about AGAL?
1992 2001 2004 2011
Mortal Kombat GTA III Doom 3 Crysis 2
1996
Language Features
In 1992, Flash was called FutureSplash Animator and written by a single man: Jonathan Gay
 learning AGAL != learning GPU programming
 AGAL is awesome for 3D engines developers
 Low-level binary assembly code
 Cross-platform
 AGAL is a nightmare for 3D applications
developers
With Minko you can program the GPU
using ActionScript 3.0 !
Minko embedded JIT
Compiler
Shader ByteCode
ActionScript Shader
Code
public class MyShader
{
public function getVertexPosition() : SFloat
{
return localToScreen(vertexXYZ);
}
public function getPixelColor() : SFloat
{
return sampleTexture(
meshBindings.getTextureParameter(‘texture’),
interpolate(vertexUV)
);
}
}
m44 vt0, va0, vc0
m44 vt0, vt0, vc5
mov oc, vt0
mov v0, va1
tex ft0, v0 <linear,2d>
mov oc, ft0
at runtime compilation
ActionScript
Shader
•Use all ActionScript 3.0 features
•getOutputPosition => Vertex Shader
•getOutputColor => Fragment Shader
•OOP style
•CPU/GPU balancing
ASG
•Abstract Shader Graph
•Optimizations
•Constants and temporary registers
allocation
•Operations re-ordering for faster
execution and optimal use of temporary
registers
AGAL
•Direct bytecode generation at runtime
•Custom compiler
•Optional debug data
•AGAL assembly output
•Shader graph output
•Memory allocation map
Execution
 Full AS3 workflow
 Conditionnals and loops
 Classes and methods
 Dynamic OOP coding style
 Exhaustive AGAL implementation
 Extra high-level operations set
 Re-usable « shader parts »
 Shaders compiled at-runtime
 Just like any other AS3 code
 Dynamic according to
 The scene properties
 The mesh properties/material
 Any constant, variable, etc…
 Redistributable as SWF/SWC files
ACTIONSCRIPT IS NOW
THE MOST POWERFUL
SHADER LANGUAGE
ACTIONSCRIPT IS NOW
THE MOST POWERFUL
SHADER LANGUAGE
(as a language, but not GPU feature wise because of Stage3D limitations )
More about shaders…
 JIT shaders for better performance
 Create your first shader
 Understanding vertex to fragment
interpolation
 Get ActionScript shaders compilations logs
 Create a shader rendering per-pixel normals
 Create a « black and white » post-processing
effect
PART 3: SCENE EDITOR
Community SDK
WYSIWYG Editor
Fine tuning
Flash Pro-like symbols
*.dae, *.3ds, *.obj, …
Common File Formats
Publish MK Scenes
…
editor
MK File Format
 Fully optimized for Minko
 More suitable for web/mobile apps in general
 Binary
 Light
 Zip, deflate or LZMA
 Readable with AS3, PHP, C++ and JavaScript
More about the editor…
 Normal mapping and specular maps
 Importing Collada files
PROFESSIONAL SDK
Minko SDKs
Professional SDK
Community SDK
After this slide, nothing is neither free nor open source.
(for now… )
PART 1: PHYSICS
Professional SDK
 Fast, robust and extensible
 Create new kind of forces, force fields…
 Add specialized shapes and collision detection
algorithms
 Comprehensive set of shapes
 Box, sphere, cone, cylinder…
 Triangle mesh
 Convex hull
 Heightmap
 Triggers for scripting
// listen to the Collider.collisionStarted signal
redGoalCollider.collisionStarted.add(
function (collision : CollisionStarted) : void
{
_numPointB++;
resetBall();
}
);
// do the same for Collider.collisionStopped…
Working with triggers
Best practice: implement triggers using scripts.
You will soon be able to bind them directly in the editor!
PART 2: OPTIMIZATIONS FOR THE
WEB AND MOBILE DEVICES
Professional SDK
MK Optimizations
 A new file format for 3D content
 Readable with AS3, PHP, C++ and JavaScript
 Optimized for the web
 Lossy and lossless 3D compression
 3D streaming (WIP)
 Optimized for mobile devices
 Automated shape-conservative 3D simplification
 Fast implementation
 Automated ATF compression for textures
*.dae, *.3ds, *.obj, …
Common File Formats
Publish Optimized MK Scenes
…
editor
Automated optimizations
0
5000
10000
15000
20000
25000
30000
35000 dae
dae (rar)
obj
obj (rar)
3ds
mk
mk (simplification)
mk (compression)
mk (compression +
simplification)
3D formats size comparison(lower is better)
3D formats comparison
0
20
40
60
80
100
120
140
File Size (MB) Downloading Time
(seconds)
Parsing Time
(seconds)
Original
MK
(lower is better)
Collada
3D
Scene Automated optimizations
 ATF compression
 Texture resizing
 3D simplification
 3D compression
Publish
x10 faster rendering!
3D
Scene Automated optimizations
 ATF compression
 3D compression
 3D streaming (WIP)
Publish
x20 faster download!
3D
Scene
Build your scene once,
publish it for each device automatically.
myScene.mks
myMobileScene.mk
myWebScene.mk
Simplification is also very cool to create multiple
level of details for the same scene!
Next?
 Public beta next week
 Everything for free (for now…)
 Give us feedback!
 ShaderLab integration
 http://www.youtube.com/watch?v=yuR1e1PjU8Y
 Editor plugins
 Artificial intelligence framework/editor
 Particles framework/editor
 Animations editor
 Terrain editor
MERCI !

Contenu connexe

Tendances

Real-time CG animation in Unity: unpacking the Sherman project - Unite Copenh...
Real-time CG animation in Unity: unpacking the Sherman project - Unite Copenh...Real-time CG animation in Unity: unpacking the Sherman project - Unite Copenh...
Real-time CG animation in Unity: unpacking the Sherman project - Unite Copenh...Unity Technologies
 
Gdc 14 bringing unreal engine 4 to open_gl
Gdc 14 bringing unreal engine 4 to open_glGdc 14 bringing unreal engine 4 to open_gl
Gdc 14 bringing unreal engine 4 to open_glchangehee lee
 
【Unite 2018 Tokyo】スクリプタブルレンダーパイプライン入門
【Unite 2018 Tokyo】スクリプタブルレンダーパイプライン入門【Unite 2018 Tokyo】スクリプタブルレンダーパイプライン入門
【Unite 2018 Tokyo】スクリプタブルレンダーパイプライン入門Unity Technologies Japan K.K.
 
Best Practices for Shader Graph
Best Practices for Shader GraphBest Practices for Shader Graph
Best Practices for Shader GraphUnity Technologies
 
【Unite 2017 Tokyo】スクリプタブル・レンダーパイプラインのカスタマイズと拡張
【Unite 2017 Tokyo】スクリプタブル・レンダーパイプラインのカスタマイズと拡張【Unite 2017 Tokyo】スクリプタブル・レンダーパイプラインのカスタマイズと拡張
【Unite 2017 Tokyo】スクリプタブル・レンダーパイプラインのカスタマイズと拡張Unite2017Tokyo
 
Smart contract language on Substrate: ink!
Smart contract language on Substrate: ink!Smart contract language on Substrate: ink!
Smart contract language on Substrate: ink!Task Ohmori
 
Look Ma, No Jutter! Optimizing Performance Across Oculus Mobile
Look Ma, No Jutter! Optimizing Performance Across Oculus MobileLook Ma, No Jutter! Optimizing Performance Across Oculus Mobile
Look Ma, No Jutter! Optimizing Performance Across Oculus MobileUnity Technologies
 
OpenGLES Android Graphics
OpenGLES Android GraphicsOpenGLES Android Graphics
OpenGLES Android GraphicsArvind Devaraj
 
Porting and Maintaining your C++ Game on Android without losing your mind
Porting and Maintaining your C++ Game on Android without losing your mindPorting and Maintaining your C++ Game on Android without losing your mind
Porting and Maintaining your C++ Game on Android without losing your mindBeMyApp
 
Android open gl2_droidcon_2014
Android open gl2_droidcon_2014Android open gl2_droidcon_2014
Android open gl2_droidcon_2014Droidcon Berlin
 
【Unite 2017 Tokyo】Unity5.6での2D新機能解説
【Unite 2017 Tokyo】Unity5.6での2D新機能解説【Unite 2017 Tokyo】Unity5.6での2D新機能解説
【Unite 2017 Tokyo】Unity5.6での2D新機能解説Unity Technologies Japan K.K.
 
Open frameworks 101_fitc
Open frameworks 101_fitcOpen frameworks 101_fitc
Open frameworks 101_fitcbenDesigning
 
OpenGL ES EGL Spec&APIs
OpenGL ES EGL Spec&APIsOpenGL ES EGL Spec&APIs
OpenGL ES EGL Spec&APIsJungsoo Nam
 

Tendances (14)

Real-time CG animation in Unity: unpacking the Sherman project - Unite Copenh...
Real-time CG animation in Unity: unpacking the Sherman project - Unite Copenh...Real-time CG animation in Unity: unpacking the Sherman project - Unite Copenh...
Real-time CG animation in Unity: unpacking the Sherman project - Unite Copenh...
 
SEED - Halcyon Architecture
SEED - Halcyon ArchitectureSEED - Halcyon Architecture
SEED - Halcyon Architecture
 
Gdc 14 bringing unreal engine 4 to open_gl
Gdc 14 bringing unreal engine 4 to open_glGdc 14 bringing unreal engine 4 to open_gl
Gdc 14 bringing unreal engine 4 to open_gl
 
【Unite 2018 Tokyo】スクリプタブルレンダーパイプライン入門
【Unite 2018 Tokyo】スクリプタブルレンダーパイプライン入門【Unite 2018 Tokyo】スクリプタブルレンダーパイプライン入門
【Unite 2018 Tokyo】スクリプタブルレンダーパイプライン入門
 
Best Practices for Shader Graph
Best Practices for Shader GraphBest Practices for Shader Graph
Best Practices for Shader Graph
 
【Unite 2017 Tokyo】スクリプタブル・レンダーパイプラインのカスタマイズと拡張
【Unite 2017 Tokyo】スクリプタブル・レンダーパイプラインのカスタマイズと拡張【Unite 2017 Tokyo】スクリプタブル・レンダーパイプラインのカスタマイズと拡張
【Unite 2017 Tokyo】スクリプタブル・レンダーパイプラインのカスタマイズと拡張
 
Smart contract language on Substrate: ink!
Smart contract language on Substrate: ink!Smart contract language on Substrate: ink!
Smart contract language on Substrate: ink!
 
Look Ma, No Jutter! Optimizing Performance Across Oculus Mobile
Look Ma, No Jutter! Optimizing Performance Across Oculus MobileLook Ma, No Jutter! Optimizing Performance Across Oculus Mobile
Look Ma, No Jutter! Optimizing Performance Across Oculus Mobile
 
OpenGLES Android Graphics
OpenGLES Android GraphicsOpenGLES Android Graphics
OpenGLES Android Graphics
 
Porting and Maintaining your C++ Game on Android without losing your mind
Porting and Maintaining your C++ Game on Android without losing your mindPorting and Maintaining your C++ Game on Android without losing your mind
Porting and Maintaining your C++ Game on Android without losing your mind
 
Android open gl2_droidcon_2014
Android open gl2_droidcon_2014Android open gl2_droidcon_2014
Android open gl2_droidcon_2014
 
【Unite 2017 Tokyo】Unity5.6での2D新機能解説
【Unite 2017 Tokyo】Unity5.6での2D新機能解説【Unite 2017 Tokyo】Unity5.6での2D新機能解説
【Unite 2017 Tokyo】Unity5.6での2D新機能解説
 
Open frameworks 101_fitc
Open frameworks 101_fitcOpen frameworks 101_fitc
Open frameworks 101_fitc
 
OpenGL ES EGL Spec&APIs
OpenGL ES EGL Spec&APIsOpenGL ES EGL Spec&APIs
OpenGL ES EGL Spec&APIs
 

Similaire à Minko SDK Scripting and Shader Programming Guide

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
 
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
 
FrameGraph: Extensible Rendering Architecture in Frostbite
FrameGraph: Extensible Rendering Architecture in FrostbiteFrameGraph: Extensible Rendering Architecture in Frostbite
FrameGraph: Extensible Rendering Architecture in FrostbiteElectronic Arts / DICE
 
Minko - Flash Conference #5
Minko - Flash Conference #5Minko - Flash Conference #5
Minko - Flash Conference #5Minko3D
 
Introduction to Skia by Ryan Chou @20141008
Introduction to Skia by Ryan Chou @20141008Introduction to Skia by Ryan Chou @20141008
Introduction to Skia by Ryan Chou @20141008Ryan Chou
 
The Next Leap in JavaScript Performance
The Next Leap in JavaScript PerformanceThe Next Leap in JavaScript Performance
The Next Leap in JavaScript PerformanceIntel® Software
 
JIT Spraying Never Dies - Bypass CFG By Leveraging WARP Shader JIT Spraying.pdf
JIT Spraying Never Dies - Bypass CFG By Leveraging WARP Shader JIT Spraying.pdfJIT Spraying Never Dies - Bypass CFG By Leveraging WARP Shader JIT Spraying.pdf
JIT Spraying Never Dies - Bypass CFG By Leveraging WARP Shader JIT Spraying.pdfSamiraKids
 
WebGL games with Minko - Next Game Frontier 2014
WebGL games with Minko - Next Game Frontier 2014WebGL games with Minko - Next Game Frontier 2014
WebGL games with Minko - Next Game Frontier 2014Minko3D
 
Targeting Android with Qt
Targeting Android with QtTargeting Android with Qt
Targeting Android with QtEspen Riskedal
 
2011.05.27 ACC 기술세미나 : Adobe Flash Builder 4.5를 환경에서 Molehill 3D를 이용한 개발 소개
2011.05.27 ACC 기술세미나 : Adobe Flash Builder 4.5를 환경에서 Molehill 3D를 이용한 개발 소개2011.05.27 ACC 기술세미나 : Adobe Flash Builder 4.5를 환경에서 Molehill 3D를 이용한 개발 소개
2011.05.27 ACC 기술세미나 : Adobe Flash Builder 4.5를 환경에서 Molehill 3D를 이용한 개발 소개Yongho Ji
 
TestUpload
TestUploadTestUpload
TestUploadZarksaDS
 
Getting Cloudy with Remote Graphics and GPU Compute Using G2 instances (CPN21...
Getting Cloudy with Remote Graphics and GPU Compute Using G2 instances (CPN21...Getting Cloudy with Remote Graphics and GPU Compute Using G2 instances (CPN21...
Getting Cloudy with Remote Graphics and GPU Compute Using G2 instances (CPN21...Amazon Web Services
 
Shape12 6
Shape12 6Shape12 6
Shape12 6pslulli
 
Android on IA devices and Intel Tools
Android on IA devices and Intel ToolsAndroid on IA devices and Intel Tools
Android on IA devices and Intel ToolsXavier Hallade
 
cebas Visual Technology: VFX and Render software - presentation 2015
cebas Visual Technology: VFX and Render software - presentation 2015cebas Visual Technology: VFX and Render software - presentation 2015
cebas Visual Technology: VFX and Render software - presentation 2015Zedar Thokme
 
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
 
426 lecture 4: AR Developer Tools
426 lecture 4: AR Developer Tools426 lecture 4: AR Developer Tools
426 lecture 4: AR Developer ToolsMark Billinghurst
 

Similaire à Minko SDK Scripting and Shader Programming Guide (20)

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
 
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
 
FrameGraph: Extensible Rendering Architecture in Frostbite
FrameGraph: Extensible Rendering Architecture in FrostbiteFrameGraph: Extensible Rendering Architecture in Frostbite
FrameGraph: Extensible Rendering Architecture in Frostbite
 
Minko - Flash Conference #5
Minko - Flash Conference #5Minko - Flash Conference #5
Minko - Flash Conference #5
 
Introduction to Skia by Ryan Chou @20141008
Introduction to Skia by Ryan Chou @20141008Introduction to Skia by Ryan Chou @20141008
Introduction to Skia by Ryan Chou @20141008
 
The Next Leap in JavaScript Performance
The Next Leap in JavaScript PerformanceThe Next Leap in JavaScript Performance
The Next Leap in JavaScript Performance
 
JIT Spraying Never Dies - Bypass CFG By Leveraging WARP Shader JIT Spraying.pdf
JIT Spraying Never Dies - Bypass CFG By Leveraging WARP Shader JIT Spraying.pdfJIT Spraying Never Dies - Bypass CFG By Leveraging WARP Shader JIT Spraying.pdf
JIT Spraying Never Dies - Bypass CFG By Leveraging WARP Shader JIT Spraying.pdf
 
WebGL games with Minko - Next Game Frontier 2014
WebGL games with Minko - Next Game Frontier 2014WebGL games with Minko - Next Game Frontier 2014
WebGL games with Minko - Next Game Frontier 2014
 
Targeting Android with Qt
Targeting Android with QtTargeting Android with Qt
Targeting Android with Qt
 
2011.05.27 ACC 기술세미나 : Adobe Flash Builder 4.5를 환경에서 Molehill 3D를 이용한 개발 소개
2011.05.27 ACC 기술세미나 : Adobe Flash Builder 4.5를 환경에서 Molehill 3D를 이용한 개발 소개2011.05.27 ACC 기술세미나 : Adobe Flash Builder 4.5를 환경에서 Molehill 3D를 이용한 개발 소개
2011.05.27 ACC 기술세미나 : Adobe Flash Builder 4.5를 환경에서 Molehill 3D를 이용한 개발 소개
 
TestUpload
TestUploadTestUpload
TestUpload
 
Getting Cloudy with Remote Graphics and GPU Compute Using G2 instances (CPN21...
Getting Cloudy with Remote Graphics and GPU Compute Using G2 instances (CPN21...Getting Cloudy with Remote Graphics and GPU Compute Using G2 instances (CPN21...
Getting Cloudy with Remote Graphics and GPU Compute Using G2 instances (CPN21...
 
Build 2019 Recap
Build 2019 RecapBuild 2019 Recap
Build 2019 Recap
 
Shape12 6
Shape12 6Shape12 6
Shape12 6
 
Android on IA devices and Intel Tools
Android on IA devices and Intel ToolsAndroid on IA devices and Intel Tools
Android on IA devices and Intel Tools
 
cebas Visual Technology: VFX and Render software - presentation 2015
cebas Visual Technology: VFX and Render software - presentation 2015cebas Visual Technology: VFX and Render software - presentation 2015
cebas Visual Technology: VFX and Render software - presentation 2015
 
Hacking for salone: drone races
Hacking for salone: drone racesHacking for salone: drone races
Hacking for salone: drone races
 
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
 
426 lecture 4: AR Developer Tools
426 lecture 4: AR Developer Tools426 lecture 4: AR Developer Tools
426 lecture 4: AR Developer Tools
 

Plus de Minko3D

React in Native Apps - Meetup React - 20150409
React in Native Apps - Meetup React - 20150409React in Native Apps - Meetup React - 20150409
React in Native Apps - Meetup React - 20150409Minko3D
 
Paris Android LiveCode - Creating cross-platform 3D apps with Minko
Paris Android LiveCode - Creating cross-platform 3D apps with MinkoParis Android LiveCode - Creating cross-platform 3D apps with Minko
Paris Android LiveCode - Creating cross-platform 3D apps with MinkoMinko3D
 
Minko - Creating cross-platform 3D apps with Minko
Minko - Creating cross-platform 3D apps with MinkoMinko - Creating cross-platform 3D apps with Minko
Minko - Creating cross-platform 3D apps with MinkoMinko3D
 
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 - Windows App Meetup Nov. 2013
Minko - Windows App Meetup Nov. 2013Minko - Windows App Meetup Nov. 2013
Minko - Windows App Meetup Nov. 2013Minko3D
 
Minko stage3d workshop_20130525
Minko stage3d workshop_20130525Minko stage3d workshop_20130525
Minko stage3d workshop_20130525Minko3D
 

Plus de Minko3D (8)

React in Native Apps - Meetup React - 20150409
React in Native Apps - Meetup React - 20150409React in Native Apps - Meetup React - 20150409
React in Native Apps - Meetup React - 20150409
 
Paris Android LiveCode - Creating cross-platform 3D apps with Minko
Paris Android LiveCode - Creating cross-platform 3D apps with MinkoParis Android LiveCode - Creating cross-platform 3D apps with Minko
Paris Android LiveCode - Creating cross-platform 3D apps with Minko
 
Minko - Creating cross-platform 3D apps with Minko
Minko - Creating cross-platform 3D apps with MinkoMinko - Creating cross-platform 3D apps with Minko
Minko - Creating cross-platform 3D apps with Minko
 
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 - Windows App Meetup Nov. 2013
Minko - Windows App Meetup Nov. 2013Minko - Windows App Meetup Nov. 2013
Minko - Windows App Meetup Nov. 2013
 
Minko stage3d workshop_20130525
Minko stage3d workshop_20130525Minko stage3d workshop_20130525
Minko stage3d workshop_20130525
 

Dernier

Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clashcharlottematthew16
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr LapshynFwdays
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfRankYa
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 

Dernier (20)

Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clash
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 

Minko SDK Scripting and Shader Programming Guide

  • 2. Resources  Sources  https://github.com/aerys/minko  Forum  http://answers.aerys.in  Samples  http://github.com/aerys/minko-examples  Documentation  http://hub.aerys.in/index.php/Minko:Tutorials  http://hub.aerys.in/minko/reference/index.html
  • 3. Minko SDKs Community SDK  Free and open source framework  Free tools
  • 4. Minko SDKs Professional SDK  Advanced Features Community SDK  Free and open source framework  Free tools
  • 6. The bigger the app., the cleaner you want to be. should?
  • 7. I – or someone else – already did this, I want to re-use the existing code.
  • 8.
  • 9. ISceneNode Mesh Camera GroupLight AbstractController ISceneNode.addController() AnimationController AbstractScriptController DataProvider ISceneNode.bindings.addDataProvider() CameraDataProvider LightDataProvider ModelControllerView Material
  • 10. ISceneNode Mesh Camera GroupLight AbstractController ISceneNode.addController() AnimationController AbstractScriptController DataProvider ISceneNode.bindings.addDataProvider() CameraDataProvider LightDataProvider ModelControllerView Material MyScript To create a script:  Extend AbstractScriptController  Override the update() method
  • 11. You can keep working the way you want. You don’t have to use scripts or controllers.
  • 12. But with scripts & controllers…
  • 13. Re-usable loosely coupled code  Target multiple scene nodes with a single script  Easily build and share your own library of useful scripts  Easily fetch and use the communities code snippets // only 1 script var kbScript : KeyboardMoveScript = new KeyboardMoveScript(); // but it controls 2 targets cube.addController(kbScript); sphere.addController(kbScript);
  • 14. Easy access to  Mouse/keyboard properties and signals  time, deltaTime  Scene  A lot of other properties useful to script stuff… // if the right arrow key is down… if (keyboard.keyIsDown(Keyboard.RIGHT)) target.transform.appendTranslation(.1);
  • 15. Similar to Event.ENTER_FRAME but  Lighter  Customisable per-script « frame rate » // execute this script only once per second this.framerate = 1;
  • 16. Example: move objects with the keyboard public class KeyboardMoveController extends AbstractScriptController { override protected function update(target : ISceneNode) : void { if (keyboard.keyIsDown(Keyboard.RIGHT)) target.transform.appendTranslation(.1); if (keyboard.keyIsDown(Keyboard.LEFT)) target.transform.appendTranslation(-.1); if (keyboard.keyIsDown(Keyboard.UP)) target.transform.appendTranslation(0., .1); if (keyboard.keyIsDown(Keyboard.DOWN)) target.transform.appendTranslation(0., -.1); if (keyboard.keyIsDown(Keyboard.PAGE_UP)) target.transform.appendTranslation(0., 0., .1); if (keyboard.keyIsDown(Keyboard.PAGE_DOWN)) target.transform.appendTranslation(0., 0., -.1); } }
  • 17. Usage // instanciate the script var kbScript : KeyboardMoveScript = new KeyboardMoveScript(); // add the script to a target cube.addController(kbScript); // remove the script from a target cube.removeController(kbScript);
  • 18. More about scripts and controllers…  Write your first controller  A Script To Move Objects With The Keyboard  Handle Mouse Focus With A Script  Switching Material With a Controller  Create Procedural 3D Animations
  • 19. PART 2: SHADERS AND GPU PROGRAMMING Community SDK
  • 20. HDR Rendering Dynamic lights Static lights Dynamic shadows Static shadows Diffuse texture Noise Diffuse texture
  • 21. Kids, this is the story of how I met your shader…
  • 22. 1992 2001 2004 2011 Mortal Kombat GTA III Doom 3 Crysis 2 1996 Evolution of shader languages
  • 23. What about AGAL? 1992 2001 2004 2011 Mortal Kombat GTA III Doom 3 Crysis 2 1996 Language Features
  • 24. In 1992, Flash was called FutureSplash Animator and written by a single man: Jonathan Gay
  • 25.  learning AGAL != learning GPU programming  AGAL is awesome for 3D engines developers  Low-level binary assembly code  Cross-platform  AGAL is a nightmare for 3D applications developers
  • 26. With Minko you can program the GPU using ActionScript 3.0 !
  • 27.
  • 28. Minko embedded JIT Compiler Shader ByteCode ActionScript Shader Code public class MyShader { public function getVertexPosition() : SFloat { return localToScreen(vertexXYZ); } public function getPixelColor() : SFloat { return sampleTexture( meshBindings.getTextureParameter(‘texture’), interpolate(vertexUV) ); } } m44 vt0, va0, vc0 m44 vt0, vt0, vc5 mov oc, vt0 mov v0, va1 tex ft0, v0 <linear,2d> mov oc, ft0 at runtime compilation
  • 29. ActionScript Shader •Use all ActionScript 3.0 features •getOutputPosition => Vertex Shader •getOutputColor => Fragment Shader •OOP style •CPU/GPU balancing ASG •Abstract Shader Graph •Optimizations •Constants and temporary registers allocation •Operations re-ordering for faster execution and optimal use of temporary registers AGAL •Direct bytecode generation at runtime •Custom compiler •Optional debug data •AGAL assembly output •Shader graph output •Memory allocation map Execution  Full AS3 workflow  Conditionnals and loops  Classes and methods  Dynamic OOP coding style  Exhaustive AGAL implementation  Extra high-level operations set  Re-usable « shader parts »  Shaders compiled at-runtime  Just like any other AS3 code  Dynamic according to  The scene properties  The mesh properties/material  Any constant, variable, etc…  Redistributable as SWF/SWC files
  • 30. ACTIONSCRIPT IS NOW THE MOST POWERFUL SHADER LANGUAGE
  • 31. ACTIONSCRIPT IS NOW THE MOST POWERFUL SHADER LANGUAGE (as a language, but not GPU feature wise because of Stage3D limitations )
  • 32. More about shaders…  JIT shaders for better performance  Create your first shader  Understanding vertex to fragment interpolation  Get ActionScript shaders compilations logs  Create a shader rendering per-pixel normals  Create a « black and white » post-processing effect
  • 33. PART 3: SCENE EDITOR Community SDK
  • 37.
  • 38.
  • 39. *.dae, *.3ds, *.obj, … Common File Formats Publish MK Scenes … editor
  • 40. MK File Format  Fully optimized for Minko  More suitable for web/mobile apps in general  Binary  Light  Zip, deflate or LZMA  Readable with AS3, PHP, C++ and JavaScript
  • 41. More about the editor…  Normal mapping and specular maps  Importing Collada files
  • 44. After this slide, nothing is neither free nor open source. (for now… )
  • 46.  Fast, robust and extensible  Create new kind of forces, force fields…  Add specialized shapes and collision detection algorithms  Comprehensive set of shapes  Box, sphere, cone, cylinder…  Triangle mesh  Convex hull  Heightmap  Triggers for scripting
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53. // listen to the Collider.collisionStarted signal redGoalCollider.collisionStarted.add( function (collision : CollisionStarted) : void { _numPointB++; resetBall(); } ); // do the same for Collider.collisionStopped… Working with triggers
  • 54. Best practice: implement triggers using scripts. You will soon be able to bind them directly in the editor!
  • 55. PART 2: OPTIMIZATIONS FOR THE WEB AND MOBILE DEVICES Professional SDK
  • 56. MK Optimizations  A new file format for 3D content  Readable with AS3, PHP, C++ and JavaScript  Optimized for the web  Lossy and lossless 3D compression  3D streaming (WIP)  Optimized for mobile devices  Automated shape-conservative 3D simplification  Fast implementation  Automated ATF compression for textures
  • 57. *.dae, *.3ds, *.obj, … Common File Formats Publish Optimized MK Scenes … editor Automated optimizations
  • 58. 0 5000 10000 15000 20000 25000 30000 35000 dae dae (rar) obj obj (rar) 3ds mk mk (simplification) mk (compression) mk (compression + simplification) 3D formats size comparison(lower is better)
  • 59. 3D formats comparison 0 20 40 60 80 100 120 140 File Size (MB) Downloading Time (seconds) Parsing Time (seconds) Original MK (lower is better) Collada
  • 60. 3D Scene Automated optimizations  ATF compression  Texture resizing  3D simplification  3D compression Publish x10 faster rendering!
  • 61. 3D Scene Automated optimizations  ATF compression  3D compression  3D streaming (WIP) Publish x20 faster download!
  • 62. 3D Scene Build your scene once, publish it for each device automatically. myScene.mks myMobileScene.mk myWebScene.mk
  • 63. Simplification is also very cool to create multiple level of details for the same scene!
  • 64. Next?  Public beta next week  Everything for free (for now…)  Give us feedback!  ShaderLab integration  http://www.youtube.com/watch?v=yuR1e1PjU8Y  Editor plugins  Artificial intelligence framework/editor  Particles framework/editor  Animations editor  Terrain editor