4

I am looking to create a glsl shader program that will give me a variable width outline around an arbitrary 2d texture as shown in the picture. Is this a reasonable job for the GPU? I've looked at edge-detection approaches but those would only reasonably provide a few pixels border. I want arbitrary width. Is this doable?

enter image description here

genpfault
  • 51,148
  • 11
  • 85
  • 139
Bret
  • 883
  • 1
  • 9
  • 18
  • Well in fragment shader you can `texelFetch` in say 8 directions of specified width around your current pixel, and if any texel has non-transparent alpha, then you return the red pixel. Though it sounds costly and the edge won't be as smooth – Alexey S. Larionov Nov 12 '21 at 17:54
  • Yikes that's not encouraging. Maybe i'm barking up the wrong tree – Bret Nov 12 '21 at 18:23
  • 3
    @Bret: can you preprocess the texture? If yes then compute a SDF (signed distance field) and store it in the alpha channel. Look up text rendering with SDFs for inspiration. – Yakov Galka Nov 12 '21 at 19:53
  • Thanks I’ll read up on sdf. I was also considering a multi pass approach—drawing edge pixels on each pass so there would be a pass for each increase in line thickness. – Bret Nov 13 '21 at 02:27
  • 1
    https://en.wikipedia.org/wiki/Mathematical_morphology#Dilation – genpfault Nov 14 '21 at 20:18

1 Answers1

-1

One approach would be to render the object to a texture with a bit larger scale and color it all the way your outline color should be. Then you render it to another texture as it should be displayed. In a third render pass you could then combine the 2 textures by choosing the outline texture, when the color-texture is empty and else the color texture. This could be an expensive process, but it obviously depends on the scope of your project if that impacts performance too much. Image of three-Step image process

Daniel Bauer
  • 56
  • 8