LÖVE

Jasoco wrote: ↑Wed May 30, 2018 1:48 am And the blog one doesn't draw the way it should. It seems to draw the outline inside the image edge instead of around the outside of the image edge which is what I need.

vec4 resultCol;
extern vec2 stepSize;

vec4 effect( vec4 col, Image texture, vec2 texturePos, vec2 screenPos )
{
	// get color of pixels:
	number alpha = -4.0*texture2D( texture, texturePos ).a;
	alpha += texture2D( texture, texturePos + vec2( stepSize.x, 0.0f ) ).a;
	alpha += texture2D( texture, texturePos + vec2( -stepSize.x, 0.0f ) ).a;
	alpha += texture2D( texture, texturePos + vec2( 0.0f, stepSize.y ) ).a;
	alpha += texture2D( texture, texturePos + vec2( 0.0f, -stepSize.y ) ).a;

	// calculate resulting color
	resultCol = vec4( 0.4f, 1.0f, 0.1f, alpha );
	// return color for current pixel
	return resultCol;
}

grump wrote: ↑Wed May 30, 2018 6:23 am The best way to do high-quality outlines is by applying a distance transform to the image, then use the resulting signed distance field to render the outline. It's an expensive operation that is not easy to do on a GPU. It's not suitable for realtime generated images and takes a lot of memory, because you need to precalculate the distance fields for each image.

Here's another less expensive technique I used before to put outlines around fonts. It samples the image multiple times and uses two passes to create an outlined image; one pass to render the outline, the second pass renders the image on top of it. It's still expensive and I haven't used this for realtime stuff, only to pre-bake outlines into textures. It may or may not be sufficiently fast for your application.

You can set varying thickness (size), color and smoothness of the outline. Lower smoothness gives crisp outlines, higher smoothness creates a glow-like effect.

Code: Select all

local gfx = love.graphics

local shader = gfx.newShader([[
	extern vec2 pixelsize;
	extern float size = 1;
	extern float smoothness = 1;

	vec4 effect(vec4 color, Image texture, vec2 uv, vec2 fc) {
		float a = 0;
		for(float y = -size; y <= size; ++y) {
			for(float x = -size; x <= size; ++x) {
				a += Texel(texture, uv + vec2(x * pixelsize.x, y * pixelsize.y)).a;
			}
		}
		a = color.a * min(1, a / (2 * size * smoothness + 1));

		return vec4(color.rgb, a);
	}
]])

-- the image
local canvas = gfx.newCanvas(128, 128)
canvas:renderTo(function()
	gfx.setColor(1, 0, 0)
	gfx.setLineWidth(20)
	gfx.circle('line', 64, 64, 32)
end)

function love.draw()
	gfx.setBlendMode('alpha')

	-- pass 1: render outline
	gfx.setColor(1, 1, 1) -- outline color
	shader:send('pixelsize', { 1 / canvas:getWidth(), 1 / canvas:getHeight() })
	shader:send('size', 4)
	gfx.setShader(shader)
	gfx.draw(canvas)

	-- pass 2: render image
	gfx.setBlendMode('alpha', 'premultiplied')
	gfx.setShader()
	gfx.setColor(1, 1, 1)
	gfx.draw(canvas)
end

Edit: formatting
Edit2: there was a bug in the alpha calculation

bobbyjones wrote: ↑Wed May 30, 2018 7:51 amno one has created a way to generate a SDF in love yet

pgimeno wrote: ↑Wed May 30, 2018 7:47 am

Jasoco wrote: ↑Wed May 30, 2018 1:48 am And the blog one doesn't draw the way it should. It seems to draw the outline inside the image edge instead of around the outside of the image edge which is what I need.

Simply inverting the sign works for me:

outline.glsl

Code: Select all

vec4 resultCol;
extern vec2 stepSize;

vec4 effect( vec4 col, Image texture, vec2 texturePos, vec2 screenPos )
{
	// get color of pixels:
	number alpha = -4.0*texture2D( texture, texturePos ).a;
	alpha += texture2D( texture, texturePos + vec2( stepSize.x, 0.0f ) ).a;
	alpha += texture2D( texture, texturePos + vec2( -stepSize.x, 0.0f ) ).a;
	alpha += texture2D( texture, texturePos + vec2( 0.0f, stepSize.y ) ).a;
	alpha += texture2D( texture, texturePos + vec2( 0.0f, -stepSize.y ) ).a;

	// calculate resulting color
	resultCol = vec4( 0.4f, 1.0f, 0.1f, alpha );
	// return color for current pixel
	return resultCol;
}

You can see the outline of the next quad, though, so that's something to watch out for.

bobbyjones wrote: ↑Wed May 30, 2018 7:51 am

grump wrote: ↑Wed May 30, 2018 6:23 am The best way to do high-quality outlines is by applying a distance transform to the image, then use the resulting signed distance field to render the outline. It's an expensive operation that is not easy to do on a GPU. It's not suitable for realtime generated images and takes a lot of memory, because you need to precalculate the distance fields for each image.

Here's another less expensive technique I used before to put outlines around fonts. It samples the image multiple times and uses two passes to create an outlined image; one pass to render the outline, the second pass renders the image on top of it. It's still expensive and I haven't used this for realtime stuff, only to pre-bake outlines into textures. It may or may not be sufficiently fast for your application.

You can set varying thickness (size), color and smoothness of the outline. Lower smoothness gives crisp outlines, higher smoothness creates a glow-like effect.

Code: Select all

local gfx = love.graphics

local shader = gfx.newShader([[
	extern vec2 pixelsize;
	extern float size = 1;
	extern float smoothness = 1;

	vec4 effect(vec4 color, Image texture, vec2 uv, vec2 fc) {
		float a = 0;
		for(float y = -size; y <= size; ++y) {
			for(float x = -size; x <= size; ++x) {
				a += Texel(texture, uv + vec2(x * pixelsize.x, y * pixelsize.y)).a;
			}
		}
		a = color.a * min(1, a / (2 * size * smoothness + 1));

		return vec4(color.rgb, a);
	}
]])

-- the image
local canvas = gfx.newCanvas(128, 128)
canvas:renderTo(function()
	gfx.setColor(1, 0, 0)
	gfx.setLineWidth(20)
	gfx.circle('line', 64, 64, 32)
end)

function love.draw()
	gfx.setBlendMode('alpha')

	-- pass 1: render outline
	gfx.setColor(1, 1, 1) -- outline color
	shader:send('pixelsize', { 1 / canvas:getWidth(), 1 / canvas:getHeight() })
	shader:send('size', 4)
	gfx.setShader(shader)
	gfx.draw(canvas)

	-- pass 2: render image
	gfx.setBlendMode('alpha', 'premultiplied')
	gfx.setShader()
	gfx.setColor(1, 1, 1)
	gfx.draw(canvas)
end

Edit: formatting
Edit2: there was a bug in the alpha calculation

When I saw this post the first thing I did was ask the people on IRC if SDF will be faster than the way already described here lol. The only reason I did not recommend it is because no one has created a way to generate a SDF in love yet. So I was going to write one first before submitting my answer.