Stage3D and AGAL

© Daniel Freeman 2013

Stage3Dand AGAL

HFUG mix May 18Saturday, 18 May 2013

• What is Stage3D ?

• Principles of 3D graphics

• Introduction to AGAL

• Shader Examples

• Extrusion and Lathes

Saturday, 18 May 2013

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/whyflash/




Stage3D

Open GL

Mac

Stage3D

DirectX

Windows

Stage3D

Open GL ES

Mobile

Stage3D

SwiftShader

No GPU

Ubiquitous

Support for older hardware (Intel GMA)


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


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

WorldCoordinates

StageCoordinates


Introduction to AGAL


Vertex ShaderTriangle

AssemblyViewportClipping

transformedvertices

trianglestream

RasteriserFragmentShader

FrameBuffer

fragmentstream

pixelstream

Programmableindicesvertices

textures


Versatile

VertexShader FragmentShaderv0-v7

InterpolatedRegisters

Vertex shader runs

once pervertex

Fragment shader runs

once perfragment


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, va2sub v0, va0, va2mul v0, va0, va2div v0, va0, va2m44 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.xft2.y = ft0.x * fc0.xft2.z = ft0.y * fc0.x

x y z w


Shader Examples


Example 1 : Solid Colour

GreenSquare1Saturday, 18 May 2013

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


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


vertex shader

mov op, va0 output pointmov v0, va1 interpolate colour

fragment shader

mov oc, v0 output colour

VertexShader FragmentShaderv0-v7

InterpolatedRegisters


Example 3 : Rotation


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

Flash3DExperiment5Saturday, 18 May 2013

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

]);


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);


Example 5 : Texture Cube

Flash3DExperiment3Flash3DExperiment3a


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


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);


Example 6 : Light Source

Flash3DExperiment7aSaturday, 18 May 2013

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


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 ]) );


Example 7 : Phong Shader

Flash3DExperimentASaturday, 18 May 2013

interpolatednormals

normal


A

B

A • B = |A| |B| Cos

A is Half AngleB is Normal

( A • B ) n

n = 1 n = 50n = 5

= 0


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


Example 8 : AGAL Animation

Flash3DExperimentESaturday, 18 May 2013

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

Manipulate Verticeswhere u = 1 and v = 1


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


Extrude and Lathe


Lathe

Extrude


Questions


Stage3D and AGAL

Technology

Transcript of Stage3D and AGAL