Page 1 of 1

Help improving metaballs shader

Posted: Mon Jan 02, 2023 4:53 am
by Connorses
love_LHu0eVpZJ6.png
love_LHu0eVpZJ6.png (14.61 KiB) Viewed 1598 times
I can't seem to get it to render with flat colors!
I'm trying to allow for multiple colors of ball but I don't like how it wound up with this darker edge.
Here's the metaball.png I made (Wondering if it could be a problem with this? I tried to be sure it's only white pixels)
metaball.png
metaball.png (6.16 KiB) Viewed 1597 times
I'm using LOVE 0.10.2

It's a modified version of this script:
viewtopic.php?t=9061

Code: Select all

function love.load()
	mb_img = love.graphics.newImage("metaball.png")
	t=0
	--metaball gradient:
	canv_mbg = love.graphics.newCanvas(128,128)


	mb_x = {168,188,246,374,420,420,460,360,330,363}
	mb_y = {140,108,91,73,103,103,120,190,214,219}

	maxD = 20;
	delta_x = {}
	delta_y = {}

	colors = {}

	for i=1,#mb_x,1 do
		delta_x[i] = (love.math.random()*maxD)-(.5*maxD)
		delta_y[i] = (love.math.random()*maxD)-(.5*maxD)
		colors[i] = {
			80,
			240,
			30
		}
	end

	canv = love.graphics.newCanvas()

	effect_metaballs = love.graphics.newShader [[
        vec4 effect(vec4 color, Image texture, vec2 texture_coords, vec2 pixel_coords)
		{
		vec4 pixel = Texel(texture, texture_coords);
		pixel.a = floor(pixel.a+0.5);
		return  pixel;
		}
	]]
end

function love.draw()
	love.graphics.clear(0,0,0)
	love.graphics.setCanvas(canv)
	love.graphics.setShader()
	love.graphics.clear(0,0,0,0)
	for n=1,#mb_x,1 do
		love.graphics.setColor(colors[n][1],colors[n][2],colors[n][3])
		love.graphics.draw(mb_img,mb_x[n],mb_y[n],0,1,1,0,0,0,0)
	end
	love.graphics.setColor(255,255,255)
	love.graphics.setCanvas()

	love.graphics.setShader(effect_metaballs)

	love.graphics.setColor(255,255,255,255)
	love.graphics.draw(canv)

	love.graphics.print(love.timer.getFPS(),32,32,0,1,1,0,0,0,0)
end

function love.mousepressed( x, y, button, istouch, presses)
	i = #mb_x+1
	mb_x[i] = x;
	mb_y[i] = y;
	delta_x[i] = (love.math.random()*maxD)-(.5*maxD)
	delta_y[i] = (love.math.random()*maxD)-(.5*maxD)
	colors[i] = {
			80,
			30,
			240,
		}
end

function love.update(dt)
	t=t+dt
	for i = 1,#mb_x,1 do
		mb_x[i] = mb_x[i]+delta_x[i] * dt
		mb_y[i] = mb_y[i]+delta_y[i] * dt
	end
end

Re: Help improving metaballs shader

Posted: Mon Jan 02, 2023 8:42 pm
by pgimeno
Draw the canvas to the screen with premultiplied alpha mode.

Code: Select all

love.graphics.setBlendMode('alpha', 'premultiplied')
love.graphics.draw(canv)
love.graphics.setBlendMode('alpha', 'alphamultiply') -- back to normal blend mode

Re: Help improving metaballs shader

Posted: Thu Jan 12, 2023 9:07 am
by Connorses
Thanks but using 'premultiplied' just breaks the shader.

I realized I should mention I'm using LOVE 0.10.2

Re: Help improving metaballs shader

Posted: Thu Jan 12, 2023 6:31 pm
by Sasha264
Hi!
Multiple colors + flat balls, correct?
aa.png
aa.png (33.74 KiB) Viewed 1271 times
I also added some kind of antialiasing, you can have hard edges back if you replace smoothstep back to floor:

Code: Select all

vec4 effect(vec4 color, Image texture, vec2 texture_coords, vec2 pixel_coords)
{
    vec4 pixel = Texel(texture, texture_coords);
    pixel.rgb /= pixel.a;
    pixel.a = smoothstep(0.46, 0.54, pixel.a);
    return pixel;
}

Re: Help improving metaballs shader

Posted: Fri Jan 13, 2023 10:13 pm
by Connorses
Sasha you're awesome!

I appreciate the help. I'm very new to the shader stuff. I'll share something when I've worked this into my game.