Monday 15 June 2009

Run a line through

I shall pick up where I left off in my previous post...

Right, in my previous post, it was about Billboarding, one of the techniques used in 3D Games. Professional games use this technique so well, it's very hard to tell whether they are using 3D models or just plane rectangles!

There are advantages. One very important advantage is that it reduces polygon count. If you burden the video card with too many things to draw on the screen, the game will lag. So, for very complicated objects, it's better to use billboard.

But when there are advantages, there should be disadvantages. Though you can draw a lot of details on a billboard, it's quite limited. What do I mean by this?

Imagine you want to draw a 3D object on a billboard. So you draw an image of a sphere as a texture for the billboard. As the billboard turns around to face your camera (your eye), it shouldn't be too much of a problem, since spheres are round however you see them.

But let's say you drew an image of a cube as a texture for the billboard. As the billboard turns around, the same image of the cube keep on facing towards you. It's as if the the cube is turning around to face you with the same... err... face! That'll look weird, unless you intended to do that.

Still billboards are very cool!

Hmm... let's get on with Axial Billboards (or Axis-aligned billboards). Axial Billboards can still turn around to face the camera, but they can only rotate around an arbitrary axis.

Assuming Z is up on the Cartesian coordinate system, if the billboard is aligned with the Z-axis, it's very simple to rotate it and face the camera. All you've got to do is get the horizontal direction from the billboard to the camera.

Using my previous diagram:
Point A is the position of the billboard object, B is the camera. All you've got to do is solve for angle y. Angle x is not needed.



Then draw a quad the same way as shown in the previous post, but this time, the transformations are as follows:
-Rotate around z-axis at "y" angle
-Translate to object's position

That is only for Billboards aligned with the Z-Axis.

For a billboard with an axis that is aligned with the x-y plane (horizontal axis), there are a few more steps in the calculations.


Oh my! WTF??

Chill, relax, sip some coffee. All will be revealed in a moment.

Line AC defines the axis for the billboard. So, r is the angle of point C from A.

Before I continue, I should tell you that because Line AC is parallel to the x-y plane,
Getting r could not be any more easier! Just a little trigonometry and...
Now, what about q? q is a little tricky. To solve it, we need to know the direction of B from A on the x-y plane. Then, subtract it from r.


So,
Since we have q, we can now solve for d.


Oh, we're almost there. We just need to solve for h before we can get angle p.

h is simply the difference of z value between A and B.
Now, using tan,

Finally, that horrible p!

Now, draw the quadrilateral:


Transform it as follows:
-Rotate it around x-axis at -p angle
-Rotate it around z-axis at r angle
-Translate it to its position.

Now, I may be wrong with the rotation around the x-axis. I get confused easily with the negative and positive angles, so if you find that I made a mistake, do tell me.

And that's that! But this only applies to axes that are aligned horizontally (parallel to the x-y plane, assuming z is up).

Gosh, such wonderful maths. Now, don't you think 3D games are cool? You better do!

Billboards are best used when the camera is not too close. Otherwise, its secrets will be revealed to the player. Well, it's not that bad, but it won't look too pretty.

Here, you can see the laser beam in Mr Ball 2:


It's an axial billboard!

Now over here, you can see how the beauty of billboards can be ruined:
The billboard passing over an object will reveal its "flatness", most of the time
Oh, and this one. Seeing the end of the billboard just kills the illusion, doesn't it?

Well, that's all! Lol!

1 comments:

Anonymous said...
This comment has been removed by a blog administrator.