使用WebGL渲染文本的技術-css教學-PHP中文網

首頁

web前端

css教學

使用WebGL渲染文本的技術

尊渡假赌尊渡假赌尊渡假赌

Apr 13, 2025 am 09:54 AM

使用WebGL渲染文本的技術

正如WebGL中的規則一樣，看起來應該很簡單的任何東西實際上都非常複雜。繪圖線，調試著色器，文本渲染……它們在WebGL中都很難以做到。

那不是很奇怪嗎？ WebGL沒有用於渲染文本的內置功能。儘管文本似乎是最基本的功能。當涉及到實際渲染時，事情變得複雜。您如何解釋每種語言的巨大字形？您如何使用固定寬度或比例寬度字體工作？當需要將文本渲染到上下，從左到右或向右右轉時，您該怎麼辦？數學方程式，圖表，樂譜？

突然間，為什麼文本渲染在像WebGL這樣的低級圖形API中沒有位置。文本渲染是許多細微差別的複雜問題。如果我們想渲染文本，我們需要發揮創造力。幸運的是，許多聰明的人已經為我們所有的WebGL文本需求提出了廣泛的技術。

我們將在本文中學習其中的一些技術，包括如何生成所需的資產以及如何與其中包括WebGL渲染器的JavaScript 3D庫一起使用。作為獎勵，每種技術都將具有演示顯示用例。

WebGL之外的文字快速註釋

儘管本文全部與WebGL中的文本有關，但您應該考慮的第一件事是您是否可以使用覆蓋在WebGL帆布頂部的HMTL文本或畫布。 3D幾何形狀不能用作覆蓋層的覆蓋，但是您可以從開箱即用。在很多情況下，這就是您所需要的。

字體幾何

渲染文本的常見方法之一是用一系列三角形構建字形，就像常規模型一樣。畢竟，渲染點，線條和三角形是WebGL的優勢。

創建字符串時，每個字形都是通過從三角形點的字體文件中讀取三角形來製作的。從那裡，您可以擠出字形以使其3D或通過矩陣操作擴展字形。

字體幾何最適合少量文本。那是因為每個字形都包含許多三角形，這會導致繪畫變得有問題。

通過字體幾何形狀創建185,084個三角形和555,252個頂點，您現在正在閱讀此精確段落。這只是259個字母。使用字體幾何形狀編寫整個文章，您的計算機風扇可能會成為飛機渦輪機。

儘管三角形的數量因三角測量的精度和使用的字體而變化，但在使用字體幾何時，渲染大量文本可能總是是一個瓶頸。

如何從字體文件創建字體幾何形狀

如果它像選擇想要的字體和渲染文本一樣容易。我不會寫這篇文章。常規字體格式用曲線定義字形。另一方面，在CPU上繪製WebGL的繪製非常昂貴，並且也很複雜。如果我們想渲染文本，我們需要從bezier曲線中創建三角形（三角剖分）。

我找到了一些三角剖分方法，但是絕不是完美的，它們可能無法與每種字體一起使用。但是，至少他們會讓您開始進行三角剖分的字體。

方法1：自動且容易

如果您使用的是三j，則通過faceType.js傳遞字體，以從字體文件中讀取參數曲線並將其放入.json文件中。三j中的字體幾何特徵會為您提供三角測量：

 const幾何= new Trix.fontgeometry（“ Hello wance”，{font：font，size：80}）

另外，如果您不使用三j，則不需要實時三角剖分。您可以通過使用三角剖分為您的字體來節省手動過程的痛苦。然後，您可以從幾何形狀中提取頂點和索引，然後將它們加載到您選擇的WebGL應用程序中。

方法2：手動和痛苦

至少在最初，三角形文件的手動選項非常複雜且令人費解。這將需要整篇文章以詳細解釋。也就是說，我們將迅速介紹我從Stackoverflow獲取的基本實現的步驟。

實施基本上是這樣分解的：

將Opentype.js和Earcut.js添加到您的項目中。
使用opentype.js從.tff字體文件中獲取更偏見的曲線。
將Bezier曲線轉換為封閉形狀，然後通過降序區域對其進行排序。
通過找出其他形狀內部的形狀來確定孔的指標。
將所有點作為第二個參數將所有點帶到耳塞。
使用耳塞的結果作為幾何索引。
呼吸。

