three.js - 模拟曝光控制

标签 three.js

我想在我的 Three.js 应用程序中模拟相机曝光控制,但我不确定应该如何实现它。

所以我的问题是:如何实现或模拟曝光控制,以便我可以配置相机或渲染器以获得非常暗的场景的清晰图像,或者不使非常亮的场景曝光过度?理想情况下,它的工作方式应该与真实相机的工作方式接近(更像是调整 ISO 速度而不是光圈/快门)。

目前我使用各种可配置的 EffectComposer 后处理效果。其中一些允许在渲染后控制亮度、对比度等。显然,这除了微调之外没有任何好处,因为无法从已渲染的标准动态范围图像中恢复高光溢出或黑色阴影。

我考虑过的一些方法:

  • 手动调整每个灯光以获得所需的曝光。这是我目前的方法,我想摆脱它。
  • 已经提到过后处理。这太有限了,极端时会导致图像质量变差。
  • 我看到一些可以调整曝光的 HDR 渲染示例。这些是使用自定义 HDR 着色器实现的,我想尽可能使用标准 Three.js MeshPhongMaterial 系统和着色器,因为所有其他内置功能(如阴影等)等。我想使用这些功能并不容易并且使用一些 HDR 着色器方法?请注意,我不需要高动态范围,只需要可调曝光。
  • 通过对场景中的所有灯光应用某种强度乘数来进行作弊。这似乎很难实际实现,因为光线衰减算法等带来了额外的复杂性,我不完全理解,而且我认为创建一个看起来与提高/降低相机灵敏度相同的结果并不容易。
  • 只需在 WebGLRenderer 中调整 gamma(预渲染)。我找不到一种方法来做到这一点,并且我不完全确定 Gamma 是否是模拟曝光的正确方法(也许是?)。

最佳答案

理想情况下,是一个自定义管道,但如果做不到这一点,那么简单地控制镜面反射和自发光以达到漂亮的、中间的、可见的颜色怎么样?

请参阅图片示例:False HDR Color Scheme .

至于纹理,为什么不对它们运行过滤器呢?即使只是亮度和对比度调整也可能达到目的。这将产生类似 HDR 的“通用”效果。如果您想同时保持普通照明,则可能需要为每个对象维护两种 Material 。

关于three.js - 模拟曝光控制,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19981137/

相关文章:

javascript - Three.js 在计算耗时时不渲染

javascript - 如何在 Three.js 中找到对象的交集?

javascript - 如何处理资源的异步加载?立即访问返回未定义

javascript - 这是collada loader 的Three.js 错误吗?

javascript - Three.js 中的可平铺纹理

javascript - 有效地找到半边(DCEL)数据结构中的双边?

javascript - 三.js加载json字符串

javascript - 要求不按预期工作

javascript - Raycast 未检测到 GlTF 文件/Three.js

javascript - 三个 : How to reposition grid in any direction when camera reaches near grid's end?