WebVR、數據可視化、3D地圖……前端圖形編程前景展望

作者｜周俊鵬

編輯｜覃雲

圖形是人與人之間傳遞信息的媒介，直觀性遠勝於口頭語言和書面語言。4000 多年前，古巴比倫人在石塊上繪製建築物的平面圖；2000 多年前，古希臘人用圖形表達建築思想，而與其相關的數學直到文藝復興時期才開始完善。

—— 摘自《互動式計算機圖形學（第七版）》

將以上的理念帶入到計算機領域，圖形是計算機向用戶傳遞信息的主要媒介。不論是 26 個英文字母構成的代碼還是枯燥的二進位，在直觀性上遠不能比得上圖形。這也是前端相對於其他領域最顯著的特徵。

我入行前端的過程頗有些曲折，讀書期間主攻的方向是當時正熱的 Android 開發，拿到的第一個 offer 是盛大遊戲的測試實習生。可惜盛大要求每周五天全勤，而當時我正在寫畢業論文，時間上沒法保證，很遺憾地拒掉了。第二個 offer 是 SAP 上海研究院 BI 部門的前端實習生，有趣的是，面試的過程中沒有被問及任何關於前端的東西，反而著重討論了 Android 的 UI 適配問題。最終靠著 Android 開發的一點皮毛知識，因緣巧合地成為了一名前端開發者。

在 SAP 參與的項目是基於 SVG 的 charts 圖表庫，技術選型上使用的是開源的 D3.js。Charts 在完整的 Web 應用中僅僅是作為展示數據的工具，是相對小眾的領域，尤其是在如今普及大前端概念的時代背景下更鮮有人討論。我在實習的半年時間內，沒有接觸到 AJAX/ 跨域 /CSS 兼容性這些前端「常識」，爛熟於心的是 viewBox/transform/SMIL(用於實現 SVG 動畫) 等 SVG 圖形編程的基本要素。然而尷尬的是參加校招時發現根本沒有任何一家公司的前端筆試和面試會涉及這些，導致當時我鬱悶地以為怕是入錯了行。後來隨著工作的深入，我逐漸體會到雖然 charts 與常規前端項目所涉及的知識點略有不同，但實際上兩者的差異並非表面看上去那樣巨大。

舉個比較常見的例子，SVG 與 CSS 存在同名屬性 transform，用法基本一致 (SVG 不支持 3D 變換)，支持 translate/scale 等快捷寫法，也支持 matrix 矩陣。CSStransform 的默認變換原點為 HTML 節點自身的中心，即 transform-origin:center center。

SVG 中並不存在 transform-origin 屬性，其變換的的原點始終為 SVG 節點自身的左上角。其實 CSS 的 transform-origin 默認為 center center 是考慮到日常開發中所接觸的 transform 大多以中心點為原點，如果將其賦值為 0 0 則與 SVG 等同。

transform-origin 很大程度上簡化了 transform 的複雜度，但本質上 CSS 的 transform 使用的是與 SVG 相同的坐標體系。事實上，CSS 的 transform 規範本身便是在 SVG 1.1 規範的基礎上延展而來。除此之外，常規前端技術領域還存在與 SVG 許多相似的理念，比如 CSS animation/key-frame 與 SMIL、Shadow DOM 與 SVG等等。

值得一提的是，D3.js 的節點與數據綁定、數據驅動 UI 的模式與 React 頗為類似，卻比 React 的誕生早了許多年。

從圖形到像素

雖然相對於 CSS，SVG 略顯晦澀，但它本身仍然是非常上層的圖形編程技術。SVG 是一種描述性語言，編程的主要方式是通過標籤和屬性的搭配，其語義性側重功能而非邏輯。開發者需要做的是熟知各個標籤和屬性的功能，而無需關注底層實現。比如計算機圖形學所描述的最小系統僅支持點、線段和三角形這三種基本圖元，SVG 一個簡單的標籤背後是計算機在基本圖元基礎上逐個像素的計算邏輯。也就是說，SVG 編程的最小單元是圖形而非像素。細節處理能力的不足，以及性能的瓶頸 (大量的節點)，令 SVG 難以應對複雜的圖形應用程序，「面向像素」的圖形編程技術 -canvas 便成了進一步的選擇。

準確地說，canvas 分為兩部分：HTML 中的標籤和渲染上下文 (Rendering Context)，其中渲染上下文又可分為 2D 渲染上下文和 WebGL 渲染上下文。canvas 2D 在圖形的繪製層面可以視為 SVG 的閹割版：去掉了圖形，只保留路徑 (path)。

canvas 2D 渲染的基本圖元只有長方形 rect，其他所有圖形均是由 path 完成。在 path 的基礎上封裝了一些常用路徑的便捷 API，比如直線 lineTo()、圓弧 arc()、貝塞爾曲線 bezierCurveTo() 等等。對於簡單圖形的繪製 canvas 並不如 SVG 便捷，所以對於數據量較小、結構簡單的 charts(比如柱狀圖、餅圖等)SVG 是比 canvas 更好的技術選型。canvas 的強大之處在於兩點：

豐富的邏輯表現力。canvas 相對底層的 API 有更大的擴展空間，並且 canvas 支持操作 (保存 / 恢復) 畫布的狀態，可應對場景多樣的圖形應用程序；

像素級的處理能力。canvas 可以獲取和修改每個像素點的色值，實現一些炫酷的視覺效果，比如下圖所示的素描風格處理；