是的，很多。此實現可能對所有字體都不起作用。儘管如此，它仍然會讓您入門。

在三j中使用文本幾何形狀

值得慶幸的是，三台j支持開箱即用的文本幾何形狀。給它一個.json，介紹了您最喜歡的字體的Bezzier曲線，而TrixJ則可以在運行時為您提供三角剖分。

 var loader = new Trix.fontloader（）;
var font;
var text =“ Hello World”
var loader = new Trix.fontloader（）;
loader.load（'fonts/helvetiker_regular.typeface.json'，function（helvetiker）{
  字體= helvetiker;
  var幾何= new Trix.textgeemetry（文本，{
    字體：字體，
    尺寸：80，
    身高：5，
  }）;
}

優勢

創建3D字符串很容易擠出。
矩陣操作使縮放更加容易。
根據所使用的三角形數量，它提供了良好的質量。

缺點

由於高三角計數，這與大量文本相比並不能很好地擴展。由於每個角色都由許多三角形定義，甚至像“ Hello World”一樣簡短的東西會導致7,396個三角形和22,188個頂點。
這不適合常見的文本效果。
反縮減取決於您的後處理混溶或瀏覽器默認值。
擴大太大的縮放可能會顯示三角形。

演示：褪色的信件

在以下演示中，我利用了使用字體幾何形狀創建3D文本的容易。在頂點著色器內部，隨著時間的推移，擠出量增加並減少。將其與霧和標準材料搭配，您會得到這些幽靈般的字母進出空白。

請注意，用較低的字母量如何，三角形的數量已經存在數万個！

文本（和畫布）紋理

製作文本紋理可能是在WebGL中繪製文本的最簡單和最古老的方法。打開Photoshop或其他一些柵格圖形編輯器，繪製帶有一些文本的圖像，然後將這些紋理渲染到四邊形上，然後完成！

另外，您可以使用畫佈在運行時創建按需創建紋理。您也可以將畫布作為質地渲染到四輪上。

除了是最不復雜的技術。文本紋理和帆布紋理具有每個紋理或給出的文本只需要一個四輪軸的好處。如果您真的願意，可以用單個質地編寫整個英國百科全書。這樣，您只需渲染一個四Quad，六個頂點和兩個面。當然，您會以一個規模進行操作，但仍然存在這個想法：您可以將多個字形批量地插入同一四邊形。文本和畫布紋理都有縮放問題的問題，尤其是在使用大量文本時。

對於文本紋理，用戶必須下載構成文本的所有紋理，然後將其保存在內存中。對於帆布紋理，用戶不必下載任何內容 - 但是現在，用戶的計算機必須在運行時進行所有柵格化，並且您需要跟踪每個單詞在畫布中的位置。另外，更新大畫布可能真的很慢。

如何創建和使用文本紋理

文本紋理對他們沒有任何奇特的態度。打開您喜歡的柵格圖形編輯器，在畫布上繪製一些文本，然後將其導出為圖像。然後，您可以將其作為紋理加載，然後將其映射到飛機上：

 //加載紋理
令紋理=;
const幾何=新的三。
const材料新的三。
this.scene.add（新網格（幾何，材料））;

如果您的WebGL應用程序有很多文本，則下載龐大的文本表可能不是理想的，尤其是對於慢速連接的用戶而言。為了避免下載時間，您可以使用屏幕外帆布將其按需柵格化，然後對畫布作為質地進行採樣。

讓我們交易下載時間以進行性能，因為將大量文本柵格化的時間不止一刻。

