📄 envmap.htm
字号:
<!--Header-->
<HTML>
<HEAD>
<TITLE>GPMega - Advanced Section - Environment Mapping</TITLE>
<META NAME="DESCRIPTION" CONTENT="Tom Hammersley covers the techniques needed to render parts of the environment your 3d objects. Making them more realistic and believable. Tom covers the classic and current methods of accomplishing this.">
</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/envmap.htm/" + random_num + "/@Top'>");
document.write("<IMG SRC='http://www.ugo.net/RealMedia/ads/adstream_nx.cgi/www.perplexed.com/GPMega/advanced/envmap.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="#FFF200">E</font><font color="#FFE500">n</font><font color="#FFD800">v</font><font color="#FFCB00">i</font><font color="#FFBE00">r</font><font color="#FFB100">o</font><font color="#FFA400">n</font><font color="#FF9700">m</font><font color="#FF8A00">e</font><font color="#FF7D00">n</font><font color="#FF7000">t</font><font color="#FF6300"> </font><font color="#FF5600">M</font><font color="#FF4900">a</font><font color="#FF3C00">p</font><font color="#FF2F00">p</font><font color="#FF2200">i</font><font color="#FF1500">n</font><font color="#FF0800">g</font><BR><FONT SIZE=-2>By: Tom Hammersley</FONT></H3>
<!--End Title-->
<H3><FONT COLOR=YELLOW><I>Introduction</I></FONT></H3>
<P>Ever seen those effects in demos where an object seems to reflect its background? Wish you could do it too? Well, now
I'll explain how to do it.
<H3><FONT COLOR=YELLOW><I>The Original Method</I></FONT></H3>
<P>Environment mapping was originally developed by Blinn and Newell. Blinn is one seriously devoted guy! You can't pick up a
single book on 3D graphics without finding some of his work in it! You can find the exact workings of his original algorithm in
CGPP. Back to the point. Their basic method was to reflect V (viewing vector) about N (normal) to generate a vector which
pointed to an environment map. The environment map is basically a big textured sphere, which surrounds the object. Its
generated by rendering the scene from different views. Now, as you might guess, to index into the sphere, we will need
spherical co-ordinates. Spherical co-ordinates are obtained with the following equations:
<P><I>theta = arctan (y/x).<br>
rho = arccos (z/R).<br>
R = sqrt (x^2 + y^2 + z^2)</I>
<P>If you use unit vectors, you lose R, which is handy. A good variation on this system is to modulate the co-ordinates in the Y
axis by a sinewave.
<P>Another method suggests using a cube. Here, you have 6 texture maps, surrounding your object, forming a cube. To chose
which texture map to use, you would check the normalized reflection vector: if the X co-ordinate is the greatest, index the
texture map to your right. If the Z is greatest, index into the texture map to your front, and so on. Negative co-ordinates mean
to index the opposite: eg left instead of right. Again, the problem here is speed. Generating all those environment maps takes
time. Not quick enough for realtime applications.
<H3><FONT COLOR=YELLOW><I>Demo Style Environment Mapping</I></FONT></H3>
<P>The way demos do environment mapping is very simple. Take the X and Y components of your vertices, and use that to index
your texture map!. Very simple indeed. Your formulae would be:
<CENTER><P><TABLE WIDTH=65% CELLPADDING=0 CELLSPACING=0>
<TR><TD>
<TABLE><TR><TD>
<PRE><FONT COLOR=#FF0000 FACE=Courier SIZE=2>
U = N.x*128 + 127
V = N.y*128 + 127
Or in general
U = N.x * (width / 2) + ((width / 2) - 1)
V = N.y * (height / 2) + ((height / 2) - 1)
</FONT></PRE>
</TD></TR></TABLE>
</TD></TR>
</TABLE></CENTER>
<P>Assuming 256x256 texture maps. Some even normalize their vectors to length 128, to avoid the multiplication. Very clever,
however can get in the way. I''ve also heard of people storing them as spherical co-ordinates, meaning only addition/subtraction
is needed, when you rotate. I haven't tried this one myself - it sounds too much of a pain in the neck.
<P>A useful side-effect here is that you get your 'phong' highlight texture co-ordinates for free. A useful speedup technique.</P>
<!--Bottom Navigation-->
<A NAME="bottom"></A>
<!--End Bottom Navigation-->
</STRONG>
</FONT>
<!--End Body-->
<!--Bottom-->
<BR>
<IMG SRC="gradbar.jpg">
<BR>
<FONT SIZE=2 COLOR=#8B8B8B FACE=Helvetica>
<I><font color="#FBFBFB">T</font><font color="#F7F7F7">h</font><font color="#F3F3F3">e</font><font color="#EFEFEF"> </font><font color="#EBEBEB">G</font><font color="#E7E7E7">a</font><font color="#E3E3E3">m</font><font color="#DFDFDF">e</font><font color="#DBDBDB"> </font><font color="#D7D7D7">P</font><font color="#D3D3D3">r</font><font color="#CFCFCF">o</font><font color="#CBCBCB">g</font><font color="#C7C7C7">r</font><font color="#C3C3C3">a</font><font color="#BFBFBF">m</font><font color="#BBBBBB">m</font><font color="#B7B7B7">i</font><font color="#B3B3B3">n</font><font color="#AFAFAF">g</font><font color="#ABABAB"> </font><font color="#A7A7A7">M</font><font color="#A3A3A3">e</font><font color="#9F9F9F">g</font><font color="#9B9B9B">a</font><font color="#979797">S</font><font color="#939393">i</font><font color="#8F8F8F">t</font><font color="#8B8B8B">e</font> - ⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -