GLSL 2D圆角

Question

我想在我的游戏画面上添加一些黑色轮廓,使其看起来像圆角.这是我想要实现的效果:

我认为这种效果可能很容易使用着色器创建,而不是在所有内容上绘制一个巨大的位图.

有人可以帮我使用GLSL着色器代码来实现这种效果吗？我有使用着色器的0经验,但无法在互联网上找到这样的东西.

Answer 1

我偶然发现了一个很好的解决方案.不完全是你所要求的,但事实上它看起来更好.

// RESOLUTION is a vec2 with your window size in pixels.
vec2 pos = fragCoord.xy / RESOLUTION;
// Adjust .2 (first pow() argument) below to change frame thickness.
if (pos.x * pos.y * (1.-pos.x) * (1.-pos.y) < pow(.2,4.))
    fragColor = vec4(0,0,0,1);

它给出了以下结果:

如果您不喜欢这些细线,可以通过放大图像来移除它们.可以通过添加以下行来完成:

// The .985 is 1/scale_factor. You can try to change it and see how it works.
// It needs to be adjusted if you change frame thickness.
pos = (pos - .5) * .985 + .5;

虽然这种效果看起来不错,但添加一个微弱的阴影可能更聪明.
使用相同的公式很容易实现:pos.x * pos.y * (1.-pos.x) * (1.-pos.y)
它的值从0.0窗口边缘到0.5^4中心.
你可以使用一些简单的数学来做一个靠近窗口边缘变得更厚的阴影.
以下是它的外观示例.
^{(来自Duality的截图,我的Ludum Dare 35的参赛作品.)}