<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Displacement map</title>
<meta name="Microsoft Theme" content="zero 111">
</head>

<body background="_themes/zero/zertxtr.gif" bgcolor="#000000" text="#FFFFFF" link="#669966" vlink="#6699CC" alink="#999999"><!--mstheme--><font face="Arial, Arial, Helvetica">


<div align="center">
  
  <!--msthemeseparator--><p align="center"><img src="_themes/zero/zerrulea.gif" width="600" height="10"></p>
  
  <h1><!--mstheme--><font color="#6699CC"><i>Displacement map</i><!--mstheme--></font></h1>
  <!--msthemeseparator--><p align="center"><img src="_themes/zero/zerrulea.gif" width="600" height="10"></p>
  <p align="justify" style="line-height: 150%">&nbsp;</p>
  <p style="line-height: 150%">
  <img border="0" src="images/DisplacemenMapSmall.jpg" width="256" height="247"></p>
  <p align="justify" style="line-height: 150%">&nbsp;</p>
  <p align="justify" style="line-height: 150%">Displacement maps are very likely 
  to be a feature of DirectX9 and future generations of 3D hardware 
  accelerators. This effect simulates a few of the aspects displacement maps will be able to do. Using displacement maps instead of bump maps will no longer destroy the 
  illusion of surface detail once a part of an object has turn to a certain degree where 
  you are able to see its silhouette. With bump maps the illusion of having 
  scratches, dents or other surface characteristics disappears as soon as you 
  can see the profile of an object because these surface imperfections don't 
  really exist physically (that is, the geometry doesn't alter), they're just a 
  texture effect. With displacement maps however geometry is altered based on 
  the height values in the displacement map. Basically, what happens is the 
  following. Take a triangle. For each vertex there is a normal and a 2D texture 
  coordinate for the displacement map. When the triangle is sent to the GPU it 
  will be subdivided a couple of times. Position, normal and texture coordinates 
  for each artificially inserted vertex - due to subdivision - will be 
  interpolated. Now  the vertex position needs to be 
  altered. Otherwise we would end up having a lot of small triangles 
  representing the original one. Therefore, for each vertex the GPU determines 
  the height value from the displacement map based on the provided 2D texture 
  coordinate and uses this value to displace the vertex position along the 
  vertex normal. </p>
  <p align="justify" style="line-height: 150%">&nbsp;</p>
  <p style="line-height: 150%">
  <img border="0" src="images/DisplacementMapFig1.gif" alt="Per vertex displacment equation" width="205" height="25"></p>
  <p align="justify" style="line-height: 150%">&nbsp;</p>
  <p align="justify" style="line-height: 150%">Since current hardware and 3D 
  APIs aren't capable of using displacement maps they have to be simulated. To 
  keep the workload of subdivision low we limit ourselves to one quad with a 
  displacement map applied. This way we can simply subdivide it like a grid. 
  There's no need to interpolate normals and the position as well as texture coordinates 
  can be derived directly from the grid position. To get a high quality 
  displacement map effect the quad needs to be subdivided to quite some extent 
  depending on the amount and the size of detail provided in the displacement 
  map. In Meshuggah the displacement map has a size of 256 x 256 pixels. The quad 
  is subdivided 256 times both horizontally and vertically resulting in 255 x 
  255 tiny quads that need to be rendered every frame. Here it is a good idea to 
  use a triangle list to render the quads. The vertex data for one row of  quads is crammed into a vertex buffer and sent to the GPU.</p>
  <p align="justify" style="line-height: 150%">What follows is a quick note on 
  what the shaders are doing to render the displaced logo in Meshuggah. The 
  vertex shader calculates the reflected view vector as well as the fresnel term 
  for each vertex. <a href="SoftObjects.htm#ReflectRefractFresnel">Click here to 
  see the formulas involved</a>. In the pixel shader the reflected view vector 
  is used to fetch a color from an environment map. It is multiplied by the 
  material color of the logo. The fresnel term is used to blend this result with 
  the material color, thus giving us the final logo color that contains 
  reflections. Since we want certain parts of the logo to appear darker than others 
  we create a copy of that color with only half the intensity by using the <i>
  _d2</i> pixel shader instruction modifier. Now it is time to determine the final 
  output color by taking the logo texture into account. Its RGB channels contain 
  a decal value used to blend between the two colors we've just calculated. As 
  as last step we take the value from 
  the alpha channel of the logo texture to mask out all invisible logo parts.</p>
  <p align="justify" style="line-height: 150%">&nbsp;</p>
  <!--webbot bot="Include" U-Include="footer.htm" TAG="BODY" startspan --><!--msthemeseparator--><p align="center"><img src="_themes/zero/zerrulea.gif" width="600" height="10"></p>
<p></p>
<p></p>
  <dl>
    <div align="center">
      <center>
      <dt>Last update on
      2002-03-17</dt>
      </center>
    </div>
    <div align="center">
      <center>
      <dd>
      <p align="center">&nbsp;</dd>
      </center>
    </div>
    <div align="center">
      <center>
      <dt>Meshuggah Demo and Effect browser.</dt>
      </center>
    </div>
    <div align="center">
      <center>
      <dt>Copyright © 2001, 2002
      <a href="mailto:carsten.wenzel@gmx.net?subject=Meshuggah Demo and Effect browser">Carsten Wenzel</a>.</dt>
      </center>
    </div>
    <div align="center">
      <center>
      <dt>All rights reserved.</dt>
      </center>
    </div>
  </dl>

<!--webbot bot="Include" i-checksum="22998" endspan --></div>


<!--mstheme--></font></body>

</html>
