在 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)));

希望对您有所帮助。

在 three.js 上使用 ShaderMaterial 进行阴影混叠

Shadow aliasing with ShaderMaterial on three.js

shadow

three.js