140 lines
4.8 KiB
Text
140 lines
4.8 KiB
Text
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||
|
|
|
||
|
|
<HTML>
|
||
|
|
<HEAD>
|
||
|
|
<META name="generator" content="HTML Tidy, see www.w3.org">
|
||
|
|
|
||
|
|
<TITLE>Environment Mapping Tips</TITLE>
|
||
|
|
<LINK type="text/css" rel="stylesheet" href="../webdocs.css">
|
||
|
|
</HEAD>
|
||
|
|
|
||
|
|
<BODY>
|
||
|
|
<P><A href="intro.html">[Back to Intro]</A></P>
|
||
|
|
|
||
|
|
<H1>Tips for Successful Environment Map Generation</H1>
|
||
|
|
|
||
|
|
<P>Environment maps don't necessarily need to come from
|
||
|
|
Anachronox environments. If you want to create your own
|
||
|
|
environment map, some of these ramblings may come in handy.</P>
|
||
|
|
|
||
|
|
<P>As you know, the parabolic environment map method uses two
|
||
|
|
sources textures. It draws the entity in two passes, first with
|
||
|
|
the front environment map, and then with the back environment
|
||
|
|
map with a special alpha channel applied to it. The images
|
||
|
|
below are a sample environment map, showing the alpha channel
|
||
|
|
that Anachronox uses for the back image.</P>
|
||
|
|
|
||
|
|
<TABLE summary="Parabolic Environment Textures with captions">
|
||
|
|
<TR>
|
||
|
|
<TH>front</TH>
|
||
|
|
|
||
|
|
<TH>back</TH>
|
||
|
|
</TR>
|
||
|
|
|
||
|
|
<TR>
|
||
|
|
<TD><IMG src="tips_map_ft.jpg" alt="Front Texture"></TD>
|
||
|
|
|
||
|
|
<TD><IMG src="tips_map_bk.jpg" alt=
|
||
|
|
"Back Texture with alpha"></TD>
|
||
|
|
</TR>
|
||
|
|
</TABLE>
|
||
|
|
|
||
|
|
<P>Because it draws in two passes, and because we are only
|
||
|
|
using per-vertex, not per-pixel, parabolic environment mapping,
|
||
|
|
there is a seam visible around the circle of the back image. To
|
||
|
|
better illustrate the seam, here are two example
|
||
|
|
screenshots:</P>
|
||
|
|
|
||
|
|
<TABLE summary="Normal Reflection Image with caption">
|
||
|
|
<TR>
|
||
|
|
<TH>normal</TH>
|
||
|
|
</TR>
|
||
|
|
|
||
|
|
<TR>
|
||
|
|
<TD><IMG src="tips_reflect_1.jpg" alt="Normal Reflection">
|
||
|
|
</TD>
|
||
|
|
</TR>
|
||
|
|
</TABLE>
|
||
|
|
|
||
|
|
<P>And here is the same image with the back image colored
|
||
|
|
green:</P>
|
||
|
|
|
||
|
|
<TABLE summary="Seam Enhanced Reflection Image with caption">
|
||
|
|
<TR>
|
||
|
|
<TH>seam-enhanced</TH>
|
||
|
|
</TR>
|
||
|
|
|
||
|
|
<TR>
|
||
|
|
<TD><IMG src="tips_reflect_2.jpg" alt=
|
||
|
|
"Enhanced-seam Reflection"></TD>
|
||
|
|
</TR>
|
||
|
|
</TABLE>
|
||
|
|
|
||
|
|
<P>As you can see, there is a seam that occurs along the edge
|
||
|
|
of the circle of the alpha map of the back image (the seam also
|
||
|
|
occurs in the same place in the front image), and it makes the
|
||
|
|
horizon in our example look disjointed. Most of the time, this
|
||
|
|
seam is not noticeable, especially on animating or rotating
|
||
|
|
entities, but occasionally it can be a problem, especially on
|
||
|
|
sharp and higher-resolution environment maps. An easy
|
||
|
|
workaround is to use lower resolution environment maps and/or
|
||
|
|
blur the image. However, it is the responsibility of the
|
||
|
|
environment map artist to try and make sure that very sharp
|
||
|
|
contrast elements do not occur across the seam, such as the
|
||
|
|
sunlit horizon in this example. So far, we've been using an
|
||
|
|
environment cube I generated from <B>map tensil</B>, here is
|
||
|
|
the cube map laid out:</P>
|
||
|
|
|
||
|
|
<TABLE>
|
||
|
|
<TR>
|
||
|
|
<TH>Tensil Cube Map Layout</TH>
|
||
|
|
</TR>
|
||
|
|
|
||
|
|
<TR>
|
||
|
|
<TD><IMG src="cubemap-tensil.gif" alt="Tensil Cube Map">
|
||
|
|
</TD>
|
||
|
|
</TR>
|
||
|
|
</TABLE>
|
||
|
|
|
||
|
|
<P>And here is a visualization of how the seam results from
|
||
|
|
dual parabolic mapping (click on the image to view the
|
||
|
|
movie):</P>
|
||
|
|
|
||
|
|
<TABLE>
|
||
|
|
<TR>
|
||
|
|
<TH>Parabolic Seam Visualization</TH>
|
||
|
|
</TR>
|
||
|
|
|
||
|
|
<TR>
|
||
|
|
<TD><A href="joeyparab2.m1v"><IMG src="tips_seam.jpg" alt=
|
||
|
|
"Parabolic Seam Visualization"></A></TD>
|
||
|
|
</TR>
|
||
|
|
</TABLE>
|
||
|
|
|
||
|
|
<P>The x axis is red, the y axis is green, the z axis is blue,
|
||
|
|
and the pink dividing square shows the plane along which the
|
||
|
|
seam occurs. When you are creating environment maps from
|
||
|
|
scratch, it is best to avoid details that cross the seam which
|
||
|
|
is along the Y-Z plane as shown above. One technique is to
|
||
|
|
rotate the base camera position for the cube map generation in
|
||
|
|
your 3D package.</P>
|
||
|
|
|
||
|
|
<P>Unfortunately, this technique cannot apply to screenshots
|
||
|
|
taken within Anachronox. When Anachronox takes a set of
|
||
|
|
cube-environment screenshots, it will always position the 6
|
||
|
|
textures in the manner shown above. The first image is out on
|
||
|
|
the positive x axis, the second image is on the positive y
|
||
|
|
axis, and so forth. Initial camera rotation has no bearing on
|
||
|
|
the output, only camera position. The workarounds including
|
||
|
|
trying to position the camera for the screenshots to minimize
|
||
|
|
the seam problem, or to heavily blur and use lower resolution
|
||
|
|
textures so details are not apparent along the seam.</P>
|
||
|
|
|
||
|
|
<P>Please send any comments, suggestions, or more tips to
|
||
|
|
Joey.</P>
|
||
|
|
|
||
|
|
<P><A href="intro.html">[Back to Intro]</A></P>
|
||
|
|
</BODY>
|
||
|
|
</HTML>
|
||
|
|
|