three.js利用卷积法如何实现物体描边效果
53 浏览量
2020-10-15
22:59:22
上传
评论 1
收藏 58KB PDF 举报
three.js利用卷积法如何实现物体描边效果利用卷积法如何实现物体描边效果
主要给大家介绍了关于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)
},
评论0