📄 3dtut.html
字号:
<html>
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#FF0000">
<p><rant> Countless tutorials, examples and explanations have been written about
3d.</rant></p>
<p><rant>I <i>think</i> I've explained it well enough, but then again, I've spent
the last month working with the concepts and math, putting them to use in making
a game.</rant><br>
<rant> If you have a question, e-mail me @ wulf@ignmail.com.</rant></p>
<p><rant> I've got a website at go.to/wulf that is experiencing... technical difficulties
(I can't run off of port 80 because of ISP restrictions. I'm 16 and don't pay
for it, so I can't change the restrictions. But I <i>can</i> run non-standard
port software.)<br>
I'm trying to find a static DNS, but I'll load the IP early Feb. if I can't
find one.</rant></p>
<p> </p>
<p>Ever want to do something in 3d, but didn't know how or what to do? If so,
then this is for you. </p>
<p>If you intend to really get into 3d, go get a book; web-based tutorials and
code can't explain it as good as a book will. </p>
<p> </p>
<p>Requirements: </p>
<p>- C++ (I use MSVC 4)</p>
<p> - Fairly good programming skills I assume knowledge of pointers, loops, variables,
structs, etc </p>
<p>- High school math - DX7 SDK (If you don't have it, go to "Choosing your API")</p>
<p> </p>
<p>This tutuorial is divided up into 6 sections, some with code: </p>
<p><font size="+1">1. 3d basics </font></p>
<p><font size="+1">2. Mathematics: theory & implementation </font></p>
<p><font size="+1">3. Choosing your API </font></p>
<p><font size="+1">4. Initialization, the easy but long part </font></p>
<p><font size="+1">5. Drawing stuff </font></p>
<p><font size="+1">6. Sample code, or "What everyone's going to look at first"
</font></p>
<p> </p>
<p> </p>
<p><u><h1><p align="center">1. 3d basics</p></h1>
</u>
<p>This text deals with programming in 3 dimensions. <br>
To program in 3d, you must think in 3d. I find that when asked to solve a problem,
most people think in 2 dimensions.</p>
<p> A quick question: How can you cut a cake/pie/whatever into 8 pieces with 3
cuts? <br>
Answer: One cut on each axis: x, y & z.</p>
<p> Traditionally, we deal with one plane, the XY plane. Now there are the XZ
and YZ planes too.</p>
<p> For the purposes of this text, the Z axis goes into/comes out of the screen
and the XY plane is the screen. The Y axis is vertical. Just think of the XZ
plane as looking down from the top and the XY as looking at the screen. The
YZ is a side view. Its not difficult after a bit of programming, because increasing
the Y values of things makes them go up on the screen. Changing the Z moves
them side to side, etc.</p>
<p> </p>
<p> </p>
<h1 align="center"><u>2. Mathematics </u></h1>
<p>Note: If using DirectX, it's not strictly nessesscary to read this section,
except a small part on degrees & radians, but I find it helpful to know the
math behind the functions.</p>
<p> 3D = Math; Math = 3D. <br>
You need to know at least basic math for doing almost anything in 3d. </p>
<p>I'll be dealing with mathematics for rotating, translating and transforming,
scaling & skewing points; matrices; and vectors. <br>
Anything else (like physics equations) you'll have to get elsewhere.</p>
<p><br>
There are 3 basic operations that can be performed on a point: </p>
<p><b>- Scaling/skewing: </b></p>
<blockquote>
<p> Scaling is the multiplication of the x, y & z locations by a value (usually
not 0)<br>
<blockquote>
<p>Equation: <br>
x=x*n <br>
y=y*n<br>
z=z*n </p>
</blockquote>
<p>Skewing is the multiplication of the x, y & z locations by 3 different values
(one for each axis)<br>
<blockquote>
<p>Equation:<br>
x=x*nx<br>
y=y*ny <br>
z=z*nz </p>
</blockquote>
</blockquote>
<p><b>- Translating (or transforming): </b></p>
<blockquote>
<p>Translating is moving the points.<br>
Each set of points is located in its own coordinate system, called model space.
Within model space, points can be manipulated. Changing from model space to
world space is known as translation. <br>
<blockquote>
<p>Translation equation: <br>
x=x+new_x<br>
y=y+new_y where the point to move to is (new_x,new_y,new_z) <br>
z=z+new_z</p>
</blockquote>
</blockquote>
<p><b>- Rotating:</b></p>
<blockquote>
<p> Rotation is the moving of points a specified amount of arc (an arc is a
part of the edge of a circle) around a circle on the plane of rotation (x,
y or z) with a center at 0, 0, 0.<br>
Rotation is accomplished by appling a form of the circle equation to an axis.
<br>
<blockquote>
<p>The circle equation is: </p>
<blockquote>
<p> x=x*cos(q) - y*sin(q) <br>
y=x*sin(q) + y*cos(q) where q is an angle in radians (covered below) </p>
</blockquote>
<p> Note that if we add a z=z equation, we have rotation about the z axis.
<br>
Extra: I don't have the proof for this, but you can see why it forms a circle
with a graphing calculator </p>
<p><br>
Rotation for y:</p>
<blockquote>
<p>x=x*cos(q)+z*sin(q) <br>
y=y <br>
z=-x*sin(q)+z*cos(q) </p>
</blockquote>
<p>Rotation for x:</p>
<blockquote>
<p> x=x <br>
y=y*cos(q)-z*sin(q) <br>
z=y*sin(q)+z*cos(q)</p>
</blockquote>
</blockquote>
</blockquote>
<p> </p>
<h3 align="center"> Matrices</h3>
<p> A matrix, essentially, is a two-dimensional array. <br>
One special feature of matrices that make them especially useful is the ability
to concatenate, a joing of two equations, into a single matrix which gives the
same result as 2 matrices. <br>
For example, a matrix can be created to rotate and translate a point, instead
of rotating with a matrix and then translating with another. </p>
<p>Matrices in 3d are 4x4 arrays: each column contains the information required
to create a point on an axis. <br>
There is no real need to know anything about the fourth column, except what's
covered next. </p>
<p>The matrix is 4x4 instead of 3x4 because when multiplying matrices, the result
is always a square. </p>
<p> </p>
<p>For example, the matrix for rotation around the Z axis is: </p>
<table width="40%" border="0" height="131">
<tr>
<td> </td>
<td>
<div align="center">X</div>
</td>
<td>
<div align="center">Y</div>
</td>
<td>
<div align="center">Z</div>
</td>
<td>
<div align="center">W</div>
</td>
</tr>
<tr>
<td>
<div align="center">X</div>
</td>
<td>
<div align="center">cos(q)</div>
</td>
<td>
<div align="center">sin(q)</div>
</td>
<td>
<div align="center">0</div>
</td>
<td>
<div align="center">0</div>
</td>
</tr>
<tr>
<td>
<div align="center">Y</div>
</td>
<td>
<div align="center">-sin(q)</div>
</td>
<td>
<div align="center">cos(q)</div>
</td>
<td>
<div align="center">0</div>
</td>
<td>
<div align="center">0</div>
</td>
</tr>
<tr>
<td>
<div align="center">Z</div>
</td>
<td>
<div align="center">0</div>
</td>
<td>
<div align="center">0</div>
</td>
<td>
<div align="center">1</div>
</td>
<td>
<div align="center">0</div>
</td>
</tr>
<tr>
<td width="16%">
<div align="center">W</div>
</td>
<td width="28%">
<div align="center">0</div>
</td>
<td width="24%">
<div align="center">0</div>
</td>
<td width="11%">
<div align="center">0</div>
</td>
<td width="21%">
<div align="center">1</div>
</td>
</tr>
</table>
<p>y=x*sin(q) + y*cos(q) + z*0 <br>
x=x*cos(q) + y*-sin(q) + z*0<br>
z=x*0 + y*0 + z*1</p>
<p>(Note: rotating around an axis doesn't change that axis' coordinate) </p>
<p>The W row is used for translation, so just add that to the final position.
</p>
<p> </p>
<p>Operations on matrices: Not covered here, though a high school/university text,
a real 3d tutorial or a book on 3d will explain it. </p>
<p>Determinants: I haven't encountered a situation where I've needed determinants.
</p>
<p>One last thing, elements in a matrix are numbered YX, so position 24 would
be column 4, row 2. <br>
In DirectX, the're indexed as ._yx</p>
<p> Btw, multiplying matrix A by matrix B is NOT the same a B*A. Whatever A does
will be done second in A*B, but first in the reverse. </p>
<p> </p>
<h3 align="center">Common Matrices</h3>
<p>q is an angle; x, y & z are locations; a, b & c are scalars to multiply by</p>
<p> Rotation around X</p>
<table width="40%" border="0">
<tr>
<td> </td>
<td>
<div align="center">X</div>
</td>
<td>
<div align="center">Y</div>
</td>
<td>
<div align="center">Z</div>
</td>
<td>
<div align="center">W</div>
</td>
</tr>
<tr>
<td>
<div align="center">X</div>
</td>
<td>
<div align="center">1</div>
</td>
<td>
<div align="center">0</div>
</td>
<td>
<div align="center">0</div>
</td>
<td>
<div align="center">0</div>
</td>
</tr>
<tr>
<td>
<div align="center">Y</div>
</td>
<td>
<div align="center">0</div>
</td>
<td>
<div align="center">cos(q)</div>
</td>
<td>
<div align="center">sin(q)</div>
</td>
<td>
<div align="center">0</div>
</td>
</tr>
<tr>
<td>
<div align="center">Z</div>
</td>
<td>
<div align="center">0</div>
</td>
<td>
<div align="center">-sin(q)</div>
</td>
<td>
<div align="center">cos(q)</div>
</td>
<td>
<div align="center">0</div>
</td>
</tr>
<tr>
<td>
<div align="center">W</div>
</td>
<td>
<div align="center">0</div>
</td>
<td>
<div align="center">0</div>
</td>
<td>
<div align="center">0</div>
</td>
<td>
<div align="center">1</div>
</td>
</tr>
</table>
<p>Rotation around Y</p>
<table width="40%" border="0">
<tr>
<td> </td>
<td>
<div align="center">X</div>
</td>
<td>
<div align="center">Y</div>
</td>
<td>
<div align="center">Z</div>
</td>
<td>
<div align="center">W</div>
</td>
</tr>
<tr>
<td>
<div align="center">X</div>
</td>
<td>
<div align="center">cos(q)</div>
</td>
<td>
<div align="center">0</div>
</td>
<td>
<div align="center">-sin(q)</div>
</td>
<td>
<div align="center">0</div>
</td>
</tr>
<tr>
<td>
<div align="center">Y</div>
</td>
<td>
<div align="center">0</div>
</td>
<td>
<div align="center">1</div>
</td>
<td>
<div align="center">0</div>
</td>
<td>
<div align="center">0</div>
</td>
</tr>
<tr>
<td>
<div align="center">Z</div>
</td>
<td>
<div align="center">sin(q)</div>
</td>
<td>
<div align="center">0</div>
</td>
<td>
<div align="center">cos(q)</div>
</td>
<td>
<div align="center">0</div>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -