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


Posted in Javascript onNovember 27, 2019

前言

终于把手头的事结束了,可以有时间来研究研究技术~作为一名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实现物体描边效果的方法介绍

总结

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

Javascript 相关文章推荐
javascript 强制刷新页面的实现代码
Dec 13 Javascript
禁止js文件缓存的代码
Apr 09 Javascript
浅谈Javascript事件处理程序的几种方式
Jun 27 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 Javascript
JavaScript数据类型转换的注意事项
Jul 31 Javascript
JS调用某段SQL语句的方法
Oct 20 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 Javascript
深入浅析ES6 Class 中的 super 关键字
Oct 20 Javascript
vue-router动态设置页面title的实例讲解
Aug 30 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
Apr 08 Javascript
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
JavaScript 事件捕获冒泡与捕获详情
Nov 11 Javascript
three.js利用卷积法如何实现物体描边效果
Nov 27 #Javascript
Angular8引入百度Echarts进行图表分析的实现代码
Nov 27 #Javascript
vue实现浏览器全屏展示功能
Nov 27 #Javascript
js中apply和call的理解与使用方法
Nov 27 #Javascript
vue-cli在 history模式下的配置详解
Nov 26 #Javascript
js实现淘宝首页的banner栏效果
Nov 26 #Javascript
JS实现排行榜文字向上滚动轮播效果
Nov 26 #Javascript
You might like
我的论坛源代码(一)
2006/10/09 PHP
理解PHP中的stdClass类
2014/04/18 PHP
php实现检查文章是否被百度收录
2015/01/27 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
Javascript学习笔记7 原型链的原理
2010/01/11 Javascript
Javascript表格翻页效果的具体实现
2013/10/05 Javascript
jQuery Masonry瀑布流插件使用详解
2014/11/17 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
Angular4学习笔记router的简单使用
2018/03/30 Javascript
jQuery实现获取选中复选框的值实例详解
2018/06/28 jQuery
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python FTP操作类代码分享
2014/05/13 Python
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
python 重定向获取真实url的方法
2018/05/11 Python
使用python对excle和json互相转换的示例
2018/10/23 Python
python3实现mysql导出excel的方法
2019/07/31 Python
Python实现点云投影到平面显示
2020/01/18 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
Clearly澳大利亚:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
为什么使用接口?
2014/08/13 面试题
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
人力资源专员自我评价怎么写
2013/09/19 职场文书
2014全国两会大学生学习心得体会
2014/03/10 职场文书
大队干部竞选演讲稿
2014/04/28 职场文书
经典团队口号
2014/06/06 职场文书
车辆年检委托书范本
2014/10/14 职场文书
幼儿教师2014年度工作总结
2014/12/16 职场文书
2015年党员创先争优承诺书
2015/01/22 职场文书
2015年女工委工作总结
2015/07/27 职场文书
2016会计专业自荐信范文
2016/01/28 职场文书
HTML常用标签超详细整理
2022/03/19 HTML / CSS