📄 3d.htm
字号:
<!--Header-->
<HTML>
<HEAD>
<TITLE>GPMega - Advanced Section - Creating a 3D Game: 3D Basics</TITLE>
</HEAD>
<BODY BGCOLOR=#000000 TEXT=#FFFFFF LINK=#00FF00 VLINK=#00FF00 ALINK=#0000FF>
<!--End Header-->
<!--Advertiser-->
<CENTER>
<TABLE>
<TR>
<TD>
<A HREF="http://www.ugo.com/">
<IMG SRC="/GPMega/ugologo120.gif" BORDER=0 WIDTH=120 HEIGHT=60></A>
</TD>
<TD>
<IMG SRC="/GPMega/sponsored.gif" WIDTH=468 HEIGHT=10><br><br>
<SCRIPT LANGUAGE= "JavaScript">
<!--
var now = new Date();
var random_num = now.getSeconds();
document.write("<A HREF='http://www.ugo.net/RealMedia/ads/click_nx.cgi/www.perplexed.com/GPMega/advanced/3d.htm/" + random_num + "/@Top'>");
document.write("<IMG SRC='http://www.ugo.net/RealMedia/ads/adstream_nx.cgi/www.perplexed.com/GPMega/advanced/3d.htm/" + random_num + "/@Top' BORDER='0' WIDTH='468' HEIGHT='60'></A>");
//-->
</SCRIPT>
</TD>
</TR>
</TABLE>
</CENTER>
<!--End Advertiser-->
<!--Splitter-->
<BR>
<!--End Splitter-->
<!--Body-->
<FONT SIZE=2 FACE=Helvetica>
<STRONG>
<!--Top Navigation-->
<A NAME="top"></A>
<CENTER>
<TABLE WIDTH=75%>
<TR VALIGN=MIDDLE>
<TD ALIGN=LEFT>
<IMG SRC="gradsplit2.jpg" WIDTH=100% HEIGHT=1><BR><BR>
<A HREF="http://www.perplexed.com/GPMega/"><IMG SRC="logo.jpg" BORDER=0 ALT="Home" WIDTH=80 HEIGHT=47 ALIGN=CENTER></A>
<FONT COLOR=#666666 FACE=HELVETICA SIZE=-1><I>
This Article Is Taken From <A HREF="http://www.perplexed.com/GPMega/">The Game Programming MegaSite</A>, A Definitive Resource For Game Developers!
</I></FONT><BR>
<IMG SRC="gradsplit2.jpg" WIDTH=100% HEIGHT=1>
</TD>
</TR>
</TABLE>
</CENTER>
<BR><!--End Top Navigation-->
<!--Title-->
<H3 ALIGN=CENTER><font color="#FFF700">C</font><font color="#FFEF00">r</font><font color="#FFE700">e</font><font color="#FFDF00">a</font><font color="#FFD700">t</font><font color="#FFCF00">i</font><font color="#FFC700">n</font><font color="#FFBF00">g</font><font color="#FFB700"> </font><font color="#FFAF00">a</font><font color="#FFA700"> </font><font color="#FF9F00">3</font><font color="#FF9700">D</font><font color="#FF8F00"> </font><font color="#FF8700">G</font><font color="#FF7F00">a</font><font color="#FF7700">m</font><font color="#FF6F00">e</font><font color="#FF6700">:</font><font color="#FF5F00"> </font><font color="#FF5700">3</font><font color="#FF4F00">D</font><font color="#FF4700"> </font><font color="#FF3F00">B</font><font color="#FF3700">a</font><font color="#FF2F00">s</font><font color="#FF2700">i</font><font color="#FF1F00">c</font><font color="#FF1700">s</font><BR><FONT SIZE=-2>By: John De Goes</FONT></H3>
<!--End Title-->
<H3><FONT COLOR=YELLOW><I>3D Clipping</I></FONT></H3>
<P>Clipping is used to avoid drawing polygons that are outside the screen and also chop them so that it doesn't pass the screen. You'll be thinking why would we want to chop every polygon why not just take it out if its completely out? Well, what if a polygon was very long. If it passed the screen by 400 pixels, you would probably get an error. Chopping polygons isn't too hard. Simply define a plane, find the plane normal and do the dot product of that normal vector with any point and you will get the distance from the plane. Do the same with a second point and get the distance. Add up the distances and that will be your total distance. Then divide the first distance by the total distance and you'll get the ratio at which the line hits the clip plane.
<P>Now that you have the ratio, use the parametric equation of a line to find the point at which it hits the plane.
<P>Parametric equation:
<BLOCKQUOTE>
<PRE><FONT SIZE=2 COLOR=RED>
X = (initial point.x) + (ratio) * (direction.x)
Y = (initial point.y) + (ratio) * (direction.y)
Z = (initial point.z) + (ratio) * (direction.z)
</FONT></PRE>
</BLOCKQUOTE>
<P>Sub in the numbers and you will get the new point. This part isn't too bad. The harder part is to add that new vertex into the polygon.
<P>As you see, a new vertex was added because one of the vertex was clipped. To do this, you must insert that new vertex and move every vertex after that up one.
<H3><FONT COLOR=YELLOW><I>3D Rotations</I></FONT></H3>
<P>To do 3D rotations, the equation is very similar to 2D rotations except a rotation is done for every plane. Since 3D has 3 planes, the rotation must be done three times. The x-y plane is called roll, y-z plane is called pitch, and the x-z plane is called yaw.
<P>To understand roll, pitch, and yaw, picture this. When you move your head up and down is called pitch. Put your left ear on your left sholder and then right ear on your right sholder, that is roll. Move your head horizontally side to side, that is yaw. A game like doom and wolfenstein, would only use the yaw rotation since you cannot look up or down.
<P>Here are the equations to rotate a 3D point:
<BLOCKQUOTE>
<PRE><FONT SIZE=2 COLOR=RED>
x'=z*sin(yaw)+x*cos(yaw)
y'=y
z'=z*cos(yaw)-x*sin(yaw)
x"=x'
y"=y'*cos(pitch)-z'*sin(pitch)
z"=y'*sin(pitch)+z'*cos(pitch)
x"'=y"*sin(roll)+x"*cos(roll)
y"'=y"*cos(roll)-x"*sin(roll)
z"'=z"
</FONT></PRE>
</BLOCKQUOTE>
<P>If you like the matrix form better here are the matrices:
<P>Matrix to rotate around x axis:
<center>
<TABLE BORDER=0>
<TR>
<TD ALIGN=CENTER>[</TD>
<TD ALIGN=CENTER>cos(a)</TD>
<TD ALIGN=CENTER>-sin(a)</TD>
<TD ALIGN=CENTER>0</TD>
<TD ALIGN=CENTER>0</TD>
<TD ALIGN=CENTER>]</TD>
</TR>
<TR>
<TD ALIGN=CENTER>[</TD>
<TD ALIGN=CENTER>sin(a)</TD>
<TD ALIGN=CENTER>cos(a)</TD>
<TD ALIGN=CENTER>0</TD>
<TD ALIGN=CENTER>0</TD>
<TD ALIGN=CENTER>]</TD>
</TR>
<TR>
<TD ALIGN=CENTER>[</TD>
<TD ALIGN=CENTER>0</TD>
<TD ALIGN=CENTER>0</TD>
<TD ALIGN=CENTER>1</TD>
<TD ALIGN=CENTER>0</TD>
<TD ALIGN=CENTER>]</TD>
</TR>
<TR>
<TD ALIGN=CENTER>[</TD>
<TD ALIGN=CENTER>0</TD>
<TD ALIGN=CENTER>0</TD>
<TD ALIGN=CENTER>0</TD>
<TD ALIGN=CENTER>1</TD>
<TD ALIGN=CENTER>]</TD>
</TR>
</TABLE>
</center>
<P>Matrix to rotate around y axis:
<center>
<TABLE BORDER=0>
<TR>
<TD ALIGN=CENTER>[</TD>
<TD ALIGN=CENTER>cos(a)</TD>
<TD ALIGN=CENTER>0</TD>
<TD ALIGN=CENTER>-sin(a)</TD>
<TD ALIGN=CENTER>0</TD>
<TD ALIGN=CENTER>]</TD>
</TR>
<TR>
<TD ALIGN=CENTER>[</TD>
<TD ALIGN=CENTER>0</TD>
<TD ALIGN=CENTER>1</TD>
<TD ALIGN=CENTER>0</TD>
<TD ALIGN=CENTER>0</TD>
<TD ALIGN=CENTER>]</TD>
</TR>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -