码迷,mamicode.com
首页 > 其他好文 > 详细

基于SDF渲染字体

时间:2019-12-01 10:09:56      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:位图   strong   add   无限   正数   缓存   aik   颜色   因此   

18号字体

技术图片

18号字体放大15倍

技术图片

基于sdf渲染字体放大15倍

技术图片

相比常规的渲染方式,基于SDF渲染文字可无限放大并保持清晰,几乎没有开销就可实现描边,发光,抗锯齿等效果.且它只需要很小的纹理缓存SDF信息即可.

所谓SDF(Signed-distance-field),就是将每个像素存储的颜色值换成距离文字轮廓最短距离,当像素在文字内,则用正数距离,在文字外则用负数距离,文字轮廓距离则是零,因此只要判断像素如果是正数,就输出颜色,否则丢弃颜色即可.

该技术由Valve开发半条命2时提出,当时主要用于渲染图片,之后被广泛用于其他技术中,用于渲染字体仅是其中一项.

相对比常规的渲染方式,除了片段着色器的差别外,主要差别在于生成的纹理缓存.

常规渲染方式的纹理缓存大致如下:

一个纹理只存一个字号

技术图片

一个纹理存储多个字号

技术图片

它们都有一个共同点:每个像素存储的信息都是颜色.而sdf每个像素存储的是距离,因此它能提供矢量信息.(怎么存储多个字号, 可查看合并图集)

SDF纹理

技术图片

SDF渲染字体在网上有很多资料,但我翻遍了百度,只找到一个可运行的文字SDF生成工具,在我反复调试后,发现这个工具生成的SDF是错的,迫不得已我只好花20分钟重写了一个,算法也简单,无非就是暴搜+阀值控制,生成4096*4096的SDF,i7 7700k大概需要1分钟.

描边

技术图片

内发光

技术图片

外发光

技术图片

效果

技术图片

基于SDF渲染字体

标签:位图   strong   add   无限   正数   缓存   aik   颜色   因此   

原文地址:https://www.cnblogs.com/mmc1206x/p/11965064.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!