需求是鼠标滑过物体的时候物体显示为描边选中状态
方案一：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 <dithering_fragment>',
'#include <dithering_fragment>\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()
存在的问题是，并不是完全的描边效果，如下图，不过效率什么的应该不用担心了：
最终方案：outlinepass+ WebGLMultisampleRenderTarget
无奈上面几种都无法满足我对美术效果的期望，这里深度修改了outlinepass源码，结合webgl2的多采样渲染，最终实现了如下图效果：
简述一下实现方案：结合WebGLMultisampleRenderTarget和outlinepass后基本抗锯齿的问题得到了解决，甚至都不需要fxaa，颜色太暗的问题则需要加亮环境光，这部分完成后如果背景为黑色，就还能看，但背景为白色的时候，就需要去修改outlinepass的源码混合通道为NormalBlending，需要一定的shader基础。
