Three.js实现3D场景中被遮挡物体的可视化提示效果咨询

以下方案均无重后处理开销，可在移动端稳定运行，支持自定义效果参数：

方案1：双Pass高亮法（优先推荐，性能最优） #

仅通过Avatar本身的两个渲染批次实现，仅增加1次DrawCall，几乎无额外性能消耗：

• 第一层为遮挡提示层：使用简单的MeshBasicMaterial这类无光照计算的材质，关闭深度测试、开启透明，可自定义颜色、透明度，还可将几何体轻微放大10%~20%，实现外描边的视觉效果。该层会永远在所有不透明物体上层渲染。
• 第二层为正常Avatar层：使用你原本的Avatar材质，走正常深度测试逻辑。
  当Avatar未被遮挡时，正常层会完全盖住下方的提示层，视觉上无任何变化；当Avatar被场景物体遮挡时，正常层无法通过深度测试，提示层就会露出，直观标识Avatar的位置。
  示例代码（Three.js环境）：

import { Mesh, MeshBasicMaterial, MeshStandardMaterial, DoubleSide } from 'three'

// 遮挡提示层配置，可自定义所有参数
const occludedMaterial = new MeshBasicMaterial({
  color: 0xff3d00, // 自定义提示颜色
  transparent: true,
  opacity: 0.7, // 自定义透明度
  depthTest: false,
  side: DoubleSide
})
// 放大几何体实现描边粗细调整，缩放值越大描边越粗
const occludedMesh = new Mesh(
  avatarGeometry.clone().scale(1.15, 1.15, 1.15),
  occludedMaterial
)
avatar.add(occludedMesh)

// 正常Avatar层，使用原项目的材质即可
const normalMaterial = new MeshStandardMaterial({
  color: 0x2ecc71
})
const normalMesh = new Mesh(avatarGeometry, normalMaterial)
avatar.add(normalMesh)

适配说明：如果场景存在半透明物体，只需将半透明物体的渲染队列优先级设置为低于Avatar两层的渲染队列，即可避免半透物体遮挡提示层的问题。

方案2：模板缓冲标记法（适合复杂效果需求） #

如果需要实现更特殊的遮挡提示效果（比如网格纹理、流动光效等），可使用模板缓冲实现，性能开销同样极低：

• 首先渲染所有场景不透明物体，写入深度缓冲
• 开启模板缓冲，渲染Avatar到模板缓冲，标记出Avatar所在的区域
• 关闭深度测试，在整个视口渲染你需要的提示效果，仅在模板标记的区域生效
• 最后正常渲染未被遮挡的Avatar层
  该方案支持任意自定义的遮挡提示样式，全程无全屏后处理开销。

性能优化提示 #

如果必须使用后处理实现轮廓效果，可通过两个操作大幅降低开销：

1. 将后处理的渲染分辨率降低到屏幕分辨率的1/2甚至1/3
2. 仅提取Avatar的纯色通道做轮廓计算，跳过全场景的颜色采样计算

内容的提问来源于stack exchange，提问作者Liron Toledo