Three.js中OutlinePass与后处理冲突问题

需求是鼠标滑过物体的时候物体显示为描边选中状态

方案一：OutlinePass

首先尝试了官方的OutlinePass来添加外边框选中功能
这是没加OutlinePass的效果：

这是使用OutlinePass后的，描边是可以了，但是锯齿严重，且模型发黑：

深入调研了一下发现是OutlinePass与renderer.outputEncoding = THREE.sRGBEncoding冲突，不支持sRGBEncoding，这个问题尚且还能通过一些材质参数调节能调到原来的色调，但是OutlinePass还跟下面的抗锯齿antialias: true冲突。

const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    antialias: true
})

本以为是后处理跟这些冲突，结果发现不是后处理的问题，就只是OutlinePass的问题。

继续深入调研了一下，发现OutlinePass根本就是个深坑，完全无法用，网上能搜到的方案也仅仅是再加一层fxaa，我试过了，即便再加一层ssaa都达不到antialias: true的效果，所以OutlinePass的方案就完全放弃了。
这是OutlinePass参考代码：

import './style.css'
import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js'
import {DRACOLoader} from 'three/examples/jsm/loaders/DRACOLoader.js'
import {EffectComposer} from 'three/examples/jsm/postprocessing/EffectComposer.js';
import {RenderPass} from 'three/examples/jsm/postprocessing/RenderPass.js';
import {OutlinePass} from 'three/examples/jsm/postprocessing/OutlinePass.js';

const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}

const canvas = document.querySelector('canvas.webgl')

const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    antialias: true
})
renderer.outputEncoding = THREE.sRGBEncoding
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
const scene = new THREE.Scene()
scene.background = new THREE.Color(0xF5F5F5)
let camera = new THREE.PerspectiveCamera(10, sizes.width / sizes.height, 0.1, 100)
camera.position.z = -12
scene.add(camera)
const light = new THREE.AmbientLight(0xffffff);
scene.add(light);

const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true

const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath('draco/')
const gltfLoader = new GLTFLoader()
gltfLoader.setDRACOLoader(dracoLoader)

window.addEventListener('resize', () => {
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight

    camera.aspect = sizes.width / sizes.height;
    camera.updateProjectionMatrix()

    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

    composer.setSize(sizes.width, sizes.height);
    outlinePass.resolution.set(sizes.width, sizes.height);
})

let model;
controls.model = model;

gltfLoader.load(
    'Skeleton-processed.glb',
    (gltf) => {
        model = gltf.scene
        scene.add(model)
        model.traverse(function (child) {
            if (child.isMesh) {
                child.frustumCulled = false
                // child.texture.encoding = THREE.sRGBEncoding;
                // child.material.color.convertLinearToSRGB();
                // child.material.emissive.convertLinearToSRGB();
                child.material.emissive = new THREE.Color(0xffffff); // 设置发光颜色
                child.material.emissiveIntensity = 0.16; // 设置发光强度
            }
        });
    }
)

// add after defining renderer
const composer = new EffectComposer(renderer);

const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);

const outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera);
composer.addPass(outlinePass);
outlinePass.visibleEdgeColor = new THREE.Color(0xffa522); // 设置橙色
outlinePass.edgeStrength = 5; // 将描边的强度设置为 0，即无发光效果
outlinePass.edgeGlow = 0; // 将描边的发光强度设置为 0
outlinePass.usePatternTexture = false; // 禁用纹理以获得纯线的效果

const tick = () => {
    controls.update()
    // renderer.render(scene, camera)
    composer.render()
    window.requestAnimationFrame(tick)
}
tick()


// Add the following to the mouseover event:
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

window.addEventListener('mousemove', (event) => {
    event.preventDefault();

    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

    raycaster.setFromCamera(mouse, camera);

    const intersects = raycaster.intersectObjects(scene.children, true);

    if (intersects.length > 0) {
        const selectedObject = intersects[0].object;
        outlinePass.selectedObjects = [selectedObject];
    } else {
        outlinePass.selectedObjects = [];
    }
}, false);

---

方案二：Sobel算子

转头想起图像处理的Sobel算子也可以用来实现描边，折腾半天改了示例项目的shader才实现。
效果是有了，但是锯齿严重多了，本想着反正选中也就一个物体，锯齿就锯齿吧，结果傻眼了，Sobel是基于全屏计算的，无法只描边一个物体。要只显示一个选中的物体，还得折腾，得新开一个renderer，效率就更不用说了，后面肯定很多坑，所以也放弃了这个方案。

参考代码：

import './style.css'
import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js'
import {DRACOLoader} from 'three/examples/jsm/loaders/DRACOLoader.js'
import {EffectComposer} from 'three/examples/jsm/postprocessing/EffectComposer.js';
import {RenderPass} from 'three/examples/jsm/postprocessing/RenderPass.js';
import {ShaderPass} from 'three/examples/jsm/postprocessing/ShaderPass.js';
import {SobelOperatorShader} from 'three/examples/jsm/shaders/SobelOperatorShader.js';


const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}

const canvas = document.querySelector('canvas.webgl')

