[URP] Fix Shimmering Pixel Art with Smooth Sub-pixel Filtering
Solution
Unity 2021.x - Unity 6.3.x
Published Fri, May 1
Pixel art assets exhibit shimmering artifacts when rotated or scaled. This occurs because the standard Point sampling logic cannot resolve sub-pixel positions, leading to inconsistent pixel dimensions and aliasing during transformation.
Mitigate jagged edges and inconsistent pixel sizes in non-grid-aligned pixel art by employing a custom Filtering shader. Standard point-sampled textures often produce temporal aliasing because the sample point jumps abruptly between discrete texels during movement or rotation.
Open Shader Graph and create a Sprite Unlit Shader Graph for your shader.
2.
Create a Custom Function node to calculate your Filtering UVs by using screen-space derivatives.
3.
Use the fwidth function to determine the rate of change in UV coordinates, allowing for a smooth transition at the edge of each texel.
4.
Connect the output of your Filtering logic to the UV input of your Sample Texture 2D node.
Additional Tips
Set the filter mode of your texture to Bilinear in the Texture Import Settings to allow your shader to blend between adjacent texels effectively.
*
This Filtering method is most effective when your sprites are viewed at a resolution higher than their native pixel size.
*
Ensure your Pixel Perfect Camera component does not conflict with this Filtering logic by testing settings in the scene view.
TL;DR
Implementing a custom Filtering approach in Shader Graph provides smooth transitions without the overhead of high-resolution textures or post-processing.
Related Posts Haven't quite found a solution to your problem? We think these posts might help you.
Content inspired by a Unity discussion post.