脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → three.js卷积法实现物体描边

three.js利用卷积法如何实现物体描边效果

 更新时间：2019年11月27日 10:19:07   作者：tengge  
这篇文章主要给大家介绍了关于three.js利用卷积法如何实现物体描边效果的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用three.js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧

法线延展法

网上使用法线延展法实现物体描边效果的文章比较多，这里不再描述。

但是这种方法有个缺点：当两个面的法线夹角差别较大时，两个面的描边无法完美连接。如下图所示：

卷积法

这里使用另一种方法卷积法实现物体描边效果，一般机器学习使用该方法比较多。先看效果图：

使用three.js具体的实现方法如下：

  1. 创建着色器材质，隐藏不需要描边的物体进行渲染，将需要描边的位置渲染成白色，其他位置渲染成黑色。
  2. 利用片源着色器计算卷积，白色是物体内部，黑色是物体外部，灰色是边框。
  3. 设置材质透明、不融合，将边框叠加到原图上，可以使用FXAA抗锯齿。

这三步就可以实现了，很简单吧。下面我们将详细介绍实现方法，不想看的可以直接去看完整实现代码：

完整代码：https://gitee.com/tengge1/ShadowEditor/blob/master/ShadowEditor.Web/src/helper/SelectHelper.js

详细的实现过程：

1. 使用three.js正常绘制场景，得到下图，这里不介绍了。

2. 创建着色器材质，隐藏所有不需要描边的物体。将需要描边的物体绘制成白色，其他地方绘制成黑色。

隐藏不需要描边的物体后，将整个场景材质替换。

renderScene.overrideMaterial = this.maskMaterial;

着色器材质：

const maskMaterial = new THREE.ShaderMaterial({
 vertexShader: MaskVertex,
 fragmentShader: MaskFragment,
 depthTest: false
});

MaskVertex：

void main() {
 gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}

MaskFragment：

void main() {
 gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}

效果图：

3. 创建着色器材质进行卷积计算，每四个像素颜色求平均值得到一个像素。描边物体内部是白色，外部是黑色，物体边缘处会得到灰色。灰色就是我们所需的边框。

const edgeMaterial = new THREE.ShaderMaterial({
 vertexShader: EdgeVertex,
 fragmentShader: EdgeFragment,
 uniforms: {
  maskTexture: {
   value: this.maskBuffer.texture
  },
  texSize: {
   value: new THREE.Vector2(width, height)
  },
  color: {
   value: selectedColor
  },
  thickness: {
   type: 'f',
   value: 4
  },
  transparent: true
 },
 depthTest: false
});

其中texSize是计算卷积的canvas宽度和高度，为了让边框更平滑，可以设置为原来canvas的两倍。color是边框颜色，thickness是边框粗细。

注意，要将材质transparent设置为true。

EdgeVertex：

varying vec2 vUv;

void main() {
 vUv = uv;
 gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}

EdgeFragment：

uniform sampler2D maskTexture;
uniform vec2 texSize;
uniform vec3 color;
uniform float thickness;

varying vec2 vUv;

void main() {
 vec2 invSize = thickness / texSize;
 vec4 uvOffset = vec4(1.0, 0.0, 0.0, 1.0) * vec4(invSize, invSize);

 vec4 c1 = texture2D( maskTexture, vUv + uvOffset.xy);
 vec4 c2 = texture2D( maskTexture, vUv - uvOffset.xy);
 vec4 c3 = texture2D( maskTexture, vUv + uvOffset.yw);
 vec4 c4 = texture2D( maskTexture, vUv - uvOffset.yw);
 
 float diff1 = (c1.r - c2.r)*0.5;
 float diff2 = (c3.r - c4.r)*0.5;
 
 float d = length(vec2(diff1, diff2));
 gl_FragColor = d > 0.0 ? vec4(color, 1.0) : vec4(0.0, 0.0, 0.0, 0.0);
}

效果图：

4. 创建着色器材质，将边框叠加到原来的图片上。由于FXAA比较复杂，这里使用简单的叠加方法。

着色器材质：

