DDR爱好者之家

webgl实现物体描边效果的方法介绍
站长资源 2024/12/29 佚名
52 1538
DDR爱好者之家 Design By 杰米

前言

终于把手头的事结束了，可以有时间来研究研究技术~作为一名3D开发人员，仅仅使用现有的引擎来开发项目不免有些浮于表面，多研究研究底层的实现更利于对3D开发整体的把控~于是我决定最近开始研究webgl一些特效的实现，希望能在秋招前对底层有更深入的理解。

在webgl中实现描边的效果有很多种方式，比如我写卡通风格着色器那篇文章讲到的（将视线投影到每个点的法线上，这个值越小越说明这个点靠近边缘），所以接下来介绍实现的另一种方式：法线延展法。

这种方法不用进行法线与视线之间的计算，而是将物体每个点的x、y、z坐标沿着该点的法线扩大一定的距离并且添加描边的颜色，然后在绘制原来的物体覆盖到上面，这样便实现了描边的效果。

这里将原物体覆盖到描边物体上面就有两种实现的方式：

1.先关闭深度检测，然后绘制描边物体，开启深度检测，绘制原物体。这样由于绘制描边物体时深度检测被关闭了，原物体就会覆盖在描边物体上绘制从而实现描边效果。缺点：当两个物体重合时会出现重合位置没有描边的情况，这是由于第二次绘制的东西覆盖到了第一次描边的物体上，所以先画的边自然就会被遮挡啦~

2.不关闭深度检测，开启背面剪裁，绘制描边物体时将卷绕方向置为顺时针方向（默认是逆时针），在进行绘制，绘制完成之后将卷绕方向设置回顺时针方向。这样背面剪裁的开启使得描边物体只能绘制出它的背面，这样便实现了描边效果，而且由于没有关闭深度测试，该物体的描边效果会根据其位置决定是否遮挡。

  //绘制一帧画面的方法
  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);     //给此片元颜色值
}

其实这两种描边方法还是有着一些区别（第二种对于复杂物体会产生类似包裹的效果）具体效果还得根据具体的场景来决定。

PS:这里还要注意一点，WebGL是个状态机。我们可以这么理解，假设WebGL中的属性P的值为1，你在某一次操作中，把P的值设置成了2，那么在你下一次设置P的值之前，P的值永远是2。这一点很重要！

Github地址：https://github.com/StringKun/WebGL-object-of-stroke

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

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米