javascript - 如何提高 three.js 中的阴影质量

Question

我在一个场景中有几个对象。我希望它们在一个宽阔的平面上移动，该平面会接收到阴影。如果我只使用一个点光源或一个非常大的定向光源，物体移动到 Angular 落时的阴影会变得非常粗糙(粗糙的阴影边缘)。像这样:

所以我想知道我是否应该为它们上方的每个对象使用灯光并跟随它们以转换高质量的阴影边缘？在某些情况下，我无法将 shadow.mapsize 设置得更高。

Answer 1

有很多东西可以控制阴影质量。

在我看来，您的阴影相机左/右/上/下设置太大，并且它在太大区域转换阴影。

阴影转换灯非常昂贵，所以我会避免尝试通过使用多个灯来补偿。

尝试减少 light.shadow.camera left/right/top/bottom 以使 map 更好地聚焦于您所在的对象所在的位置。还尝试将阴影贴图大小增加到 1024 或 2048 平方。

另一件有用的事情是使用 THREE.PCFShadowmapping 而不是默认值。这将使阴影的边缘变得平滑。

编辑:同时检查 PCFSoftShadowMapping.. 渲染速度较慢，但​​大大平滑了阴影边缘。

获得正确的阴影映射是一个棘手的过程，需要大量的操作。

此外，尝试将 DirectionalLightHelper 附加到您的灯光，并将 CameraHelper 附加到灯光相机。这些将帮助您确定阴影转换区域有多大以及物体指向的位置。

https://imgur.com/a/Zo80z