WebGL 產生的背景和歷史
在學習 WebGL 之前，我們先簡單了解一下 WebGL 產生的背景。WebGL 規范產生以前，瀏覽器如果想實現 3D 動畫效果，只能借助一些瀏覽器插件，比如 Adobe 的 Flash、微軟的 SilverLight 等來實現，那么，為了打破這一局限，各大知名公司聯手制定了一種跨平台的 3D 開發標准，也就是 WebGL 規范。WebGL起源於Mozilla員工弗拉基米爾·弗基西維奇的一項稱為Canvas 3D實驗項目。2006年，弗基西維奇首次展示了Canvas 3D的原型。2007年底在Firefox和Opera被實現。在2009年初，非營利技術聯盟Khronos Group啟動了WebGL的工作組，最初的工作成員包括Apple、Google、Mozilla、Opera等。2011年3月發布WebGL 1.0規范。截至2012年3月，工作組的主席由肯·羅素（Ken Russell，全名“Kenneth Bradley Russell”）擔任。WebGL的早期應用包括Zygote Body。WebGL 2規范的發展始於2013年，並於2017年1月完成。該規范基於OpenGL ES 3.0。首度實現在Firefox 51、Chrome 56和Opera 43中。
什么是WebGL
WebGL（Web圖形庫）是一個JavaScript API，可在任何兼容的Web瀏覽器中渲染高性能的交互式3D和2D圖形，而無需使用插件。WebGL通過引入一個與OpenGL ES 2.0非常一致的API來做到這一點，該API可以在HTML5 canvas 元素中使用。 這種一致性使API可以利用用戶設備提供的硬件圖形加速。這些 API 能夠讓 Web 開發者使用 JavaScript 語言直接和顯卡（GPU）進行通信。當然 WebGL 的 GPU 部分也有對應的編程語言，簡稱 GLSL。我們用它來編寫運行在 GPU 上的着色器程序。着色器程序需要接收 CPU（WebGL 使用 JavaScript） 傳遞過來的數據，然后對這些數據進行流水線處理，最終顯示在屏幕上，進而實現豐富多彩的 3D 應用，比如 3D 圖表，網頁游戲，3D 地圖，WebVR 等。
WebGL 工作原理
3D 模型數據從誕生到最終顯示在屏幕上，這期間經歷了什么樣的過程呢？大家可以想象一下流水線的生產過程，流水線按照既定的步驟對原料進行加工，當前步驟只對前一步驟的結果進行處理，然后將處理后的結果傳遞給下一步驟，最終將原材料生產成完整的產品。WebGL 的工作方式和流水線類似，也是按照流水線的方式將 3D 模型數據渲染到 2D 屏幕上的，業界把這種渲染方式稱為圖形管線或者渲染管線，大家以后碰到這兩個名詞，應該能明白什么意思了。
GPU 渲染管線的主要處理過程如下：
- 首先進入頂點着色器階段，利用 GPU 的並行計算優勢對頂點逐個進行坐標變換。
- 然后進入圖元裝配階段，將頂點按照圖元類型組裝成圖形。
- 接下來來到光柵化階段，光柵化階段將圖形用不包含顏色信息的像素填充。
- 在之后進入片元着色器階段，該階段為像素着色，並最終顯示在屏幕上。
什么是 GLSL？
GLSL 的中文意思是 OpenGL 着色語言，英文全稱是 OpenGL Shading Language，它是用來在 OpenGL 編寫着色器程序的語言。
着色器程序：
我們知道了 GLSL 是用來編寫着色器程序的語言，那么新的問題來了，着色器程序是用來做什么的呢？ 簡單地說，着色器程序是在顯卡（GPU）上運行的簡短程序，代替了 GPU 固定渲染管線的一部分，使 GPU 渲染過程中的某些部分允許開發者通過編程進行控制。上面這段解釋有些長，用一句話來說：着色器程序允許我們通過編程來控制 GPU 的渲染。
總結
本文是學習 WebGL 開發前的一個鋪墊，讀完本小節，相信大家會對 WebGL 有了一個整體認識：
- WebGL 是一組圖形 API，允許我們使用 JavaScript 控制 GPU 渲染過程，進行 3D 繪圖。
- WebGL 應用由 JavaScript 程序和着色器程序構成。
- WebGL 如何將 3D 模型數據顯示在 2D 屏幕上。
- WebGL 編程要素：開發者需要針對 CPU 和 GPU 進行編程，CPU 部分是 JavaScript 程序，GPU 部分是着色器程序。