如今，網頁上也能製做專業級 3D 藝術字了

長久以來，瀏覽器都被認爲是個上限偏低的平臺，難以承載 3D 渲染等高性能要求的應用。但 Web 打開即用的便捷性，又無疑具有着巨大的想象空間。做爲研發在線圖形設計應用的團隊，咱們在稿定一直致力於推進 Web 上專業級設計能力的落地。而 3D 文字能力，就是咱們最新交出的答卷。

相信很多在 XP 年代作過 PPT 的同窗，都知道那時 Office 是能夠默認在 PPT 裏渲染出 3D 形式的文字的。像這樣：

不過你們對這種效果最近的印象，更多是在中老年表情包裏這樣的：

確實是聽起來高大上的 3D 呀！但你是否也能感覺到這樣的 3D 效果，有種比較濃厚的「土味」或者「廉價感」呢？這類功能確實早已有之，但效果一直有些……好吧，一言難盡。從 Office WordArt 誕生到如今，很難說這個領域的進步足夠大，甚至它自身的很多 3D 效果都慢慢被雪藏起來了。然而，技術的發展是存在成熟度的曲線週期的。在迎來一些雖小但關鍵的突破後，一項技術才能真正地更新換代。在 9102 年的今天，能夠認爲咱們遇上了兩個時間點：

1. 瀏覽器的 WebGL 技術幾乎徹底覆蓋。這標誌着國內普通用戶所安裝的瀏覽器，幾乎都能直接用來渲染 3D 效果。
2. 源於電影和遊戲工業的基於物理渲染 (PBR) 技術基本標準化，它大大提高了實時渲染效果的上限和易用性。

在這個時間點上，咱們實現了：

• 將長久以來必須下載安裝才能體驗的 3D 效果，在普通人所使用的瀏覽器頁面上渲染了出來，而不是隻有高端顯卡配最新瀏覽器才能用。
• 引入工業界基於物理渲染的工做流，提供更好的表現力和易用性。咱們還爲此搞了個渲染引擎來着 XD

結合了這二者以後，咱們就可以在網頁裏對質感有更精確的控制了。從這樣的金屬質感：

到這樣的岩石質感：

再到這樣的鮮豔光澤質感：

這都是經過咱們的編輯器，在瀏覽器裏實時渲染獲得的。

那什麼是質感呢？真實世界中，你所看到的物體顏色，並不是由物體表面的 「RGB 色值」 直接決定，而會在光照影響下，具有微妙的過渡——譬如對口紅的色號來講，真正重要的毫不是直男眼裏的 RGB 數值，而應該是塗上後總體的光面、霧面等質感（好吧其實我不懂口紅）。這種質感，咱們也稱之爲「材質」。在咱們所採用的 PBR 工做流中，最核心的材質效果是由金屬度和粗糙度控制的。

什麼是金屬度和粗糙度呢？這是兩個範圍爲 0～1 的數值，用來控制物體的質感。一些物理學上的規律，簡單說來是這樣的：

• 金屬能更強地反射出彩色（或自身顏色）的鏡面色彩，非金屬（絕緣體）反射出的顏色則更接近灰色（或單色）。
• 金屬會吸取一部分光能（漫反射），非金屬則不會。
• 沒有絕對光滑的物體，全部物體表面都像是由很是多微小的鏡面組成的。越粗糙的物體，這些平面的排布就越雜亂。

所以，粗略地說有如下現象：

• 金屬度越高，物體越能反射出多彩的顏色，而不僅有本身自己的顏色。
• 金屬度越高，物體總體的亮度就會越低一些。
• 粗糙度越高，物體就越不能當鏡子用，亦即鏡面反射的方向越雜亂 。

這些現象在咱們引擎的渲染算法中都獲得了體現。以被單個點光源照亮的紅色球體爲例，在不一樣的金屬度和粗糙度參數下，咱們渲染獲得的效果就存在着明顯的質感區別：

咱們能夠發現如下現象：

• 高金屬度（右側總體）的球，廣泛總體更暗淡一些，但反射出的光源（亮點）的亮度更強，也更接近自身顏色（更紅）一些。
• 低粗糙度（下方總體）的球，有強烈的鏡面效果，能看到點光源的位置。
• 高粗糙度（上方總體）的球，廣泛鏡面效果更低一些，磨砂的質感更強。

上面的例子只使用了一個點光源。在此基礎上，咱們還支持環境光，亦即將一張 360 度的全景圖做爲光源，全方位地照亮物體。好比，咱們能夠把下面這張全景圖做爲光照的輸入：

保持點光源打開，把一樣的這些紅色球體「放在」這個環境中，就能得到這樣的渲染效果了：

在更復雜的光照狀況下，也能感覺到這些球體的質感，仍然分別是紅色的，或磨砂或光滑的，塑料球或金屬球。咱們線上的模板素材裏，一樣充分應用了不一樣的材質，從而用一套代碼渲染出多樣化的質感效果。

材質算法其實只是瀏覽器中整個 3D 文字繪製流程的一部分。在 Web 瀏覽器裏，咱們控制了以下的一條鏈路，覆蓋了從請求字體文件到繪製屏幕像素的整個過程：

歸納而言包括這麼一些關鍵步驟：

1. 請求壓縮過的字體文件，做爲起點
2. 將字體文件中的字形數據，轉換爲 2D 路徑
3. 將 2D 路徑轉換爲 3D 幾何數據，也就是所謂的 Mesh 網格
4. 基於 WebGL，渲染 3D 文字到 Canvas 上
5. 在咱們的平面編輯器中管理這些 3D 文字的狀態，實現平滑的編輯體驗

走通這個過程後，咱們作到了在瀏覽器的 DOM 環境下，讓 3D 文字與其餘內容良好地共存，還可以快捷地切換它的材質。就像這樣：

能夠看到，如今咱們的 Web 編輯器中，用戶不須要複雜的圖形理論基礎，也能輕鬆地爲文字添加 3D 效果啦～移步這裏便可體驗免費的 稿定 3D 文字模板

做爲一個前端工程師，這應該是我作過的最能結合技術和人文的項目了。從文字排印到到攝影理論，從立體幾何到着色算法，從 Web 瀏覽器到圖形渲染管線，來自各個領域的知識被串聯了起來，最後實現了業界中的全新體驗——你無需下載安裝，只要打開連接，就能輕鬆製做出富有質感的精美 3D 文字。許多小夥伴們的支持在這個過程裏都相當重要，這裏也再次表示感謝！

固然，現階段的 3D 文字還有不少能夠改進的地方，如今的效果「專業」程度比起工業級 3D 渲染軟件，也還有許多差距。咱們會繼續保持學習，優化體驗，提高效果和易用性，探索 Web 設計在 3D 方向上的形態，也但願接下來能總結出更多的技術乾貨和你們分享。最後，歡迎志同道合的小夥伴們加入咱們噢～