CODEWITHSUNDEEP
androidthree.jsshadow
S. J.
S. J.

Reputation: 1128

Three.JS: Weird shadow artifacts from a spotlight, but only in Android

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.

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.

enter image description here

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.

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

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.

EDIT: 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).

Upvotes: 2

Views: 1017

Answers (1)

S. J.
S. J.

Reputation: 1128

In case anyone finds this in the future:

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.

Upvotes: 2

Related Questions