如何降低3D场景中被视线遮挡的几何体元素的不透明度

核心逻辑是通过深度测试的结果区分线条的可见/遮挡状态，分两个渲染Pass分别处理不同状态的线条样式：

• 第一Pass：开启深度测试，正常渲染未被遮挡的teal色线条，不透明度设为100%，开启深度写入
• 第二Pass：调整深度测试规则为大于场景深度即通过，渲染被屋顶遮挡的线条，不透明度设为你需要的低值（推荐20%~30%），关闭深度写入避免影响其他元素渲染

Three.js 实现代码示例 #

// 可见区域线条材质
const visibleLineMaterial = new THREE.LineBasicMaterial({
  color: 0x008080, // teal色对应色值
  transparent: true,
  opacity: 1,
  depthTest: true,
  depthWrite: true
})
// 被遮挡区域线条材质
const occludedLineMaterial = new THREE.LineBasicMaterial({
  color: 0x008080,
  transparent: true,
  opacity: 0.3,
  depthTest: false,
  depthWrite: false
})
// 线条对象同时挂载两个材质，底层先渲染半透明遮挡层，上层渲染可见层
const line = new THREE.Line(lineGeometry, [occludedLineMaterial, visibleLineMaterial])

Unity 实现Shader示例 #

Shader "Custom/TealOcclusionLine"
{
  SubShader
  {
    Tags { "RenderType"="Transparent" "Queue"="Geometry+1" }
    LOD 100

    // 渲染可见部分
    Pass
    {
      ZTest LEqual
      ZWrite On
      Color (0,0.5,0.5,1)
    }
    // 渲染被遮挡的半透明部分
    Pass
    {
      ZTest Greater
      ZWrite Off
      Blend SrcAlpha OneMinusSrcAlpha
      Color (0,0.5,0.5,0.3)
    }
  }
}

将上述Shader创建为材质后挂载到你的线条渲染组件即可生效，其他引擎（如Unreal、Blender渲染）也可以参考双Pass调整深度测试的逻辑实现相同效果。

效果示例 #

注意事项 #

• 线条的渲染队列需要设置为晚于房屋实体模型，保证深度测试时能正确读取到屋顶等遮挡物的深度值
• 半透明遮挡层不要开启深度写入，避免干扰其他场景元素的渲染判断

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