Billboard技术浅析

比眉伴天荒 2022-06-13 13:56 229阅读 0赞

<table style="font-family:STHeiti"> 
 <tbody> 
  <tr> 
   <td colspan="3"> 
    <div>  
     <table> 
      <tbody> 
       <tr> 
        <td> <p><span style="font-family:Tahoma"><strong><span style="color:#009900">3D游戏中的公告牌技术</span></strong></span></p> </td> 
       </tr> 
      </tbody> 
     </table>  
    </div> </td> 
  </tr> 
  <tr> 
   <td colspan="3"> 
    <div>  
     <table> 
      <tbody> 
       <tr> 
        <td> 
         <div>  
          <table> 
           <tbody> 
            <tr> 
             <td> <pre><span style="font-family:Tahoma; font-size:12px"><span style="color:#009900">
</span></span></pre> <pre><span style="font-family:Tahoma; font-size:12px"><span style="color:#009900">首先看一下在iPad上实现的简单的Demo吧：</span></span></pre> <pre><span style="font-family:Tahoma; font-size:12px"><span style="color:#009900"><img alt="">
</span></span></pre> <pre><span style="font-family:Tahoma; font-size:12px"><span style="color:#009900"><img alt="">
公告牌技术,即billboard技术,在3D游戏中有着广泛的应用.它的本质就是用预先做好的几幅
位图来代替3D物体,极大地节省资源和提高速度.仔细观察&lt;&lt;魔法门&gt;&gt;系列游戏,它的精灵,树木,物
品都是二维图象,但由于它始终朝向观察者,你根本看不到它"扁"的一面,所以给人一种立体的感觉.
这种技术最大的优点是快.试想一个多边形构成的3D精灵,至少百余个多边形,而用billboard技术,
只需处理两个多边形,优势不言而喻.其他3D游戏的爆炸效果,&lt;&lt;极品飞车&gt;&gt;中路旁的树木,都使用了
该技术.

实现该技术的两个关键的步骤:
1.在合适的地方,朝合适的方向放位置一面"公告牌".这个公告牌,其实是一个共面四边形,一般使用
矩形.
2.把位图贴到矩形上.       </span></span></pre> <pre><span style="font-family:Tahoma; font-size:12px"><span style="color:#009900">1.方向的计算:
如果是做爆炸效果,要求该矩形的法向量始终指向观察者的眼睛,设矩形的初始法向量与Z轴重合,可
以用以下代码获得其旋转矩阵:</span></span></pre> <pre><span style="font-family:宋体; font-size:12px"><span style="color:#009900">D3DVECTOR vEyeLoc; //观察者眼睛的位置
D3DVECTOR vLoc; //公告牌位置
D3DVECTOR vAxis; //转轴
float fRads; //旋转角
D3DMATRIX matRotate; //旋转矩阵 </span></span></pre> <pre><span style="font-family:宋体; font-size:12px"><span style="color:#009900">//赋值语句略去......</span></span></pre> <pre><span style="font-family:宋体; font-size:12px"><span style="color:#009900">D3DVECTOR v=vEyeLoc-vLoc;//从放置点指向视点的矢量
vAxis=CrossProduct(Normalize(v),D3DVECTOR(0,1,0));//用叉积求转轴
fRads=asin(Magnitude(vAxis));//该叉积的模的反正玄正好是旋转角</span></span></pre> <pre><span style="font-family:宋体; font-size:12px"><span style="color:#009900">D3DUtil_SetRotationMatrix(matRotate,vAxis,fRads); //设置旋转矩阵 </span></span></pre> <pre><span style="font-family:Tahoma; font-size:12px"><span style="color:#009900">如果是做精灵,树木等,要求该矩形的法向量始终指向观察者且与地面平行,则更简单:</span></span></pre> <pre><span style="font-family:宋体; font-size:12px"><span style="color:#009900">D3DVECTOR v=vEyeLoc-vLoc;//从放置点指向视点的矢量
vAxis=CrossProduct(Normalize(v),D3DVECTOR(0,1,0));//用叉积求转轴
D3DUtil_SetRotationMatrix(matRotate;,vAxis,g_PI/2.0); //g_PI=3.1415926</span></span></pre> <pre><span style="font-family:Tahoma; font-size:12px"><span style="color:#009900">2.贴图的方式:
贴图的方式有两种,一是用颜色键,一是用Alpha.前者适合做精灵和树木等,后者适合做爆炸效果.</span></span></pre> <pre><span style="font-family:Tahoma; font-size:12px"><span style="color:#009900">a)对于颜色键方法,如果是调色板表面,需要设置调色板;如果是高彩或真彩表面,需要逐点设置
Alpha信息.具体可参照d3dtextr.cpp里的CopyBitmapToSurface函数.其实也可以简单地使用
下面的代码(必须include d3dtextr.h):</span></span></pre> <pre><span style="font-family:宋体; font-size:12px"><span style="color:#009900">//创建纹理,白色为透明色
D3DTextr_CreateTexture( "texture.bmp", 0, D3DTEXTR_TRANSPARENTWHITE);</span></span></pre> <pre><span style="font-family:宋体; font-size:12px"><span style="color:#009900">......</span></span></pre> <pre><span style="font-family:宋体; font-size:12px"><span style="color:#009900">//打开Alpha
pd3dDevice-&gt;SetRenderState( D3DRENDERSTATE_ALPHABLENDENABLE, TRUE );</span></span></pre> <pre><span style="font-family:宋体; font-size:12px"><span style="color:#009900">//设置纹理层参数
pd3dDevice-&gt;SetTextureStageState( 0, D3DTSS_ALPHAOP, D3DTOP_SELECTARG1);
pd3dDevice-&gt;SetTextureStageState( 0, D3DTSS_ALPHAARG1, D3DTA_TEXTURE);</span></span></pre> <pre><span style="font-family:宋体; font-size:12px"><span style="color:#009900">//设置混合因子
pd3dDevice-&gt;SetRenderState( D3DRENDERSTATE_SRCBLEND, D3DBLEND_ONE);
pd3dDevice-&gt;SetRenderState(D3DRENDERSTATE_DESTBLEND,D3DBLEND_ZERO);</span></span></pre> <pre><span style="font-family:宋体; font-size:12px"><span style="color:#009900">//绘图元
...........</span></span></pre> <pre><span style="font-family:Tahoma; font-size:12px"><span style="color:#009900">b)直接使用Alpha.如果做的是爆炸效果,当然爆炸的边缘是半透明的,可以如下设置:</span></span></pre> <pre><span style="font-family:宋体; font-size:12px"><span style="color:#009900">//假设你的爆炸的位图以黑色为背景</span></span></pre> <pre><span style="font-family:宋体; font-size:12px"><span style="color:#009900">//打开Alpha
pd3dDevice-&gt;SetRenderState( D3DRENDERSTATE_ALPHABLENDENABLE,TRUE );
//设置混合因子
pd3dDevice-&gt;SetRenderState( D3DRENDERSTATE_SRCBLEND, D3DBLEND_ONE);
pd3dDevice-&gt;SetRenderState(D3DRENDERSTATE_DESTBLEND,D3DBLEND_ONE);
//绘图元
...........</span></span></pre> <pre><span style="font-family:Tahoma; font-size:12px"><span style="color:#009900">（完）</span></span></pre> </td> 
            </tr> 
           </tbody> 
          </table>  
         </div> </td> 
       </tr> 
      </tbody> 
     </table>  
    </div> </td> 
  </tr> 
 </tbody> 
</table>