Three.js: 功能请求：屏幕空间反射

我唯一担心的是它在立体渲染中不能很好地工作，因此在 WebVR 中会很困难，但请不要认为我反对该功能:) :+1:

只需在 VR 中将其关闭即可。 许多昂贵的效果在 VR 中效果不佳。 UE4 甚至建议使用前向渲染而不是在 VR 环境中延迟渲染以提高速度。

没错，这就是为什么我不反对它。

我在研究反射映射的 React Native 实现时偶然发现了这里，屏幕空间反射非常适合非 VR 游戏。

THREE.Reflector适用于 VR ✌️
https://threejs.org/examples/webvr_sandbox.html

好的！

尽管即使在 Nightly 上我也会收到“未找到 VR”，但我会检查一下。

我的特殊问题（不是 OP 的）不是解决反射问题，而是如何创建 Three.js 原生对象，并在 ReactVR 的现有场景和渲染器中渲染它们。 我得到了不错的结果，唯一的问题是背景图像有点奇怪，所以反射看起来很奇怪 - 但正如预期的那样，React VR 为背景全景创建了一个由内而外的球体。 我还没有尝试过立方体贴图，但这可能会更好。

我在书的页面上已经结束了，所以我可能会保留现有的演示，但这看起来是一个很棒的技术。

我一直想更多地了解这种类型的效果，所以我尝试为它制作作曲家效果。 还有一些工作可以完成，但这是我根据 Kode80 的实现和 Morgan McGuire 的博客文章（sponza 场景需要一些加载）组合在一起的内容：

https://gkjohnson.github.io/threejs-sandbox/screenSpaceReflectionsPass/

接下来要做的一些事情是清理抖动伪影、光泽反射（使用模糊传递或 mip 贴图采样 + 深度贴图金字塔）和通过时间重投影的多次反弹。

如果有人真的对使用这种效果感兴趣，我很乐意与某人一起工作来进一步完善它！

@gkjohnson甜。 但是，您的场景可能太复杂了。 无论如何，您的演示似乎在很大程度上没有响应。 你能创建一个更简单的例子吗？ 此外，开关切换会很好。

@WestLangley

您的演示似乎在很大程度上没有响应

你能看到演示吗？ 屏幕可能会黑几秒钟左右，因为根据您的连接，Sponza 场景需要一点时间来下载。

如果它根本不起作用，我可以考虑创建一些更简单的东西——它适用于我的 Pixel 2，不过

开关切换会很好。

将“强度”滑块调低至 0 看起来与将其关闭相同，但光线跟踪仍在发生，因此如果这就是您要寻找的，那么在这种情况下不会有任何性能差异。

@gkjohnson 明白了。 在我的mac上，你的demo黑了一段时间，然后帧率是4。

@WestLangley这是一种非常依赖于分辨率的效果，因此如果您将窗口缩小，帧率可能会上升。 以较低的分辨率进行光线追踪，然后与全分辨率缓冲区合成将有助于使效果更具可扩展性，但我没有花时间对其进行优化。

@gkjohnson您将如何仅将其屏蔽到反射表面？ 如果我提高强度，一切都会开始反射，并且会出现一些非常刺耳的人工制品。

@bicubic目前没有考虑表面属性，但添加它的基本版本应该不会太难。 您可以根据材质的镜面反射/粗糙度属性淡化或模糊效果。

不幸的是，我目前没有使用这种效果，所以我没有特意添加这些其他功能。 不过，就像我之前提到的，如果有兴趣将它用于某些事情，我很乐意合作并完善效果！

您可以根据材质的镜面反射/粗糙度属性淡化或模糊效果。

能够将对象指定为反射/非反射会更有用。 目前一切都是反光的，包括窗帘和植物之类的东西。 理想情况下，在这个演示中，只有地板应该是反射的。

