Quake Devels - 3d Engines Tutorial 1 drawing points

**Author: **Cryect

**Difficulty:** Varies depending on your mathematical knowledge but fairly easy if you know trig

3d Engines can very fun as you all know since you've probably played Quake. But most people figure that they hard to make. Really they aren't to hard. It requires some knowledge in trig and Spatial Geometry. I'm assuming you already know points and other similar things. Well lets get to it.

First thing I bet you want to know is the formula to convert 3d points to your 2d screen.

SX=((ScreenWidth/2)/(tan (HFOV/2)*Z))*X

SY=((ScreenHeight/2)/(tan (VFOV/2)*Z))*Y

SX is the screen x. SY is the screen y. HFOV is the horizontal field of view angle. Lastly, VFOV is the vertical field of view angle.

You divide the screen sizes in half so the origin is the middle point of the screen and you have negatives.

If you understand trigonometry, this should fairy simple since all your doing is using ratios of similar triangles.

I first saw the formula first like this.

SX=((ScreenWidth/2)/Z)*X

SY=((ScreenHeight/2)/Z)*Y

When I saw it at first I wasn't sure how they got it. I forgot what it was in math one day and I wanted to know then so I decided to try to figure it out. I drew a 90-degree angle for the fov. I then drew a line like so for the screen.

I noticed that a bisector drawn splits and is perpendicular to the screen. I stuck a point somewhere to figure out the formula with. Then I drew a line from the side of the angle to the bisector going through the point parallel to the screen. It should like this now.

We now can use a ratio to determine where the point should be on the screen. To do this we need to calculate the size of the side the point is on we know the length of leg and the angle adjacent to that leg. We can now use some trig. Take the tangent of half the fov which is 45 equaling a tangent of 1. Multiply this against Z and you have that side. Use this number to divide half the size of the screen width or height depending on whether you are finding the x or y. This is your ratio now. Then you multiply it against the corresponding number to get the screen x or screen y and do this for the other one then.

Next time I will talk about drawing polygons and how to fill them in and some other items.

Tutorial by Cryect

This site, and all content and graphics displayed
on it, |