Texture clipping around extruding mesh on iOS

I’m facing an issue that is only occuring on iPad (6th gen) Safari, where around an extruding mesh (maybe because of its grid-like holes?) black “fragments” are appearing, kind of like texture clipping.

The amount of fragments depend on the camera angle, with it being really noisy while you are panning/rotating. So it could have to do with lights? There are 2 spotlights facing the whole model.

On other browsers/devices the model and textures are clean as expected.

Do you enabled shadows? (I feel so based on your screenshot) and thus it should be a matter of:

Hi Deltakosh,

even when I turn off the shadows for the lights or have the model receive no shadows at all the fragments remain. There are also no other issues with shadows on iOS for me (I don’t use any filter).

Maybe we can rule out it’s the shadows?

I tried around with settings in the inspector to get an idea what was causing this and found that only when I remove all textures from the material the fragments disappear.
Previously I had to lower all textures to max 2K or otherwise the page would not load on iOS. Could they still be too big? Hopefully this rings a bell for someone.

Yes, this is possible, I’m afraid. You have to account iOS and Safari specificities (to remain polite;)
For your textures, you should target a max native retina resolution (ideally the one of the iPhone X).
But this is still not enough eventually. It appears that if the max native resolution texture weights more than ~1mb, a variety of issues can occur (scene reloading or not loading, issues with shadows or reflections). Don’t ask me what the ‘faen’ this is. I have no clue and from what I can see, little people have or might have. But then, this doesn’t mean it will solve your problem. But then at least, doing this should put you in a ‘safe state’ to further investigate the issue (on iOS/Safari).

Hmm, I tried 1000x1000 textures with file size <1mb, same result. The issue remains. Or did I not understand what max native resolution means?

no, that should be fine. 1125px in height max. You’re all good there. problem must be elsewhere…

ok, let’s try something else. Are you using things like contact hardening shadows? An alpha on your diffuse texture for your grid? Parallax? Rendering group IDs? A mesh crossing another with alpha? I’m afraid you will need to break it down one by one to track the issue. I believe at this point, you have already double checked your mesh and UVs

Hey, after double checking we found that it was indeed “just” overlapping meshes. Incredible that it only had issues on iOS though. Makes you blame that badboy way too quickly. :grinning_face_with_smiling_eyes:
Since the mesh was inside of another, the baked occlusion made the faces black and then they fought over which get rendered.
Well it was an easy fix all along, thanks for the help nontheless!


Glad to see it solved. We are all the same, yes? At first, we have problems because we don’t know about them and once we know, we tend to somehow disregard it :wink: It often helped me in this forum to just have another voice eventually pointing me in the right direction. And then, it’s so cool when people can solve their own topics :grinning:

1 Like

IOS has clearly less capable webGL drivers :wink:

1 Like