A-Frame 中的灯具有条纹伪影，具体取决于与它们的距离

Question

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

shadowBias 设置为 -0.0001，更改它只会轻微影响工件。

如果我将 shadowMapHeight 和 shadowMapWidth 设置为 1024，则伪像会从光源向后收缩一点。要让它完全消失，我必须放置 4096，这在性能方面有点太多了。我不能让所有灯光都带有 4k 阴影贴图。

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

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

任何线索将不胜感激

Answer 1

我从 Sketchfab 下载了一个相当复杂的动画模型 (this one) 作为 glTF，并使用这些参数设法使阴影正确 (-ish)：

<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 并用 material.side 确认它实际上是双面后，我使用 material.shadowSide = THREE.BackSide 强制背面将阴影投射到正面，无论model/material双面属性。这解决了故障！

当然要注意，如果一个模型有错误的法线，即不面向外面/倒置，那张脸会再次出现故障。

A-Frame 中的灯具有条纹伪影，具体取决于与它们的距离

Lights in A-Frame have striped artifacts depending on distance from them

javascript

3d

three.js

virtual-reality

aframe