Dithering shader difficulties

spectracoder · June 30, 2022, 5:52pm

I’m trying to make a fragment shader in HLSL that makes a dithering pattern when adjusting the transparency of the shader. This shader is added to a camera with a C# script. I copied a shader from the internet that kind of did what I wanted, and modified it to my needs.

There are 3 problems I am facing, but I can’t wrap my head around what is happening:

The shader follows the movement of the camera. I would like the dithering pattern to stay in place.
The scaling of the dithering pattern changes when I set Unity to Maximize On Play
Changing the Transparency value in Play Mode causes some kind of weird ghosting effect. In Edit Mode it works as expected.

I’m new to shaders, and I find some things pretty confusing. If I’m doing something very stupid in this code, please be kind

Shader "TestShader"
{
    Properties
    {
        _MainTex("Texture", 2D) = "white" {}    
        _Transparency("Transparency", Range(0,1)) = 1.0
        _PixelSize("Pixel size", Range(0,1)) = 0.25
        _ColorToDither("Color to dither", Color) = (1,0,0,0)
    }

    SubShader
    {      
        Cull Off ZWrite Off ZTest Always

        Tags
        {
            "RenderType" = "Opaque"
        }

        Pass
        {
            CGPROGRAM
            #include "UnityCG.cginc"
            #pragma vertex vert
            #pragma fragment frag

            sampler2D _MainTex;         
            float _Transparency;
            float _PixelSize;
            float4 _ColorToDither;


            struct appdata
            {
                float4 position         : POSITION;
                float4 uv               : TEXCOORD0;
            };

            struct v2f
            {
                float4 position         : POSITION;
                float4 uv               : TEXCOORD1;
                float4 screenPosition   : TEXCOORD2;            
            };

            v2f vert(appdata v, float2 screenPosition : TEXCOORD2)
            {
                v2f OUT;
                OUT.position = UnityObjectToClipPos(v.position);
                OUT.uv = v.uv;           
                OUT.screenPosition = ComputeScreenPos(OUT.position);

                return OUT;
            }

            float4 frag(v2f i) : COLOR
            {         
                float4 currentColor = tex2D(_MainTex, i.uv);

                if (currentColor.r == _ColorToDither.r && currentColor.g == _ColorToDither.g && currentColor.b == _ColorToDither.b) //Checks if the current pixel is red, to only apply dithering to red pixels              
                {
      
                    float DITHER_THRESHOLDS[16] =
                    {
                        1.0 / 17.0,  9.0 / 17.0,  3.0 / 17.0, 11.0 / 17.0,
                        13.0 / 17.0,  5.0 / 17.0, 15.0 / 17.0,  7.0 / 17.0,
                        4.0 / 17.0, 12.0 / 17.0,  2.0 / 17.0, 10.0 / 17.0,
                        16.0 / 17.0,  8.0 / 17.0, 14.0 / 17.0,  6.0 / 17.0
                    };

                    uint index = (uint(i.position.x * _PixelSize) % 4) * 4 + uint(i.position.y * _PixelSize) % 4;
                    clip(_Transparency - DITHER_THRESHOLDS[index]);                 
                }             

                return currentColor;
            }
            ENDCG
        }
    }

This is the C# script to add the shader to the camera:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

[ExecuteInEditMode]
public class ShaderHandler : MonoBehaviour
{
    public Material material;

    private void OnRenderImage(RenderTexture source, RenderTexture destination)
    {
        Graphics.Blit(source, destination, material);
    }
}

bgolus · June 30, 2022, 6:41pm

In place relative to what? You’re dithering using the screen UVs currently, so technically the dithering isn’t moving as it’s always the same regardless of what’s in view or where the camera moves. If you want it to stay stable with the world, you’d have to pick some other plane to project onto. That gets much more complicated depending on your setup. It’s plausible if you’re doing this for a 2D game, but basically impossible for 3D.

It’s using the render resolution. The dither pattern is 1:1 with the screen pixels. Again, if you want it to be relative to something else, like scaled with the world, or uniform screen height, you can do that, but it gets more complicated.

When you call clip(), what is the result you expect? Should it be black? Or the original screen color? If you want one of those options, then that’s what the shader should return rather than call clip().

spectracoder · July 2, 2022, 12:12pm

Thanks for your food for thought! It’s for a 2D game, by the way.

Sorry, I wasn’t very clear on that! I was hoping I could add this shader to the camera as a sort of global effect, instead of having to add it to every object in the scene. I’m currently trying to rewrite the shader to add it to each individual object, to see if I can make that work. I am still having trouble letting the dithering pattern move with the object. So, as if the dithering pattern is on the object, instead of staying fixed on the background of the scene. Does this have to do with the dithering pattern being generated instead of using a texture?

You were right, that was a pretty simple fix. This is how the shader looks right now:

Shader "ObjectDitherShader"
{
    Properties
    {
        _MainTex("Texture", 2D) = "white" {}
        _Transparency("Transparency", Range(0,1)) = 1.0
        _PixelSize("Pixel size", Range(0,1)) = 0.25
        _ColorToDither("Color to dither", Color) = (1,0,0,0)
    }

    SubShader
    {
        Tags
        {
            "Queue" = "Transparent"
            "IgnoreProjector" = "True"
            "RenderType" = "Transparent"
            "PreviewType" = "Plane"
            "CanUseSpriteAtlas" = "True"
        }

        Cull Off
        Lighting Off
        ZWrite Off
        Blend One OneMinusSrcAlpha

 

        Pass
        {
            CGPROGRAM
            #include "UnityCG.cginc"
            #pragma vertex vert
            #pragma fragment frag

            sampler2D _MainTex;     
            float _Transparency;
            float _PixelSize;
            float4 _ColorToDither;    


            struct vertex
            {
                float4 position         : POSITION;
                float4 uv               : TEXCOORD0;
            };

            struct v2f
            {
                float4 position         : SV_POSITION; //clip space position
                float4 uv               : TEXCOORD0;                    
            };


            v2f vert(vertex v)
            {
                v2f OUT;
                OUT.position = UnityObjectToClipPos(v.position);
                OUT.uv = v.uv;       

                return OUT;
            }

            float4 frag(v2f i) : SV_Target
            {     
                float4 currentColor = tex2D(_MainTex, i.uv);

                if (currentColor.r == _ColorToDither.r && currentColor.g == _ColorToDither.g && currentColor.b == _ColorToDither.b) //Checks if the current pixel is red         
                {
                    // Define a dither threshold matrix which can
                    // be used to define how a 4x4 set of pixels
                    // will be dithered
            
                    float DITHER_THRESHOLDS[16] =
                    {
                        1.0 / 17.0,  9.0 / 17.0,  3.0 / 17.0, 11.0 / 17.0,
                        13.0 / 17.0,  5.0 / 17.0, 15.0 / 17.0,  7.0 / 17.0,
                        4.0 / 17.0, 12.0 / 17.0,  2.0 / 17.0, 10.0 / 17.0,
                        16.0 / 17.0,  8.0 / 17.0, 14.0 / 17.0,  6.0 / 17.0
                    };
           
                    uint index = uint(i.position.x * _PixelSize) % 4  + uint(i.position.y * _PixelSize) % 4 * 4;         

                    if (_Transparency - DITHER_THRESHOLDS[index] <= 0)
                    {
                        return float4(0.0f, 0.0f, 0.0f, 1.0f); //black
                    }
                }
         

                return currentColor;
            }
            ENDCG
        }
    }

bgolus · July 2, 2022, 8:33pm

If you want the dithering to stay “attached” to individual objects as they move, you will indeed need to apply the dithering shader on the objects themselves and not on the camera. The camera only knows the screen UVs and the color of the pixels that have been rendered previously. There’s no concept of individual objects at that point. Using a hard coded dither pattern or a texture is mostly irrelevant (though it might look nicer using a texture, depending on what you want it to look like).

As for it sticking to objects vs the background, using the UVs of the objects should do that for you. Though if your objects aren’t at a consistent UV to pixel size it may cause some issues for you, and using the UV of 3D meshes can look very odd.

Really, without a more specific explanation / visual example of what you’re trying to do I can’t really give you any good recommendations as how to do what you want can change significantly. Usually the end goal with dithering is you want a pattern that is either fairly large and “graphic” (like obvious circles, or stars, etc), or always perfectly aligned to the screen pixels. Having the effect be attached to the camera’s view, or to individual objects changes how you need to calculate the UVs for the dithering, as well as if it needs to be done on the individual objects or not. If it’s a 3D object and you want the pattern to face the camera, but not move with it, then you need to calculate the screen space UVs, and then offset that by the screen space position of the object’s pivot so the screen UVs are counter moved. If they’re sprites, which don’t have a usable pivot in the shader, you may need to rely on the sprite’s existing UVs, and either use the _MainTex_TexelSize or screen space derivatives of the UV to keep the scale consistent. Etc, etc, etc.

spectracoder · July 2, 2022, 9:24pm

I thought there could be the possibilty of moving the dither pattern a few pixels in the opposite direction of where the camera is going, using offset parameters passed in the shader by a C# script. But, no matter what I try, I can’t seem to move the pattern. Even when I attach the shader to an object.

This is how I want it to look, to simulate day and night in the game. The red pixels need to fade in and out using a dithering pattern based on the transparency value. The red pixels will eventually be white, but this makes it more clear how the effect should work.

boldsingledragon
(Looks kind of crappy with all the compression, but I think you’ll get the point)

whisperedindelibledonkey

spectracoder · July 10, 2022, 8:08am

So, any ideas?

bgolus · July 11, 2022, 5:03pm

Since you already have a texel size defined by your artwork, I’d use that for most things.

sampler2D _MainTex;
float4 _MainTex_TexelSize; // add this line

// in the frag
uint index = uint(i.uv.x * _MainTex_TexelSize.z + 0.5) % 4  + uint(i.uv.y * _MainTex_TexelSIze.w + 0.5) % 4 * 4;

For the background, which presumably isn’t using a big white sprite that’s the “correct” resolution for the pixel art, you’ll either need to use a sprite that is the correct resolution, or you’ll need to do something like you were before where you set the “PixelSize” manually. But still use the i.uv instead of the i.position.

spectracoder · July 12, 2022, 6:03pm

bgolus:

Since you already have a texel size defined by your artwork, I’d use that for most things.
sampler2D _MainTex;
float4 _MainTex_TexelSize; // add this line

// in the frag
uint index = uint(i.uv.x * _MainTex_TexelSize.z + 0.5) % 4  + uint(i.uv.y * _MainTex_TexelSIze.w + 0.5) % 4 * 4;
For the background, which presumably isn’t using a big white sprite that’s the “correct” resolution for the pixel art, you’ll either need to use a sprite that is the correct resolution, or you’ll need to do something like you were before where you set the “PixelSize” manually. But still use the i.uv instead of the i.position.

Wow, thank you so much! That’s exactly what I needed! It now follows the sprites perfectly.
Can you explain what the +0.5 is supposed to do? When I remove it, the dithering pattern is perfectly aligned with the artwork. So can I leave it that way, or does that have certain consequences?

bgolus · July 12, 2022, 6:52pm

If it works better w/o, use that!

spectracoder · July 12, 2022, 8:11pm

Thanks, then I will use it without!

One last thing, then I will leave you alone!

When I add the shader to sprites that are used in a tilemap, some weird clipping occurs.
The clipping is gone when I uncheck the “Alpha is transparency” option in the sprite properties. It doesn’t seem like unchecking it has any negative consequences though, but since it’s on by default I would rather leave it on.
This clipping doesn’t happen with the Sprites-default shader. So, is there anything in the dithering shader that could be causing this?

What it looks like with “Alpha is transparency” enabled:

What it looks like with “Alpha is transparency” disabled:

bgolus · July 13, 2022, 5:33am

Alpha is Transparency clears anything in the RGB of the image where the alpha is completely transparent. But it clears it to the color of the closest visible texel. The reason for this is if you’re using bilinear or trilinear filtering on the texture, you don’t want the color that it interpolates to to be black or any other color but the one at the edge otherwise you can get weird color fringes.

For your shader, you’re checking the color, and outputting a color, but not checking the alpha value. As you’re using point filtering, you don’t need to worry about it. But you could probably fix it by checking the alpha before doing the dithering code.

spectracoder · July 13, 2022, 4:52pm

Yet again, thank you so much for your explanations and nudges in the right direction!

For future reference here is the full shader:

Shader "DitherShader"
{
    Properties
    {
        _MainTex("Texture", 2D) = "white" {}
        _Transparency("Transparency", Range(0,1)) = 1.0
        _ColorToDither("Color to dither", Color) = (1,0,0,0)  
    }

        SubShader
        {
            Tags
            {
                "Queue" = "Transparent"
                "IgnoreProjector" = "True"
                "RenderType" = "Transparent"
                "PreviewType" = "Plane"
                "CanUseSpriteAtlas" = "True"
            }

            Cull Off
            Lighting Off
            ZWrite Off
            Blend One OneMinusSrcAlpha



            Pass
            {
                CGPROGRAM
                #pragma vertex vert
                #pragma fragment frag               

                #include "UnityCG.cginc"

                sampler2D _MainTex;
                float4 _MainTex_TexelSize;
                float _Transparency;
                float _PixelSize;
                float4 _ColorToDither;
                              

                struct vertex
                {
                    float4 position         : POSITION;
                    float4 uv               : TEXCOORD0;
                };

                struct v2f
                {
                    float4 position         : SV_POSITION; //clip space position               
                    float4 uv               : TEXCOORD0;

                };


                v2f vert(vertex v)
                {
                    v2f OUT;
                    OUT.position = UnityObjectToClipPos(v.position);
                    OUT.uv = v.uv;


                    return OUT;
                }

                float4 frag(v2f i) : SV_Target
                {

                    float4 currentColor = tex2D(_MainTex, i.uv);

                    float4 black = float4(0.0f, 0.0f, 0.0f, 1.0f);

                    if (currentColor.a == 0.0f) //Prevents clipping of transparent parts when "Alpha is Transparency" is turned on in the sprite properties.
                    {
                        discard;
                    }
                   

                    if (currentColor.r == _ColorToDither.r && currentColor.g == _ColorToDither.g && currentColor.b == _ColorToDither.b) //Checks if the current pixel is red               
                    {                      

                        // Define a dither threshold matrix which can
                        // be used to define how a 4x4 set of pixels
                        // will be dithered
                        float DITHER_THRESHOLDS[16] =
                        {
                            1.0 / 17.0,  9.0 / 17.0,  3.0 / 17.0, 11.0 / 17.0,
                            13.0 / 17.0,  5.0 / 17.0, 15.0 / 17.0,  7.0 / 17.0,
                            4.0 / 17.0, 12.0 / 17.0,  2.0 / 17.0, 10.0 / 17.0,
                            16.0 / 17.0,  8.0 / 17.0, 14.0 / 17.0,  6.0 / 17.0
                        };


                        uint index = uint(i.uv.x * _MainTex_TexelSize.z) % 4 + uint(i.uv.y * _MainTex_TexelSize.w) % 4 * 4;


                        if (_Transparency - DITHER_THRESHOLDS[index] <= 0)
                        {
                            return black;
                        }
                    }

                    return currentColor;
                }
                ENDCG
            }
        }
}

Topic		Replies	Views
Custom Lighting Function breaks dithering? Unity Engine Global-Illumination , Shaders	7	2270	July 9, 2019
Programmatically dither fade in and out 2D sprites? 2D Sprite effects with shaders? Unity Engine Graphics , Shaders , URP , Question	6	953	January 16, 2024
How to write a shader that can work in a pixel grid of a sprite? Unity Engine Shaders , Question	10	1853	January 25, 2024
How to add dither transparency to Unity Chan Toon Shader Unity Engine Shaders , 2021-3-LTS , Question	1	275	January 6, 2025
Having trouble with custom dithering effect. Looks great in the editor, but not in build Unity Engine Graphics , Shaders , Post-Processing , URP , Question	2	1087	April 3, 2024

Dithering shader difficulties

Related topics