函數createTextCanvas（String，parameters = {}）{
    
    const canvas = document.createelement（“ canvas”）;
    const ctx = canvas.getContext（“ 2d”）;
    
    //準備可以測量的字體
    令fontsize = parameters.fontsize || 56;
    ctx.font =`$ {fontsize} px monospace`;
    
    const textmetrics = ctx.measuretext（text）;
    
    令width = textmetrics.width;
    讓高度= fontsize;
    
    //調整帆布大小以匹配文本大小 
    canvas.width = width;
    canvas.height =高度;
    canvas.style.width =寬度“ px”;
    canvas.style.height =高度“ px”;
    
    //重新塗抹字體，因為調整了帆布的大小。
    ctx.font =`$ {fontsize} px monospace`;
    ctx.textalign = parameters.align || “中心” ;
    ctx.textbaseline = parameters.baseline || “中間”;
    
    //使畫布透明以簡單
    ctx.fillstyle =“透明”;
    ctx.fillect（0，0，ctx.canvas.width，ctx.canvas.height）;
    
    ctx.fillstyle = parameters.color || “白色的”;
    ctx.filltext（文本，寬度 / 2，高度 / 2）;
    
    返回畫布；
}

令紋理= new three.texture（createTextCanvas（“ this is text”））;

現在，您可以像以前的摘要一樣使用飛機上的紋理。或者您可以創建一個精靈。

作為替代方案，您可以使用更有效的庫來創建紋理或精靈，例如三text2d或三秒錶。而且，如果您想要文本多行文本，則應查看此驚人的教程。

優勢

這提供了具有靜態文本的優質1比1質量。
頂點/臉部計數低。每個字符串只能使用六個頂點和兩個面。
在四邊形上實現紋理很容易。
使用畫布或圖形編輯器添加效果，例如邊界和發光，這是相當微不足道的。
畫布使創建多行文本變得容易。

缺點

如果射手化後縮放，旋轉或轉換，則看起來模糊。
在非視網膜上，文字看起來鬆脆。
您必須將所有使用的字符串柵格化。許多字符串意味著要下載很多數據。
如果您不斷不斷更新畫布，則用畫布進行按需柵格化可能會很慢。

演示：帆布紋理

帆布紋理可與有限數量的文本不經常變化的有限文本運作良好。因此，我用四邊形構建了一個簡單的文本牆，重複使用相同的紋理。

位圖字體

字體幾何形狀和文本紋理都經歷了處理大量文本的相同問題。每片文本具有100萬個頂點是超級效率的，並且每片文本創建一個紋理並不能真正擴展。

Bitmap字體通過將所有唯一的字形將所有獨特的字形（稱為紋理地圖集）柵式化來解決此問題。這意味著您可以在運行時組裝任何給定的字符串，從而為每個字形創建四邊形並對紋理地圖集的部分進行採樣。

這意味著用戶只需要為所有文本下載並使用單個紋理。這也意味著您只需要每個字形渲染一個四四分之一：

整個文章的渲染約為117,272個頂點和58,636個三角形。與僅一段段落的字體幾何形狀相比，這是高效的3.1倍。這是一個巨大的進步！

由於位圖字體將字形柵格化成紋理，因此它們與常規圖像相同的問題。放大或擴展，您開始看到像素化和模糊的混亂。如果您想以不同的尺寸的文本，則應在該特定尺寸上發送帶有字形的輔助位圖。或者，您可以使用簽名的距離字段（SDF），我們將在下一節中介紹。

如何創建位圖字體

有很多可以生成位圖的工具。以下是一些更相關的選項：

Angel Code的BMFont - 這是由位圖格式的創建者組成的。
Hiero - 這是Java開源工具。它與Anglecode的BMFont非常相似，但是它允許您添加文本效果。
字形設計師 - 這是一個付費MacOS應用程序。
鞋盒 - 這是用於處理精靈（包括位圖字體）的工具。

我們將使用AngleCode的BMFont來示例，因為我認為這是最簡單的開始。在本節的底部，如果您認為它缺乏所需的功能，則可以找到其他工具。

打開應用程序時，您會看到一個屏幕上充滿了可以選擇的字母，這是您只能抓住所需的字形而不是發送希臘符號的好處。

該應用程序的側邊欄使您可以選擇並選擇一組字形。

準備出口了嗎？轉到選項→將位圖保存為。並完成了！

但是我們要領先一些。在導出之前，您應該檢查一些重要的設置。

