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!

Random post

Well, I dunno what else to post, so I shall post some "numbers" again! Whee!

Seriously, if you hate maths, just don't look.

Remember a few posts ago, I talked about the so-called Axial Billboarding? It's a billboard aligned with an axis! Yay!

So far, I only manage to figure out how to orientate the billboard along an axis that is aligned to either the x-y plane or z-axis, assuming z is the "up" on the Cartesian Plane.

Before I continue on with Axial Billboarding, I should start with a normal billboard. A billboard is just a sprite that faces the camera wherever the camera goes.

Here, you can see the damage display (highlighted with blue circle). It's actually a billboard, because wherever I move the camera, it will face it.

So, how does the math go for this normal billboarding? Alright, we need to know 2 very important info, well, actually, 2 angles to be more precise.
Let's assume point A represents the position of the quadrilateral (usually a rectangle) that is going to be "billboard-ed".

Now, let's place the camera. Let's call the camera position, B.
Oh crap! So complicated! So many lines! Anyway, to put things in simpler terms,

Oh, I forgot to mention that line h and line d are perpendicular to each other. L is the distance from A to B.

Would you believe that from those 3 variables, we can solve for angles x and y, well, at least for x? Haha, here comes the magic of trigonometry (oh boy...)!

To solve for angle x, we can choose to use sin, cos or tan. It doesn't matter since we have all 3 sides of the triangle. But I would recommend using sin or cos because tan reaches infinity when the angle is equal to 90, 270, ...

Ok, let's use sin just because I had committed a lot of sins. Haha, get it? sine, sin! Lol! Ok, I shall stop.

So,

We got x! Now for y.

Angle y is basically the direction of B from A.


It's very simple to get y. See the "u"? u is the difference in x between A and B.

You can use the difference in y as well, but for that, you'll have to use sin instead of cos, which I'll be using.

Anyway,


We got x, and we got y!

With these 2 variables, we can finally turn the quad to face the camera. Now, it's very important to draw the quadrilateral with its centre as its origin to make it look good, unless, of course, you have your own reasons otherwise.

And, the quadrilateral should be facing the x-axis.

So, this will be how you'll draw your quadrilateral in a 3D game:



Next, you want to rotate it around the y-axis at x angle. Followed by a rotation around the z-axis at y angle. After all that, translate it to the object's position.

And that's all for the normal billboard. I won't go on with Axial Billboarding now because I'm just lazy to draw all the diagrams and blah. Maybe later.

Well, have a nice day!

PEG!

Here's an advertisement I made for PEG Sweets! It's a non-existent product but it sure adds to the randomness of my group, PEG, punya physics video.

Hey! There's my ghost!

Haha, I was playing around with Adobe Premiere Pro 2, and I got this:


There's goes my soul! I know, my pajamas looks weird. Well, as long as I'm comfortable in my own clothes, I'll be happy. Dang, I feel so bimbo-ish! Should stop moving my hand like that. Lol!

Hmm... I should probably get a better camera, and a Green Screen! Then I can start my own video making studio in my house! ....

Gosh, that's a lot of work... Well, a guy can dream, can't he?

Anyway, like my new background? Hmm... sharp crystals... Alright, maybe I've got to work on my 3D modeling skills.

A new hobby?

Ever since the day I got introduced to the term "hacking", I never stop being curious on how viruses destroy their victim's computer. Though it may be a little annoying, it's actually quite fascinating. Not that I would like to learn how to kill my friend's computers, but that will be awesome. Ok ok, just joking!



There, I'm in the middle of installation of Windows XP in Microsoft's Virtual PC 2007. It's a free tool you can get from Microsoft. It basically emulates another PC within your PC, so whatever you do in there won't affect your PC. It's a neat tool! So, I'll be playing around with viruses in there and see what happens! I may learn a thing or two on how to get rid of those viruses.

Still, there are risks that the virus may somehow cross over to reality and kill my real computer. I must be very careful!

Z-Buffer....

Ok, I'm finished with the 5th level!



