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

2024-10-18 21:01:28

前言

终于把手头的事结束了，可以有时间来研究研究技术~作为一名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学习教程之Three.js学习笔记(第一篇)

webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染. WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏. 原生的WebGl比较复杂,主要通过对顶点着色器和片元着色器的操作,来实现渲染,但实现起来比较复杂,需要一定的数学基础,但更多的是需要学习
WebGL three.js学习笔记之阴影与实现物体的动画效果

实现物体的旋转.跳动以及场景阴影的开启与优化本程序将创建一个场景,并实现物体的动画效果运行的结果如图: 运行结果完整代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Three.js</title> <script src="../../../Import/three.js
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)

本文实例讲述了WebGL利用FBO完成立方体贴图效果的方法.分享给大家供大家参考,具体如下: 这篇主要记录WebGL的一些基本要点,顺便也学习下如何使用FBO与环境贴图.先看下效果图(需要支持WebGL,Chrome,火狐,IE11). 主要实现过程如下,先用FBO输出当前环境在立方体纹理中,再画出当前立方体,最后画球,并且把FBO关联的纹理贴在这个球面上. 开始WebGL时,最好有些OpenGL基础,在前面讲Obj完善与MD2时,大家可能已经发现了,因为着色器的添加使用,原来一些Opengl大
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】

本文实例讲述了jQuery+HTML5实现WebGL高性能烟花绽放动画效果.分享给大家供大家参考,具体如下: 运行效果: 完整代码如下: <!DOCTYPE html> <html class=" -webkit- js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websocket
webgl实现物体描边效果的方法介绍

前言终于把手头的事结束了,可以有时间来研究研究技术~作为一名3D开发人员,仅仅使用现有的引擎来开发项目不免有些浮于表面,多研究研究底层的实现更利于对3D开发整体的把控~于是我决定最近开始研究webgl一些特效的实现,希望能在秋招前对底层有更深入的理解. 在webgl中实现描边的效果有很多种方式,比如我写卡通风格着色器那篇文章讲到的(将视线投影到每个点的法线上,这个值越小越说明这个点靠近边缘),所以接下来介绍实现的另一种方式:法线延展法. 这种方法不用进行法线与视线之间的计算,而是将物体每个点的
three.js利用卷积法如何实现物体描边效果

法线延展法网上使用法线延展法实现物体描边效果的文章比较多,这里不再描述. 但是这种方法有个缺点:当两个面的法线夹角差别较大时,两个面的描边无法完美连接.如下图所示: 卷积法这里使用另一种方法卷积法实现物体描边效果,一般机器学习使用该方法比较多.先看效果图: 使用three.js具体的实现方法如下: 创建着色器材质,隐藏不需要描边的物体进行渲染,将需要描边的位置渲染成白色,其他位置渲染成黑色. 利用片源着色器计算卷积,白色是物体内部,黑色是物体外部,灰色是边框. 设置材质透明.不融合,将边框叠
Unity3D中shader 轮廓描边效果实现代码

Unity3D中shader 轮廓描边效果想利用Unity3D中shader这个功能实现描边轮廓边框效果该怎么做呢,相信有很多搞开发的人想知道,为此下面就给大家介绍下方法. Shade实现描边效果,如下图中的3D球效果图 Shade代码如下: Shader "Outlined/Silhouetted Diffuse" { Properties { _Color ("Main Color", Color) = (1,1,1,1) _OutlineCo
Android游戏开发学习②焰火绽放效果实现方法

本文实例讲述了Android游戏开发学习②焰火绽放效果实现方法.分享给大家供大家参考.具体如下: 本节介绍在游戏开发中常用到的数学物理应用--粒子系统.粒子系统与上一节的小球有类似的地方,都是通过数学方法和物理公式模拟客观世界中的物体的运动轨迹.不同的是小球更强调个体运动,而焰火粒子等粒子系统更注重整体感觉. 一.焰火粒子效果 1.粒子对象类Particle类和粒子集合类ParticleSet类每个粒子都为一个Particle类的对象,程序中产生的所有Particle对象都由一个Particl
Android编程实现摄像头临摹效果的方法

本文实例讲述了Android编程实现摄像头临摹效果的方法.分享给大家供大家参考,具体如下: 这篇文章结合本人的开发实例,介绍如何实现摄像头临摹效果,即将摄像头拍摄的画面作为临摹的物体投射到画纸上,用户可以在画纸上继续作画,效果如图1. 主要可以分成四步,第一步在AndroidManifest.xml文件里添加对摄像机的使用许可. <uses-permissionandroid:name="android.permission.CAMERA"/> 第二步在布局文件里使用fra
Unity中协程IEnumerator的使用方法介绍详解

在Unity中,一般的方法都是顺序执行的,一般的方法也都是在一帧中执行完毕的,当我们所写的方法需要耗费一定时间时,便会出现帧率下降,画面卡顿的现象.当我们调用一个方法想要让一个物体缓慢消失时,除了在Update中执行相关操作外,Unity还提供了更加便利的方法,这便是协程. 在通常情况下,如果我们想要让一个物体逐渐消失,我们希望方法可以一次调用便可在程序后续执行中实现我们想要的效果. 我们希望代码可以写成如下所示: void Fade() { for (float f = 1f; f >= 0;
Python+Opencv实现物体尺寸测量的方法详解

目录 1.效果展示 2.项目介绍 3.项目搭建 4.utils.py文件代码展示与讲解 5.项目代码展示与讲解 6.项目资源 7.项目总结 1.效果展示我们将以两种方式来展示我们这个项目的效果. 下面这是视频的实时检测,我分别用了盒子和盖子来检测,按理来说效果不应该怎么差的,但我实在没有找到合适的背景与物体.且我的摄像头使用的是外设,我不得不手持,所以存在一点点的抖动,但我可以保证,它是缺少了适合检测物体与背景. 我使用手机拍了一张照片并经过了ps修改了背景,效果不错. 2.项目介绍本项目中
JS实现鼠标箭头变成一个燃烧烛光效果的方法

本文实例讲述了JS实现鼠标箭头变成一个燃烧烛光效果的方法.分享给大家供大家参考.具体如下: 这是一个完全的鼠标箭头美化效果的JS代码,通过这个JS代码,把鼠标的箭头加上一个样式,燃烧中的蜡烛.这个也是很古老的代码了,只能在IE8及以下浏览器运行,代码如下: 复制代码代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"
利用php_imagick实现复古效果的方法

介绍 php_imagick是一个可以供PHP调用ImageMagick功能的PHP扩展,使用这个扩展可以使PHP具备和ImageMagick相同的功能. ImageMagick是一套功能强大.稳定而且免费的工具集和开发包,可以用来读.写和处理超过185种基本格式的图片文件,包括流行的TIFF, JPEG, GIF, PNG, PDF以及PhotoCD等格式.利用ImageMagick,你可以根据web应用程序的需要动态生成图片, 还可以对一个(或一组)图片进行改变大小.旋转.锐化.减色或增加
JS实现从网页顶部掉下弹出层效果的方法

本文实例讲述了JS实现从网页顶部掉下弹出层效果的方法.分享给大家供大家参考.具体如下: 这里介绍的JavaScript动画背景出层,实现从网页顶部掉下来的感觉,停止时还带有缓冲弹跳的意思,从上到下显示的动画弹出层,带关闭功能,没有怎么美化,喜欢的用时候息动手美化下,觉得不错. 运行效果如下图所示: 具体代码如下: <HTML><HEAD><TITLE>窗口从上掉下来</TITLE> </HEAD> <BODY bgColor=#fef4d9

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

相关推荐

随机推荐