@looeee我同意这就是我所说的——抱歉，如果我不清楚。 必须将材质属性写入目标，以便在屏幕空间中对它们进行采样，并用于淡化或模糊给定像素处的反射。 这也将允许粗糙度贴图等影响反射。

我很想看到这成为three.js默认功能的一部分。

有很多这样的东西让你想知道延迟渲染器架构是否也应该成为默认产品的一部分。 特别是对于 webgl2.0

@gkjohnson明白了，这是有道理的。 然而，似乎仍然需要某种面具来防止人工制品。 在您的示例中，您希望窗帘和植物上的反射为零。 根据这些材料的属性衰减到零是否可以正常工作？

@bicubic
我同意我也很想看到一个专门的延迟渲染路径。 使用 WebGL2 和多个渲染纹理，它更加可行。

@looee
这取决于您想要的效果，但使用我描述的方法，渲染的粗糙度值将有效地充当场景的蒙版，粗糙度值为 1 表示“在此像素上不渲染反射”，值为 0 表示“渲染完整”在这个像素上的反射”。 介于两者之间的值将以部分强度呈现反射。 演示中的intensity滑块显示了效果（但显然是针对整个场景而不是每个像素）。

另一种方法是根据粗糙度值模糊反射像素以模拟漫反射表面反射光。 所以窗帘仍然会有一些反射，只是不尖锐。 例如，这将允许窗帘被明亮的蓝色地板照亮。

粗糙度值为 1 表示“在此像素处不呈现反射”，值为 0 表示“在此像素处呈现全反射”。

似乎这可以很好地工作。 Unreal 使用“最大粗糙度”参数并建议将其设置为 0.8。

哎呀

@gkjohnson
这非常有趣，我喜欢你的结果，我现在正在将它集成到 WebGL2/MRT 渲染器中，并将对其进行试验。 您是否注意到您在每次渲染调用中都创建了一个材质？
this.scene.overrideMaterial = this.createPackedMaterial();

@Fyrestar谢谢！ 而我没有注意到这一点！ 但就像我说的，我认为还有一些清理工作要做，而且性能可能还没有达到超级可用的地步。

无论如何，这些类型的效果确实更适合延迟渲染器而不是转发器（大概就像您正在处理的那样）。 我一直想把这个和其他一些高质量的效果放在一起，但我倾向于等到合适的延迟渲染器可用，然后再投入更多时间。 您正在使用的延迟/MRT 渲染器在 Github 上可用吗？

我现在已经集成了它，而 SSR 传递输出到较低分辨率的 RT，基本上只有反射，然后使用深度模糊将其与主图像组合以消除/减少错误。 我将粗糙度值渲染为属性 RT 并再次使用它来确定模糊的强度，其中 1 不可见以丢弃片段。

模糊还消除了在距离上变得更强的误差。 一个问题似乎又是透明度和部分覆盖其他对象导致剪辑其他反射的对象。 我真的需要阅读更多关于这项技术的信息。

我将它与三个顶部的自定义引擎一起使用，而不是使用三个的合成器。 三实际上已经准备好在当前的 WebGLRenderer 中使用 WebGL2 上下文，我已经在那里添加了 MRT。 我想我很快就会把它放在github上。 尽管如此，它仍然需要为背面深度缓冲区再次渲染场景，但这并不太昂贵。

@火星
嘿，有什么消息吗？

我自己写了一个pr 到three.js ，但现在只支持OrthographicCamera，我正在尝试支持PerspectiveCamera。
演示Demo2

现在可以支持 PerspectiveCamera。 https://github.com/mrdoob/three.js/pull/20156

演示

这很漂亮，也很有成就感。 在我的机器上它很慢——我在 1920x1080 下得到 5fps。 你的实现和 Sketchfab 的有什么区别？ 我怀疑如果我们知道不同之处，我们就会知道如何优化你的......

@bhouston谢谢！

现在场景中的一切都是反射的，但在大多数实际项目中不需要它。
我会添加一些类似IntensityMap的属性或者使用现有的Roughness Metalness信息，结合距离衰减，在值为0的像素点直接终止计算，我认为这样会大大提高fps。
也可随机选取部分反射像素。