It is just the same as my previous Mr Ball 2, the one which got stolen away by that idiotic thief. It's one tricky battle, but by the time you reach this level, I assume the player has beefed up Mr Ball a lot.

Anyway, from the video, I would like to highlight one horrible graphic problem which all game developers face, the z-buffer transparency problem. Well, I don't really care much about it, but for game developers who are developing high-class games, this is one serious matter as it can totally ruin the aesthetics of the game.

Anyway, here's a picture to show that z-buffer transparency issue:

If you look very closely, you can see that some part of the blue laser seems to "disappear". As you can see, it doesn't look very pretty, but because the lasers disappear quite fast, I don't really care whether you can see this graphic glitch. It's only for a brief moment anyway.

But why does that happen? Well, it all boils down to one of the 3D graphic things called the Z Buffer.

Now, Z Buffer is just something that helps to sort all the polygons in the 3d world, so that things that can be seen by the camera is rendered and parts of the other objects that are behind some other objects will not be rendered.

It's actually quite a useful tool. It just makes sure that parts of any object that hide behind another object will not be seen. Otherwise, everything will look funky.

But normal z-buffering does not take alpha transparency into account. Alpha transparency is just a fancy way of saying that an object is translucent or fully transparent.

This z-buffer transparency problem only arises depending on which order you draw the polygons. Here's a better example:


The red block is fully opaque, while the blue block is partially transparent. The textured block at the back is just to make things look clearer, sort of. Ok, from here, the drawing order is:
1) Textured Block
2) Red Block
3) Blue Block

But, in the following picture:

The drawing order is:
1) Textured Block
2) Blue Block
3) Red Block

In both cases, Z Buffer is on. In the second picture, you can see that part of the red block seems to have disappear, and there's only one simple cause for that - switching the drawing order.

If you're working with only opaque objects, this is not really an issue for you, but with the presence of partially transparent objects, this is just ugly, if you're aiming for super cool graphics, unless, of course, you wanted it like so.

What happened in the second picture is this:
-The Textured Block is drawn and it is written to the z-buffer
-The Blue block is drawn and it is written to the z-buffer. Nothing wrong yet, since it is drawn after the Textured Block. So, now, the Blue Block blends with the background according to it's alpha value.
-The red block is then drawn. The red block is behind the blue block. Now, here's the problem: because z-buffer will not allow the rendering of polygons that are behind another polygon, it "discards" part of the Red Block which is behind the Blue Block, and therefore, you can't see the Red Block behind the Blue Block, but you can only see the Red Block outside the Blue Block.

There are workarounds for this problem. Here's one of them:
First, draw all opaque objects. Then, draw all partially transparent objects from back to front.

Another workaround: Some might also consider turning off z-buffer while drawing partially transparent objects, but this poses another problem: Without the z-buffer depth sorting, objects that are drawn will hide everything beneath it, regardless of their distance from the camera. In other words, the visibility of the polygons depends on their draw order. Sometimes, this is okay. But usually, this is just annoying. To ensure proper drawing, you've got to work out your own depth sorting algorithm and sort all the polygons from back to front, then draw them in that order.

Well, that's all about the Z-Buffer Transparency problem. I have to go now. It's quite late already. hahahah

Out from school, still in school...

Sigh... all those assignments... they just keep piling up! My teacher is probably taunting me now!

Anyway, I really hate migraines. I'm suffering right now. Not very comfortable. I'm not sure how I get migraines, but whenever I get one, I will feel like something is poking the blood vessel in my brain. Horrible. Now, I'm having nausea, well, a mild one lah, and a slight headache. According to Wikipedia, those are some of the symptoms of migraine. Either that or I didn't get enough sleep.

Hmm... I shall get on to programming the attacks for Mr Ball's 5th boss fight. I'm still trying to figure out the formula for Axial Billboarding. So far, I only manage to do Axial Billboarding when the axis is aligned with the X-Y plane or the Z axis (in my game, Z-axis is up). Well, I better get on with the calculations...