小編給大家分享一下three.js利用卷積法實(shí)現(xiàn)物體描邊效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
主要從事網(wǎng)頁(yè)設(shè)計(jì)、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、wap網(wǎng)站建設(shè)（手機(jī)版網(wǎng)站建設(shè)）、響應(yīng)式網(wǎng)站、程序開(kāi)發(fā)、微網(wǎng)站、成都小程序開(kāi)發(fā)等，憑借多年來(lái)在互聯(lián)網(wǎng)的打拼，我們?cè)诨ヂ?lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了豐富的成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷(xiāo)經(jīng)驗(yàn)，集策劃、開(kāi)發(fā)、設(shè)計(jì)、營(yíng)銷(xiāo)、管理等多方位專(zhuān)業(yè)化運(yùn)作于一體，具備承接不同規(guī)模與類(lèi)型的建設(shè)項(xiàng)目的能力。
法線延展法
網(wǎng)上使用法線延展法實(shí)現(xiàn)物體描邊效果的文章比較多，這里不再描述。
但是這種方法有個(gè)缺點(diǎn)：當(dāng)兩個(gè)面的法線夾角差別較大時(shí)，兩個(gè)面的描邊無(wú)法完美連接。如下圖所示：
卷積法
這里使用另一種方法卷積法實(shí)現(xiàn)物體描邊效果，一般機(jī)器學(xué)習(xí)使用該方法比較多。先看效果圖：
使用three.js具體的實(shí)現(xiàn)方法如下：
創(chuàng)建著色器材質(zhì)，隱藏不需要描邊的物體進(jìn)行渲染，將需要描邊的位置渲染成白色，其他位置渲染成黑色。
利用片源著色器計(jì)算卷積，白色是物體內(nèi)部，黑色是物體外部，灰色是邊框。
設(shè)置材質(zhì)透明、不融合，將邊框疊加到原圖上，可以使用FXAA抗鋸齒。
這三步就可以實(shí)現(xiàn)了，很簡(jiǎn)單吧。下面我們將詳細(xì)介紹實(shí)現(xiàn)方法，不想看的可以直接去看完整實(shí)現(xiàn)代碼：
完整代碼：https://gitee.com/tengge1/ShadowEditor/blob/master/ShadowEditor.Web/src/helper/SelectHelper.js
詳細(xì)的實(shí)現(xiàn)過(guò)程：
1. 使用three.js正常繪制場(chǎng)景，得到下圖，這里不介紹了。
2. 創(chuàng)建著色器材質(zhì)，隱藏所有不需要描邊的物體。將需要描邊的物體繪制成白色，其他地方繪制成黑色。
隱藏不需要描邊的物體后，將整個(gè)場(chǎng)景材質(zhì)替換。
renderScene.overrideMaterial = this.maskMaterial;
著色器材質(zhì)：
重慶分公司
重慶分公司
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. 創(chuàng)建著色器材質(zhì)進(jìn)行卷積計(jì)算，每四個(gè)像素顏色求平均值得到一個(gè)像素。描邊物體內(nèi)部是白色，外部是黑色，物體邊緣處會(huì)得到灰色?；疑褪俏覀兯璧倪吙颉?/p>
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是計(jì)算卷積的canvas寬度和高度，為了讓邊框更平滑，可以設(shè)置為原來(lái)canvas的兩倍。color是邊框顏色，thickness是邊框粗細(xì)。
注意，要將材質(zhì)transparent設(shè)置為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. 創(chuàng)建著色器材質(zhì)，將邊框疊加到原來(lái)的圖片上。由于FXAA比較復(fù)雜，這里使用簡(jiǎn)單的疊加方法。
著色器材質(zhì)：
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要設(shè)置為true，否則會(huì)把原來(lái)的圖片覆蓋掉。
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;
}得到最終效果圖：
以上是“three.js利用卷積法實(shí)現(xiàn)物體描邊效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
