WebGL 是否需要以 OpenGL 為學習基礎？

01-05

如題

0 基礎學習 WebGL 該看的 3 本書 - 黑客與畫家 - 知乎專欄

WebGL 是以 OpenGL ES 2.0 為藍本設計的，OpenGL ES 2.0 則是以 OpenGL 2.0 為藍本設計的。

你別看表面上跑的是 js，真正運行的時候還是跑在 OpenGL 驅動上的（Windows平台是例外，使用Direct3D 9/11 來模擬的 WebGL）。

你要想真正學會 WebGL，必須懂 OpenGL 和圖形學，以及 shader 語言。

當然了，由於 Three.js 這類遊戲引擎的存在，即便你不懂 WebGL，也可以快速地進行開發，但是，一旦你遇到意料之外的問題了，還是得回過頭來看 WebGL，甚至看 OpenGL 紅寶書。

如果要學習 OpenGL，那麼脫不了三本書

紅寶書 OpenGL Programming Guide，出到第八版

藍寶書 OpenGL SuperBible，出到第六版

橙寶書 OpenGL Shading Language，出到第三版

如果要學習OpenGL ES，那麼只有一本，入門的話我最推薦的是這本，它與 WebGL 的關係也最近

OpenGL ES 2.0 Programming Guide

（2014-04-26更新，已經出到 OpenGL ES 3.0 版本了）

其實還有一本最靠譜的

WebGL Programming Guide，但是還沒發售（2014-04-26更新，已發售）

2013-11-03 更新

WebGL高級編程:開發Web 3D圖形是一本非常全面的書籍，推薦作為第一本入門書。

最後更新真實的 WebGL 函數調用歷史，通過 Chrome Developer Tools / Canvas Profile 得到的。看完後如果你覺得一頭霧水那就對了，這就是為什麼要學 OpenGL的原因。

disableVertexAttribArray(1) disable(BLEND) enable(SAMPLE_ALPHA_TO_COVERAGE) depthMask(1) disable(BLEND) useProgram(WebGLProgram@1) activeTexture(TEXTURE0) bindTexture(TEXTURE_2D, WebGLTexture@1) uniform1i(WebGLUniformLocation@4, 0) bindBuffer(ARRAY_BUFFER, WebGLBuffer@2) enableVertexAttribArray(0) vertexAttribPointer(0, 3, FLOAT, false, 12, 0) bindBuffer(ARRAY_BUFFER, WebGLBuffer@3) enableVertexAttribArray(1) vertexAttribPointer(1, 2, FLOAT, false, 8, 0) bindBuffer(ARRAY_BUFFER, WebGLBuffer@1) enableVertexAttribArray(2) vertexAttribPointer(2, 3, FLOAT, false, 12, 0) bindBuffer(ELEMENT_ARRAY_BUFFER, WebGLBuffer@4) drawElements(TRIANGLES, 780, UNSIGNED_SHORT, 0)

要學習WebGL，最好有編寫JavaScript、OpenGL或OpenGL ES的經驗和基礎，還需要少量的HTML5知識。

如果你是一個網路前端工程師，那可能你的JavaScript經驗已經很充足了，但是卻沒有接觸過計算機圖形學，那也沒有關係，實際上你可以越過OpenGL和OpenGL ES，直接從WebGL切入，作為你學習計算機圖形學的實現的開始。當然有圖形編程的技術是最好的，

建議可以首先評估下自己屬於什麼水平，剛剛學了沒多久的新手，談談自己的感受，先從three.js入手，學著用了一下camera，scence，render，以及什麼first person controls之類的，我是從《webgl入門指南》開始的。然後，跑一下官方的three.js demo，以及這本書的demo。知道個大概，然後直接入手《webgl編程指南》。上面的demo很細緻，細緻到每個函數，以及它的參數都講到，看完這本書你大概對圖形圖像的流程會有個比較完整的了解了。一邊學習demo時候，一邊認真了解下裡面講的原理，語焉不詳的地方查查《OpenGL ES 3.0 Programming Guide》。順便可以看看《計算機圖形學》學習下（我是軟體工程出身，大學甚至沒有這門課程）。多的不說，因為我也就到這個階段了

---------------------

當時自己看見這個問題的時候，正好自己在學WebGL,隨口回答了下，當時做這個方向的前端還很少。隨口說了兩句，現在看來越來越多的人在進入這個方向。進來這個方向的人很多，很多人困惑，我就繼續以自己的學習經歷，談談自己的經驗。

一般前端出身的人很難做WebGL，以為本質上和前端根本就是兩個不同的方向，知識領域重疊較少。只不錯恰好都是在web平台上面而已，導致傳統前端很難轉移到WebGL開發(現在web前端開發已經發生翻天覆地的變化,WebGL轉移到前端開發也很難)。

從自身經歷來看，這個很難的原因其實有兩個。

一，就是剛剛說的知識領域不一樣，web前端更多的是做界面開發，做界面開發還分成了兩個方向一個是強調數據交互的，比如現在的電商網站;另外一個是強調靜態頁面展示操作的，比如很多傳媒公司。這麼分的標準是從想學WebGL的前端人群角度出發的。無論怎麼分很不幸，這個都不是他們擅長的領域。很多程序員老鳥，可能各種刷數據結構，但是畢業以後真的沒幾個人刷數學啊，因為真的沒什麼用途啊。webgl需要的解析幾何大家應該都還記得，畢竟高中的知識。但是線代好像大家都不記得了。雖然並不需要什麼高深的數學知識，畢竟只要個矩陣乘法，高深點的學個求逆轉置矩陣就好了。但是很不幸學習了這些東西之後，並不滿足webgl要求，因為最基本的SRT操作是建立在對於線代物理意義的理解上的。又一次很不幸國內的教材都弱化了（並不是沒有）線代的物理意義講解。。。。。還有很多坑，感覺自己已經跑題了。講到大家會遇到哪些坑了

