文字渲染一探

cpuimage發表於2020-07-18

引子

近一個月都在與字型打交道，查閱了不少資料。

發現國內很少有這方面的一些資源，有點奇怪。

故此，想稍微梳理一下這方面的一些資料以及資訊，方便對這方面感興趣的朋友參閱。

 

文字渲染的組成

文字渲染嚴格意義上來說包含幾個主要的核心模組，分別是：

1.字型光柵化 FreeType

它是一個軟體字型引擎，它被設計成小巧、高效、可高度定製和可移植，同時能夠生成高質量的輸出(字形影像)。它還可以用於圖形庫、顯示伺服器、字型轉換工具、文字影像生成工具和許多其他產品。

 

2.字型適配 Fontconfig

主要用於配置、定製管理系統裡的字型，簡單的說就是通過給出的字型資訊，例如粗體，斜體等，找到現有系統中最匹配的這些特徵的字型檔案。

 

3.Unicode文字雙向演算法 FriBidi

主要用來轉換不同語系中存在的文字方向問題，例如右向左的文字， 翻轉後為左向右順序的文字。

 

4.文字塑形HarfBuzz

HarfBuzz是一種文字塑形佈局引擎(text shaping library)，它主要將Unicode轉換為格式正確且位置正確的字形輸出。

簡單地說就是用於適配全世界不同語言的文字編碼佈局。

另一個非常知名庫是ICU,而HarfBuzz的實現中將其作為第三方庫引入

 

5.佈局渲染Cairo或Skia Graphics Library

當你拿到字型字形的資料之後，毫無疑問，

肯定是需要一個佈局渲染引擎把這些文字在對應的位置上畫出來。

 

在手機或者PC端的作業系統中我們看到的文字，是經過以上這個幾個步驟處理之後才能正常且正確地呈現出來。

而時至今日，文字已經沒辦法滿足大家在網路上一些表達上的需要，

從普通的文字，再到字元畫，再到如今各式各樣的emoji表情。

文字渲染這個領域已經有了更多新的需求和呈現。

 

那現代的文字渲染的架構是什麼樣的呢？

我們來看下安卓的文字繪製架構圖：

 

此圖摘自(https://medium.com/mindorks/deep-dive-in-android-text-and-best-practices-part-1-6385b28eeb94)

我們看到，字型光柵化採用了FreeType,渲染採用了Skia,佈局塑形採用了HarfBuzz和ICU，

他們最終通過一個名為Minikin庫向外部提供能力。

那Minikin是個什麼東西，它到底幹了些啥呢？

Minikin 是一個安卓中實現的一個文字佈局庫，並且知名框架Flutter使用的libtxt佈局引擎也是基於Minikin。

Minikin的程式碼倉庫: https://android.googlesource.com/platform/frameworks/minikin/

從其原始碼中，可以大致看到，Minikin做了 字型管理，斷句斷行，emoji字元的判別，Unicode文字雙向演算法，佈局以及測量等。

可謂是麻雀雖小五臟俱全，真的是一份非常值得深入學習的資源。

當然有一個非常不友好的地方就是，它依託著FreeType，Skia，HarfBuzz，ICU四大庫。

而這四大庫，其中任何一個庫學習起來都有夠受的，就別提一共4個。

但是，如果要做好文字渲染這件事情，這就是必須越過的四座大山。

 

那如何入門是好？

一般情況下，如果我們只做中英文的文字渲染，我們暫時不考慮 字型適配，Unicode文字雙向，文字塑形佈局。

那隻要把重心放FreeType和Skia上就足夠了。

也就是兩個步驟:

1. 載入字型

2. 畫出來

就是這樣簡單粗暴。

為了方便大家學習和理解這方面的知識，博主為大家準備了兩份程式碼。

 

1.移除FreeType的libpng第三方庫，改用LodePng替代，主要是簡化編譯。

程式碼倉庫地址：

https://github.com/cpuimage/freetype

這裡要補充說明下，為什麼FreeType用到了libpng。

因為大多數的emoji表情是將PNG格式的圖片直接嵌入到字型檔案裡。

但是因為png格式的圖片體積太大，遷入到字型檔案後，

整個字型檔案過大，並且繪製還存在失真的問題。

為了解決上面提及的幾個問題，

最新的emoji字型採用的是SVG格式嵌入的思路，好處就是體積小，且無損，

但是對於開發者的壞處就是，將SVG光柵化為圖片，

至少需要一個svg引擎，操作起來真的麻煩。

而最新版的FreeType 2.10.2 還沒有支援svg格式，不過已經有人在嘗試擴充套件這個功能了。

詳情可參閱：

https://summerofcode.withgoogle.com/archive/2019/projects/6002250785226752/

 

2.簡易的文字繪製示例TinyText

這是博主將谷歌開源的一個物理引擎Tiny Differentiable Simulator中的文字繪製模組單獨提取出來，

並採用第三方庫SDKpowervr-sdk-tools進行編譯開發，

目前僅支援在Windows64位環境下編譯，如果要適配其他作業系統，

自行替換第三方庫powervr-sdk的其他系統版本即可。

程式碼倉庫地址：

https://github.com/cpuimage/TinyText

示例效果圖如下:

編譯環境可以參閱Windows下C,C++開發環境搭建指南

 

推薦一個可參閱學習的專案:

freetype-gl 這是一個非常值得參閱學習的專案，字型渲染涉及到的基本演算法，都有了，而且還是純C的程式碼。

 

深入字型渲染之抗鋸齒

當然有繪製渲染，就肯定存在抗鋸齒的問題。

抗鋸齒有好幾種方案和思路。

有兩種主流的演算法:

  1. Signed distance fields 有向距離場

關於距離場的演算法知識就不展開細說了，

大夥可以參閱這個連結瞭解一下 https://zhuanlan.zhihu.com/p/26217154

基於距離場演算法做抗鋸齒有個弊端，因為距離是有強弱的，

如果距離場設定的半徑過大，字型會呈現得過渡平滑，

細節丟失，換句話說全是鈍角沒有銳角，會模糊失真。

但如果設定的半徑過小，就沒有抗鋸齒的效果，

所以採用距離場是需要進行引數適配的。

看圖自行感受一下：

 

 

  1. Vector textures 向量紋理

思路是基於貝塞爾曲線進行繪製。

簡單地講就是將文字資訊轉為svg描述格式，

然後進行光柵化繪製。

好處自然就是向量化無損。

看圖自行感受一下：

 

 

文字渲染如果細講的話，很難三言兩句就講明白的。

 

所以博主這裡為大家提供一些參考資料：

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

  2. Korok字型系統設計 https://zhuanlan.zhihu.com/p/36553076

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

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

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

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

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

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

 

以上，權當拋磚引玉之用。

授人以魚不如授人以漁。

 

2020年，希望疫情早點結束，大家恢復正常的工作和生活。

世界和平，人們皆友愛。

 

若有其他相關問題或者需求也可以郵件聯絡俺探討。

郵箱地址是: gaozhihan@vip.qq.com

相關文章