Autodesk Forge：覆盖场景中的透明对象变得不透明答案

【问题标题】：Autodesk Forge: Transparent objects in overlay scenes turn opaqueAutodesk Forge：覆盖场景中的透明对象变得不透明
【发布时间】：2020-10-14 16:31:37
【问题描述】：

我有一个带有一些半透明自定义几何图形的 Forge 场景。升级到 Forge 查看器的 7.21.0 版本后，我们必须将自定义几何图形移动到覆盖场景中，如 Forge guide 中所述。导航时生成的几何图形是半透明的，但在停止大约半秒后变为不透明。

此代码可用于在http://lmv.ninja.autodesk.com 上进行测试。在此示例中，您可以透过绿色球体看到蓝色球体，但是一旦将鼠标悬停在飞机上（我测试了玩具飞机模型），就无法看到。

const geometry = new THREE.SphereGeometry(20,32,32)
const material = new THREE.MeshBasicMaterial({
        color: '#00ff00',
        transparent: true,
        opacity: 0.5,
    })
const sphere1 = new THREE.Mesh(geometry, material)
sphere1.position.y = 90
NOP_VIEWER.overlays.addScene('custom-scene')
NOP_VIEWER.overlays.addMesh(sphere1, 'custom-scene')

const material2 = new THREE.MeshBasicMaterial({color: '#0000ff'})
const sphere2 = new THREE.Mesh(geometry.clone(), material2)
sphere2.position.y = 60

NOP_VIEWER.overlays.addMesh(sphere2, 'custom-scene')

如何使几何图形保持透明？

我已尝试设置useIdBufferSelection: true，正如建议的here。

在材质中设置depthTest: false 或depthWrite: false 可修复透明度问题，但（不出所料）会破坏渲染顺序，因此靠近的物体可能会出现在远处的物体后面。

【问题讨论】：

我在 lmv.ninja.autodesk.com 的开发者控制台中使用“Toy Plane”模型尝试了您的代码。球体将在座椅顶盖的中间结束，对我来说它保持透明。那里也适合你吗？
@AdamNagy 感谢您的回复。恐怕我以前没有使用过 lmv.ninja.autodesk.com - 我如何掌握现场？
使用可以使用NOP_VIEWER forge.autodesk.com/blog/do-simple-viewer-api-tests-quickly
好的，这也适用于我。我想我必须进行更多调查才能制作一个可重复的示例。谢谢。
@AdamNagy 透明度问题似乎只与覆盖场景中的其他几何体有关。我将代码更新为在 lmv.ninja.autodesk.com 上显示的内容。

标签： autodesk-forge autodesk-viewer

【解决方案1】：

背景：
问题是 THREE.js 不能很好地处理重叠透明度。 ForgeViewer 有一个特殊的多通道渲染器，它首先渲染漫反射对象，然后混合重叠的透明对象。它不如 OIT 准确，但已经足够了。

很遗憾，viewer.impl.scene 和 impl.sceneAfter 和 overlay 都使用标准的 THREE.js 遍历器，它没有'不处理重叠的透明物体......但是！ ....

您可以尝试以下解决方法：

使用 LMV.SceneBuilder 绘制网格（将三个.js 网格对象提升为 LMV 几何缓冲区对象）(https://forge.autodesk.com/blog/custom-models-forge-viewer)
强制对您的three.js 透明材质进行“双面”渲染。仍然不完美，但值得一试

【讨论】：

谢谢。我在codepen.io/petrbroz/pen/gOaaoxz 测试了 SceneBuilder 示例。我用transparent: true 和opacity: 0.5 更改了红色框的材质，它部分起作用了。我可以通过它看到其他自定义几何图形，但看不到房子。知道如何使它工作吗？我还尝试启用双面渲染，这对我来说没有任何改变。