三.JS:来自聚光灯的奇怪阴影伪影，但仅限于 Android [英] Three.JS: Weird shadow artifacts from a spotlight, but only in Android

问题描述

使用 Three.js v0.113.2 我正在用两个聚光灯(一个在后面，一个在前面)和一个环境光在飞机上渲染一个杯子的场景.前聚光灯投射阴影，杯子设置为投射阴影(但不接收它们)，飞机设置为接收阴影.我使用的阴影半径为 20 (iirc).阴影贴图大小为 1024x1024.

Using Three.js v0.113.2 I'm rendering this scene of a mug on a plane with two spotlights (one behind, one in front), and an ambient light. The front spotlight casts shadows, the mug is set to cast shadows (but not receive them), and the plane is set to receive shadows. I'm using a shadow radius of 20 (iirc). The shadow mapSize is 1024x1024.

在 Android 上，并且仅在 Android 上(这可以在 iPhone、Windows 和 Mac 台式机上正确呈现)我从对象上的照明中看到这些奇怪的条带伪影.它在杯子上最明显，但它也出现在窗格上.该神器具有清晰可辨的线条，与杯子物体的几何形状不匹配.

On Android, and only on Android (this renders correctly on iPhones, Windows, and Mac desktops) I see these weird banding artifacts from the lighting on the objects. It's most evident on the mug, but it's present on the pane as well. The artifact has clearly distinguishable lines that do not match up to the geometry of the mug object.

我尝试设置 camera.near 和 camera.far 平面以紧密封装场景，最终这些值的值为 50/200.没有效果.

I have tried setting the camera.near and camera.far planes to tightly encapsulate the scene, and ended up with 50/200 for those values. No effect.

我尝试将 shadow.bias 值设置为非常接近于零的值 -.001.也没有效果.

I tried setting the shadow.bias value to something very near zero, -.001. Also no effect.

不幸的是，这就是我可以从 Three.js 存储库和其他 StackOverflow 问题中找到的建议的范围.如果有人觉得这种伪像很熟悉，我很想知道如何解决这个问题.

Unfortunately, that was the extent of the suggestions I could find from the Three.js repo and other StackOverflow questions. If this artifacting looks familiar to anyone, I would love to figure out how to fix this.

我已将 Spotlight 上的 castShadow 设置为 false，移除环境光，移除 castShadowcode> 和 receiveShadow 来自所有网格，并且工件仍然显示在 Android 上(仅).

I've set castShadow on the Spotlight to false, removed the ambient light, removed the castShadow and receiveShadow from all meshes, and the artifacting still shows up on Android (only).

推荐答案

以防将来有人发现这个:

In case anyone finds this in the future:

目前仅影响 Android 的不幸伪像是由于任何聚光灯的 angle 值设置得太低造成的.在上面的场景中，有一个角度为 0.091 的聚光灯.当它提高到 0.171 时，奇怪的条纹消失了.

The unfortunate artifacting that, at this time, affects only Android, is caused by having the angle value of any spotlight set too low. In the scene above, there was a spotlight with an angle of 0.091. When that was raised to 0.171 the strange banding disappeared.

这篇关于三.JS:来自聚光灯的奇怪阴影伪影，但仅限于 Android的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！