1. Jean-Marc Le Roux
@promethe42
http://blogs.aerys.in/jeanmarc-leroux

2. Resources
 Sources
 https://github.com/aerys/minko
 Forum
 http://forum.minko.io
 Samples
 http://github.com/aerys/minko-examples
 Documentation
 http://doc.minko.io

3. @MINKO3D
Follow us on Twitter! 

4. http://soccerpun.ch
 Full 3D game built with Minko in just 48h!
 http://www.youtube.com/watch?v=Hv0cp4NwSoY
 Your smartphone is the gamepad: up to 8 players!
 All assets hanlded through the editor
 Imported from 3DS Max
 Editor available for free on http://minko.io
 Physics rigging in a few clicks
 Extensive use of particles
 Designed with the new particles editor
 Running with a new C++ particles engine

6. Last time…

7. … and now!
 What are shaders?
 Why is AGAL hard to work with and what
solutions does Minko provide?
 A few simple shader examples
 Hardware accelerated particles with shaders
 Particles engine and editor!

8. HDR Rendering
Dynamic lights
Static lights
Dynamic shadows
Static shadows
Diffuse texture
Noise
Diffuse texture

9. Hardware specific shader bytecode
Program3D
AGAL bytecode
Vertex Shader Fragment Shader
GLSL/HLSL
Program3D
PixelBender3D AGAL assembly
ActionScript3FlashHardware

12. Program3D – Vertex Shader
va1.x va1.y 0 0 …
x y z w …
v0 …
Varying
Registers
IndexBuffer3D
-5 -5 0 0 1 0 5 0 0 0.5 5 -5 0 1 1 …
x y z u v x y z u v x y z u v x
VertexBuffer3D
0 1 2
0 2 1 …
InputProgramOutput
0 (-5, -5, 0)
1 (0, 5, 0)
2 (5, -5, 0)

13. InputProgramOutput
Program3D – Fragment Shader
va1.x va1.y 0 0 …
x y z w …
v0 …
Varying
Registers
Texture3D
0 (0, 1) 2 (1, 1)
1 (0.5, 0)

14. Kids, this is the story of how I met your shader…

15. 1992 2001 2004 2011
Mortal Kombat GTA III Doom 3 Crysis 2
1996
Evolution of shader languages

16. What about AGAL?
1992 2001 2004 2011
Mortal Kombat GTA III Doom 3 Crysis 2
1996
Language Features

17. In 1992, Flash was called FutureSplash Animator and written by a single man: Jonathan Gay

18. Simple scene use case
How many shaders?
Shadows
Lights
Animations

19. How many « possible shaders » ?
 Handle 0 to 8 joints
 With normals
 With tangents
 Handle 0 to 5 lights
 With bump-mapping or not
 Handle shadows
(9 x 3 x 6 x 2 x 2)²
= 419904 different shaders!
• To write
• To test
• To debug
• To maintain
• To distribute
• To adapt
• …

20. Shaders are
« static »
They
handle one
« scenario »
A lot of
shaders to
write…

21.  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

22. With Minko you can program the GPU
using ActionScript 3.0 !

24. 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

25. 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

26. public class RedShader extends Shader
{
override protected function getVertexPosition() : Sfloat
{
return worldToScreen(localToWorld(vertexXYZ));
}
override protected function getPixelColor() : SFloat
{
return float4(1, 0, 0, 1);
}
}
RedShader – Step 1: AS3

27. RedShader – Step 2 : ASG

28. RedShader – Step 3 : AGAL
- vertex shader
m44 vt0.xyzw, va0.xyzw, vc0.xyzw
m44 vt0.xyzw, vt0.xyzw, vc4.xyzw
mov op.xyzw, vt0.xyzw
- fragment shader
mov oc.xyzw, fc0.xyzw

29. AS Shaders Workflow
Yes
shaderSignature(scene, mesh)
Does the
signature
already
exists ?
No
Set streams, textures and
constants:
• Vertex streams
• Vertex constants
• Fragment constants
• Textures
vsGraph = shader.getVertexPosition();
fsGraph = shader.getPixelColor();
Optimize ASG
Memory allocation
• Vertex attributes
• Vertex constants
• Fragment constants
• Resolving varying
Draw triangles
Shader Compilation
save(signature, compiledBytecode)

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 JIT shaders compilation…
 JIT shaders for better performance article on
my blog

34. EXAMPLES

35. Solid Red
override protected function getPixelColor() : SFloat
{
return float4(1, 0, 0, 1);
}

36. Solid Parametrized Color
override protected function getPixelColor() : SFloat
{
return meshBindings.getParameter(‘diffuseColor’, 4);
}
mesh.material.diffuseColor = Vector4(1., 0., 0., 1.);

37. Texture Mapping
override protected function getPixelColor() : SFloat
{
var texture : Sfloat = meshBindings.getTextureParameter(
‘diffuseMap’
);
return sampleTexture(texture, interpolate(vertexUV));
}
mesh.material.diffuseMap = TextureLoader.load(
new URLRequest(‘texture.jpg’)
);

38. interpolate()
Vertex Shader
Value
Fragment Shader
Value
interpolate()

39. interpolate()
Fragment Shader
Varying Registers
Vertex Shader
vertex0
x y r g b
Vertex Shader Output
Varying Registers
Vertex Shader
vertex1
x y r g b
Vertex Shader Output
Varying Registers
Vertex Shader
vertex2
x y r g b
Vertex Shader Output
Pixel Shader Output
Linear
Interpolation
color
x y z w
Linear
Interpolation
vertex0
vertex1vertex2

40. Particles
1. Fill vertex buffer with batched « quads »
2. (optional) Edit quads position on the CPU
 State-related animations
3. Render all the quads in a single draw call
 Stateless position/size/rotation animation in the
vertex shader
 Stateless color animation in the fragment shader

41. Particles – Quads?
quadVertex = {
particleId,
x, y, z,
offsetX, offsetY, offsetZ ,
rotation
}
0 1
23
(x, y, z)
(offsetX, offsetY, offsetZ)
rotation
quad = { 0, 1, 2, 3}
particleId ϵ * 0 … numParticles ]

42. Particles – Quads?
quadVertex = {
particleId,
x, y, z,
offsetX, offsetY, offsetZ ,
rotation
}
0 1
23
(x, y, z)
(offsetX, offsetY, offsetZ)
rotation
Fixed for the 4 vertex of a particule quad

43. Particles – Quads?
0
1
2
3
0 = {
0,
1., 4., 0.,
-0.5, 0.5, 0.,
1.4
}
1 = {
0,
1., 4., 0.,
0.5, 0.5, 0.,
1.4
}
2 = {
0,
1., 4., 0.,
0.5, -0.5, 0.,
1.4
}
3 = {
0,
1., 4., 0.,
-0.5, -0.5, 0.,
1.4
}
y
x
(1., 4., 0.)

44. Vertex shader logic
1. Transform quad center to view space
2. Add offset (~= corner position) to the view space
quad center
3. Apply rotation
4. Project on the screen

45. Particule Properties
 Each particle can have many properties!
 Start/end color
 Start/end velocity
 Start/end force
 …
 Particles design can be done with code…
 … but it is much more efficient with an editor!

46. Particle Editor
 Full WYSIWYG particles editor!
 http://www.youtube.com/watch?v=tyW2RUm2naI
 Stay tuned for the release (June)
 Follow @Minko3D
 Read http://minko.io

48. GLOBAL ILLUMINATION!
Next time…

49. MERCI !