Stage3D and AGAL

© Daniel Freeman 2013
Stage3D
and AGAL
HFUG mix May 18
Saturday, 18 May 2013

• What is Stage3D ?
• Principles of 3D graphics
• Introduction to AGAL
• Shader Examples
• Extrusion and Lathes

What is Stage3D ?

“9 out of 10 top Facebook games are delivered
using Flash Player.
The biggest game networks in the world, like
DNA, GREE, and Tencent, deliver their games
with Flash technology.
The iOS App Store,Android Market, and
Amazon Appstore feature best-selling, #1
games built with Flash technologies.”
http://gaming.adobe.com/whyﬂash/

Stage3D
Open GL
Mac
Stage3D
DirectX
Windows
Stage3D
Open GL ES
Mobile
Stage3D
SwiftShader
No GPU
Ubiquitous
Support for older hardware (Intel GMA)

Low Level
mov ft3, v1
sub ft0.xy, v0.xy, fc4.xx
sub ft0.z, fc4.x, v2.x
abs ft1.xy, ft0.xy
sub ft1.xy, ft1.xy, ft0.zz
mul ft2.xy, ft1.xy, ft1.xy
add ft2.x, ft2.x, ft2.y
sqt ft2.x, ft2.x
add ft2.z, fc4.w, v2.x
sub ft2.z, ft2.z, ft2.x
pow ft3.w, ft2.z, fc4.z
sat ft3.w, ft3.w
mov oc, ft3

Principles of 3D
Graphics

-x +x
-y
+y
+z
-z
{x,y,z}
origin
vertex
Vertices

-x +x
-y
+y
+z
-z
origin
triangle
Triangles

3D Meshes

winding / backface culling

depth buffering

z = 0
z = 1
-1 +1
-1
+1
2d
2d
-1 +1
-1
+1
World
Coordinates
Stage
Coordinates

Introduction to AGAL

Vertex Shader
Triangle
Assembly
Viewport
Clipping
transformed
vertices
triangle
stream
Rasteriser
Fragment
Shader
Frame
Buffer
fragment
stream
pixel
stream
Programmable
indicesvertices
textures

Versatile
VertexShader FragmentShader
v0-v7
Interpolated
Registers
Vertex
shader runs
once per
vertex
Fragment
shader runs
once per
fragment

Registers
va0-va7 Attribute Registers
vc0-vc127 Constant Registers
fc0-fc127 Constant Registers
fs0-fs7 Sampler Registers
v0-v7 Varying Registers
op Output Point
oc Output Colour

VertexShader
FragmentShader
op
oc
v0-v7
vc0-vc127
fc0-fc127
(Interpolated)
va0-va7
fs0-fs7
vt0-vt7
ft0-ft7
Registers

add v0, va0, va2
sub v0, va0, va2
mul v0, va0, va2
div v0, va0, va2
m44 v0, va0, vc0

pow ft2.x, ft0.y, fc0.w
mul ft2.xyz, ft0.xxy, fc0.xxx
x y z w

mul ft2.xyz, ft0.xxy, fc0.xxx
ft2.x = ft0.x * fc0.x
ft2.y = ft0.x * fc0.x
ft2.z = ft0.y * fc0.x
x y z w

Shader Examples

Example 1 : Solid Colour
GreenSquare1

protected static const VERTICES:Vector.<Number> =

Vector.<Number> ([
// X, Y, Z
-0.5, -0.5, 0.0,
0.5, -0.5, 0.0,
0.5, 0.5, 0.0,
-0.5, 0.5, 0.0,
]);

protected static const N:int = 3;

protected static const INDICES:Vector.<uint> = Vector.<uint> ([ 0, 1, 2, 0, 2, 3 ]);
3
(-0.5, -0.5, 0)
(-0.5, 0.5, 0)
(0.5, -0.5, 0)
(0.5, 0.5, 0)
0 1
2
0 1
2
0
23

vertex shader
mov op, va0 output point
fragment shader
mov oc, fc0 output colour
_context3D.setProgramConstantsFromVector(
Context3DProgramType.FRAGMENT, 0, // fc0
Vector.<Number>([ 1.0, 0.0, 0.0, 1.0]) // = Red
);

Example 2 : Gradient Fill
GreenSquare3


Vector.<Number> ([
// X, Y, Z, r, g, b
-0.5, -0.5, 0.0, 0, 1, 0,
0.5, -0.5, 0.0, 1, 0, 0,
0.5, 0.5, 0.0, 1, 1, 1,
-0.5, 0.5, 0.0, 0, 0, 1,
]);


protected static const INDICES:Vector.<uint> = Vector.<uint> ([ 0, 1, 2, 0, 2, 3 ]);
3
(-0.5, -0.5, 0)
(-0.5, 0.5, 0)
(0.5, -0.5, 0)
(0.5, 0.5, 0)
0 1
2
0 1
2
0
23

vertex shader
mov op, va0 output point
mov v0, va1 interpolate colour
fragment shader
mov oc, v0 output colour
v0-v7
Interpolated
Registers

Example 3 : Rotation
GreenSquare4

vertex shader
m44 op, va0, vc0 transform
fragment shader
mov oc, fc0 output colour
_transform.appendRotation( 2.0, Vector3D.Z_AXIS );
_context3D.setProgramConstantsFromMatrix(
Context3DProgramType.VERTEX, 0, //vc0
_transform, true
);

