订单独立透明度和混合不透明和半透明对象层次结构

时间:2016-08-11 09:51:03

标签: three.js

我们使用three.js作为我们WebGL引擎的基础,到目前为止,我们只在项目中使用传统的alpha混合和后向排序(我们定制了一点以匹配所需的行为)。 / p>

目标:现在我们的目标是在this论文中结合McGuire和Bavoil提出的与订单无关的透明度算法,试图摆脱 在复杂场景中排序和传统alpha混合的常见问题。我在一个小型的,基于three.js的原型中毫不费力地工作。

问题:我们在WebGL引擎中遇到的问题是我们正在处理由不透明和半透明对象组成的对象层次结构,这些对象当前被添加到同一场景中,因此有三个.js将处理转换更新。然而,这是一个问题,因为为了使上述算法起作用,我们需要渲染一个或多个FBO(后者由于缺乏对three.js r79中的MRT的支持)来计算累积和揭示并最终混合前缓冲对象先前已经渲染过的结果,事实上,这就是我在工作原型中所做的。

我知道three.js已经对两种类型的对象分别进行了传递,但是我不知道有什么方法可以影响渲染目标three.js渲染(render(.., .., rt,..)不适用)以及如何修改我需要的其他管道状态。如果将混合层次结构添加到单个场景中,我不知道如何告诉three.js我的片段应该在哪里结束,此外,我需要在透明传递过程中重复使用深度缓冲区中的深度缓冲区测试已启用但深度写入已禁用。

解决方案A :现在,第一个明显的答案是简单地设置两个场景并分别渲染不透明和半透明对象,根据需要选择渲染目标,最后根据需要进行合成。 / p>

除非我们必须手动或至少手动触发所有转换计算以实现正确的分层行为,否则这样就可以了。到目前为止,这样做似乎是最可行的。

解决方案B :我们可以渲染场景两次,并将所有不透明和透明材质visible标记设置为false,具体取决于当前正在进行的传递。

这是解决方案A 的变体,但是只有一个场景而不是两个场景。这将使我们无需手动转换计算,但我们必须每次通过改变所有对象的材料 - 不是我最喜欢的,但绝对值得考虑。

解决方案C :修补three.js以便更好地控制渲染过程。

这里最简单的方法是告诉渲染器调用render()时要渲染的对象,或者引入renderOpaque()renderTransparent()之类的东西。

另一种方法是以某种方式定义渲染过程的概念,然后根据该过程的信息进行渲染(例如,哪些对象,渲染目标,如何配置管道等等)。

有人知道其他易于获取的方法吗?我错过了什么,或者我觉得这里太复杂了?

0 个答案:

没有答案