const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    antialias: true
})
// renderer.outputEncoding = THREE.sRGBEncoding
renderer.setSize(sizes.width, sizes.height)
// renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
const scene = new THREE.Scene()
scene.background = new THREE.Color(0xF5F5F5)
let camera = new THREE.PerspectiveCamera(10, sizes.width / sizes.height, 0.1, 100)
camera.position.z = -12
scene.add(camera)
const light = new THREE.AmbientLight(0xffffff);
scene.add(light);

const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true

const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath('draco/')
const gltfLoader = new GLTFLoader()
gltfLoader.setDRACOLoader(dracoLoader)

window.addEventListener('resize', () => {
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight

    camera.aspect = sizes.width / sizes.height;
    camera.updateProjectionMatrix()

    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

    composer.setSize(sizes.width, sizes.height);
    composer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

})

let model;
controls.model = model;

gltfLoader.load(
    'Skeleton-processed.glb',
    (gltf) => {
        model = gltf.scene
        scene.add(model)
        model.traverse(function (child) {
            if (child.isMesh) {
                child.frustumCulled = false
                // child.texture.encoding = THREE.sRGBEncoding;
                // child.material.color.convertLinearToSRGB();
                // child.material.emissive.convertLinearToSRGB();
            }
        });
    }
)

const composer = new EffectComposer(renderer);
composer.setSize(sizes.width, sizes.height);
composer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);


const tick = () => {
    controls.update()
    // renderer.render(scene, camera)
    composer.render()
    window.requestAnimationFrame(tick)
}
tick()

const outlinePass = new ShaderPass(SobelOperatorShader);
// outlinePass.hiddenEdgeColor.set(0xff0000); // 设置描边的颜色
// outlinePass.visibleEdgeColor.set(0x000000); // 设置背景色

outlinePass.uniforms.resolution.value.x = sizes.width;
outlinePass.uniforms.resolution.value.y = sizes.height;
composer.addPass(outlinePass);

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

window.addEventListener('mousemove', (event) => {
    event.preventDefault();

    mouse.x = (event.clientX / sizes.width) * 2 - 1;
    mouse.y = -(event.clientY / sizes.height) * 2 + 1;

    raycaster.setFromCamera(mouse, camera);

    const intersects = raycaster.intersectObjects(scene.children, true);

    if (intersects.length > 0) {
        const selectedObject = intersects[0].object;
        outlinePass.selectedObjects = [selectedObject];
    } else {
        outlinePass.selectedObjects = [];
    }
});

需要同时修改import {SobelOperatorShader} from 'three/examples/jsm/shaders/SobelOperatorShader.js';的shader最后输出颜色的步骤：

import {
    Vector2
} from 'three';

/**
 * Sobel Edge Detection (see https://youtu.be/uihBwtPIBxM)
 *
 * As mentioned in the video the Sobel operator expects a grayscale image as input.
 *
 */

const SobelOperatorShader = {

    uniforms: {

        'tDiffuse': {value: null},
        'resolution': {value: new Vector2()}

    },

    vertexShader: /* glsl */`

        varying vec2 vUv;

        void main() {

            vUv = uv;

            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

        }`,

    fragmentShader: /* glsl */`

        uniform sampler2D tDiffuse;
        uniform vec2 resolution;
        varying vec2 vUv;

        void main() {

            vec2 texel = vec2( 1.0 / resolution.x, 1.0 / resolution.y );

        // kernel definition (in glsl matrices are filled in column-major order)

            const mat3 Gx = mat3( -1, -2, -1, 0, 0, 0, 1, 2, 1 ); // x direction kernel
            const mat3 Gy = mat3( -1, 0, 1, -2, 0, 2, -1, 0, 1 ); // y direction kernel

        // fetch the 3x3 neighbourhood of a fragment

        // first column

            float tx0y0 = texture2D( tDiffuse, vUv + texel * vec2( -1, -1 ) ).r;
            float tx0y1 = texture2D( tDiffuse, vUv + texel * vec2( -1,  0 ) ).r;
            float tx0y2 = texture2D( tDiffuse, vUv + texel * vec2( -1,  1 ) ).r;

        // second column

            float tx1y0 = texture2D( tDiffuse, vUv + texel * vec2(  0, -1 ) ).r;
            float tx1y1 = texture2D( tDiffuse, vUv + texel * vec2(  0,  0 ) ).r;
            float tx1y2 = texture2D( tDiffuse, vUv + texel * vec2(  0,  1 ) ).r;

        // third column

            float tx2y0 = texture2D( tDiffuse, vUv + texel * vec2(  1, -1 ) ).r;
            float tx2y1 = texture2D( tDiffuse, vUv + texel * vec2(  1,  0 ) ).r;
            float tx2y2 = texture2D( tDiffuse, vUv + texel * vec2(  1,  1 ) ).r;

        // gradient value in x direction

            float valueGx = Gx[0][0] * tx0y0 + Gx[1][0] * tx1y0 + Gx[2][0] * tx2y0 +
                Gx[0][1] * tx0y1 + Gx[1][1] * tx1y1 + Gx[2][1] * tx2y1 +
                Gx[0][2] * tx0y2 + Gx[1][2] * tx1y2 + Gx[2][2] * tx2y2;

        // gradient value in y direction

            float valueGy = Gy[0][0] * tx0y0 + Gy[1][0] * tx1y0 + Gy[2][0] * tx2y0 +
                Gy[0][1] * tx0y1 + Gy[1][1] * tx1y1 + Gy[2][1] * tx2y1 +
                Gy[0][2] * tx0y2 + Gy[1][2] * tx1y2 + Gy[2][2] * tx2y2;

        // magnitute of the total gradient

            float G = sqrt( ( valueGx * valueGx ) + ( valueGy * valueGy ) );

            //gl_FragColor = vec4( vec3( G ), 1 );
            // gl_FragColor = vec4( vec3( G > 0.5 ? 1.0 : 0.0 ), 1 );
            vec4 originalColor = texture2D(tDiffuse, vUv);
            vec4 outlineColor = vec4(1.0, 0.0, 0.0, 1.0);  // 描边的颜色，这里使用红色
        
            
    // 判断当前像素是否属于描边区域，如果是则显示描边颜色，否则显示原始颜色
    vec4 finalColor = mix(originalColor, outlineColor, smoothstep(0.5, 0.51, G));

    gl_FragColor = finalColor;
        }`

};

