Part IVc – Intermezzo Automatic Mesh Density Reduction

One of the things I wanted to try was to automatically reduce the mesh density of a plane based on it's current size. So instead of determining beforehand that a plane has to have 6 by 6 subdivision, you would simply say something like make sure no subdivision is bigger than 30 x 30 pixels.

In effect it's a very simple LOD modifier or Level of Size modifier if you will.


Is this usable? Well there are a number of considerations:
Read more

Part IVb – Intermezzo Magic Cube

After some minor adjustments to the DistortedPlane class it was possible to render more than one plane at a time (the interpolatedPoints array was static...). Class has now been extended with a front and backside material, and here is a small demonstration of putting a number of planes together.

The material was a quick paintjob done in Photoshop on my wacom.

One major thing is that I found the solution to a certain problem: the player locks up when drawing certain bitmapfills using smooth set to true. The fix is to also set repeat to true. Hope that fixes it for you as well.

Click to activate!

Download the sources here: 3d Cube (677).

Part IV – Perspective Plane Rendering

We are getting closer and closer to generating an actual cubic panorama. In case you just jumped on in from elsewhere, I'm working on a project in which I have to create a cubic panorama with hotspots that light up and it has to be in AS2, so this is my journal on the way there. In the previous post we learned how to split a plane into multiple segments to reduce the texture distortion errors. We also mentioned that perspective is not the same as distortion. I played around a bit with perspective in the GridRider intermezzo post, which I will convert into a full game as soon as I'm done with these tutorials. After yet another short night with caffeine and Volbeat to keep me awake, it's 10 AM on a rainy Sunday morning, good excuse to post the next bit!

Read more

Part IIIb – Intermezzo GridRider

Another fun thing you can do using triangles. Hacked together but performs ok for AS2, runs at about 20% CPU. Click to start and turn the volume up!

Part III – Plane rendering

   

You can download the DistortedPlane class and examples here Distortedplane (1277).

In the previous example we saw how to render arbitrary triangles, and we showed an example of how to reduce the equations in right-angled cases. In this post we are going to look into rendering a plane. We will do so without any perspective correction for the z-axis, and as mentioned previously distortion is not perspective. (A good treaty on this can be found here http://zehfernando.com/2010/the-best-drawplane-distortimage-method-ever/.

So distorting a plane instead of a triangle. This has been done before and more than once, by Ruben, Sandy, Phillipe van Kessel and probably more.



Read more

Part II – Arbitrary bitmapfill transforms

Recap

In the first post in this series, I discussed and explained matrix transforms and how they could be used to map a bitmap into an arbitrarily drawn triangle. However we saw that if we are ever going to render larger planes in 3d, mapping a single bitmap onto a single rectangle (or 2 triangles) will not cut it, since in order to counter the gruesome texture distortion created by the affine transforms, we will have to subdivide a plane into smaller planes. Note that this is still not perspective correct, it is simply a distorted bitmap with less texture distortion through subdivision. A grid that respects the perspective or rather z-depth of the vertices is up for another post.

Subdividing the plane means we end up with smaller rectangles, that contain smaller pieces of the texture (bitmap). So we are no longer mapping a complete bitmap to a rectangle or triangle, but just pieces of that bitmap.

subdivision sample

Looking back at the first post, we derived the transform for a complete bitmap fill using the following formulas:

Read more

Part Ib – Butterfly intermezzo

In the previous post we talked about affine transforms and splitting rectangles into triangles. We only talked about one of the simplest scenarios: mapping a complete rectangular area of a bitmap into a drawn triangle/rectangle. The formulas for mapping an arbitrary triangle of a source bitmap into an arbitraty drawn triangle are a bit more involved and we will discuss them in the next post. But even with two triangles we can create something simple to create a feel of 3d. Far from being a correct implementation, this example experiments with a 3d butterfly based on two sources images (the front and back of a butterfly).

The 'model' exists of two triangles, one for each wing, which are folded and rotated using a couple of sinuses. The resulting coords are used to generate the transform matrices for the bitmap fills on the wings. Which bitmap is used to fill a triangle is decided using a cross product of the wing vectors, to check whether we are seeing the top or the bottom of the wing. Since there is no real perspective it is sometimes hard to see which side is in front, but nonetheless this opens up fun possibilities for a children's game where you can draw a butterfly and then have it fly off your paper into a garden or something like that (where 100% correct perspective wouldn't matter anyway).

One thing I've noted is that when you use smooth bitmapfills without explicitly closing the filled polygon the flash player will sometimes hang / lock up for seconds at a time. Not sure what causes this, and I hope closing the polygon is the 'real' fix.

Here is the complete example with sourcecode included: Butterfly2 (1260). It's a Flash IDE FlashDevelop project, meaning you can edit it in FlashDevelop but have to export it from the Flash IDE. If you don't have a flash ide, setup the butterfly swf as injection swf and specify another output.

Part I – Affine Transforms

Also known as:

  • fake 3d using bitmapfills
  • transforming bitmapfills

For a project I’m currently working on I have to create a textured cube with clickable hotspots (aka a panorama) that can light up. Easy enough in Papervision, if not for the fact that the performance needs to be very high and oh yes one minor detail it has to be in AS2.
The client will be able to load 6 cubesides in an editor, draw hotspots on each side and press render, which will result in a 3d panorama, in which hotspots are going to light up as you mouse over them. Ah yes did I mention this was AS2?

Although this provides us with a huge range of items to discuss and play with, in this post I want to focus on the basics of one single subject: rendering a textured plane in 3d. I’ll get to the rotating/projecting etc bits later, can’t have too much coolness in one post ;).

Read more