/ping @abelnation如果您有任何想法，因为您是当前的常驻区域灯光专家。 :)

我重构了区域灯代码，我也很熟悉它。 有关影子支持，请参阅https://eheitzresearch.wordpress.com/705-2/。

有关影子支持，请参阅https://eheitzresearch.wordpress.com/705-2/。

有趣的。 我认为此时对于 WebGL 来说这可能有点过于计算密集，因为它假设光线追踪是硬件加速的。 不幸的是，WebGL 可能还需要几年的时间。

我的观点是，虽然我的两个建议（点光或聚光阴影）在柔和阴影方面并不准确，但它们总比没有阴影好，而且都非常快（至少和我们的其他阴影一样快）并且易于实现（因为代码已经存在。）

@bhouston哦，是的……还有https://github.com/mrdoob/three.js/pull/13057。

如果您阅读了整个讨论，我认为共识是向SpotLight添加“cookie”支持，这可能会允许矩形阴影。

NVidia 的 Percentage Closer Soft Shadows在近似区域光影方面做得不错。 我在这里玩弄将它们入侵到 THREE.js 场景中： https://gkjohnson.github.io/threejs-sandbox/pcss/index.html。 目前它正在使用定向光影贴图，但聚光灯可能会更好。

不过，它们并不是完美的解决方案——当阴影边缘彼此靠近时，它们会出现一些伪影，并且需要大量样本才能获得真正平滑的阴影。

看起来很棒！ 但是你的演示在我的 iMac 上运行时只有 6 FPS ^^

我在 GTX 970m 上获得 60fps。

我的 Pixel 上 1 FPS 😢

我和oreshant在three.js中已经有一个pcss实现
前一阵子写的。

最好的祝福，
本休斯顿
http://Clara.io在线 3d 建模和渲染

2018 年 7 月 21 日，星期六，晚上 11:02 Garrett Johnson [email protected]
写道：

NVidia 的百分比更接近软阴影
http://developer.download.nvidia.com/shaderlibrary/docs/shadow_PCSS.pdf
在近似区域光影方面做得不错。 我在玩弄
在此处将它们入侵到 THREE.js 场景中：
https://gkjohnson.github.io/threejs-sandbox/pcss/index.html。 它正在使用一个
定向光影贴图，目前，但可能是聚光灯
更好的。

不过，它们并不是完美的解决方案——它们在
阴影边缘彼此靠近，需要大量样本才能获得
真正光滑的阴影。

—
你收到这个是因为你被提到了。
直接回复此邮件，在 GitHub 上查看
https://github.com/mrdoob/three.js/issues/14161#issuecomment-406837539 ，
或使线程静音
https://github.com/notifications/unsubscribe-auth/AAj6_RuFJPv7y5DbEfJnDu26DB3cD2bhks5uI-tJgaJpZM4UQODd
.

我和oreshant 不久前在three.js 中已经有一个pcss 实现。

https://threejs.org/examples/#webgl_shadowmap_pcss

这在我的 iMac 上以 60 FPS 的速度运行^^。

我和oreshant 不久前在three.js 中已经有一个pcss 实现。

我没见过！ 这看起来不错的样子。 我不知道您可以通过这种方式生成类似泊松盘的值——它看起来比我使用的方式具有更好的分布和更好的结果。 如果你不介意我可以借这个！

我的 Pixel 上 1 FPS 😢

哈！ 它在我的手机上也不起作用。 我根本没有优化它，并且有很多工作在循环中进行，可以移出。

不过， @bhouston的实现速度非常快。 也许有一些可以用于区域光阴影的变体？ 为区域光提供任何类型的阴影支持会很好，因此可以更轻松地插入这种类型的实现。

NVidia 的 Percentage Closer Soft Shadows在近似区域光影方面做得不错。 我在这里玩弄将它们入侵到 THREE.js 场景中： https://gkjohnson.github.io/threejs-sandbox/pcss/index.html。 目前它正在使用定向光影贴图，但聚光灯可能会更好。

不过，它们并不是完美的解决方案——当阴影边缘彼此靠近时，它们会出现一些伪影，并且需要大量样本才能获得真正平滑的阴影。

好的！ 它并不完美，但看起来总比没有阴影好......我在华硕 ROG Phone 2 上获得 30fps。
在我的集成图形笔记本电脑上为 45fps。

这是三个.js 中光线跟踪阴影的示例，这些视频中仅显示了阴影组件。

60+fps，每个像素有 1 个阴影样本......通过一些智能过滤，结果看起来相当不错。

https://youtu.be/O21mKUtMtSg
https://youtu.be/2Tn93hf9kNw

这可用于帮助处理矩形区域光影。

现场网络演示正在进行中。

有关的

13908 改善阴影

