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 相关文章推荐
改版了网上的一个js操作userdata
Apr 27 Javascript
运算符&amp;&amp;的三个不同层次
Apr 07 Javascript
jquery右下角弹出提示框示例代码
Oct 08 Javascript
js定时调用方法成功后并停止调用示例
Apr 08 Javascript
Javascript小技巧之生成html元素
May 15 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 Javascript
javascript中数组的定义及使用实例
Jan 21 Javascript
javascript针对cookie的基本操作实例详解
Nov 30 Javascript
js中常用的Math方法总结
Jan 12 Javascript
Angularjs 实现动态添加控件功能
May 25 Javascript
JS中定位 position 的使用实例代码
Aug 06 Javascript
JavaScript indexOf()原理及使用方法详解
Jul 09 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
PHP UTF8中文字符截断函数代码
2012/09/11 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
php生成mysql的数据字典
2016/07/07 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
js数组Array sort方法使用深入分析
2013/02/21 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
2014/02/10 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
浅谈JS中的常用选择器及属性、方法的调用
2017/07/28 Javascript
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
vue中接口域名配置为全局变量的实现方法
2018/09/20 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
一次微信小程序内地图的使用实战记录
2019/09/09 Javascript
Vuex模块化应用实践示例
2020/02/03 Javascript
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
[02:33]DOTA2英雄基础教程 司夜刺客
2013/12/04 DOTA
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
win系统下为Python3.5安装flask-mongoengine 库
2016/12/20 Python
win10系统下python3安装及pip换源和使用教程
2020/01/06 Python
Pycharm和Idea支持的vim插件的方法
2020/02/21 Python
Python中使用threading.Event协调线程的运行详解
2020/05/02 Python
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
HTC VIVE美国官网:VR虚拟现实眼镜
2018/02/13 全球购物
竞聘上岗演讲稿范文
2014/01/10 职场文书
寄语学生的话
2014/04/10 职场文书
主题实践活动总结
2014/05/08 职场文书
财政局党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
幼儿园2014年度工作总结
2014/11/10 职场文书
酒店销售经理岗位职责
2015/04/02 职场文书
交通安全月活动总结
2015/05/08 职场文书
Python中npy和mat文件的保存与读取
2022/04/24 Python