webgl实现物体描边效果的方法介绍

  //绘制一帧画面的方法
  function drawFrame()
  {   
   //若还没有加载完则不绘制
   if(!ooTri || !mbTri) {return;}
   
   //清除着色缓冲与深度缓冲
   gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 
   
   //保护现场
   ms.pushMatrix();   
   //绕Y轴旋转
   ms.rotate(currentAngle,0,1,0);
//方法1
//   gl.disable(gl.DEPTH_TEST);      //启用深度缓冲写入
//   mbTri.drawSelf(ms);//绘制描边物体
//   gl.enable(gl.DEPTH_TEST);      //关闭深度缓冲写入
//   ooTri.drawSelf(ms);//绘制原物体
//方法2
   gl.enable(gl.CULL_FACE);      //开启剪裁
   gl.cullFace(gl.BACK);       //剪裁背面
   gl.frontFace(gl.CW);       //绘制顺序为顺时针
   mbTri.drawSelf(ms);//绘制描边物体
   gl.frontFace(gl.CCW);       //绘制顺序为逆时针
   ooTri.drawSelf(ms);//绘制原物体


   //恢复现场
   ms.popMatrix();
   
   //修改旋转角度
   currentAngle += incAngle;
   if (currentAngle > 360)
   {
    currentAngle -= 360; 
   }   
  } 
  其着色器代码如下：
uniform mat4 uMVPMatrix;       //总变换矩阵
attribute vec3 aPosition;         //顶点位置
attribute vec3 aNormal;         //顶点法向量
void main(){
 vec3 position=aPosition;      //获取此顶点位置
 position.xyz+=aNormal*0.4;    //将顶点位置沿法线方向挤出
 gl_Position = uMVPMatrix * vec4(position.xyz,1);//根据总变换矩阵计算此次绘制此顶点位置
}
<#BREAK_BN#>
precision mediump float;        //设置浮点默认精度

void main(){
 gl_FragColor = vec4(0.0,1.0,0.0,0.0);     //给此片元颜色值
}