# Text rendering - weird outline when zoomed

I'm writing a simple text editor using Vulkan for rendering, and I'm seeing some strange outline around the rendered letters if I take a screenshot of the text and zoom in, which bothers me because I can't explain why it's there.

Here's what RenderDoc shows in the texture view (note that in the pixel context view at the bottom right there's no outline around the text)

However, if I take a screenshot and zoom in, I'll see this border around the letters:

I use a pre-rendered font atlas in a texture stored as R8_UNORM. Then I use a very basic shader which takes the texture and produces a pixel with premultiplied alpha, ready to be blended by just adding the colors of src and dest:

#version 450 core

layout(set = 1, binding = 0) uniform sampler2D texSampler;

layout(location = 0) in vec2 v_tex_coord;
layout(location = 1) in vec3 v_color;

layout(location = 0) out vec4 f_color;

void main() {
f_color = vec4(v_color, 1.0) * texture(texSampler, v_tex_coord).a;
}


I'm puzzled and out of ideas on why this outline is there - I don't see why the pixels next to text border would suddenly become darker when I'm only adding positive color components and none of them are negative (just to make sure there are no negative components I tried modifying the shader and took absolute value of every component with exactly the same result).

In case it matters, my swapchain surface format is B8G8R8A8_UNORM and the colorspace is SRGB_NONLINEAR_KHR. The colors are exactly what I expect them to be so I assumed that gamma-wise it's OK but maybe I'm wrong.

Would appreciate any help with this.

UPD. I just made it work on my office Macbook and there's no outline there! So it must be something to do with either my window surface on windows or even with screenshot-taking apps (I've tried snipping tool, printscr and snip & sketch)

• Looks like you're "zooming in" with a cubic filter.
– Wyck
Mar 24 at 1:49
• @Wyck I'm zooming in in GIMP, I've tried capturing both my text and text from VSCode on the same screenshot - my text has an outline, the other doesn't. So it must be something else Mar 24 at 3:46
• Premultiplied alpha doesn't mean you "just add src and dest" you still have to multiply the dest by 1-src.alpha. Non-premultiplied src: dest' = dest * (1-src.alpha) + src * (src.alpha) Premultiplied src: dest' = dest * (1-src.alpha) + src
– Wyck
Mar 24 at 3:54
• @Wyck that's a good point - however, it still wouldn't explain why the pixels got darker. Imagine that the src is a white pixel with a 10% opacity and the dest is some dest_color. Then the resulting color will be dest_color * 0.9 + 0.1 * 1.0, which is always brighter than dest_color. I've just made all the text white and there's still an outline :(. Thank you very much for looking into it, it's hard to debug without having the app running. Mar 24 at 5:13
• I'm talking about your blend function not your shader. You've prepared a pre-multiplied color value but you assigned an alpha value of 1.0 (why not assign an alpha value of texture(texSampler, v_tex_coord).a?). Presumably your DST blend factor should be set to VK_BLEND_FACTOR_ONE_MINUS_SRC_ALPHA. And the SRC blend factor should be set to VK_BLEND_FACTOR_ONE. How did you set up your blending? Is blending enabled? (I assume so) Pedantically: alpha = texture(texSampler, v_tex_coord).a; f_color = vec4(v_color, 1.0) * alpha or vec4(v_color * alpha, alpha)
– Wyck
Mar 24 at 5:31

Almost a month after I posted this question I finally found the answer.

The steps I took:

1. I decided to disable blending altogether and play with it:

2. But when inspecting the produced image more closely I noticed that the outline was still there, and it was sticking outside of the rendered quad, which suggested that it's a post-processing effect:

3. I decided to browse through the settings of the graphics driver and found this:

Disabling it removed the outline.

[hard-facepalm-sound.ogg]