從 CSS 到 SVG，前端 UI 脫離了方塊 (CSS 盒子) 的束縛；從 SVG 到 canvas，前端 UI 的表現力深入到像素級。但截止到此也僅僅是在二維世界裡打轉，前端 UI 急切需要能將其帶入到三維世界的「三向箔」。

從二維到三維

WebGL 其實是個「老古董」了，早在 2007 年 Mozilla 和 Opera 瀏覽器就各自實現了初始版本。其標準的推進也非常迅速，WebGL 1.0 標準規範於 2011 年發布。對比之下，2014 年被正式確認的 HTML5；2015 年發布的 ES6；以及雖然 1999 年就開始制定草案卻直至今天仍有部分特性未被確定為標準的 CSS3 們簡直就是小鮮肉了。

相對於 canvas 2D，WebGL 不僅僅是只增加了一個 Z 軸，而是更底層的圖形編程技術。WebGL 理論上更接近純粹的計算機圖形學，基本圖元只包括點、線段和三角形，並且只支持 1 像素寬的線段。像素處理僅僅是 canvas 2D 的一種高級特性，但是對於 WebGL 來說，每一次繪製都是像素級操作。

與 CSS/SVG/canvas 2D 比起來，WebGL 的開發過程是相對枯燥的，沒有便捷的繪圖和變換 API，每個圖形均是向量和矩陣綜合運算的結果。但這也正是圖形編程獨特的魅力。將枯燥的數字和最簡單的圖元組合為複雜的 UI，這是一種極致的創造樂趣。

WebGL shader 的計算由 GPU 承擔，有著比 CPU 更強悍的計算能力，所以 WebGL 最佳的應用場景是數據量龐大、計算密集型程序。目前市場對於 WebGL 應用最廣泛的領域包括遊戲、地圖、WebVR、數據可視化等。

遊戲

遊戲是一種極致的強互動式應用，受限於瀏覽器可調用資源的局限性，HTML5 遊戲相對於客戶端遊戲更輕量，但是隨著設備硬體性能的提升和瀏覽器的進化，目前市面上也不乏可媲美端游的大型 HTML5 遊戲。在保證圖形質量的前提下，遊戲引擎最核心的是計算性能，能夠調動 GPU 的 WebGL 自然成為了不二之選。

地圖

目前較主流的地圖廠商如 Google、高德、百度等均推出了矢量的 3D web 地圖 (搜狗地圖的矢量引擎即將推出，敬請期待)，高清 3D 地圖的數據體量和計算密集度並不亞於遊戲。

WebVR

2016 年被稱為「VR 元年」，雖然目前 VR 的熱門度遠不及當初，但並不代表這個領域沒有市場，只是回到了一個相對理性和穩定的發展速度上。強調沉浸式體驗的 WebVR 對圖形的要求非常苛刻，在 VR 視角下 1 像素的鋸齒都會影響整體的觀感。此外，WebVR 的視角變換靈敏度遠甚於滑鼠和鍵盤，用戶頭部一個微小角度的轉動都會觸發應用程序大量的計算。綜合這些特徵，開發 WebVR 應用的技術棧必須具有像素級處理能力以及高性能計算能力，在前端技術領域能夠滿足這兩項要求的僅有 WebGL。

數據可視化

在人工智慧幾乎遍布街頭巷尾的今天，TensorFlow.js 帶給了前端開發者一個新的市場和方向。作為前端開發者，尤其是作為一個 WebGL 圖形編程的從業者，我看到了人工智慧與前端最緊密也是最理性的結合方式：數據可視化。如果試圖依靠前端有限的計算能力做深度的機器學習可能有些痴人說夢，但是不論什麼時代、何種業務形式，視覺展示都是「剛需」。數據體量和交互場景複雜度的提升也必然推進數據可視化領域的改革，WebGL 必然會取代 SVG 成為複雜數據可視化應用的最佳選擇。

與新技術的融合

性能是計算密集型圖形編程的應用架構核心要素之一，任何可壓榨瀏覽器性能的技術和模式均可嘗試，即便新技術只具備部分可行性，比如 web worker 和 WebAssembly。

web worker 用於實現多線程，並且 worker 線程安全，是前端實現並行計算的最佳也是唯一技術選型。目前瀏覽器支持度比較理想，幾乎成為了 WebGL 應用的基礎技術棧。

WebAssembly 正式規範雖然還未發布，但可以確定的是 WebAssembly 能夠大幅提升前端的計算性能，計算密集型的圖形編程是其最佳的應用場景之一。

工程化

相對於常規前端項目，圖形編程應用在工程化實施上更具優勢。圖形編程是純粹的客戶端渲染並且無 SEO 需求，更利於前後端分離開發和動靜資源的分離部署。數據驅動 UI 也更利於單元測試。

總 結

傳世名畫無非是簡單的顏料所成，背後是畫師們獨特的構圖思想和創作技法；木結構的中國古建築得以千年不倒，其精髓不在於木材而是工匠們的榫卯技藝，這些均是用簡單原料創造出的藝術品。從 CSS 到 SVG，從 SVG 到 Canvas2D，從 Canvas2D 到 WebGL，前端圖形編程技術越來越接近底層，開發者所能使用的「原料」也越來越有限，用最簡單的原料實現豐富視覺表現力的過程中必然充滿了極致的創造樂趣。

作者簡介

周俊鵬，搜狗地圖 Web 前端主管，負責 Web 前端團隊管理和工程化體系建設工作。主要研究方向為前端工程化、前端圖形編程和 Web 應用層架構。

活動推薦

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！