Shadow artifacts (RGBA Packing?)

I’m trying to track down an issue I am having with SSAO + Shadow Mapping in ThreeJS on iOS devices. Desktop PC’s work fine.

See attached screenshot showing the banding of the shadows (shadows are working just adding banding), also you can see the SSAO has its own banding.

I’m guessing its something to do with the RGBA packing issue (see, however all the current shadowmap demos on the threejs website work fine on iOS (unless these work due to fixes >v0.90.0 Threejs). I’m not doing anything special, so if anyone has some pointers on where to look… (the shadow artifacts in the screenshots looks familiar?)

I’m using ThreeJS Version 0.90.0.

See captures of output here:

iOS Output showing banding EhPgI

More iOS shadow banding zGSSu

BTW this is not related to THREEJS - Shadow artifact - IOS devices as the near and far plane and thus shadow extents are fully encompassing the scene.

Any reason you can’t test whether this is fixed in the latest release?

Sorry, yes i did and the issue is still there…

Just to be clear. The shadow rendering problem also exists without the usage of SSAO? I’m asking this since the SSAO pass is buggy and should not be used right now.

Related issues at github:

Yes i’ve tested it without the SSAO and the shadows have the same issue. i’ve included the SSAO pass in the output images as it also has similar looking issues. Looking at the other issues you linked, my issue has the look of a depth precision problem. Within threejs, whats the easiest way to change the depth encoding for shadows? (or can you change it to use floating point texture?) - i’d rather not have to fork and build threejs if possible :smiley:

Actually, looking at @bhouston wrote “My recommendation is to not use RGBA encoded depth on iOS. Even the revert doesn’t actually fix the issue.” is there an easy way to do this in threejs?

Did you set a shadow bias? I remember similar artifacts with SSAO when the near plane is too close, not sure about iOS differences here though.

Yes i’ve adjusted all those values and it makes no difference to the issue. What it looks like to me is that lower bits of the depth values are being used and the higher bits are being discarded (hence the stripes). I’m new to threejs and I’m wondering if there is any easy way to switch from RGBA (with encoding) to floating textures for the shadow maps (or less ideal, can I override the shadow map depth write shader and then i can use a custom material with custom shader for the shadows)

Any ideas?

AFAIK, there is no configurable way to do this. So you have to do this in code and create a custom build of three.js.

I’m not sure this works on iOS but you might want to try an approach like presented in the following example. In this way you avoid the RGBA encoding by using THREE.DepthTexture.