在 Three.js 上使用 ShaderMaterial 实现阴影锯齿

Question

这是我的问题的图片，就像你可以看到我的 ShaderMaterial 上的阴影不平滑，它是 PhongMaterial 的副本。

目前我已尝试在互联网上找到所有这些解决方案，但似乎没有任何效果：

groundGeometry.computeFaceNormals();
groundGeometry.computeVertexNormals();
groundGeometry.verticesNeedUpdate = true;
renderer.shadowMapType = THREE.PCFShadowMap; //And all options possible
renderer.shadowMapCullFace = THREE.CullFaceBack; //And the other one
renderer = new THREE.WebGLRenderer({ antialias : true });

我还使用 SpotLight 的不同参数（也尝试使用定向光：

shadowMapWidth
shadowMapHeight
shadowCameraLeft
shadowCameraRight
shadowCameraBottom
shadowCameraTop
shadowCameraNear
shadowCameraFar
shadowBias

说实话，我现在不知道该怎么办：/

所以任何帮助将不胜感激！

Answer 1

可能是自阴影造成的。尝试设置一个较小的 shadowBias 值，例如 0.05 或 -0.05。

如果您的场景允许，请尽可能减少阴影贴图截头体，​​更改 shadowCamera 选项的值以完全适合您想要的对象。

如果物体某个点的光线和法线之间的角度接近 90 度，您可以尝试根据斜率缩放偏差。有一种称为 slope scaled bias 的方法，它包括根据光矢量和法线矢量之间的角度来缩放偏差。公式为：

float slope_bias = bias * tan(acos(dot(normal,-lightDirection)));

希望对你有所帮助。