我尝试使用带符号的距离字段实现字体渲染。

我的程序首先生成字体大小为64的单声道位图(使用FreeType),然后从位图生成SDF。然后将其上载到纹理图集。

结果不是很好,看起来也不像各种论文所示:



我的猜测是位图没有足够高的分辨率,但是
我不一定要生成大于64px的SDF(它们必须适合图集)。此外,在256像素时,生成的sdf仍然有瑕疵,尽管除非被炸毁,否则它就不那么明显了。

那么如何获得更好的结果/如何将算法错误地应用?

评论

乍看之下,边缘伪像有点让人联想到低分辨率纹理上的alpha测试边缘。这是从SDF渲染的轮廓,对吗?您可以显示SDF本身吗?如果看起来正确,那么我将检查纹理是否设置正确(插值模式等),并在最终的渲染着色器中查找数学错误。

好了,生成的sdf看起来像这样(以文本形式):pastebin.com/5GY71Y15

sdf的插值图像如下所示:imgur.com/G7pAlLT

#1 楼

嗯,那个SDF看起来不正确。它应该更加平滑,例如以下图像:



(此博客中的图像)。

我注意到一个可能的问题您的描述:


我的程序首先生成一个字体大小为64的单声道位图(使用FreeType),然后从该位图生成一个SDF。


初始文本需要比生成的SDF高得多的分辨率进行渲染,因此您可以在SDF中存储的距离中获得亚像素精度。例如,在原始的Valve纸中,它们以4096×4096的分辨率渲染初始单声道位图,以便从中生成64×64 SDF。