Example 4 : Gradient Cube
Flash3DExperiment5


Vector.<Number> ([
// X, Y, Z, r, g, b
-0.5, -0.5, 0.5, 0, 1, 0,
0.5, -0.5, 0.5, 1, 0, 0,
0.5, 0.5, 0.5, 1, 1, 1,
-0.5, 0.5, 0.5, 0, 0, 1,

-0.5, -0.5, -0.5, 0, 1, 0,
0.5, -0.5, -0.5, 1, 0, 0,
0.5, 0.5, -0.5, 1, 1, 1,
-0.5, 0.5, -0.5, 0, 0, 1,
]);


protected static const INDICES:Vector.<uint> = Vector.<uint> (
[ 0, 1, 2, 0, 2, 3, 4, 6, 5, 4, 7, 6,
0, 4, 5, 0, 5, 1, 1, 5, 6, 1, 6, 2,
2, 6, 7, 2, 7, 3, 3, 7, 4, 3, 4, 0
]);

vertex shader
mov v0, va1 interpolate
fragment shader
mov oc, v0 output colour
_projectionMatrix.perspectiveFieldOfViewLH(
45.0*Math.PI/180,
stage.stageWidth/stage.stageHeight,
0.1,1000.0
);

Example 5 :Texture Cube
Flash3DExperiment3
Flash3DExperiment3a


Vector.<Number> ([
// X, Y, Z, u, v,
-1.0, -1.0, -1.0, 0, 0,
1.0, -1.0, -1.0, 0, 1,
1.0, 1.0, -1.0, 1, 1,
-1.0, 1.0, -1.0, 1, 0, etc...etc..
3
0 1
2
u
v
0 1
1
Interpolated

vertex shader
mov v0, va1 interpolate uv
fragment shader
tex ft0, v0, fs0 <2d,linear,nomip>
mov oc, ft0 output fragment
_projectionMatrix.perspectiveFieldOfViewLH(
45.0*Math.PI/180,
stage.stageWidth/stage.stageHeight,
0.1,1000.0
);

Example 6 : Light Source
Flash3DExperiment7a


Vector.<Number> ([
// X, Y, Z, nX, nY, nZ
-1.0, -1.0, -1.0, 0, 0, -1.0,
1.0, -1.0, -1.0, 0, 0, -1.0,
1.0, 1.0, -1.0, 0, 0, -1.0,
-1.0, 1.0, -1.0, 0, 0, -1.0, etc...etc...
normal

vertex shader
m44 v0, va1, vc0 normal
fragment shader
nrm ft0.xzy, v0 normalise
mov ft0.w, fc0.w
dp3 ft0, ft0, fc1 dot product
sat ft0, ft0 clamp
mul oc, ft0, fc0 multiply colour
Context3DProgramType.FRAGMENT, 0, Vector.<Number>([ 0.5, 0.5, 0.5, 1.0 ]) );
Context3DProgramType.FRAGMENT, 1, Vector.<Number>([ X, Y, Z, 1.0 ]) );

Example 7 : Phong Shader
Flash3DExperimentA

interpolated
normals
normal

A
B
A • B = |A| |B| Cos
A is Half Angle
B is Normal
( A • B )
n
n = 1 n = 50n = 5
= 0

vertex shader
m44 v0, va1, vc4 normal
fragment shader
nrm ft0.xyz, v0 normalise normal
mov ft0.w, fc0.w set w to 1
dp3 ft0.x, ft0, fc0 dot product
sat ft0.x, ft0.x clamp
pow ft1.x, ft0.x, fc3.w dot product to power
mul ft2.xyz, fc2.xyz, ft0.xxx diffuse colour
add ft2.xyz, fc1.xyz, ft2.xyz add ambient colour
mul ft3.xyz, fc3.xyz, ft1.xxx specular colour
add oc, ft2.xyz, ft3.xyz combine and output
fc0 Half Angle Vector fc1 Ambient Colour
fc2 Diffuse Colour fc3 Specular Colour

Example 8 :AGAL Animation
Flash3DExperimentE

AGAL Animation
• Advantageous to animate vertices in AGAL
• AS3 is slow. AGAL is fast.
• Manipulation of vertices in AS3 is slow
• Computing a transformation matrix is slow
• Better to interpolate vertices in AGAL

AGAL Animation
ManipulateVertices
where u = 1 and v = 1

vertex shader
mov v1, va1 // interpolate uv
m44 vt0, va0, vc0 // translate vertex
m44 vt1, va0, vc4 // translate normal
mov v0, vt1 // interpolate normal
mul vt1.xyz, vc8.xxx, vt1.xyz // multiply t by normal
mul vt2.x, va1.x, va1.y // multiply u by v
// if ( u==1 && v==1)
mul vt1.xyz, vt2.xxx, vt1.xyz // push vertex out
add op, vt0, vt1 // add
va0 Vertices (Normals) va1 U-V
vc0 transform matrix vc1 rotation transform
vc8.x interpolation

Extrude and Lathe

Lathe
Extrude

Questions

Stage3D and AGAL

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Destacado

Destacado (7)

Similar a Stage3D and AGAL

Similar a Stage3D and AGAL (20)

Último

Último (20)

Stage3D and AGAL