A型框架中的灯根据与它们的距离不同，有条纹状的假象

Question

我使用的是最新的A-Frame 1.0.4，我试过用聚光灯（附图中）和直射光。

shadowBias被设置为-0.0001，改变它对伪影的影响很小。

如果我将shadowMapHeight和shadowMapWidth设置为1024，工件就会从光源处缩回一点。要想让它完全消失，我必须放4096，从性能上来说，这有点多。我不能让所有的灯都有4k的阴影图。

类似的效果有增加shadowCamera远，例如从500到5000，但这引入了错误的阴影，远离物体（即使我调整shadowBias）。

我是不是做错了什么？为什么默认设置的灯有这些问题？它是否可能取决于模型？

任何线索将被感激

Answer 1

我下载了一个相当复杂的动画模型(这个)作为Sketchfab的glTF，并设法用这些参数得到正确的阴影(-左右)。

<a-entity shadow="cast: true; receive: true" id="model1" gltf-model="scene.gltf"
  position="6 1.5 -12" scale="0.5 0.5 0.5" animation-mixer>
</a-entity>

<a-entity light="type: ambient; intensity:0.1;"></a-entity>

<a-entity id="sun" light="type: directional; color: #FFF; intensity: 0.9; castShadow: true; shadowCameraFar: 500;
    shadowCameraVisible: false;
    shadowBias: -0.001;
    shadowMapHeight:2048; shadowMapWidth:2048;
    shadowCameraLeft: -50; shadowCameraRight: 50;
    shadowCameraBottom: -50; shadowCameraTop: 50;" position="10 50 -10">
</a-entity>

结果看起来不错但你仍然可以看到一些伪影。此外，对于Oculus Quest来说，它的压力实在是太大了。

总的来说，我(重新)转向为自己的模型进行阴影烘焙，当然这对动画模型没有帮助。

我记得我有一个模型出现这种效果是由于z缓冲战斗，而不是阴影。

所以，也许你可以从这个模型开始，相应的调整参数，发现和我一样的结果，然后你再把你的模型扔进去。

也许这能帮到你。

Answer 2

我能够找到罪魁祸首了! 我的模型是双面的，这就导致了前脸投影在后脸的同时，后脸也投影在前脸，所以才会出现条纹状的故障。

在看了一下 Three.js - 材料 并确认 material.side 其实是双面的，我用了 material.shadowSide = THREE.BackSide 强制背面将阴影投射到正面，而不考虑模型材料的双面属性。

当然要注意，如果一个模型的法线不对，即不要朝向外侧倒置，这个面就会再次出现故障。