大家好，本文介紹了開發(fā)3D引擎需要的預(yù)備知識，給出了相關(guān)的資源。

上一篇博文

從0開發(fā)3D引擎（一）：開篇

下一篇博文

從0開發(fā)3D引擎（三）：搭建開發(fā)環(huán)境

了解Web 3D

Web 3D的歷史-WebGL

目前Web 3D是基于WebGL這個Web端3D API的，它的版本歷史為：

（圖來自WebGPU 開發(fā)狀態(tài)與計劃）

（注：OpenGL是桌面端的3D API，OpenGL ES是移動端的3D API）

• 2007年，發(fā)布OpenGL ES 2.0

OpenGL ES 2.0引入了可編程著色器，增加了頂點著色器和片段著色器。

• 2011年，基于OpenGL ES 2.0，發(fā)布WebGL 1.0

WebGL 1.0的發(fā)布和各大瀏覽器的支持，意味著Web 3D時代的來臨。隨后各種Web 3D開源引擎（如three.js、babylon.js等）以及Web 3D商業(yè)化方案（如playcanvas）陸續(xù)出現(xiàn)，使得Web 3D應(yīng)用開發(fā)變得越來越簡單。

• 2012年，發(fā)布了OpenGL ES 3.0；2014年和2015年分別發(fā)布了OpenGL ES 3.1和3.2

移動端3D API繼續(xù)增強，升級內(nèi)容如上圖（“WebGL版本演示”）所示。

• 2017年，基于OpenGL ES 3.0，發(fā)布了WebGL 2.0

WebGL 2.0完全兼容WebGL 1.0，進(jìn)行了很多增強：如支持3D紋理、UBO等

Apple不支持WebGL 2.0的，但是根據(jù)知乎上的“狄學(xué)長”的回答，谷歌正在提供協(xié)助，使得蘋果手機的ios系統(tǒng)在不久后支持它：

Google Chrome team 正在幫Apple的Safari 把ANGLE接入到Webkit
這樣最后的ios上就能支持WebGL2了。預(yù)計是2020年底。

WebGL 2.0相關(guān)學(xué)習(xí)資料
WebGL2有什么新內(nèi)容
最值得期待的WebGL 2.0功能
WebGL 2.0 for SIGGRAPH Asia 2015

Web 3D的未來-WebGPU

• 未來，基于DirectX12、Vulkan和Metal，將會發(fā)布WebGPU

WebGPU是最新的Web 3D API，是WebGL的升級版。
瀏覽器封裝了現(xiàn)代圖形API（Dx12、Vulkan、Metal），提供給Web 3D程序員WebGPU API。

（圖來自WebGPU 開發(fā)狀態(tài)與計劃）

（圖來自WebGPU 開發(fā)狀態(tài)與計劃）

WebGPU相關(guān)學(xué)習(xí)資料
WebGPU學(xué)習(xí)系列目錄
該系列是我寫的WebGPU實戰(zhàn)教程，如果讀者想從0學(xué)習(xí)WebGPU，了解現(xiàn)代圖形API的技術(shù)要點，歡迎讀者閱讀它～

了解WebGL 1.0的基礎(chǔ)知識

本系列使用WebGL 1.0構(gòu)建3D引擎，因此在本節(jié)會介紹相關(guān)的學(xué)習(xí)資源。

入門學(xué)習(xí)

《WebGL編程指南》

非常易懂的實戰(zhàn)類書籍，提供了很多具體的Demo，讓讀者能零基礎(chǔ)學(xué)習(xí)和應(yīng)用WebGL。
建議讀者先閱讀該書。

豆瓣書評

下載地址

進(jìn)入網(wǎng)站下載代碼：
網(wǎng)站

坐標(biāo)系變換

3D模型的坐標(biāo)需要在多個坐標(biāo)系中進(jìn)行變換（通過乘以對應(yīng)的矩陣進(jìn)行變換），相關(guān)資料可參考：
OpenGL坐標(biāo)變換及其數(shù)學(xué)原理，兩種攝像機交互模型（附源程序） -> 圖形學(xué)中的變換模型以及OpenGL的實現(xiàn)
[OpenGL ES 03]3D變換：模型，視圖，投影與Viewport
齊次坐標(biāo)系入門級思考

3D數(shù)學(xué)

《3D數(shù)學(xué)基礎(chǔ)：圖形與游戲開發(fā)》

本書講解矩陣、四元數(shù)等跟引擎開發(fā)非常相關(guān)的數(shù)學(xué)知識。

建議讀者先大概瀏覽一遍，有一個印象，然后在本系列后面開發(fā)引擎的過程中，遇到問題再查詢該書的對應(yīng)章節(jié)。

豆瓣書評

下載地址

渲染管線

在每一幀，GPU會處理從CPU端傳來的3D數(shù)據(jù)，經(jīng)過渲染管線的處理，最終繪制到屏幕上。

渲染管線會執(zhí)行多個著色器，經(jīng)歷多個處理階段。

可以通過相關(guān)資料進(jìn)行了解：

• WebGL學(xué)習(xí)筆記（一）：理解基本概念和渲染管線

• 《OpenGL超級寶典》

本書詳細(xì)介紹了OpenGL 2.0的渲染流水線的各個階段（如深度測試等），通俗易懂，適合入門。

雖然本書介紹OpenGL 2.0，但因為WebGL 1對應(yīng)OpenGL 2.0，所以本書的知識點也可以套用在WebGL 1中。

豆瓣書評

下載pdf-百度網(wǎng)盤鏈接 提取碼: c212