stage3d and agal
TRANSCRIPT
![Page 1: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/1.jpg)
© Daniel Freeman 2013
Stage3Dand AGAL
HFUG mix May 18Saturday, 18 May 2013
![Page 2: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/2.jpg)
• What is Stage3D ?
• Principles of 3D graphics
• Introduction to AGAL
• Shader Examples
• Extrusion and Lathes
Saturday, 18 May 2013
![Page 3: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/3.jpg)
What is Stage3D ?
Saturday, 18 May 2013
![Page 4: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/4.jpg)
“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/whyflash/
Saturday, 18 May 2013
![Page 5: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/5.jpg)
Stage3D
Open GL
Mac
Stage3D
DirectX
Windows
Stage3D
Open GL ES
Mobile
Stage3D
SwiftShader
No GPU
Ubiquitous
Support for older hardware (Intel GMA)
Saturday, 18 May 2013
![Page 6: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/6.jpg)
Low Levelmov ft3, v1sub ft0.xy, v0.xy, fc4.xxsub ft0.z, fc4.x, v2.xabs ft1.xy, ft0.xysub ft1.xy, ft1.xy, ft0.zz mul ft2.xy, ft1.xy, ft1.xyadd ft2.x, ft2.x, ft2.ysqt ft2.x, ft2.x add ft2.z, fc4.w, v2.xsub ft2.z, ft2.z, ft2.xpow ft3.w, ft2.z, fc4.z sat ft3.w, ft3.wmov oc, ft3
Saturday, 18 May 2013
![Page 7: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/7.jpg)
Principles of 3D Graphics
Saturday, 18 May 2013
![Page 8: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/8.jpg)
-x +x
-y
+y
+z
-z
{x,y,z}
origin
vertex
Vertices
Saturday, 18 May 2013
![Page 9: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/9.jpg)
-x +x
-y
+y
+z
-z
origin
triangle
Triangles
Saturday, 18 May 2013
![Page 10: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/10.jpg)
3D Meshes
Saturday, 18 May 2013
![Page 11: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/11.jpg)
winding / backface culling
Saturday, 18 May 2013
![Page 12: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/12.jpg)
depth buffering
Saturday, 18 May 2013
![Page 13: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/13.jpg)
Saturday, 18 May 2013
![Page 14: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/14.jpg)
Saturday, 18 May 2013
![Page 15: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/15.jpg)
z = 0
z = 1
-1 +1
-1
+1
2d
2d
-1 +1
-1
+1
WorldCoordinates
StageCoordinates
Saturday, 18 May 2013
![Page 16: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/16.jpg)
Introduction to AGAL
Saturday, 18 May 2013
![Page 17: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/17.jpg)
Vertex ShaderTriangle
AssemblyViewportClipping
transformedvertices
trianglestream
RasteriserFragmentShader
FrameBuffer
fragmentstream
pixelstream
Programmableindicesvertices
textures
Saturday, 18 May 2013
![Page 18: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/18.jpg)
Versatile
VertexShader FragmentShaderv0-v7
InterpolatedRegisters
Vertex shader runs
once pervertex
Fragment shader runs
once perfragment
Saturday, 18 May 2013
![Page 19: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/19.jpg)
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
Saturday, 18 May 2013
![Page 20: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/20.jpg)
VertexShader
FragmentShader
op
oc
v0-v7
vc0-vc127
fc0-fc127
(Interpolated)
va0-va7
fs0-fs7
vt0-vt7
ft0-ft7
Registers
Saturday, 18 May 2013
![Page 21: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/21.jpg)
add v0, va0, va2sub v0, va0, va2mul v0, va0, va2div v0, va0, va2m44 v0, va0, vc0
Saturday, 18 May 2013
![Page 22: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/22.jpg)
pow ft2.x, ft0.y, fc0.w
mul ft2.xyz, ft0.xxy, fc0.xxx
x y z w
Saturday, 18 May 2013
![Page 23: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/23.jpg)
mul ft2.xyz, ft0.xxy, fc0.xxx
ft2.x = ft0.x * fc0.xft2.y = ft0.x * fc0.xft2.z = ft0.y * fc0.x
x y z w
Saturday, 18 May 2013
![Page 24: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/24.jpg)
Saturday, 18 May 2013
![Page 25: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/25.jpg)
Shader Examples
Saturday, 18 May 2013
![Page 26: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/26.jpg)
Example 1 : Solid Colour
GreenSquare1Saturday, 18 May 2013
![Page 27: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/27.jpg)
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
Saturday, 18 May 2013
![Page 28: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/28.jpg)
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);
Saturday, 18 May 2013
![Page 29: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/29.jpg)
Example 2 : Gradient Fill
GreenSquare3Saturday, 18 May 2013
![Page 30: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/30.jpg)
protected static const VERTICES:Vector.<Number> = 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 N:int = 6; 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
Saturday, 18 May 2013
![Page 31: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/31.jpg)
vertex shader
mov op, va0 output pointmov v0, va1 interpolate colour
fragment shader
mov oc, v0 output colour
VertexShader FragmentShaderv0-v7
InterpolatedRegisters
Saturday, 18 May 2013
![Page 32: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/32.jpg)
Example 3 : Rotation
GreenSquare4Saturday, 18 May 2013
![Page 33: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/33.jpg)
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);
Saturday, 18 May 2013
![Page 34: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/34.jpg)
Example 4 : Gradient Cube
Flash3DExperiment5Saturday, 18 May 2013
![Page 35: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/35.jpg)
protected static const VERTICES:Vector.<Number> = 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 N:int = 6; 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
]);
Saturday, 18 May 2013
![Page 36: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/36.jpg)
vertex shader
m44 op, va0, vc0 transformmov 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);
Saturday, 18 May 2013
![Page 37: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/37.jpg)
Example 5 : Texture Cube
Flash3DExperiment3Flash3DExperiment3a
Saturday, 18 May 2013
![Page 38: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/38.jpg)
protected static const VERTICES:Vector.<Number> = 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
VertexShader FragmentShader
Interpolated
Saturday, 18 May 2013
![Page 39: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/39.jpg)
vertex shader
m44 op, va0, vc0 transformmov 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);
Saturday, 18 May 2013
![Page 40: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/40.jpg)
Example 6 : Light Source
Flash3DExperiment7aSaturday, 18 May 2013
![Page 41: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/41.jpg)
protected static const VERTICES:Vector.<Number> = 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
Saturday, 18 May 2013
![Page 42: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/42.jpg)
vertex shader
m44 op, va0, vc0 transformm44 v0, va1, vc0 normal
fragment shader
nrm ft0.xzy, v0 normalisemov ft0.w, fc0.wdp3 ft0, ft0, fc1 dot productsat ft0, ft0 clampmul oc, ft0, fc0 multiply colour
_context3D.setProgramConstantsFromVector( Context3DProgramType.FRAGMENT, 0, Vector.<Number>([ 0.5, 0.5, 0.5, 1.0 ]) );
_context3D.setProgramConstantsFromVector( Context3DProgramType.FRAGMENT, 1, Vector.<Number>([ X, Y, Z, 1.0 ]) );
Saturday, 18 May 2013
![Page 43: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/43.jpg)
Example 7 : Phong Shader
Flash3DExperimentASaturday, 18 May 2013
![Page 44: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/44.jpg)
interpolatednormals
normal
Saturday, 18 May 2013
![Page 45: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/45.jpg)
A
B
A • B = |A| |B| Cos
A is Half AngleB is Normal
( A • B ) n
n = 1 n = 50n = 5
= 0
Saturday, 18 May 2013
![Page 46: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/46.jpg)
vertex shader
m44 op, va0, vc0 transformm44 v0, va1, vc4 normal
fragment shader
nrm ft0.xyz, v0 normalise normalmov ft0.w, fc0.w set w to 1dp3 ft0.x, ft0, fc0 dot productsat ft0.x, ft0.x clamppow ft1.x, ft0.x, fc3.w dot product to powermul ft2.xyz, fc2.xyz, ft0.xxx diffuse colouradd ft2.xyz, fc1.xyz, ft2.xyz add ambient colourmul ft3.xyz, fc3.xyz, ft1.xxx specular colouradd oc, ft2.xyz, ft3.xyz combine and output
fc0 Half Angle Vector fc1 Ambient Colourfc2 Diffuse Colour fc3 Specular Colour
Saturday, 18 May 2013
![Page 47: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/47.jpg)
Example 8 : AGAL Animation
Flash3DExperimentESaturday, 18 May 2013
![Page 48: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/48.jpg)
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
Saturday, 18 May 2013
![Page 49: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/49.jpg)
AGAL Animation
Manipulate Verticeswhere u = 1 and v = 1
Saturday, 18 May 2013
![Page 50: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/50.jpg)
vertex shader
mov v1, va1 // interpolate uv m44 vt0, va0, vc0 // translate vertexm44 vt1, va0, vc4 // translate normalmov v0, vt1 // interpolate normalmul vt1.xyz, vc8.xxx, vt1.xyz // multiply t by normalmul 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-Vvc0 transform matrix vc1 rotation transformvc8.x interpolation
Saturday, 18 May 2013
![Page 51: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/51.jpg)
Extrude and Lathe
Saturday, 18 May 2013
![Page 52: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/52.jpg)
Lathe
Extrude
Saturday, 18 May 2013
![Page 53: Stage3D and AGAL](https://reader034.vdocuments.us/reader034/viewer/2022052514/58f2e7781a28ab24268b4625/html5/thumbnails/53.jpg)
Questions
Saturday, 18 May 2013