Now we are going to animate our object. The idea behind is pretty simple. You add an Event.ENTER_FRAME handler to your object and in every frame you add new vertices to your object, draw new triangles and if there are already enough triangles you remove the one you don’t need anymore.

In detail it will work like this: In every frame we create 2 new vertices and draw 2 new triangles with it. But to draw 2 triangels we need a minimum of 4 vertices. So we take the the last ones we added the frame before.
In every frame we take slightly different coordinates so that or vertices are moving.
Theres only one situation that is special. It is when we start our Event.ENTER_FRAME handler we don’t have 4 vertices. So we just add 2 vertices and wait for the next frame. And this is the code:

And the compiled SWF looks like this. If you try it for yourself and you just see a growing line, move your camera up.

Simply adding the same value to one axis is pretty boring. If you draw a circle with Sinus and Cosinus its getting better. I also deleted some vertices and faces if we have enough from them:

And the compiled SWF:

That’s a nice circle.
If you change this line

to this line

The result is this:

Now I just changed the material from WireFrameMaterial to ColorMaterial and I drew the whole scene to a BitmapData added a BlurFilter and a ColorTransform.
Then you finally get this

I hope that helped you to understand the basic principle of animating objects in Papervision. If you got it you can do so many cool things with it. Imaging that you could code for examle a flying paper in the wind or a moving sea! Or you could transform spheres to planes or whatever you want.

I think it is great, I’m just waiting for my next project where I can make use of that!

In the preceding Post we omitted the texture map in our face. So if you want to apply a BitmapMaterial to your object you won’t see the texture. So we need a texture map.

The first thing we are going to do is adding another triangle and making our object a rectangle. Something like the Plane primitive. A rectangle consists of a minimum of 2 triangles. So if we want to draw another triangle we need one more vertex.

Ok, so the code will look like this:

We added another vertex and built another face. As you see we used the same vertices we used with our first face. That is pretty important to understand. The vertices are not bound to the triangles. We can use them with different triangles. They are just coordinates in our 3D space.

Ok, our new rectangle will look like this now. I applied a WireFrameMaterial to it because it is better to see the triangles we made:

Ok, now it is getting interesting. We have our object and we want to apply a BitmapMaterial to it. If you already tried that you would have realized that your object did not show the texture. That is because the texture maps were missing in our faces.

A texture map is basically the information about where to display which part of the texture in every face or triangle. So every triangle gets its own texture map. And because every triangle consists of 3 vertices our texture map will need 3 information about the position of the texture. The information is an instance of the NumberUV class which holds two properties. The u and the v. Which represent the horizontal and vertical axes of our texture. Think of them as x- and y-axes. Textures are always 2D so we don’t have a z-axis here.
The u and v are numbers which go from 0 to 1. u=0 means the most left pixel of our texture and u=1 is the most right pixel in our texture.

Ok, so we take our first triangle which consists of these three vertices:

v1 is the vertex in the lower left corner. That means it should display the lower left corner of our texture. That represents u=0 and v=0. You might have noticed that the y-axis is flipped in Papervision.
v2 is in the lower right corner which represents u=1 and v=0. v3 is on the upper right corner and so it gets u=1 and v=1.

In code this will look like this:

Ok, now we need to pass our triangle the texturemap.
Before:

After:

Ok, so we have to do the same for our second triangle. I hope it is clear now how to handle the second texturemap. Our class will look like this now:

And if you apply a BitmapMaterial from the outside to your object it will look like that:

It looks a bit distorted. This is because we should actually build up a rectangle with more than 2 triangles. The more you use the better the texture is rendered and the more your CPU needs to work.

We could also tell our texture map that we don’t want to display the whole texture. With your set of NumberUV instances you can practically tell every triangle to display a different part of your texture. Just use .5 instead of 1 to display only the lower left part of the texure for example. Let’s play around with the values and you will see what I mean.

Im changing the values of our first texture map like this:

I replaced the first with the last coordinate and the texture from our first triangle is rotated now:

It is just important for you to understand, that you can tell every triangle which part of the texture it should display.

Ok, thats it for now. In the next part we are going to animate our object.

I did. My world was limited to the Papervision primitives and collada objects. Then I needed a growing and transforming object for my current project. So I asked my friend Lars who already did things like that (he also created his own 3D framework by the way). He said that it is not that simple. I didn’t understand everything he was saying but had a rough idea in mind.

I found some information in the internet and set up my own custom object. Actually it is pretty much like drawing lines in ActionScript. You know this stuff:

This will give you a blue triangle. That is easy.

Creating custom objects in a 3D world is pretty much the same.
3D objects in Papervision are basically defined through vertices and faces. Vertices are something like Points in 3D Space. They are stored in an array called vertices and are instances of the Vertex3D class.

The faces are the triangles (polygons) you draw with your vertices. Easily spoken you take 3 vertices and build a triangle with them. You should know that every 3D Object is made out of triangles.
And you also need tell your face how it should display a texture. If you just have a WireFrameMaterial or a ColorMaterial applied to your object you don’t need that necessarily. But you never know what kind of material people will use with your Object, so it is better to define it.

Let’s try that with a really simple custom 3D object. A triangle.
I assume that you have basic Papervision knowledge and that you use Papervision 2.0 Great White.

Ok, this will look like this:

Our custom object is extending the TriangleMesh3D class. If you take a look in the Papervision primitives classes you will see that they all extend this class.

Ok, so the constructor of the TriangleMesh3D needs 3 parameters. A material, a vertices array and a faces array. Our custom triangle requires a material as well so we push it to the super constructor. Then we give our super class 2 empty arrays which means something like: We don’t have any vertices and faces for you yet but you will get them very soon.

Let’s build the triangle. A triangle consits of 3 points and 1 shape. Here we will call it 3 vertices and 1 face. We create 3 instances of the Vertex3D class, give them the coordinates in 3D Space and push them in the vertices array which is a property of the geometry instance. The coordinates are pretty much the same as in our lineTo example earlier.

Now that we have 3 vertices we can make a face. In our lineTo example flash automatically connected the 3 points and draw a shape. Here we have to say with which vertices we want to create a face with. So basically we just choose 3 vertices push them in an array and pass them to our new instance of the Triangle3D class which represents the face. The Triangle3D class also needs a material. We just take the one of our displayobject. And it wants a texture map. I will explain that later for keeping things simple at this point it is null for now. As long as you don’t apply a texture material on the object you won’t need it.

So, here we go. Our first custom 3D Object:

Here is the code which does the Papervision setup:

Ok, cool. So now you know how to set up your own custom Papervision DisplayObject. In the next part I’m going to show you how texturemaps work.