14048 通过光源采样的软阴影

14051 在 Three.JS 中采用渐进式真实感全局照明

很不错！

相关问题：我不知道如何用当前的 IBL 代码实现某种阴影。

假设我想在汽车示例中添加一个DirectLight但忽略实际光源，只使用阴影贴图来影响 IBL 代码。

我一直在玩几种光线追踪效果。

• 阴影 - 来自直接光源，包括矩形灯
• 环境遮挡
• 全局照明

在这 3 个中，我认为可以与 IBL 一起使用的每像素 GI 是最难实现实时帧速率的。

但是，每个顶点的 GI 和可能在良好的帧速率下是可能的。 编写光线追踪代码的想法是顶点和片段着色器将能够使用它。

@mrdoob ， @WestLangley ，
制服“pointLights[].position”在什么空间？？？
我正在世界空间中进行光线追踪，但阴影似乎不匹配。

好的，在查看之后......它看起来像是在模型视图空间中......有没有一种很好的方法来获取世界空间中的灯光位置？

修改 WebGLRender 以在世界和视图空间中发送？

好的，我用点光源让它工作......现在来测试矩形区域灯！

有没有办法只在发射体积内抖动光源和
累积以便在 32 次渲染中获得柔和的阴影
你只是积累？

我认为这适用于亚像素相机抖动
我在 TAA Three.js 示例中积累的。

2019 年 12 月 21 日星期六晚上 10:04 Samuel Sylvester [email protected]
写道：

好的，我用点光源让它工作......现在来测试矩形区域灯！

[图片：图片]
https://user-images.githubusercontent.com/10963749/71316445-4b18bb00-2435-11ea-94d9-c2f0f4116097.png

—
你收到这个是因为你被提到了。
直接回复此邮件，在 GitHub 上查看
https://github.com/mrdoob/three.js/issues/14161?email_source=notifications&email_token=AAEPV7MQQB4SDPHJAOA5YXTQZ3KLVA5CNFSM4FCA4DO2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHPHXHQ#issuecomment-56822
或退订
https://github.com/notifications/unsubscribe-auth/AAEPV7JKIZ62J3YXCVVYHVDQZ3KLVANCNFSM4FCA4DOQ
.

--

本休斯顿首席技术官
*男：*+1-613-762-4113
[email protected]
渥太华

[图片：threekitlogo1568384278.png] https://www.threekit.com/
使用 Threekit 创建更好的视觉客户体验
https://www.threekit.com/

[图片：了解如何随着您不断发展的业务扩展产品视觉效果]
http://signatures.threekit.com/uc/5d0cfd47860b6864aee40938/c_5da8cc74c90a0e0043fe0323/b_5dade3e4e85fae00caea3d76

要清楚，我认为在矩形灯中抖动的方法是有一个
沿发射表面移动的点光源。 你需要一个好的
像泊松盘之类的采样方法，
https://www.google.com/search?q=Poisson+Disk。 然后结果
阴影应该是柔和的并且适合矩形光。

尽管我一直对 FOV 感到困惑，但应该将其设置在点光源上，
也许您应该始终将其指向矩形的正常方向
面积表面积？ 正是这些小细节让我无法真正做到
继续实施累积采样排放
基于源的阴影。

2019 年 12 月 23 日星期一上午 9:00 Ben Houston [email protected]写道：

有没有办法在发射体积内只抖动光源
并累积以获得类似 32 次渲染的柔和阴影
你只是积累？

我认为这适用于亚像素相机抖动
我在 TAA Three.js 示例中积累的。

2019 年 12 月 21 日星期六晚上 10:04 塞缪尔·西尔维斯特 <
通知@github.com> 写道：

好的，我用点光源让它工作......现在来测试矩形区域灯！

[图片：图片]
https://user-images.githubusercontent.com/10963749/71316445-4b18bb00-2435-11ea-94d9-c2f0f4116097.png

—
你收到这个是因为你被提到了。
直接回复此邮件，在 GitHub 上查看
https://github.com/mrdoob/three.js/issues/14161?email_source=notifications&email_token=AAEPV7MQQB4SDPHJAOA5YXTQZ3KLVA5CNFSM4FCA4DO2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHPHXHQ#issuecomment-56822
或退订
https://github.com/notifications/unsubscribe-auth/AAEPV7JKIZ62J3YXCVVYHVDQZ3KLVANCNFSM4FCA4DOQ
.

--

本休斯顿首席技术官
*男：*+1-613-762-4113
[email protected]
渥太华

[图片：threekitlogo1568384278.png] https://www.threekit.com/
使用 Threekit 创建更好的视觉客户体验
https://www.threekit.com/

