Hello everyone,
first time poster here so I hope I’m doing everything right!
I’m working on a mobile game and this is my first experience, by now i’m pretty much stuck on a problem i’ve found with the graphics in my project. I’ve searched a lot about this problem but i didn’t managed to find a solution so here it is:
I’m using a grid as a texture, this grid is made only of lines and a black background as you can see here.
The problem happens whenever the camera moves. Those lines start flickering, mainly the horizontal ones.
As you can see here.
And here
In the first Gif those are meshes made and UVmapped in blender, the same mesh pasted multiple times, and all are snapped to each other.
The second gif shows the same problem happening with cubes created in Unity.
What i’ve tried:
I’ve tried changing the camera FOV/Rotation but didn’t got any result out of it
I’ve tried playing with mipmap settings, here too nothing changed,
Plus, as this problem is mainly noticeable on mobile and not on big screens i tried taking down texture resolution to 128x128, but here too, nothing changed.
Hope someone of you might help me and give me a good insight of what’s going on, would really love to understand more to not have to deal with this problem again in the future!
I don’t think that’s avoidable unless you are doing a very limited and certainly useless contrained view lol
Basically it’s an effect of the sampling rate created by the screen resolution and you are hitting a point where there is just enough resolution per point projecting on the screen to create a smooth movement, in short it’s aliasing. Should be reduce on higher screen resolution, but’s basically the thickness of the line vs the screen pixel relative size.
Thank you for your reply!
Even though this is a bad news for me
I’ll keep looking around and playing with settings considering what you’ve said hoping to find a middle ground between artifacts and graphic style!
Basically you’d need to write a shader that draws the grid, and anti-alias the line edges using a 1.5 or 2 pixel wide smoothstep. There’s not a ton of good examples of this out there, usually grid shaders are doing screen-space width lines.
If you’re feeling adventurous you could try merging something like my circle shader examples and one of the screen space grid shaders.
Otherwise you just kind of live with it, or you can try blurring the texture slightly, or you can look into doing in-shader super sampling.
