Chrome/MacOS 中 Three.js 阴影的质量？答案

【问题标题】：Quality of Three.js shadow in Chrome/MacOS?Chrome/MacOS 中 Three.js 阴影的质量？
【发布时间】：2013-05-21 01:33:10
【问题描述】：

我正在尝试一个简单的 Three.js 场景（这方面的新手）。我正在使用 Three.js WebGLRenderer 并设置了一个平面、一个投射阴影的立方体和一个定向光源。结果如图所示。

我该怎么做：

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

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

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

【问题讨论】：

【解决方案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;

【讨论】：

shadowMapType 很有帮助，谢谢！增加 shadowMap 尺寸没有效果。关于锯齿状边缘的任何想法？将场景设置为画布元素大小的两倍似乎有点帮助。
将抗锯齿设置为 true 应该会有所作为。但作为最后的手段，您也可以尝试 effectFXAA ShaderPass，您可以在示例文件夹中查看其实现。有几个（webgl_lines_colors.html、webgl_geometry_text.html）
调整阴影相机的尺寸也应该有所帮助。您应该将阴影相机的视锥体限制为尽可能小，以便它几乎不包含您的场景。这样您就可以利用可用的分辨率和深度分辨率。 shadowCameraNear 和 shadowCameraFar 将是第一个嫌疑人。在定向光的情况下，还有 shadowCameraLeft、top、right、bottom 等。
如果这个或任何答案已经解决了您的问题，请考虑通过单击复选标记接受它。这向更广泛的社区表明您已经找到了解决方案，并为回答者和您自己提供了一些声誉。没有义务这样做。
renderer.shadowMapType = THREE.PCFSoftShadowMap;有帮助，但它会使渲染变得非常慢。

【解决方案2】：

您可以做的另一件事是增加接收阴影的对象段的宽度/高度。

例如，改变这个：

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

通过这个：

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

结果：

【讨论】：