Background independent rendering

[JackiBackiBoy]

Hi, I'm currently developing a UI framework using Vulkan and C++. I have successfully implemented dynamic MSDF font atlases that scale very elegantly through various sizes. However, the way the MSDF shader depends on both the foreground and background color has led to some confusion from my side. For example, if I want to render text with a white color on a dark grey background, I just pass the desired foreground and background color to the shader where the following critical step is done:

FragColor = mix(v_BackgroundColor, v_ForegroundColor, opacity);

I completely understand why this is done, because otherwise the text will have an outline that does not match the background it is being rendered on. However, how should I handle rendering text on top of a texture? In that case, there is not one distinct background color, but instead multiple pixel values. One might suggest supplying the background texture to the shader instead, but another problem arises, namely when text overlaps multiple textures. Thus, I am wondering how I can overlap any surface with transparent MSDF text that adapts to the background? I suspect it has to do with the GLSL mix function.

Thank you in advance!

[Chlumsky]

First of all, the shader is an example, what it mainly shows is how to compute the opacity and what you do with that value is up to you. Second, the background color isn't meant to be the actual background color you will see on the screen but simply the value the shader will output for empty pixels, and it is assumed some sort of blending will take place. So, it would generally be something with 0 alpha like vec4(0.0) or vec4(foregroundColor.rgb, 0.0). If you have problems with an "outline" that shouldn't be there (blending artifacts), look into blending in alpha-premultiplied color space.

Lastly, this isn't really a question related to MSDF, you're basically asking how to draw anything with semi-transparent (anti-aliased) edges on top of a background.

[JackiBackiBoy]

Yeah, now that you mention it the problem is dependent on the blending method I am using and not related to MSDF itself. Thank you for clarifying it for me as well as suggesting alpha premultipliation. I'll look into it! Thank you!