# Seams / Artifacts between texture tiles when using Mipmaps **URL:** \ **Category:** Questions\ **Tags:** shader, texture, glsl\ **Created:** [October 21, 2024, 3:55pm UTC](https://forum.babylonjs.com/t/seams-artifacts-between-texture-tiles-when-using-mipmaps/54269 "2024-10-21T15:55:09Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![Byloth](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/byloth/32/40615_2.png) [@Byloth](https://forum.babylonjs.com/u/Byloth)\ **Post date:** [October 21, 2024, 3:55pm UTC](https://forum.babylonjs.com/t/seams-artifacts-between-texture-tiles-when-using-mipmaps/54269/1 "2024-10-21T15:55:10Z")
Hello. I’m using a [`SpriteMap` Tile Layout](https://doc.babylonjs.com/features/featuresDeepDive/sprites/sprite_map_tiles) to display the plane of a boardgame I’m developing. Now… I’m using `BABYLON.Texture.NEAREST_NEAREST` as sampling mode to avoid problems. If I were use `BABYLON.Texture.LINEAR_LINEAR_MIPLINEAR`, this is the problem I would face: > **[Babylon.js Playground](https://playground.babylonjs.com/#YCY2IL%232310)** > > Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes **BUT…** I’m curious and I would like to understand **why** exactly this happens, what’s the theory behind this and -ideally- what would need to solve this problem. I would happy to contribute to this project and -maybe- to improve what it offers… * * * To be honest, I’ve been investigated this issue a lot for a while now, trying to replicate it even with different frameworks but -even if it seems to be actually a well-known problem by everyone- I wasn’t able to find a definitive solution for this. The best (but not yet complete) result that I got was by using `fwidth` and `smoothstep` together in my fragment shader. * * * I also came across this other post where the topic have partially been covered… > [@Scroll a SpriteMap?](https://forum.babylonjs.com/t/scroll-a-spritemap/40955/): > > Right now I’m just loading a whole tiled tmx map into a SpriteMap and moving a camera around but this creates artifacts and shimmering/stuttering. How would you go about moving the camera around a tile map being displayed by a SpriteMap? Do anyone know something about this? ---
**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\ **Post date:** [October 23, 2024, 4:02pm UTC](https://forum.babylonjs.com/t/seams-artifacts-between-texture-tiles-when-using-mipmaps/54269/2 "2024-10-23T16:02:47Z")
Maybe @Pryme8 can have a look as he is the brilliant mind behind the sprite map 🙂 ---
**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\ **Post date:** [October 23, 2024, 6:42pm UTC](https://forum.babylonjs.com/t/seams-artifacts-between-texture-tiles-when-using-mipmaps/54269/3 "2024-10-23T18:42:57Z")
In this case you would need to make sure that each of the tiles have a extended edge that goes beyond their normal frame. In the tileset that is being used in this example (which is one I made so I know it does not have any extends) does not have anything to sample beyond its edge so when doing mipmaps it sees that as “transparent” resulting in the artifacts. ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/b/3/b3941cb90fffc6c8aea8b478ead309c5b96cd037.png) This would need to have all of the graphics get their edges extended and then the texture repacked for that to not show the lines. I think in order to prevent any artifacts while using mips you would need to have at least a four pixel buffer from the edge of a extension of the last color. ---
**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\ **Post date:** [October 24, 2024, 6:16pm UTC](https://forum.babylonjs.com/t/seams-artifacts-between-texture-tiles-when-using-mipmaps/54269/4 "2024-10-24T18:16:25Z")
Actually, I need to take a deeper look into this. I did a quick test last night to see if expanded tiles work and its the same thing, so it sounds like a sampling error or something is wrong with the underlying texture buffers. ---
**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\ **Post date:** [October 26, 2024, 2:46pm UTC](https://forum.babylonjs.com/t/seams-artifacts-between-texture-tiles-when-using-mipmaps/54269/5 "2024-10-26T14:46:28Z")
![{667F5C28-3049-49CC-9D8B-0652B8E68A02}](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/4/0/405a23850ce64cb81cd99212e814083c9c384153.png) Ok so it looks like its the underlying tileUV ends up having artifacts when mipmaping is being used. I’m not really sure why this would be as the tile UV is calculated on the fragment maybe there is something underlying I don’t understand? > **[Babylon.js Playground](https://playground.babylonjs.com/#YCY2IL%232326)** > > Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes You can see on line 63 how Im just setting the color to the UV an we get those little bands between the tiles. Really kind of intrigued why changing the diffuse textures mipmap settings would effect this. If we can figure out what is causing the banding between tiles then this will be solved. **UPDATE** > **[Babylon.js Playground](https://playground.babylonjs.com/#YCY2IL%232330)** > > Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes Fixed it, Ill try to get a PR in today. _ **PR** _ > > > Per this conversation: > https://forum.babylonjs.com/t/seams-artifacts-between-te…xture-tiles-when-using-mipmaps/54269/4 ---
**Author:** ![Byloth](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/byloth/32/40615_2.png) [@Byloth](https://forum.babylonjs.com/u/Byloth)\ **Post date:** [October 29, 2024, 8:36am UTC](https://forum.babylonjs.com/t/seams-artifacts-between-texture-tiles-when-using-mipmaps/54269/6 "2024-10-29T08:36:55Z")
Hi! I just saw that the PR has been merged and the new version of Babylon has been released. The result is now awesome! I took a look at the PR but -honestly- I can’t understand what the difference is… It seems that the code has just been “prettified” and nothing more… What are the actual breaking changes that solved this problem? 🤔 ---
**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\ **Post date:** [October 29, 2024, 7:28pm UTC](https://forum.babylonjs.com/t/seams-artifacts-between-texture-tiles-when-using-mipmaps/54269/7 "2024-10-29T19:28:11Z")
Just ensured the correct sampling method was being used. ---
**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\ **Post date:** [October 29, 2024, 8:26pm UTC](https://forum.babylonjs.com/t/seams-artifacts-between-texture-tiles-when-using-mipmaps/54269/8 "2024-10-29T20:26:27Z")
@Byloth Now I need to wrap this PR up so you can have light effects and other jazz. ---
**Author:** ![Byloth](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/byloth/32/40615_2.png) [@Byloth](https://forum.babylonjs.com/u/Byloth)\ **Post date:** [November 6, 2024, 4:41pm UTC](https://forum.babylonjs.com/t/seams-artifacts-between-texture-tiles-when-using-mipmaps/54269/9 "2024-11-06T16:41:47Z")
Ok, so… Just to let you know and keep you updated on this… I experimented further, trying to actually use mipmaps. I DO appreciate your work on this PR, @Pryme8, but forcing the mipmap level to `0.0` essentially disables it. The result -indeed- is that tiles have jagged edges between them tiles themselves look jagged as they get farther from the camera. Not an ideal thing… Mipmaps are designed to solve this exact problem. * * * After few weeks of experimenting I -finally- came up with a solution. Honestly, I tried to implementing it here too but without success… > **[Babylon.js Playground](https://playground.babylonjs.com/#YCY2IL%232356)** > > Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes As you can see, I added these few lines to the fragment shader: ```c vec2 sizedUV = uv * vec2(); // [...] float dx = length(dFdx(sizedUV)); float dy = length(dFdy(sizedUV)); float mipmapLevel = log2(max(dx, dy)) + ; // [...] gl_FragColor = textureLod(spriteSheet, (tileUV * frameSize) + offset, mipmapLevel); ``` * * * I don’t know if this will be useful, but I’ve described everything in detail… Starting from what was happening and -more importantly- **WHY** it was happening… The only downside is that I implemented it using Three.js. > **[Seams / Artifacts between texture tiles when using Mipmaps](https://discourse.threejs.org/t/seams-artifacts-between-texture-tiles-when-using-mipmaps/72979/12)** > > Got it! 🤯 I finally understand what the problem actually is and why this happens! Thanks again to everyone who took the time to help me with my question. Really appreciated! ❤ TL;DR So… If you’re interested -like me- in understanding what’s... BUT… Maybe there’s something you can “extract” from this and adapt for Babylon.js as well! * * * Thanks again for your time. ---
**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\ **Post date:** [November 6, 2024, 10:12pm UTC](https://forum.babylonjs.com/t/seams-artifacts-between-texture-tiles-when-using-mipmaps/54269/10 "2024-11-06T22:12:23Z")
Oh, the idea for the sprite map was to be pixel perfect that is destroyed usually by LODs, but sure yeah I hear you. We can make the appropriate changes here. I appreciate your clarity, sorry for the miss understand. > **[Babylon.js Playground](https://playground.babylonjs.com/#YCY2IL%232357)** > > Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes here is without the hardcoded size. Also what is the bias; what is that based off of? Lets get this figured out. Your fix is super legit lets get a PR in for it! Also, I have something in the works for Sprites in general for BJS so stay tuned.