我曾尝试查看 Sketchfab 的代码，但失败了。 我会再试一次，但我觉得希望不大。 谁有Sketchfab的代码，请分享一下，谢谢！

- - - 编辑 - - -
另外，Sketchfab 的展示窗口默认不是全屏的，没有操作就停止渲染。
如果全屏并保持旋转，即使是简单的场景也会有很高的gpu使用率。

@gonnavis该示例的着色器代码应该可以通过 Spector.js Chrome 扩展程序查看。

只是玩弄 Sketchfab 我可以看到他们正在改变他们的 SSR 分辨率并对其进行改进。 如果他们逐步跳过 3 到 5 个质量级别，我不会感到惊讶。 这确保了交互式帧速率，但它在静态时会优化到完美。

这确保了交互式帧速率，但它在静态时会优化到完美。

缺点是当相机停止移动并切换质量级别时会出现明显的跳跃。 在某些场景中它比其他场景更明显。 这是一个非常明显的地方。

编辑：他们做的不仅仅是反射 - 似乎灯光，阴影，反射，也许纹理分辨率逐渐增强。 观察这个场景后墙上的光/影。

当我在上面试验 SSRR 时，我在这里大量引用了 Morgan Mcguire 的文章，其中解释了 Sketchfab 可能正在使用的一些技术。

具体来说，可以增加像素步幅，以便对更少的像素像素进行采样，这可以与常规的每像素抖动相结合，因此同级像素在步进时“跳过”不同的深度样本。 如果光线步幅足够高，您可以在深度缓冲区中与某物相交后在末尾添加二分搜索，以找到光线首先击中的像素。 尽早返回不具有反射性的片段可能会像您已经提到的@gonnavis 一样有所帮助。

我还尝试了对较低分辨率的 raymarch 进行深度和法线感知的高档化，但我从未对它的外观感到满意。 我认为游戏中的这种技术可以从可用分辨率通常被 2 整除的事实中受益匪浅，这使得高档更简单。

不过，我很好奇 Sketchfab 如何处理基于反射距离模糊的粗糙反射。 我已经看到 Godot 引擎在基于光线距离和表面粗糙度的半径后进行模糊处理，但这会导致我在这里看到的伪影。 当我有机会时，我将不得不使用 Spector.js（感谢 @WestLangley 的提示！）。 最初发布的 Frostbite 论文@bhouston建议在光线行进时使用深度金字塔，但在 webgl1（也许是 2？）中生成它可能会很痛苦。

看起来不错@gonnavis！ 很高兴看到它可以进入图书馆。

@WestLangley谢谢！ 但是当我在 Sketchfab 上使用 Spector.js 时，我得到“没有检测到带有 gl 命令的帧。尝试移动相机。” 错误。

我怀疑SSRPass经过我之前所说的优化后，Sketchfab的性能仍然会显着领先。 特别是在@bhouston @looeee提到的连续渲染和没有降级策略的情况下。 我什至觉得，如果不谈实现细节，这个SSRPass的核心概念可能已经是最优解了。

@gkjohnson感谢您的信息和支持！ 我会不断改进。

@gonnavis

我推荐 Safari 的图形选项卡：

如果您使用 Linux，您可以使用 Epiphany（又名 Gnome Web）：
https://webkit.org/downloads/

我不认为有任何适用于 Windows 的 WebKit 版本......

@mrdoob谢谢！ 虽然我主要使用 Windows，但如果需要，我会在 Mac 上尝试。

但是我想知道是否允许将Sketchfab的代码上传到开源库，如果发现任何有用的东西例如glsl函数？

这个SSRPass的结构是基于three.js SSAOPass ，demo场景使用了three.js webgl_shading_physical example ，key pointToLineDistance函数来自wolfram.com ，其他主要是我自己写的（当然是基于很多其他以前的经验，尤其是其他三个.js 示例）。 我认为这些都没有任何问题，但是否与 Sketchfab 的代码相同？

