<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>Beams</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>Beams</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/BeamsSmall.jpg" width="256" height="247"></p>
  <p align="justify" style="line-height: 150%">&nbsp;</p>
  <p align="justify" style="line-height: 150%">This effect shows how a radial 
  blur can be used to render beams of shining spherical objects like a star. A 
  radial blur is simulated by blurring along radial lines as if zooming in or 
  out of an image. An obvious way to achieve a radial blur is to transform the 
  image from cartesian to polar coordinates, do a horizontal blur (or vertical 
  blur depending on which axis corresponds to <i>r</i> after the transformation) 
  and finally transform the result back to cartesian coordinates. The problem 
  with this approach is that pixel read-backs required for the transformations 
  are still a big performance bottle neck on current 3D hardware (let alone 
  regenerating the mip-map chain if required). Fortunately there is 
  another way to do the very same thing that is particularly well suited for 
  hardware accelerated rendering.</p>
  <p align="justify" style="line-height: 150%">What we do is calculate the 
  weighted sum of a series of zoomed-in versions of the same image. Therefore we 
  need two textures we can render to - a source and a destination texture. The 
  source texture contains the image 
  for the radial blur. In Meshuggah this texture will be updated every frame 
  with a new animation frame of a star. The destination texture functions as an 
  accumulation buffer for the radial blur. The following code snippet shows how 
  the radial blur is done.</p>
  <p align="justify" style="line-height: 150%">&nbsp;</p>
  <dl>
    <blockquote>
      <div align="justify">
        <dt style="line-height: 150%"><font face="Courier New" size="2">Clear( 
        destTexture );<br>
        SetRenderTarget( destTexture );</font></dt>
      </div>
      <div align="justify">
        <dt style="line-height: 150%">&nbsp;</dt>
      </div>
      <div align="justify">
        <dt style="line-height: 150%"><font face="Courier New" size="2">
        SetTexture( srcTexture );<br>
        <br>
        EnableAlphaBlending( true );<br>
        SetDestinationAlpha( 1.0 );<br>
        <br>
        for i = 1 to NumRadialBlurSteps<br>
        {<br>
&nbsp;&nbsp;&nbsp; fUVOffset = i * 0.0075f;<br>
&nbsp;&nbsp;&nbsp; SetSourceAlpha( 1/8 * ( NumRadialBlurSteps - i ) / 
        NumRadialBlurSteps );<br>
        <br>
&nbsp;&nbsp;&nbsp; struct<br>
&nbsp;&nbsp;&nbsp; {<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; x, y<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; u, v<br>
&nbsp;&nbsp;&nbsp; } TexVertex2D;</font></dt>
      </div>
      <div align="justify">
        <dt style="line-height: 150%">&nbsp;</dt>
      </div>
      <div align="justify">
        <dt style="line-height: 150%"><font face="Courier New" size="2">&nbsp;&nbsp;&nbsp; 
        w = viewPort.width;</font></dt>
      </div>
      <div align="justify">
        <dt style="line-height: 150%"><font face="Courier New" size="2">&nbsp;&nbsp;&nbsp; 
        h = viewPort.height;<br>
        <br>
&nbsp;&nbsp;&nbsp; TexVertex2D vQuad[ 4 ] =<br>
&nbsp;&nbsp;&nbsp; {<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { 0, 0,&nbsp;&nbsp;&nbsp;&nbsp; 
        fUVOffset,&nbsp;&nbsp;&nbsp;&nbsp; fUVOffset },<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { w, 0, 1 - fUVOffset,&nbsp;&nbsp;&nbsp;&nbsp; 
        fUVOffset },<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { w, h, 1 - fUVOffset, 1 - fUVOffset 
        },<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { 0, h,&nbsp;&nbsp;&nbsp;&nbsp; 
        fUVOffset, 1 - fUVOffset }<br>
&nbsp;&nbsp;&nbsp; }<br>
        <br>
&nbsp;&nbsp;&nbsp; DrawScreenQuad( vQuad );<br>
        }</font></dt>
      </div>
    </blockquote>
  </dl>
  <p align="justify" style="line-height: 150%">&nbsp;</p>
  <p align="justify" style="line-height: 150%">It draws a number of quads to the 
  destination texture. They are all the same size, covering the entire viewport 
  of the destination texture. The only difference is that with every new quad 
  the range of the source texture is more and more limited to the center, thus 
  resulting in a zoomed-in version of the previous quad. By additively blending 
  the individual quads together we get a radial blur effect. The source factor 
  used for blending is set to gradually fall down to zero. This is to fade out 
  the beams. When finished blurring we can use the destination texture to blit/stretch 
  the result to the screen.</p>
  <p align="justify" style="line-height: 150%">The last thing of interest is how 
  the star is rendered into the source texture for the radial blur. To render 
  the star we set the source texture as the render target and draw a textured 
  sphere. The only trick here is to find an appropriate texture to represent a 
  star. For Meshuggah real sun pictures taken from
  <a href="http://sohowww.nascom.nasa.gov/data/realtime-images.html">SOHO</a> 
  (EIT304) were used and preprocessed to fit its needs. To animate the sun surface 
  this texture as well as the texture coordinate set of the sphere is reused four times. In 
  the vertex shader four individual texture coordinate sets are created by using the 
  spheres original texture coordinate set and adding a texture offset - defined by an <i>
  arbitrary</i> function of time - every frame. Those four functions defining 
  the texture offsets should return values which at all times are different one 
  another. The pixel shader fetches four 
  colors from the sun texture and calculates the weighted sum <i>0.25 * (&nbsp;c1 + c2 + c3 + c4 )</i> of them. This will result in a complex motion of the 
  sun surface.</p>
  <p align="justify" style="line-height: 150%">Note when rendering the 
  star to the source texture the aspect ratio should be set to match the screen 
  - not the texture. This ensures that the star will appear as a spherical and not 
  as an elliptical object when the result of the radial blur is to be copied to 
  the screen.</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 --><p>&nbsp;</div>


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

</html>