[图片：了解如何随着您不断发展的业务扩展产品视觉效果]
http://signatures.threekit.com/uc/5d0cfd47860b6864aee40938/c_5da8cc74c90a0e0043fe0323/b_5dade3e4e85fae00caea3d76

--

本休斯顿首席技术官
*男：*+1-613-762-4113
[email protected]
渥太华

[图片：threekitlogo1568384278.png] https://www.threekit.com/
使用 Threekit 创建更好的视觉客户体验
https://www.threekit.com/

[图片：了解如何随着您不断发展的业务扩展产品视觉效果]
http://signatures.threekit.com/uc/5d0cfd47860b6864aee40938/c_5da8cc74c90a0e0043fe0323/b_5dade3e4e85fae00caea3d76

@bhouston我认为https://github.com/mrdoob/three.js/issues/14048就是您所说的。

我喜欢带有扭结光源的演示。 我想我看到的问题是光源的反射从未解析为正确的图像。

光线追踪阴影的一个优点是它可以用来处理透明阴影。 它还可以用于全局照明和许多其他照明效果。

@bhouston https://github.com/bhouston我认为 #14048
https://github.com/mrdoob/three.js/issues/14048就是你在说的
关于。

抱歉，我倾向于忘记我之前的建议，但至少我是
持续的。

我喜欢带有扭结光源的演示。 我猜是
我看到的问题是光源的反射从来没有
解析为正确的图像。

这是因为他不是在进行随机抽样，而是在进行详尽的抽样
方法——他也在做一个比仅仅一个更难的光源
矩形区域。 他的方法会随着光栅化而缓慢累积
渲染或光线追踪——错误的是示例方法，而不是
技术。 如果你是这样的话，你也可以每次渲染多个光样本
倾斜。 我认为高端需要 32 到 256 个渲染，
取决于灯光类型和每次渲染的灯光样本数。 在
60 fps 是 1 - 4 秒。 我认为它是一个简化的“即时
辐射”解决方案。

你说得对，光线追踪很棒。 我只是觉得抖动
灯光比重做整个照明系统更容易，然后你也
有一个很好的实时解决方案，阴影只是很难然后再亮
停止它们软化到完美，渲染算法不会切换，
只是事物抖动和积累。

2019 年 12 月 23 日星期一上午 11:03 Samuel Sylvester [email protected]
写道：

@bhouston https://github.com/bhouston我认为 #14048
https://github.com/mrdoob/three.js/issues/14048就是你在说的
关于。

我喜欢带有扭结光源的演示。 我猜是
我看到的问题是光源的反射从来没有
解析为正确的图像。

光线追踪阴影的一个优点是它可以用来处理
透明阴影。 它也可以用于全局照明和许多
其他灯光效果。

—
你收到这个是因为你被提到了。
直接回复此邮件，在 GitHub 上查看
https://github.com/mrdoob/three.js/issues/14161?email_source=notifications&email_token=AAEPV7L4ZVKQJILFWZQ6JE3Q2DOLPA5CNFSM4FCA4DO2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHRNA4I#issuecomment-56
或退订
https://github.com/notifications/unsubscribe-auth/AAEPV7LXP5CSOMBZF2BMNR3Q2DOLPANCNFSM4FCA4DOQ
.

--

本休斯顿首席技术官
*男：*+1-613-762-4113
[email protected]
渥太华

[图片：threekitlogo1568384278.png] https://www.threekit.com/
使用 Threekit 创建更好的视觉客户体验
https://www.threekit.com/

[图片：了解如何随着您不断发展的业务扩展产品视觉效果]
http://signatures.threekit.com/uc/5d0cfd47860b6864aee40938/c_5da8cc74c90a0e0043fe0323/b_5dade3e4e85fae00caea3d76

@bhouston我喜欢#14048 中提出的解决方案......尤其是对于简单的几何形状，如矩形灯。
看起来这种方法应该很容易使用。 有没有这个解决方案的三个叉子？

关于光线追踪......在桌面级硬件上，光线追踪解决方案以 1spp 实时工作。 见... https://youtu.be/amX3icmbpzY。

我还没有测试过手机。

在我一直在处理的演示中，光照项是使用现有代码计算的，但阴影是光线追踪而不是阴影贴图。

@mrdoob ，@bhouston
因此，我更新了演示以反映来自 GDC 2018 的 Nvidia 的 rtx 演示

我让它在我的笔记本电脑和手机上实时运行......

笔记本电脑演示... https://youtu.be/MKCKXRVks3I
手机演示... https://youtu.be/P-cnT2hYNF4

我还改进了阴影样本的分布以提高阴影真实感

@mrdoob 、 @WestLangley 、 @bhouston等

我得到了使用光线跟踪的矩形区域灯的阴影。

这里显示的演示...... https://youtu.be/tZmlb29OUBU
具有点光源和矩形区域光源。