字體設置：這讓您選擇要使用的字體和大小。這裡最重要的項目是“匹配的Char Height”。默認情況下，應用程序的“大小”選項使用像素而不是點。您會看到圖形編輯器的字體大小與生成的字體大小之間存在實質性差異。如果您希望字形有意義，請選擇“匹配的Char Height”選項。
導出設置：對於導出，請確保紋理大小為兩個功率（例如16×16、32×32、64×64等）。然後，如果需要，您就可以利用“線性MIPMAP線性”過濾。

在設置的底部，您將看到“文件格式”部分。只要您可以讀取文件並創建字形，選擇這兩個選項就可以了。

如果您正在尋找最小的文件大小。我進行了一個超級非科學測試，在其中創建了所有lowcase和大寫拉丁字符的位圖，並比較了每個選項。對於字體描述符，最有效的格式是二進制的。

字體描述符格式	文件大小
二進制	3 kb
原始文字	11 kb
XML	12 kb

紋理格式	文件大小
PNG	7 KB
塔加	64 KB
DirectDraw表面	65 KB

PNG是文本紋理的最小文件大小。

當然，它比文件大小要復雜一些。為了更好地了解要使用哪種選項，您應該研究解析時間和運行時間性能。如果您想了解每種格式的優缺點，請查看此討論。

如何使用位圖字體

創建位圖字體幾何形狀比僅使用紋理要多一些，因為我們必須自己構造字符串。每個字形都有其自身的高度和寬度，並採樣了紋理的不同部分。我們必須為字符串上的每個雕文創建一個四邊形，以便我們可以給他們正確的紫外線以採樣其雕文。

您可以在三js中使用三個bmfont-text使用位圖，SDFS和MSDF創建字符串。它需要多行文本，並將所有字形批量劃分到單個幾何形狀上。請注意，它需要從NPM安裝在項目中。

 var createGeementry = require（'trix-bmfont-text'）
var loadfont = require（'load-bmfont'）

