使用WebGL和three.js进行适当的反射和阴影渲染（真实感）

Question

我一直在尝试渲染已经使用3ds max创建的场景。 我已将所有对象导出为obj文件，并使用three.js库在浏览器上呈现场景。 对于反射，我尝试使用Cubecamera方法，但未提供预期的结果。 对于阴影，我尝试了阴影贴图，但我想我没有正确使用它们。 我想知道是否可以只使用three.js和WebGl做我想做的事情。 如果是，请告诉我如何。 另外，我知道3ds max软件使用Mental ray渲染器很容易生成反射和阴影。 那么three.js中是否有任何类似的渲染技术可以帮助您轻松实现呢？

这类似于我想要的

Answer 1

不幸的是，这是一个很大的问题，而且有很多方法可以进行实时反射。 Mental Ray计算反射的方式与您使用WebGL（甚至OpenGL）实时进行反射的方式完全不同。

最简单的方法是两次渲染场景，这是第一次将场景上下颠倒（沿反射曲面的平面镜像）。 （就反射而言）这很简单，但确实将您限制在单个反射平面上。 给定您的图像，并且唯一的反射表面看起来像地板。 那可能是最好的选择。

您甚至可以将镜像的场景渲染为纹理，以允许您稍后在管道中对其进行操作（例如，如果您希望图像像通过水一样变形）。 或在不同平面周围执行多次反射。 渲染成本可能会大幅提高。

您可以使用原始帖子中提到的预渲染的立方体贴图。 尽管您可能需要多个，但对于此场景。 通过在场景中放置指示应捕获每个多维数据集贴图的位置的点。 通常，为了保持较低的内存使用率，它们的质量较低。

第三种选择是屏幕空间反射映射（可以在http://roar11.com/2015/07/screen-space-glossy-reflections/中找到合理的介绍），该方法确实有效，但是存在一些自身的问题（显示）解决。 通常，您会在完整的游戏引擎中找到所有这些内容（例如，虚幻引擎， https ：//docs.unrealengine.com/latest/INT/Resources/Showcases/Reflections/）。