WebGL开发技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/ch_s_t/article/details/148154197

一、标志板

标志板技术的基本原理是使用纹理距形绘制植物。技术的关键点如下：

1、每棵植物用一个纹理距形绘制，纹理距形采用内容为植物的透明背景纹理图。要使用恰当的混合因子使植物产生遮挡效果。

2、纹理距形朝向要永远正对摄像机。

案例关键代码：

表示棵植物，实现植物的绘制且根据摄像机位置计算植物面的朝向，具体代码如下：

QQQ:
 function SingleTree (x, z, yAngle, tg) {
        tg=new TreeGroup();               //获取植物的数组引用
        this.x=x;                         //该植物的x位置
        this.z=z;                         //该植物的y位置
        this.yAngle=yAngle;               //植物纹理图的旋转角度
        this.tg=tg;
        this.drawSelf=function(ms, texture) {
        ms.pushMatrix();                //保护现场
        ms.translate(x, 0, z);         //将植物平移到对应位置
        ms.rotate(yAngle, 0, 1, 0);    //将纹理图旋转到对应角度
        tfd.drawSelf(ms, texture);      //树的绘制
        ms.popMatrix();                 //恢复现场
                }
        this.calculateBillboardDirection=function(){ //根据摄像机位置计算树木面的         
        var xspan=x-cx;      //计算从植物位置到摄像机位置的x分量
        var zspan=z-cz;      //计算从植物位置到摄像机位置的z分量
        if(zspan<=0) {       //根据向量中的两个分量计算出纹理矩形绕y轴旋转的角度
              yAngle=180/Math.PI ＊(Math.atan(xspan/zspan));
              } else{
          yAngle=180+180/Math.PI ＊(Math.atan(xspan/zspan));         
   }}}

表示一组植物，其中包含植物的位置以及每个植物的朝向各绘制，代码如下：

function TreeGroup(gl) {
            this.treeGroupadd=function(gl) {               //向数组中添加植物的位置
            alist.push(new SingleTree(0,0,0, this));   //植物的位置
            alist.push(new SingleTree(8,0,10, this));  //植物的位置
            alist.push(new SingleTree(5.7,5.7,0, this));  //植物的位置
            alist.push(new SingleTree(0, -8,0, this));     //植物的位置
            alist.push(new SingleTree(-5.7,5.7,0, this)); //植物的位置
            alist.push(new SingleTree(-8,0,0, this));     //植物的位置
            alist.push(new SingleTree(-5.7, -5.7,0, this)); //植物的位置
            alist.push(new SingleTree(0,8,0, this));      //植物的位置
            alist.push(new SingleTree(5.7, -5.7,0, this)); //植物的位置
             }
            this.calculateBillboardDirection=function(){  //计算列表中每个树木的朝向             
            for(var i=0; i<alist.length; i++){      //循环遍历数组中的元素                      
                 alist[i].calculateBillboardDirection(); //计算每个植物纹理矩形的朝向
                 }
             }
           this.drawSelf=function(ms, texture) {             //绘制列表中的每个树木            
           for(var i=0; i<alist.length; i++){        //循环遍历数组中的元素
                   alist[i].drawSelf(ms, texture);      //调用drawSelf方法绘制植物
            }}}