启用混合时如何避免与背景混合答案

【问题标题】：How to Avoid Blending with Background When Enabling Blending启用混合时如何避免与背景混合
【发布时间】：2017-12-15 23:34:12
【问题描述】：

我正在尝试实现 potree 为实现混合 splats 所做的工作。在this example中，当禁用EDL并将Appearance文件夹中的quality选项切换为Splats时，会显示混合效果。

我的问题是如何避免这些点与背景混合。当我在自己的项目中启用混合时，这些点会与我的背景颜色混合，看起来不太好。避免与背景混合的优雅解决方案是什么？

编辑：

您可以看到这些点与白色背景融为一体。我正在使用自定义着色器来设置 alpha 值。在这张图片中，alpha 值为 0.5。

【问题讨论】：

你能举个例子来说明你在项目中看到的东西吗？另外，您是否使用标准材质来表示您的点，或者您是否有自定义着色器？
所以你想让它们相互融合，而不是与背景融合？
@TheJim01 是的。我不希望这些点与背景混合。
@Rabbid76 我在three.js中使用NormalBlending。更改背景 alpha 值没有任何意义。最终颜色仅与源 alpha 值有关，与目标 alpha 值无关。

【解决方案1】：

Potree 使用更复杂的混合功能，需要 3 遍。

属性传递将属性值的加权总和输出到 rgb 通道，并将权重总和输出到 alpha 通道。每个点的权重 w 取决于到中心的距离。片段着色器的输出为：gl_FragColor = vec4(w * rgb, w)

标准化通道是一个屏幕空间后处理着色器，它将帧缓冲区中的每种颜色除以权重： gl_FragColor = vec4(weightedSumOfRGBs / sumOfWeights, 1.0)

最终结果是平滑混合的点，其过渡硬度取决于权重函数：

查看这篇论文以获得更详细的解释（第 4.2.2 章）：

或者这个算法的原始论文：

编辑：

此外，为避免看穿背景，请使用黑色和 alpha = 0 清除缓冲区，然后使用高质量的 3-pass splatting 算法渲染您的点，并在最后一步渲染背景。背景只会在没有渲染点的区域可见。

【讨论】：

我不确定这是否是问题的答案，但它肯定是一个很好的描述，即使它是抄袭。
@Rabbid76 我试图回答这个问题是如何在 potree 中完成的，而不是一个有适当引用的科学出版物。此外，我还链接到图像的来源。我从未见过有人期望在 stackoverflow 答案中出现“取自.. 的图像”。抄袭当然不是我的想法，或者图像 2 和 3 的自我抄袭。
@Markus 如何存储 sumOfWeights？在颜色缓冲区中，我只能存储 0.0-1.0 的值。
@K.Miao 您必须渲染到浮点纹理，该纹理不绑定到 0 到 1 的范围。这可能会有所帮助：github.com/potree/potree/blob/master/src/viewer/viewer.js#L2300 这是渲染目标的位置属性传递被初始化：github.com/potree/potree/blob/master/src/viewer/viewer.js#L2321 EDLRenderer 也做了一些稍微不同的事情，以避免看到背景。属性传递渲染到不同的帧缓冲区，EDL 传递从该 fbo 读取并将着色结果渲染到主 fbo，在背景上。