接著說說自己的學習經歷，假設你現在已經跑了THREE的demo。這些demo差不多已經足夠你解決所有的靜態展示需求，前提是你明白：所有這些demo解決了具體哪些問題，而不是做出了什麼效果。其實你看demo名稱你就知道了，只不過你需要去學習這些demo名稱代表的含義。沒錯!!!!去學習這些demo所代表的含義，和解決的問題。 我教了很多人這個方法，但是他們只有在我教了很多次的情況下，才學習到這個很簡單但是很重要的方法。THREE的文檔真的很不豐富，但是demo真的很豐富，而且個人感覺完全比乾巴巴的文檔靠譜。

以上是一條路。

還有一條路就是下載所有版本的THREE,現在是R80了，中間少了8個版本，實際上只有72個版本，同時只有在R25以後才有第一個demo，然後你就開始學習R25的renderer實現，加上注釋才不到700行代碼。對照著《webgl編程指南》的Initshader函數，你會發現原來整個THREE的核心一覽無餘啊！！！！很簡單粗暴啊有木有！！雖然實現的很粗糙沒有優化，但是簡單已讀，完全是用來學習的好素材啊

-------

以上完全是一個自學者的自學經歷

就說這麼多吧

自從DirectX10改革，OpenGL也跟著抄了過去之後，大家的架構都是把shader放在第一位了，無形中提高了做渲染的門檻。現在要是不知道點ray tracing的知識，線性代數和解析幾何不熟悉，簡直寫不了靠譜的shader了。

我覺得 webgl 是最適合入門計算機圖形學的技術了，瀏覽器自帶窗口，省去了很多平台相關的插件，這點很方便哦。

還有 webgl 一樣需要 shader ，其 api 和 opengl 的也差不多，學會 webgl 在去看 opengl ，就輕車熟路了，從最簡單的入手，然後觸類旁通。這才是最優學習途徑。

其實webgl等價於opengl es2.0如果要學的話，買一本入門級的書，學會javascript，然後在網上找一些簡單的入門程序，千萬不要一上手就去研究threejs的框架（但是你只是學習專門開發web3d程序，還是直接使用網上現有的webgl引擎），但是如果你是要想理解的話，就從入門開始。

而實際上，網任何3d開發想要深入的研究，更多的是數學功底的考驗，你要理解向量和矩陣（視圖矩陣和投影矩陣），基本上就夠了，但要再一步深入，那就問題來了，所涉及的很多，我簡單的列舉：歐拉角，四元數，包圍盒，拾取，紋理，shader，拾取。然後shader和紋理包含了更多的內容。

如果你還要考慮引擎框架，就要考慮shader的各種屬性的賦值和封裝，更深入，就是真實感，真實感的工作就很多了。。。。

只是簡單介紹，你想學，有人帶最好，沒人帶就努力看書，讀源碼

從圖形學API的角度來看WebGL API是閹割的 OpenGL API，學不學習OpenGL不是重點，重點是你如果學習WebGL，最好去學習GPU的渲染管線，為了節約學習時間，最好邊看WebGL案例代碼，邊學習GPU渲染管線，了解API與硬體的對應關係，比如深度測試，實際上對應的是GPU渲染管線上的一個深度測試單元，也就是一個硬體電路結構，只不過這個功能單元需要使用WebGL 「gl.DEPTH_TEST」 API去開啟enable.(gl.DEPTH_TEST)。這只是一個例子，其他一樣，作為軟體工程師沒必要去學習硬體，但是一定要知道這些API與硬體上的功能單元對應關係。

WebGL和OpenGL ES使用的著色器語言標準是GLSL ES，OpenGL使用的著色器語言標準是GLSL，其實都是著色器語言，只要能能夠理解著色器語言，直接學習GLSL ES和學習GLSL在思想上沒啥區別，只不過個別技術標準有區別罷了。

https://www.khronos.org/registry/OpenGL/specs/es/2.0/GLSL_ES_Specification_1.00.pdf

WebGL Specification

可以直接使用類似three.js這樣的WebGL來做開發，不太需要用到OpenGL的知識，不過想優化渲染的話還是需要OpenGL的

opengl是一套圖形庫，它和嵌入式結合就變成了es，和web結合就變成了webgl。webgl的api肯定是從opengl來的，雖然不完全一樣但是都是一個層面的東西。

如果你手裡有非常好的webgl入門書，那麼可以略過opengl，但實際上沒有幾門能像紅寶書藍寶書那麼好。

圖形學的話，我覺得不必要專門去看。如果你買一本《計算機圖形學》，會發現裡面的東西其實跟藍寶書和紅寶書差不多。因為一是圖形學不可能脫離代碼去講，二是opengl的書，在講3d那方面的話，為了照顧讀者，必然會講預備知識。

反正，我看完，webgl編程指南，也只是大概明白原理。我擦。。還要再學

不完全需要。主要依賴的是主流的web前端知識，HTML5和JavaScript。學習WebGL之前，能了解一下OpenGL的渲染管線原理，能夠幫助理解。