Sharp Sprite - RGSS for Defold

[aglitchman]

Sharp Sprite is a collection of Defold materials that implements Rotated Grid Super-Sampling (RGSS) for the Defold engine. If you use down-scaled high-resolution images in your game and you want to get rid of blurriness (because of mipmapping) or sharpness (because of disabled mipmapping), then RGSS is for you.

How does it work?

RGSS samples the texture multiple times with an offset on each sample and averages the results. For this, it uses a 4x MSAA rotated grid pattern, sometimes called 4 rooks.

It’s based on an original idea by Ben Golus - Sharper Mipmapping using Shader Based Supersampling.

The second solution, that included in this repo, uses mip biasing. Mip biasing tells the GPU to adjust what mip level to use. The shaders use mip bias of -1.0 that pushes the mip level one full mip back to make 2D sprites look much sharper. It’s almost as fast as the standard materials. Use this first. If it fits your project well, keep it and don’t try RGSS at all.

Also, check out the demo .

Notes

• RGSS requires the OES_standard_derivatives OpenGL extension to run. It’s universally supported by WebGL 1.0, by the most of OpenGL ES 2.0 devices (Android stats and by all iOS devices).
• On mobile GPUs, it can have a significant performance impact. You should always check the game performance on your target devices!

Installation

GitHub - indiesoftby/defold-sharp-sprite: Rotated Grid Super-Sampling (RGSS) for...

[aglitchman]

I have been testing RGSS across all my devices this week and found out that PowerVR-based devices (iPad Air 2, Samsung SmartTVs) output a corrupted image. It turned out that UV coords should have the highp precision in fragment shaders.

Fixed in 0.1.1.

[morgerion]

There is a question about how the shader works when the sprite turns out to be larger rather than smaller.

Here’s an example:

The current shader causes pixelation (with the sampler Mag filter set to linear).
Is there any way to fix this?

[aglitchman]

@morgerion

The current shader causes pixelation (with the sampler Mag filter set to linear).
Is there any way to fix this

Oh. I’m pretty sure that you posted a screenshot where images are upscaled with the “nearest” filter. Could you please check? All Sharp Sprite’s materials have linear filtering enabled.

I noticed that you use it on Spine models, so I made a quick test scene with x5 upscale to check: Dropbox - jXQ5FVG.png - Simplify your life. The image with the RGSS material is the same as the image with built-in material with linear filtering. This is the best quality you can achieve with RGSS.

[morgerion]

I purposely wrote that smoothing is linear, as I have checked it several times.
Here are the material settings:

I also checked that if I change the shader to builtins, everything starts working properly. So in my case it’s the shader that affects the smoothing setting.

[morgerion]

Let the fun continue!

I snapped up the new build. It was discovered that:

0. no pixelation on the PC (Win 10).
1. no pixelation on the Samsung Note 10 phone.
2. Samsung A70 have pixelation!
3. Xiaomi have pixelation!
4. The iPhones have pixelation!

Which versions?
Different hardware picks up the shader differently?

[roccosaienz]

I have a similar problem on Switch. I don’t know if this is related but I ended duplicating all builtin’s. Note that some builtin materials have NOT the texture_sampler at all. Maybe the default value for the filter of a non-declared texture_sampler is a bit random? Or maybe I missed completely the point of your problem

[aglitchman]

@morgerion

• no pixelation on the PC (Win 10).
• no pixelation on the Samsung Note 10 phone.
• Samsung A70 have pixelation!
• Xiaomi have pixelation!
• The iPhones have pixelation!

Good catch! I’ll check it on all my test devices and find the reason next week.

[aglitchman]

@morgerion

I snapped up the new build.

Are your atlases 4K in size or more? Do you have fixes from this commit? I noticed that you have custom shaders for RGSS, i.e. not from the sharp_sprite directory.

I’m still looking into this issue, but I can’t reproduce it on my devices.

[morgerion]

Are your atlases 4K in size or more? Yes
Do you have fixes from this commit? Yes
Are you using the custom version of RGSS? No, i am using original

[aglitchman]

The new version of Sharp Sprite 0.2.0 has been released! I added new materials and reworked the demo. New materials use mip biasing to increase the performance of RGSS and not only for that. Mip biasing tells the GPU to adjust what mip level to use. The shaders use mip bias of -1.0 that pushes the mip level one full mip back to make 2D sprites look much sharper.

Now Sharp Sprite contains three sets of materials that are drop-in replacements for the standard 2D materials:

• Mipmap Bias -1.0 (/sharp_sprite/mipmap_bias/): almost as fast as the standard materials. Use this first. If it fits your project well, keep it and don’t try RGSS at all.
• RGSS (/sharp_sprite/rgss/): slow, and requires OES_standard_derivatives (see docs), and doesn’t require mipmaps.
• RGSS Mipmap Bias -1.0 (/sharp_sprite/rgss_bias/): a bit faster than RGSS, and requires mipmaps.

BREAKING CHANGE: previous materials moved into the subdirectory /rgss/.