Chrome/MacOS下的Three.js阴影质量如何？

Question

我正在尝试使用简单的Three.js场景进行实验（在这个领域是新手）。 我正在使用Three.js WebGLRenderer，并设置了一个平面，一个投射阴影的立方体以及一个定向光源。结果如图所示。

我该如何：

1.提高阴影渲染的质量？
2.摆脱锯齿状的边缘？

我已将抗锯齿设置为true，但似乎在任何浏览器中都没有帮助...

renderer = new THREE.WebGLRenderer({ antialias: true});

- dani

Answer 1

你可以做两件事。第一，设置渲染器属性。

renderer.shadowMapType = THREE.PCFSoftShadowMap; // options are THREE.BasicShadowMap | THREE.PCFShadowMap | THREE.PCFSoftShadowMap

然后，您还可以使用以下代码增加光源的阴影图尺寸：

light.shadowMapWidth = 1024; // default is 512
light.shadowMapHeight = 1024; // default is 512

现在的版本是r104：

light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;

- gaitat

---

shadowMapType很有帮助，谢谢！增加阴影贴图的尺寸没有效果。对于锯齿状边缘有什么想法吗？将场景大小调整为画布元素的两倍似乎有所帮助。 - dani

将抗锯齿设置为true应该会有所改善。但作为最后的手段，您也可以尝试effectFXAA ShaderPass，您可以在示例文件夹中看到其实现。有几个（webgl_lines_colors.html，webgl_geometry_text.html）。 - gaitat

调整阴影相机的尺寸也应该有所帮助。您应该将阴影相机的视锥体限制在尽可能小的范围内，以便它刚好包含您的场景。这样，您就可以利用可用的分辨率和深度分辨率。shadowCameraNear和shadowCameraFar可能是首要嫌疑人。对于定向光，还有像shadowCameraLeft、top、right、bottom等的东西。 - yaku

renderer.shadowMapType = THREE.PCFSoftShadowMap; 有所帮助，但会使渲染变得非常缓慢。 - CCamilo

现在是 light.shadow.mapSize.x 和 light.shadow.mapSize.y。 - Philipp Sokolov

Answer 2

另一件您可以做的事情是增加接收阴影物体的部分的宽度/高度。

例如，将此更改为：

var plane = new THREE.PlaneGeometry( 1000, 1000, 10, 10);

通过这个：

var plane = new THREE.PlaneGeometry( 1000, 1000, 100, 100);

结果：

- Salva Carrión

---

当我进行这个更改时，我没有注意到任何差异。另外，阴影是按顶点还是按像素计算的？如果是后者，平面段数就不重要了。 - rich.e

@rich.e 只有在使用 Lambert 材质且光照计算在顶点着色器级别时才会有影响。在 Phong 或标准（物理）材质中添加更多的线段不会有任何区别。 - Pawel