谢谢！ 但是当我在 Sketchfab 上使用 Spector.js 时，我得到“没有检测到带有 gl 命令的帧。尝试移动相机。” 错误。

滚动鼠标以缩放相机。 这应该足以触发Spector。

此外，在您的示例中使用不需要渲染循环的静态场景。 目前，帧率太低，无法接受。

@WestLangley在这个场景中成功，谢谢！

请不要发布 Sketchfab 的代码。 我只是建议我们理解
他们的技术。 我们可以在不共享他们的代码的情况下做到这一点。 你也
不能从他们的代码中复制任何内容，这将违反版权。

2020 年 8 月 25 日，星期二，上午 6:21，Vis [email protected]写道：

@WestLangley https://github.com/WestLangley在这个场景中成功
https://sketchfab.com/3d-models/iron-man-helmet-captain-america-shield-endgame-02556e341dd84fa5b9ef92c5eeeb3287 ，
谢谢！

—
你收到这个是因为你被提到了。
直接回复本邮件，在GitHub上查看
https://github.com/mrdoob/three.js/issues/8248#issuecomment-679939119 ，
或取消订阅
https://github.com/notifications/unsubscribe-auth/AAEPV7OEK245U5EF35YTZQDSCOGBPANCNFSM4B4V62SQ
.

——
本·休斯顿，首席技术官
电话：+1-613-762-4113
[email protected]
加拿大渥太华
ThreeKit可视化平台：3D、2D、AR、VR
http://https//threekit.com/

@bhouston好的，仅供参考。

我什至经常觉得，在得到一些灵感后，继续看别人的论文和代码比自己写更难，尤其是在不同的环境中。

比如这次主要是受了这个tut 的启发，但是一开始就很难看清楚文字的意思，而且因为他使用的坐标系不同，不知道怎么运行. cxx 文件，所以我只读了一点文字，几乎不读代码。 所以最后，对我帮助最大的两张图片imgA imgB 。

添加一些演示。

演示， DEMO2， Demo3， SelectiveDemo， OrthographicDemo。

受到@gonnavis 的启发，我终于在几年前发布的 SSR 实现中尝试了一些新东西，所以我想我会在这里分享。 我没有计划在实际项目中使用它，所以它没有优化，在这一点上，它变成了一堆不同的 SSR 功能，但我已经从中学到了大部分我想要的东西，所以我将称之为“完成”现在。 不过，也许其他人可以采取一些措施。 我知道还有一些东西可以添加或改进，但也许如果我把它拿回来，我会利用 WebGL2 中的一些功能来简化事情。

一些新功能：

• 支持蓝色噪声射线抖动，因此相交模式不太规则。
• 来自较低分辨率行军纹理的深度和法线加权放大/模糊以保留细节。
• 使用抖动样本和 mipmap 渲染光泽反射的几种眼睛调整方法。
• 支持法线贴图和阿尔法贴图。

这是一个非常密集的效果，但我觉得结合反射放大、模糊、抖动和低步数，你可以很好地工作，尤其是在较小的嵌入式画布而不是全窗口应用程序中。 通过像https://github.com/mrdoob/three.js/issues/14048 中讨论的那样在多个帧上解析最终图像，您可能也可以获得不错的光泽反射。 当然，正如其他地方提到的，如果没有单独的漫反射通道，反射仍然不会真正正确，但总有其他需要改进的地方。

以下是一些具有更高步数的屏幕截图：

| 无光泽| 多重样本光泽度 | 深度层次光泽度 |
|---|---|---|
| | | |

这是演示：

https://gkjohnson.github.io/threejs-sandbox/screenSpaceReflectionsPass/

Siggraph 2015 中有一张关于“随机屏幕空间反射”的幻灯片，您可能会感兴趣： http :