文字渲染一探 (2)

文字渲染一探

编译环境可以参阅Windows下C,C++开发环境搭建指南

 

推荐一个可参阅学习的项目:

freetype-gl 这是一个非常值得参阅学习的项目,字体渲染涉及到的基本算法,都有了,而且还是纯C的代码。

 

深入字体渲染之抗锯齿

当然有绘制渲染,就肯定存在抗锯齿的问题。

抗锯齿有好几种方案和思路。

有两种主流的算法:

Signed distance fields 有向距离场

关于距离场的算法知识就不展开细说了,

大伙可以参阅这个链接了解一下 https://zhuanlan.zhihu.com/p/26217154

基于距离场算法做抗锯齿有个弊端,因为距离是有强弱的,

如果距离场设置的半径过大,字体会呈现得过渡平滑,

细节丢失,换句话说全是钝角没有锐角,会模糊失真。

但如果设置的半径过小,就没有抗锯齿的效果,

所以采用距离场是需要进行参数适配的。

看图自行感受一下:

文字渲染一探

 

 

Vector textures 矢量纹理

思路是基于贝塞尔曲线进行绘制。

简单地讲就是将文字信息转为svg描述格式,

然后进行光栅化绘制。

好处自然就是矢量化无损。

看图自行感受一下:

文字渲染一探

 

 

文字渲染如果细讲的话,很难三言两句就讲明白的。

 

所以博主这里为大家提供一些参考资料:

GPU text rendering with vector textures https://wdobbie.com/post/gpu-text-rendering-with-vector-textures/

Korok字体系统设计 https://zhuanlan.zhihu.com/p/36553076

Font Rendering is Getting Interesting https://aras-p.info/blog/2017/02/15/Font-Rendering-is-Getting-Interesting/

Drawing Text with Signed Distance Fields in Mapbox GL https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817

Techniques For Rendering Text With Webgl https://css-tricks.com/techniques-for-rendering-text-with-webgl/

Rendering Text in Metal with Signed-Distance Fields https://metalbyexample.com/rendering-text-in-metal-with-signed-distance-fields/

sdf-antialiasing https://drewcassidy.me/2020/06/26/sdf-antialiasing/

Font Bitmap vs SDF https://www.shadertoy.com/view/llK3Wm

 

以上,权当抛砖引玉之用。

授人以鱼不如授人以渔。

 

2020年,希望疫情早点结束,大家恢复正常的工作和生活。

世界和平,人们皆友爱。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpwfxz.html