How would I make a pixel dithering pattern shader?

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
Post Reply
prixt
Prole
Posts: 26
Joined: Sat Sep 12, 2015 5:53 am

How would I make a pixel dithering pattern shader?

Post by prixt »

What I'm aiming for: https://forums.tigsource.com/index.php? ... msg1363742

My code so far:

Code: Select all

extern Image img;
extern vec2 img_size;

vec4 effect(vec4 color, Image texture, vec2 texture_coords, vec2 screen_coords)
{
        vec4 pixel = Texel(texture, texture_coords);
        screen_coords = mod(screen_coords,img_size);
        vec4 comparitor = Texel(img, screen_coords);

        if ( pixel.a * 3.0 >= (comparitor.r + comparitor.g + comparitor.b)) {             pixel.a = 1.0;
        } else {
            pixel.a = 0.0;
        }
        return pixel;
}
Basically, if a pixel's alpha is below the value of the filter_img, it is set to 0.0. Else, set it to 1.0.
It's not working. Help?
User avatar
Sasha264
Party member
Posts: 131
Joined: Mon Sep 08, 2014 7:57 am

Re: How would I make a pixel dithering pattern shader?

Post by Sasha264 »

Hello! :awesome:
I tried to make it as simple as possible. So it does not have any long improvements.

Code: Select all

function love.load()
	love.window.setTitle("Dither this!")

	ball = love.graphics.newImage("ball.png")
	pattern = love.graphics.newImage("pattern.png")

	shader = love.graphics.newShader([[
		extern Image pattern;
		vec4 effect(vec4 color, Image texture, vec2 texture_coords, vec2 screen_coords) {
			vec4 add_value = Texel(pattern, texture_coords) - 0.5f;
			vec4 sum_value = Texel(texture, texture_coords) + add_value;
			return step(0.5f, sum_value);
		}
	]])
	shader:send("pattern", pattern)
end

function love.update(dt)
end

function love.draw()
	love.graphics.setShader()
	love.graphics.draw(ball)
	love.graphics.draw(pattern, 200, 0)

	love.graphics.setShader(shader)
	love.graphics.draw(ball, 400, 0)
end
Two points here:
  • How do I calculate add_value. It equals pattern_value - 0.5. So it will be in -0.5..+0.5 symmetrical diapason, it's important while I don't want to change common ball image lightness with this shader. -0.2 leads to lighter result.
  • Step standard GLSL function. Can be replaced with more complex if-bases code, but now it is faster and shorter. It works similar to "threshold" function in graphic editors. You can read about step() around the internet. Here for example https://thebookofshaders.com/glossary/?search=step
Attachments
pattern.png
pattern.png (28.41 KiB) Viewed 4260 times
ball.png
ball.png (28.28 KiB) Viewed 4260 times
Dither this.png
Dither this.png (51.73 KiB) Viewed 4260 times
prixt
Prole
Posts: 26
Joined: Sat Sep 12, 2015 5:53 am

Re: How would I make a pixel dithering pattern shader?

Post by prixt »

Thank you! I was unfamiliar to GLSL. That step function is going to be handy!
User avatar
alberto_lara
Party member
Posts: 372
Joined: Wed Oct 30, 2013 8:59 pm

Re: How would I make a pixel dithering pattern shader?

Post by alberto_lara »

How can you make this shader to output more colors? I'm playing around with it but no luck so far.
Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot] and 47 guests