使用WebGL和three.js

Question

我一直试图渲染已经使用3ds max创建的场景。我已将所有对象导出为obj文件，并使用three.js库在浏览器上渲染场景。对于反射，我尝试使用Cubecamera方法，但它没有给出预期的结果。对于阴影，我尝试了阴影贴图，但我想我没有正确使用它们。我想知道我是否可以做任何我想要使用的三个.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/）。