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 获取和设置css3 属性值的实现方法
May 06 Javascript
js 得到文件后缀(通过正则实现)
Jul 08 Javascript
angularJS提交表单(form)
Feb 09 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
jQuery插件Timelinr 实现时间轴特效
Oct 04 Javascript
JavaScript模拟数组合并concat
Mar 06 Javascript
Node.js 文件夹目录结构创建实例代码
Jul 08 Javascript
jQuery使用deferreds串行多个ajax请求
Aug 22 Javascript
js 定位到某个锚点的方法
Nov 19 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
Jun 08 Javascript
Vue2.0 从零开始_环境搭建操作步骤
Jun 14 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 mb_convert_encoding文字编码的转换函数介绍
2011/11/10 PHP
深入PHP中的HashTable结构详解
2013/06/13 PHP
PHP提高编程效率的20个要点
2015/09/23 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
ThinkPHP5.0框架控制器继承基类和自定义类示例
2018/05/25 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
jQuery内置的AJAX功能和JSON的使用实例
2014/07/27 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
2014/09/22 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
2016/06/08 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
vue监听对象及对象属性问题
2018/08/20 Javascript
浅谈Vue 性能优化之深挖数组
2018/12/11 Javascript
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
js对象数组和对象的使用实例详解
2019/08/27 Javascript
微信小程序登录时如何获取input框中的内容
2019/12/04 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
express异步函数异常捕获示例详解
2020/11/30 Javascript
python中zip()方法应用实例分析
2016/04/16 Python
tf.truncated_normal与tf.random_normal的详细用法
2018/03/05 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
Python Pillow.Image 图像保存和参数选择方式
2020/01/09 Python
python解包用法详解
2021/02/17 Python
深入浅析css3 中display box使用方法
2015/11/25 HTML / CSS
微信浏览器取消缓存的方法
2015/03/28 HTML / CSS
美国美发品牌:Bumble and Bumble
2016/10/08 全球购物
SEPHORA丝芙兰捷克官网:购买香水、化妆品和护肤品
2018/11/26 全球购物
小学开学寄语
2014/01/19 职场文书
群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
2014年挂职干部工作总结
2014/12/06 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
Golang并发工具Singleflight
2022/05/06 Golang
基于CSS制作创意端午节专属加载特效
2022/06/01 HTML / CSS