阴影样本分布的一些改进正在进行中。 此外，对于区域光，看起来需要为每个光计算 2 个阴影。 一个漫反射阴影和一个镜面反射阴影。

目前只计算漫反射阴影。

我计划用这个演示建立一个实时网站，并很快将这些更改推送到我的三个分支

这看起来很棒！ 它也只使用单一深度纹理吗？

这看起来很棒！ 它也只使用单一深度纹理吗？

@mrdoob谢谢！ 它实际上是正确的光线追踪，目前它使用 2 个纹理。 一个存储世界空间几何，另一个存储 BVH 数据。

通过这个设置，我们可以计算 RTX 环境光遮蔽，并且通过一些更新 GI 也是可能的！

要在浏览器中运行演示，请参阅... https://three-rtx.azurewebsites.net/

注意...这是光线追踪的，我发现我的集成 GPU 只能处理一个具有光线追踪阴影且帧速率不错的光源。 但是当我启用我的 RTX 2080 时，我可以对 2 个光源进行光线追踪，每盏灯 16spp，帧速率是两倍。 这比独立 GPU 快 64 倍！

我还尝试在我的手机上运行它，我发现你会想要 2019 年的旗舰船或更好的 1080p 30+ fps。

我相信还有一些改进可以挤出更多的性能和更少的噪音。

我计划将我现在拥有的代码推送到我的 fork 中，然后继续进行调整。

注意：我有一个调整可以将性能平均提高 50% 以上……它适用于第一次编译的着色器，但如果触发了第二次编译，那么有趣的事情就会开始发生……看起来它与我的使用有关预处理器

@sam-g-钢
这很棒！ 你有计划在某个时候开源这项工作吗？ 它的扩展性如何——您是否对更复杂的角色或产品模型进行过任何测试？ 我想这里的光线追踪只适用于静态场景，对吧？

光线追踪阴影的一个优点是它可以用来处理透明阴影。 它还可以用于全局照明和许多其他照明效果。

这似乎是这种技术的一个优点。 我认为使用#14048 中的抖动方法可以获得相当不错的结果。

@bhouston

错误的是样本方法，而不是技术。

我认为使用类似MeshSurfaceSampler辅助程序以及多个灯光会使结果更好一些。

@gkjohnson

这很棒！ 你有计划在某个时候开源这项工作吗？

谢谢！！！ 是的，我计划很快发布代码！ 我很乐意看到它被整合到 three.js 中！
目前，该演示由 2 个主要部分组成。 三个自定义构建，在模型视图和世界空间中发送照明信息，我希望在接下来的几天内发布，以及一个构建 BVH 并生成执行光线追踪的着色器的three.js“插件”。

它的扩展性如何——您是否对更复杂的角色或产品模型进行过任何测试？

我已经做了一些测试，看看它如何处理复杂的场景......我得到的结果非常有希望。 我正在努力更新网站https://three-rtx.azurewebsites.net/很快会有更多的演示。 我不想用演示来支持它。

我想这里的光线追踪只适用于静态场景，对吧？

实际上，支持动态场景！ 我也计划尽快演示！ 目前初始 bvh 构建需要 300 毫秒，后续构建在 CPU 单线程上需要约 10 毫秒。 需要注意的一点是 bvh 代码可以进一步优化。

希望这个周末能够发布代码。 它花费的时间比我预期的要长，部分原因是我和我的妻子刚刚欢迎我们的第三个孩子来到这个世界:)

@mrdoob ，@gkjohnson
我已经开始发布光线追踪代码...可以在这里找到... https://github.com/sam-g-steel/three.js/tree/RTX

并非所有代码都已提交...我正在尝试清理一下。 希望我能尽快完成所有代码。

我还在努力这个...
我在代码中发现了一些错误，所以我正在研究更多的测试用例来帮助找出问题所在。

可以在这里看到一个新的演示......

https://youtu.be/ZvoSuBi4rFE
@gkjohnson ，这个演示在屏幕上有动态对象，有助于测试完整的 BVH 重建性能。

我希望提交其余的或“RTX”着色器......今晚和 BVH 代码很快

注意：目前三角形是唯一支持的图元

2020 年 2 月 8 日更新
该网站已更新以具有新的演示...
动态 BVH 构建现在比 4 天前快 40%……更多优化即将到来。
https://github.com/sam-g-steel/three.js/tree/RTX已更新更多代码。

更多更新即将到来！！！

仍在研究光线追踪分支……我希望在几周内能展示更多内容。
我一直致力于噪声过滤以提高帧速率和图像质量。

下面是一些噪音过滤器的图片......
它仍在进行中。

2020 年 3 月 28 日更新

https://ciechanow.ski/lights-and-shadows/