# Texture clipping around extruding mesh on iOS

**URL:** https://forum.babylonjs.com/t/texture-clipping-around-extruding-mesh-on-ios/20915
**Category:** Questions
**Created:** [May 18, 2021, 3:37pm UTC](https://forum.babylonjs.com/t/texture-clipping-around-extruding-mesh-on-ios/20915 "2021-05-18T15:37:27Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![Regit](https://avatars.discourse-cdn.com/v4/letter/r/6a8cbe/32.png) [@Regit](https://forum.babylonjs.com/u/Regit)
#### Post date: [May 18, 2021, 3:37pm UTC](https://forum.babylonjs.com/t/texture-clipping-around-extruding-mesh-on-ios/20915/1 "2021-05-18T15:37:27Z")

</div>

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.  
 ![notfine](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/0/9/09d10c3965589b8a9c63761c4fa87d0d9f4900f4.png)

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.

---

<div class="post-metadata">

### Author: ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)
#### Post date: [May 18, 2021, 3:49pm UTC](https://forum.babylonjs.com/t/texture-clipping-around-extruding-mesh-on-ios/20915/2 "2021-05-18T15:49:27Z")

</div>

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

- turn off shadows where there is no webgl2 support
- improve the shadow precision ( [Shadows | Babylon.js Documentation (babylonjs.com)](https://doc.babylonjs.com/divingDeeper/lights/shadows#troubleshooting))

---

<div class="post-metadata">

### Author: ![Regit](https://avatars.discourse-cdn.com/v4/letter/r/6a8cbe/32.png) [@Regit](https://forum.babylonjs.com/u/Regit)
#### Post date: [May 19, 2021, 8:03am UTC](https://forum.babylonjs.com/t/texture-clipping-around-extruding-mesh-on-ios/20915/3 "2021-05-19T08:03:30Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![Regit](https://avatars.discourse-cdn.com/v4/letter/r/6a8cbe/32.png) [@Regit](https://forum.babylonjs.com/u/Regit)
#### Post date: [May 19, 2021, 8:16am UTC](https://forum.babylonjs.com/t/texture-clipping-around-extruding-mesh-on-ios/20915/4 "2021-05-19T08:16:41Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)
#### Post date: [May 19, 2021, 9:56am UTC](https://forum.babylonjs.com/t/texture-clipping-around-extruding-mesh-on-ios/20915/5 "2021-05-19T09:56:08Z")

</div>

> [@Regit](#):
>
> I had to lower all textures to max 2K or otherwise the page would not load on iOS

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

---

<div class="post-metadata">

### Author: ![Regit](https://avatars.discourse-cdn.com/v4/letter/r/6a8cbe/32.png) [@Regit](https://forum.babylonjs.com/u/Regit)
#### Post date: [May 19, 2021, 11:52am UTC](https://forum.babylonjs.com/t/texture-clipping-around-extruding-mesh-on-ios/20915/6 "2021-05-19T11:52:27Z")

</div>

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

---

<div class="post-metadata">

### Author: ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)
#### Post date: [May 19, 2021, 11:54am UTC](https://forum.babylonjs.com/t/texture-clipping-around-extruding-mesh-on-ios/20915/7 "2021-05-19T11:54:59Z")

</div>

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

---

<div class="post-metadata">

### Author: ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)
#### Post date: [May 19, 2021, 12:03pm UTC](https://forum.babylonjs.com/t/texture-clipping-around-extruding-mesh-on-ios/20915/8 "2021-05-19T12:03:43Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Regit](https://avatars.discourse-cdn.com/v4/letter/r/6a8cbe/32.png) [@Regit](https://forum.babylonjs.com/u/Regit)
#### Post date: [May 19, 2021, 2:08pm UTC](https://forum.babylonjs.com/t/texture-clipping-around-extruding-mesh-on-ios/20915/9 "2021-05-19T14:08:04Z")

</div>

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. 😄  
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!

---

<div class="post-metadata">

### Author: ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)
#### Post date: [May 19, 2021, 2:19pm UTC](https://forum.babylonjs.com/t/texture-clipping-around-extruding-mesh-on-ios/20915/10 "2021-05-19T14:19:08Z")

</div>

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 😉 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 😀

---

<div class="post-metadata">

### Author: ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)
#### Post date: [May 19, 2021, 3:32pm UTC](https://forum.babylonjs.com/t/texture-clipping-around-extruding-mesh-on-ios/20915/11 "2021-05-19T15:32:47Z")

</div>

IOS has clearly less capable webGL drivers 😉
