Wouldn’t that cause aliasing if you set those pixels to a solid color? Or do you keep the alpha and set a color so the outline is faint but not aliased?
I'm reusing the alpha channel indeed. And I reverse it for the innermost side of the border.
const float MIN_ALPHA_THRESHOLD = 0.3;
const float MAX_ALPHA_THRESHOLD = 0.7;
[...]
if (fragmentColor.a < MIN_ALPHA_THRESHOLD) {
// Outer edge of the border
float outputAlpha = fragmentColor.a / MIN_ALPHA_THRESHOLD;
outputColor = vColor * outputAlpha;
} else if (fragmentColor.a > MAX_ALPHA_THRESHOLD) {
// Inner edge of the border
float outputAlpha = 1 - ((fragmentColor.a - MAX_ALPHA_THRESHOLD) / (1 - MAX_ALPHA_THRESHOLD));
outputColor = vColor * outputAlpha;
} else {
// "Inside" of the border
outputColor = vColor;
}
So if the border goes like transparent->opaque, I divide it into segments using a threshold (transparent->min_threshold->max_threshold->opaque) and change the alpha values:
- Smoothen out the transparent->min_threshold segment, so that it goes linearly from a=0 to a=1
- make opaque (a=1) the min_threshold->max_threshold segment
- Revert and smoothen out the max_threshold->opaque segment so that it goes linearly from a=1 to a=0