loadFont（'fonts/arial.fnt'，function（err，font）{
  //創建一個包裝的位圖字形的幾何形狀， 
  //包裝到300px並右對齊的單詞
  var幾何=創建地理計（{{
    字體：字體，
    文字：“我的文字”
  }））
    
  var textureloader = new trix trix.textureloader（）;
  textureloader.load（'fonts/arial.png'，函數（紋理）{
    //我們可以使用簡單的三j材料
    var Material = new Trix.meshbasicmaterial（{
      地圖：紋理，
      透明：是的，
      顏色：0xaaffff
    }））

    //現在用我們的網眼做一些事情！
    var網格=新的三。網格（幾何，材料）
  }））
}））

無論何時將文本繪製為全白色或全白色，請使用倒置選項。

優勢

快速而簡單地渲染。
這是獨立於1：1的比率和分辨率。
給定字形，它可以渲染任何字符串。
對於需要經常更改的許多文本來說，這是一件好事。
它與數量有限的字形非常好。
它包括對kerning，行高和撰寫文字包裝等事物的支持。

缺點

它僅接受有限的字符和样式。
它需要預先儲存的字形和額外的垃圾箱包裝才能進行最佳使用。
它是模糊的，在大尺度上像素化，也可以旋轉或轉換。
每個渲染的字形只有一個四四核。

互動演示：閃亮的積分

柵格位圖字體非常適合電影信用，因為我們只需要幾種尺寸和样式。缺點是文本在響應式設計中並不大，因為它看起來會模糊和像素化的大小更大。

對於鼠標效果，我要通過將鼠標位置映射到視圖的大小，然後計算從鼠標到文本位置的距離進行計算。當文本達到Z軸和Y軸上的特定點時，我也在旋轉。

簽名的距離字段

就像位圖字體一樣，簽名的距離字段（SDF）字體也是紋理地圖集。唯一的字形分批成單個“紋理地圖集”，可以在運行時創建任何字符串。

但是，與位圖字體這樣做的方式並沒有將柵格化的字形存儲在紋理上，而是生成並存儲了字形的SDF，而不是從低分辨率圖像中產生高分辨率的形狀。

像多邊形網格（字體幾何）一樣，SDF代表形狀。 SDF上的每個像素都存儲到最接近表面的距離。符號指示像素在形狀內部或外部。如果符號為負，則像素在內部；如果是積極的，那麼像素就在外面。該視頻很好地說明了這個概念。

SDF S也通常用於射線縮放和體積渲染。

由於SDF在每個像素中存儲距離，因此原始結果看起來像是原始形狀的模糊版本。要輸出用α在0.5測試的硬形狀，這是字形的邊界。看看字母“ A”的SDF與常規光柵圖像相比：

正如我之前提到的，SDF S的最大好處是能夠從低分辨率SDF中呈現高分辨率的形狀。這意味著您可以創建16pt字體SDF，並將文本擴展到100分或更多，而不會丟失太多。

SDF S擅長縮放，因為您幾乎可以通過雙線性插值完美地重建距離，這是一種奇特的方式，說我們可以在兩個點之間獲得值。在這種情況下，在常規位圖字體上兩個像素之間的雙線性插值使我們具有內在的顏色，從而導致線性模糊。

在SDF上，兩個像素之間的雙線性插值提供了與最近邊緣的內在距離之間的距離。由於這兩個像素距離與一開始相似，因此結果值不會丟失有關字形的太多信息。這也意味著SDF越大，丟失的信息就越準確和較少。

但是，此過程帶來了警告。如果像素之間的速率變化不是線性的（例如在尖角的情況下），雙線性插值會產生不准確的值，從而在縮放SDF縮放量比其原始大小時會導致彎曲或圓角。

除了撞擊紋理方面，唯一真正的解決方案是使用多通道SDF S，這是我們將在下一節中介紹的。

如果您想深入了解SDF S背後的科學，請查看Chris Green的主人論文（PDF）。

優勢

即使旋轉，縮放或轉換時，它們也保持酥脆。
它們是動態文本的理想選擇。
它們提供了良好的尺寸比率。單個紋理可用於渲染微小和巨大的字體尺寸，而不會失去太多質量。
他們的頂點計數低，每個字形僅四個頂點。
抗質量很便宜，就像在alpha測試中製作邊界，掉落陰影和各種效果一樣。
它們比MSDF S小（我們會稍微看到）。

缺點

當對紋理進行採樣時，可以導致圓角或碎裂的角落。（同樣，我們將看到MSDF S可以預防這一點。）
它們的小字體大小無效。
它們只能與單色字形一起使用。

多通道簽名的距離字段

多通道簽名的距離字段（MSDF）字體有點像SDF S上有點張開，並且是一種相當最近的變化，它能夠使用所有三個顏色通道，能夠產生接近完美的尖角。一開始，他們確實看起來很震驚，但不要讓您脫穎而出，因為它們易於使用，而不是看起來。

使用所有三個顏色通道確實會導致較重的圖像，但這就是使MSDF的質量與空間比的比例要比常規SDF s好得多。以下圖像顯示了已擴展到50px的字體的SDF和MSDF之間的差異。

像普通的SDF一樣，MSDF將距離與最近的邊緣保持距離，但只要發現一個尖銳的角落就會更改顏色通道。我們通過繪製兩個顏色通道或更多同意的位置來獲得形狀。儘管涉及更多的技術。查看此MSDF發電機的讀書文件，以進行更徹底的解釋。

優勢

它們比SDF S支持更高的質量和空間比。通常是更好的選擇。
他們在縮放時保持鋒利的角落。

缺點

它們可能包含小文物，但可以通過增加字形的質地大小來避免這種偽像。
他們需要在運行時過濾三個值的中位數，這有點貴。
它們僅與單色字形兼容。

如何創建MSDF字體

創建MSDF字體的最快方法是使用MSDF-BMFONT-WEB工具。它具有大多數相關的自定義選項，並且可以在幾秒鐘內完成工作。另外，有許多Google字體已經由A-Frame的人們轉換為MSDF。

如果您還希望生成SDF S或您的字體，則需要一些有問題的字形，需要進行一些特殊的調整。 MSDF-BMFONT-XML CLI為您提供了多種選擇，而不會使事情過於混亂。讓我們看一下如何使用它。

首先，您需要從NPM全球安裝它：

 NPM安裝MSDF-BMFONT-XML -G

接下來，給它一個.ttf字體文件，其中包括您的選項：

 msdf-bmfont ./open-sans-black.ttf-輸出型json-font-size 76- texture-size 512,512

這些選項值得一提。雖然MSDF-BMFONT-XML提供了很多選擇來調整字體的選項，但實際上，您可能只需要正確地生成MSDF：

-t 或 - field-type <msdf>：MSDF-BMFONT-XML默認情況下生成MSDFS Glyph Atlases。如果要生成SDF，則需要使用-t SDF來指定它。</msdf>
-f 或-ASTPUT-TYPE ：MSDF-BMFONT-XML生成一個XML字體文件，您必須在運行時將其解析為JSON。您可以通過立即導出JSON來避免這種解析步驟。
-s， - font-size ：如果字體大小超過，可能會出現某些文物和瑕疵。大部分時間都會碰到字體尺寸。此示例顯示了字母“ M”中的一個小缺陷。
-m 或-Texture-size ：如果您的所有角色都不適合相同的紋理，則創建了第二個紋理以適合它們。除非您試圖利用多頁面的Glyph Atlas，我建議您增加紋理大小，以避免使用一個文本以避免額外的工作。

還有其他工具可以幫助生成MSDF和SDF字體：

MSDF-BMFONT-WEB：一種可以快速而輕鬆地創建MSDFS（但不是SDF S）的網絡工具
MSDF-BMFONT：使用開羅和節點canvas的節點工具
MSDFGEN：所有其他MSDF工具均基於的原始命令行工具
Hiero：一種生成位圖和SDF字體的工具

如何使用SDF和MSDF字體

由於SDF和MSDF字體也是字形圖譜，因此我們可以像位圖字體一樣使用三個BMFONT-TEXT。唯一的區別是，我們必須用碎片著色器來獲取距離字段的雕文。

這是對SDF字體的工作方式。由於我們的距離字段的值大於字形以外的0.5，而在字形內的值小於0.5，因此我們需要在每個像素上的碎片著色器中測試alpha，以確保我們只渲染距離小於0.5的像素，僅渲染Glyphs的內部。

 const fragmentshader =`

  均勻的VEC3顏色；
  均勻的採樣器2D地圖；
  變化的vec2 vuv;
  
  void main（）{
    vec4 texcolor = texture2d（Map，vuv）;
    //僅渲染字形的內部。
    float alpha =步驟（0.5，texcolor.a）;

    gl_fragcolor = vec4（顏色，alpha）;
    如果（gl_fragcolor.a <p>同樣，我們可以從三個bmfont-text中導入字體，該字體帶有抗精神經氣。然後，我們可以將其直接在生皮材料上使用：</p><pre rel="JavaScript">令SDFSHADER = require（'三bmfont-Text/Shaders/sdf'）;
令材料=新的三。
  地圖：紋理，
  透明：是的，
  顏色：0x000000
}））;

MSDF字體有些不同。他們通過兩個顏色通道的交集重新創建尖角。兩個或兩個以上的顏色渠道必須同意。在進行任何Alpha發短信之前，我們需要獲得三個顏色頻道的中位數，以查看他們同意的位置：

 const fragmentshader =`

  均勻的VEC3顏色；
  均勻的採樣器2D地圖；
  變化的vec2 vuv;

  浮點中位數（浮動R，浮子G，float b）{
    返回最大（最小（R，G），Min（Max（R，G），B））;
  }
  
  void main（）{
    vec4 texcolor = texture2d（Map，vuv）;
    //僅渲染字形的內部。
    float sigdist =中值（Texcolor.r，texcolor.g，texcolor.b）-0.5;
    float alpha =步驟（0.5，sigdist）;
    gl_fragcolor = vec4（顏色，alpha）;
    如果（gl_fragcolor.a <p>同樣，我們還可以使用其MSDFSHADER從三個BMFONT-TEXT導入，該文本還帶有抗逆轉錄和開箱即用。然後，我們可以將其直接在生皮材料上使用：</p><pre rel="JavaScript">令MSDFSHADER = require（'trix-bmfont-text/Shaders/msdf'）;
令材料=新的三。
  地圖：紋理，
  透明：是的，
  顏色：0x000000
}））;