Anyone have a shader to put an outline around an image?

[pgimeno]

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

See that's a problem I'd not want to deal with. Also using this shader doesn't work right either. I'm sending a table with two values to it and no matter what I send it doesn't render right.

For the problem you'd not want to deal with, the only solution I can think of is to send the quad limits to the shader and make it clamp.

As for the values to send:

Code: Select all

if Shaders:isEnabled("outline thick") then
        self.shader:send( "stepSize", {3/self.img:getWidth(), 3/self.img:getHeight()})
...
if Shaders:isEnabled("outline thin") then
        self.shader:send( "stepSize", {1/self.img:getWidth(), 1/self.img:getHeight()})

1 and 3 correspond to the thickness. Note it's dividing by the whole image dimensions, not the quad dimensions.

[Ref]

Guess I'm not to fussy.
Only time I wanted to outline something I didn't need to much speed.

[grump]

Even if I have to re-render all my images onto canvases with the padding automatically.

Don't use canvas to add padding.

Code: Select all

local src = love.image.newImageData('image.png')
local padded = love.image.newImageData(src:getWidth() + padding * 2, src:getHeight() + padding * 2)
padded:paste(src, padding, padding)

Though you might want to render the outlines into appropriately sized textures anyway, to generate them only once instead of drawing them every time with the expensive shader.

If you need outlines that can be used separately from the image, here's how to do that:

Code: Select all

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 - Texel(texture, uv).a);
	}
]])

Guess I'm not to fussy.
Only time I wanted to outline something I didn't need to much speed.

That approach is okay if you don't want or need anti-aliasing, and only need one pixel thickness.
If you want to speed this up a bit, use ImageData:mapPixel instead of get/setPixel.

[pgimeno]

Here's a library for 11.1 that I believe fulfils the requisites:

Code: Select all

--[==========================================================================[--

Outliner shader

Based on code by Micha (Germanunkol)

(C) Copyright 2018 Pedro Gimeno Fortea

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
 
The above copyright notice and this permission notice shall be included
in all copies or substantial portions of the Software.
 
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


Usage:

local outline_only = false -- draw the outline AND the image in the same pass
--local outline_only = true -- draw the outline only

-- 'require' returns a constructor that requires the outline_only parameter
local outliner = require 'outliner'(outline_only)

-- sets the outline colour (in 0..1 range)
outliner:outline(r, g, b)

-- draws an outline or an image with outline (decided at construction time),
-- possibly using a quad. Same parameters as love.graphics.draw except for the
-- size prefix, which is the size of the outline.
outliner:draw(size, img, ...)


--]==========================================================================]--

local aux = {0, 0, 0, 0}
local lgdraw = love.graphics.draw
local lgsetShader = love.graphics.setShader

local function outline(self, r, g, b)
  aux[1] = r
  aux[2] = g
  aux[3] = b
  aux[4] = nil
  self.shader:send("outline", aux)
end

local function draw(self, size, img, ...)
  local quad = (...)
  if type(quad) == "userdata" then
    -- assumed quad
    local sx, sy = quad:getTextureDimensions()
    aux[1], aux[2], aux[3], aux[4] = quad:getViewport()
    aux[1] = aux[1] / sx
    aux[2] = aux[2] / sy
    aux[3] = aux[3] / sx
    aux[4] = aux[4] / sy
    self.shader:send("quad", aux)
    aux[1] = size / sx
    aux[2] = size / sy
  else
    local sx, sy = img:getDimensions()
    aux[1], aux[2], aux[3], aux[4] = 0, 0, 1, 1
    self.shader:send("quad", aux)
    aux[1] = size / sx
    aux[2] = size / sy
  end
  aux[3], aux[4] = nil, nil
  self.shader:send("stepSize", aux)
  lgsetShader(self.shader)
  lgdraw(img, ...)
  lgsetShader()
end


local function new_outliner(outline_only)
  local shader = [[

// This parameter affects the roundness. 0.75 is close to the Euclidean
// correct value. If it's 0.0, the shape of the "brush" making the outline
// will be a diamond; if it's 1.0, it will be a square.
const float t = 0.0;

extern vec3 outline; // Outline R,G,B
extern vec2 stepSize; // Distance parameter
extern vec4 quad;

const vec4 zero = vec4(0.,0.,0.,0.);
vec2 q1 = quad.xy;
vec2 q2 = quad.xy + quad.zw;

vec4 effect( vec4 col, Image texture, vec2 texturePos, vec2 screenPos )
{

  // get color of pixels:
  float alpha = -20.0 * texture2D(texture, clamp(texturePos, q1, q2)).a;
  vec2 aux = vec2(stepSize.x, 0.);
  alpha += texture2D(texture, clamp(texturePos + aux, q1, q2) ).a;
  alpha += texture2D(texture, clamp(texturePos - aux, q1, q2) ).a;
  aux = vec2(0., stepSize.y);
  alpha += texture2D(texture, clamp(texturePos + aux, q1, q2) ).a;
  alpha += texture2D(texture, clamp(texturePos - aux, q1, q2) ).a;

  if (t != 0.0)
  {
    aux = stepSize;
    alpha += t * texture2D(texture, clamp(texturePos + aux, q1, q2)).a;
    alpha += t * texture2D(texture, clamp(texturePos - aux, q1, q2)).a;
    aux = vec2(-stepSize.x, stepSize.y);
    alpha += t * texture2D(texture, clamp(texturePos + aux, q1, q2)).a;
    alpha += t * texture2D(texture, clamp(texturePos - aux, q1, q2)).a;
  }

@calc_result@
  return result;
}
  ]]


  if outline_only then
    shader = shader:gsub("@calc_result@", [[
  vec4 result = vec4(outline, alpha);
]])
  else
    shader = shader:gsub("@calc_result@", [[
  vec4 result =
      max(max(sign(alpha), 0.) * vec4( outline, alpha ), zero)
    - min(min(sign(alpha), 0.) * texture2D(texture, texturePos), zero);
]])
  end
  shader = love.graphics.newShader(shader)


  local result = {
    shader = shader;
    draw = draw;
    outline = outline;
  }
  result:outline(0, 1, 0) -- define some starting value
  return result
end

return new_outliner

An example main.lua:

Code: Select all

local newOutliner = require 'outliner'

local outlinerOnly
local outliner
local img
local quads = {}

local frame = 1

function love.load()
  img = love.graphics.newImage('skeleton_3.png')
  for i = 1, 8 do
    quads[i] = love.graphics.newQuad((i-1)*64, 704, 64, 64, img:getDimensions())
  end

  outlinerOnly = newOutliner(true)
  outliner = newOutliner(false)

  outlinerOnly:outline(1, 0.5, 0.5)
  outliner:outline(0.4, 1, 0.2)
end

function love.update(dt)
  frame = frame + 15 * dt
  if frame >= 9 then frame = 1 end
end

function love.draw()
  local frm = math.floor(frame)
  love.graphics.draw(img, quads[frm], 200, 300)
  outliner:draw(3, img, quads[frm], 400, 300)
  outlinerOnly:draw(3, img, quads[frm], 600, 300)
end

function love.keypressed(k)
  if k == "escape" then return love.event.quit() end
end

Pictures, or it didn't happen:

outliner-example.png (5.41 KiB) Viewed 5682 times

[yetneverdone]

Thanks for this! Im using this in my project now.

Also just to confirm, the quad/texture needs transparent padding enough for the outline to be drawn right?

[pgimeno]

Also just to confirm, the quad/texture needs transparent padding enough for the outline to be drawn right?

Yes, the shader won't draw anything outside the rectangle of the image being drawn.