【问题标题】:How to achieve realistic reflection with threejs如何用threejs实现逼真的反射
【发布时间】:2014-12-30 17:22:49
【问题描述】:

我正在尝试尽可能逼真地渲染一个场景,其中点光源撞击物体并以与面部法线相同的角度(入射角 = 反射角)反弹并照亮其他地方的场景。

现在,我知道threejs中的反射通常按照我在网上找到的示例处理CubeCamera-material,但这并不完全适用于我的情况,因为我可能是从某个点观察场景我可能无法观察到物体在另一个物体的镜面表面上的反射。

考虑this example prototype我正在处理:如果场景中从墙壁突出的盒子有一个类似镜子的材料(用CubeCamera完成),我将看不到绿色立方体在底面上的反射,除非相机位于特定位置;然而,在现实生活中,如果一个被光源照亮的物体经过另一个物体附近,它会部分照亮它,就好像它本身就是一个光源一样(当然,取决于物体的反射率指数)等等从接收间接照明的物体的任何角度都应该可以看到现象。

因此我想出了在立方体中添加PointLight 的想法,但这当然会对周围环境产生不良影响。

我将尝试用以下顺序来说明我的目标:

1) 在这里,我以后称为 balcony 的远端是正确的黑暗,而标有红色“x”的区域是立方体有一个孩子的结果@ 987654330@向四面八方闪耀。

2) 在这里,阳台的远面仍然是黑暗的,而随着立方体经过,阳台的底部会接收到更多的光线,这是可取的,但立方体后面的墙壁实际上应该是黑暗的(我没有添加阴影但是,我首先要弄好照明),以及它下面的地面和灯柱。

3) 最后,当立方体经过阳台时,阳台的侧面和底面被照亮是完全错误的,因为我们现在都不会反射光线返回它的来源。同样适用于灯柱。

现在我意识到发生的所有错误都是由于立方体本身发光,我希望您能帮助我确定一种产生物理精确反射光线的方法。
我想避免使用环境光或其他技巧来模拟现实生活场景并尽可能坚持物理;我怀疑我想要实现的渲染计算量很大,更不用说在实时用例中制作动画了,但这不是问题,因为我只是想开发一个概念验证,而不是必须的东西执行速度快。

据我所知,我可能应该为接收间接照明的材质编写自定义顶点和片段着色器,对吧?不幸的是,我不知道从哪里开始,谁能指出我正确的方向?干杯。

【问题讨论】:

  • 我知道这个问题很老,但一个相关的主题叫做“radiosity”。我不知道有什么进步,但是对于架构渲染来说,单帧可能需要several hours

标签: reflection three.js shader physics lighting


【解决方案1】:

如果您不想进行体积渲染,那么您有 3 个选项(我知道)

  1. 光线追踪

    你必须使用光线追踪渲染(back ray-trace)来实现这一点。如果编码正确,这还将涵盖阴影、透明材料、反射照明等等。除非您还想进行精确的大气散射,否则这就是方法。

    • 反向光线追踪是每个屏幕像素一(或三)条光线。它更快但不是那么精确..(仍然足够精确)
    • 光线跟踪是每个光源每个空间的每个 3D 角度单位(球面度)一条光线。它缓慢但精确(如果光线密度足够高)。

    如果投射的光线碰到任何障碍物,那么它的颜色就会改变(由于障碍物属性),新的光线会作为反射光线投射。如果材料是透明的,那么也会投射折射光线......每次撞击或折射都会影响光强度,因此当强度低于某个阈值或某个递归层(限制每条光线的最大折射次数)时,您会停止以避免无限循环和您可以操纵性能/质量...

  2. 标准多边形渲染

    使用这种方法(我认为您现在正在使用它),您必须即兴发挥。反射和照明效果可以类似于阴影技术来完成。对于每个表面,您必须以反射方向渲染场景。阴影也可以这样做,但是您只需渲染到光线方向或使用阴影贴图。如果您有大量的反射面,那么这种方法也不是实现折射反射的方法,您必须递归渲染,使其每个多边形多次渲染​​,这也很疯狂。

  3. 立方体贴图

    您可以为每个对象使用立方体贴图。它类似于子弹 2,但在生成立方体贴图而不是每帧时只完成一次疯狂......如果你有太多对象,那么这也不是方法。您只能将立方体贴图用于具有反射表面的对象以使其易于管理。此外,如果对象正在移动,那么您必须不时重新生成立方体贴图...

【讨论】:

  • 好吧,听起来我可能想使用 raytracing,“缓慢但精确”的;关于如何使用 THREE.js 实现它的任何线索?
  • @AndreaAloi 我不会在 JAVA 中编写代码,所以对此我无能为力。要么使用任何 2D 像素 API,例如 Canvas(用于 SW 渲染),要么使用 OpenGL + GLSL + GLM。仅在需要照片级/光度精度时才使用光线追踪。反向光线追踪可以在 RealTime 中完成,结果非常接近,所以通常最好选择它......而且两个引擎也是相似的,所以如果结果对你来说不够好,你可以毫不费力地从反向光线追踪重写到光线追踪.在 JAVA 中应该有一些库,但我不使用 JAVA,而且这个网站也不允许这样的问题
  • 好的,谢谢你的建议,我会从这里拿走,也许会发布另一个更具体的问题。请注意,在我的案例中,语言不是 Java,而是 javascript,我并不是要就是否使用特定程序(该站点确实禁止该程序)征求建议,而是如果有人知道某个站点或资源在哪里我可以找到有关在 three.js 中处理光线追踪方式的文档,恕我直言,这是完全合法的。 :)
猜你喜欢
  • 2018-08-16
  • 2023-03-06
  • 1970-01-01
  • 2017-11-17
  • 2013-12-26
  • 2013-02-12
  • 2015-05-25
  • 2017-12-02
  • 1970-01-01
相关资源
最近更新 更多