const copyMaterial = new THREE.ShaderMaterial({
 vertexShader: CopyVertexShader,
 fragmentShader: CopyFragmentShader,
 uniforms: {
  tDiffuse: {
   value: edgeBuffer.texture
  },
  resolution: {
   value: new THREE.Vector2(1 / width, 1 / height)
  }
 },
 transparent: true,
 depthTest: false
});

注意，transparent要设置为true，否则会把原来的图片覆盖掉。

CopyVertexShader：

varying vec2 vUv;

void main() {
 vUv = uv;
 gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}

CopyFragmentShader：

uniform float opacity;

uniform sampler2D tDiffuse;

varying vec2 vUv;

void main() {
 vec4 texel = texture2D( tDiffuse, vUv );
 gl_FragColor = opacity * texel;
}

得到最终效果图：

参考资料：

1. 描边实现完整代码：https://gitee.com/tengge1/ShadowEditor/blob/master/ShadowEditor.Web/src/helper/SelectHelper.js

2. 基于three.js的开源三维场景编辑器：https://github.com/tengge1/ShadowEditor

3. three.js后期处理描边：https://threejs.org/examples/

4. 卷积工作原理：https://www.zhihu.com/question/39022858?sort=created

5. 法线延展法实现物体描边：https://www.jb51.net/article/175213.htm

总结

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

您可能感兴趣的文章:

相关文章

  • 微信小程序开发之圆形菜单 仿建行圆形菜单实例

    微信小程序开发之圆形菜单 仿建行圆形菜单实例

    本篇文章主要介绍了微信小程序开发之圆形菜单 仿建行圆形菜单实例，具有一定的参考价值，有需要的可以了解一下。
    2016-12-12
  • JavaScript 布尔操作符解析 && || ！

    JavaScript 布尔操作符解析 && || ！

    在一门编程语言中，布尔操作符的重要性堪比相等操作符。如果没有测试两个值关系的能力，那么诸如if...else和循环之类的语句就不会有用武之地了。布尔操作符一共有3个： 非、与、或
    2012-08-08
  • 如何检测JavaScript中的死循环示例详解

    如何检测JavaScript中的死循环示例详解

    这篇文章主要给大家介绍了关于如何检测JavaScript中死循环的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • JavaScript实现旋转轮播图

    JavaScript实现旋转轮播图

    这篇文章主要为大家详细介绍了JavaScript实现旋转轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-08-08
  • uni-app微信小程序之红包雨活动完整源码

    uni-app微信小程序之红包雨活动完整源码

    最近公司需求做一个微信红包雨功能,这里给大家总结下实现的方法,这篇文章主要给大家介绍了关于uni-app微信小程序之红包雨活动的相关资料,需要的朋友可以参考下
    2024-01-01
  • javascript中延迟加载的7种方法实现

    javascript中延迟加载的7种方法实现

    在web前端开发中,性能优化一直是一个非常重要的话题,JavaScript中延迟加载的方式有很多种,本文就来介绍了javascript中延迟加载的7种方法实现,具有一定的参考价值,感兴趣的可以了解一下
    2025-01-01
  • Bootstrap选项卡与Masonry插件的完美结合

    Bootstrap选项卡与Masonry插件的完美结合

    这篇文章主要介绍了Bootstrap选项卡与Masonry插件的完美结合的相关资料,需要的朋友可以参考下
    2016-07-07
  • Javascript中的函数声明与函数表达式(奇技淫巧)

    Javascript中的函数声明与函数表达式(奇技淫巧)

    Javascript有很多有趣的用法，在Google Code Search里能找到不少,今天从火丁笔记看到的，非常不错，推荐大家看下。
    2011-03-03
  • 一文详解JavaScript中的事件循环(event loop)机制

    一文详解JavaScript中的事件循环(event loop)机制

    JavaScript中的事件循环（Event Loop）是一种重要的机制，用于管理异步代码的执行，它确保 JavaScript 单线程环境中的任务按照正确的顺序执行，同时允许异步操作如定时器、网络请求和事件处理，本将给大家详细的介绍一下JavaScript事件循环机制,感兴趣的朋友可以参考下
    2023-12-12
  • 如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗？”

    如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗？”

    这篇文章主要介绍了如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗？”的方法以及相关资料,需要的朋友可以参考下
    2015-03-03

最新评论