export {SobelOperatorShader};

---

方案三：菲涅尔

想起来用菲涅尔也可以实现接近描边的选中效果，虽然不那么完美吧，可以进一步尝试优化优化，代码如下：

import './style.css'
import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js'
import {DRACOLoader} from 'three/examples/jsm/loaders/DRACOLoader.js'

//region 场景初始化
const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}

const canvas = document.querySelector('canvas.webgl')

const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    antialias: true
})
renderer.outputEncoding = THREE.sRGBEncoding
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

const scene = new THREE.Scene()
scene.background = new THREE.Color(0xF5F5F5)
let camera = new THREE.PerspectiveCamera(10, sizes.width / sizes.height, 0.1, 100)
camera.position.z = -12
scene.add(camera)
const light = new THREE.AmbientLight(0xffffff, 1);
scene.add(light);

const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true


window.addEventListener('resize', () => {
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight

    camera.aspect = sizes.width / sizes.height;
    camera.updateProjectionMatrix()

    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

})
//endregion

//region 模型加载
const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath('draco/')
const gltfLoader = new GLTFLoader()
gltfLoader.setDRACOLoader(dracoLoader)
let model;
controls.model = model;
gltfLoader.load(
    'Skeleton-processed.glb',
    (gltf) => {
        model = gltf.scene
        scene.add(model)
        model.traverse(function (child) {
            if (child.isMesh) {
                child.frustumCulled = false
                child.updateMatrixWorld(true)
            }
        });
    }
)
//endregion

//region 选中状态射线检测
const raycaster = new THREE.Raycaster();
let selectedObject = null;
window.addEventListener('mousemove', (event) => {
    camera.updateMatrixWorld(true)
    raycaster.setFromCamera({
        x: (event.clientX / sizes.width) * 2 - 1,
        y: -(event.clientY / sizes.height) * 2 + 1
    }, camera);
});
//endregion

//region 选中状态下的材质
let uniformsRim = {
    rimColor: {value: new THREE.Color(0x2200ee)},
    rimPower: {value: 1.0},
}
const rimMaterial = new THREE.MeshStandardMaterial();
rimMaterial.onBeforeCompile = function (shader) {
    shader.uniforms.rimColor = uniformsRim.rimColor;
    shader.uniforms.rimPower = uniformsRim.rimPower;
    shader.fragmentShader = /* glsl */`
        uniform vec3 rimColor;
        uniform float rimPower;
            ${shader.fragmentShader.replace(
        '#include ',
        '#include \n\tfloat dotNV = 1.0-saturate( dot( normal, geometry.viewDir ) );\n\tgl_FragColor.rgb = mix(gl_FragColor.rgb, rimColor, rimPower * dotNV);'
    )}
    `;
    this.needsUpdate = true;
};

let lastMaterial;
//endregion
const update = () => {

    //region 鼠标滑过时显示选中状态
    const intersects = raycaster.intersectObjects(scene.children, true);
    if (intersects.length > 0) {

        console.log(intersects)
        let target = intersects[0].object;

        if (selectedObject !== target) {
            if (selectedObject && lastMaterial) {
                selectedObject.material = lastMaterial;
            }

            selectedObject = target;
            lastMaterial = selectedObject.material;
            rimMaterial.map = selectedObject.material.map;
            selectedObject.material = rimMaterial;
        }
    } else if (selectedObject && lastMaterial) {
        selectedObject.material = lastMaterial;
        selectedObject = null;
        lastMaterial = null;
    }
    //endregion

    controls.update();
    renderer.render(scene, camera);
    window.requestAnimationFrame(update);
};

update()

存在的问题是，并不是完全的描边效果，如下图，不过效率什么的应该不用担心了：