在 OpenGL 中绘制带阴影的文本 + FTGL

发布于 2024-10-06 05:13:57 字数 443 浏览 5 评论 0原文

我正在使用 FTGL 库在 OpenGL 中绘制文本,一切正常,但是我想向文本添加阴影。我尝试的是用黑色绘制相同的文本,然后用正常颜色在上面绘制文本,如下所示(伪代码):

glColor3f(0, 0, 0); // outline color
DrawText(x-1, y-1, str);
DrawText(x+1, y-1, str);
DrawText(x+1, y+1, str);
DrawText(x-1, y+1, str);
glColor3f(1, 1, 1); // primary color
DrawText(x,y,str);

但是我必须绘制文本 5 次,它看起来仍然不是很好。

我想得到类似屏幕截图

Text with Shadow 的内容

I'm drawing text in OpenGL using FTGL library and everything works just fine, however I would like to add shadow to the text. What I tried is drawing same text with black color and then draw text above that with normal color like this (pseudocode):

glColor3f(0, 0, 0); // outline color
DrawText(x-1, y-1, str);
DrawText(x+1, y-1, str);
DrawText(x+1, y+1, str);
DrawText(x-1, y+1, str);
glColor3f(1, 1, 1); // primary color
DrawText(x,y,str);

But I have to draw the text 5 times and it still does not look very good.

I would like to get something like on the screenshot

Text with shadow

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

枕花眠 2024-10-13 05:13:57

可能有很多方法可以实现这一目标 - 有些方法的质量比其他方法更高。

这就是我要做的:

  1. 将文本渲染到内存中的灰度像素图。
  2. 对其执行高斯模糊(可能使用快速库,例如 QImageBlitz 或 ImageMagick)。模糊半径应约为 2-3px。
  3. 对模糊图像应用陡峭的色调曲线,因此亮度范围 [0.0, 0.9] 映射到接近 0.0。这使得它不再模糊,结果是文本的“肥厚”版本。色调曲线应如下所示:

    alt text

  4. 将其渲染为黑色阴影(使用适当的混合模式来模拟 alpha 混合)。然后在其顶部渲染常规黄色文本(带有您选择的小偏移量)。

此外,您可以根据您想要的阴影的柔和程度使用不同的色调曲线。线性色调曲线会产生非常柔和的阴影。

There are probably a lot of ways to achieve that - some with higher quality than others.

Here's what I would do:

  1. render the text to an in-memory grayscale pixmap.
  2. perform a gaussian blur on it (probably using a fast library such as QImageBlitz or ImageMagick). The blur radius should be about 2-3px.
  3. apply a steep tone-curve to the blurred image, so the luminance range [0.0, 0.9] is mapped to nearly 0.0. This makes it stop being blurry, and the result is a "fattened" version of the text. The tone curve should look something like this:

    alt text

  4. render that as the shadow, in black (using an appropriate blending mode to emulate alpha-blending). Then render the regular yellow text on top of it (with a small offset of your choice).

Also, you can use different tone-curves depending on how soft a shadow you want. A linear tone-curve would give a very soft shadow.

柠檬 2024-10-13 05:13:57

我通常这样做:

  1. 将颜色设置为半透明黑色,例如(0,0,0,0.5)
  2. 在所有九个方向上绘制文本(移动到侧面,然后对角线)
  3. 绘制fg文本。

它看起来相当不错,您可以通过渲染列表和翻译来加快速度。

请参阅此处:https://i.sstatic.net/Dh68y.png

I am usually doing it this way:

  1. set color to semitransparent black, eg (0,0,0,0.5)
  2. draw the text in all the nine directions (move to sides, and then diagonally)
  3. draw the fg text.

It looks quite good, and you can speed it up with render list and translations.

see here: https://i.sstatic.net/Dh68y.png

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文