WebGL簡易教程——目錄

目錄

• 1. 緒論
• 2. 目錄
• 3. 資源

1. 緒論

最近研究WebGL，看了《WebGL編程指南》這本書，結合本身的專業知識寫的一系列教程。以前在看OpenGL/WebGL的時候老是感受OpenGL/WebGL看的時候懂，實際用起來卻挺難，感受中間老是隔着不少東西。如今一路邊學邊寫，才明白這中間缺乏的其實就是總結，是實踐；把這個過程寫出來，既是幫助他人，也是幫助本身。

如今這一系列文章也寫了很多了，就寫個目錄彙總一下，方便查閱，之後增添了新的文章也會隨之更新。這一系列教程由淺入深，知識也是按部就班的，先後關聯。實例也逐漸複雜，最終完成一個地形渲染的實例：

圖1：地形渲染(紋理)

圖2：地形渲染(顏色)

2. 目錄

1.WebGL簡易教程(一)：第一個簡單示例
概述了這篇教程的目的，編寫了WebGL的第一個示例。

2.WebGL簡易教程(二)：向着色器傳輸數據
改進了繪製一個點的實例，講述了WebGL中向着色器(shader)傳輸數據的問題。

3.WebGL簡易教程(三)：繪製一個三角形(緩衝區對象)
經過一個繪製三角形的具體實例，詳解了WebGL中緩衝區對象(buffer object)的使用。

4.WebGL簡易教程(四)：顏色
經過繪製彩色三角形的示例，介紹了varying變量，頂點着色器與片元着色器之間數據傳輸的過程：頂點裝配與光柵化。

5.WebGL簡易教程(五)：圖形變換(模型、視圖、投影變換)
詳細講解了OpenGL\WebGL關於繪製場景的圖形變換過程，並推導了其圖形變換矩陣。主要包括模型變換、視圖變換以及投影變換。

6.WebGL簡易教程(六)：第一個三維示例(使用模型視圖投影變換)
經過使用模型視圖投影變換，完成第一個真正三維場景的示例：顯示一組由遠及近的三角形。

7.WebGL簡易教程(七)：繪製一個矩形體
經過一個繪製矩形包圍盒的實例，進一步理解了模型視圖投影變換。

8.WebGL簡易教程(八)：三維場景交互
基於以前教程的知識，實現了一個三維場景的瀏覽實例：經過鼠標實現場景的旋轉和縮放。

9.WebGL簡易教程(九)：綜合實例：地形的繪製
綜合WebGL的知識，實現了繪製一張地形圖的實例。

10.WebGL簡易教程(十)：光照
講述了WebGL光照生成的原理，並做出了實際案例。

11.WebGL簡易教程(十一)：紋理
WebGL中使用紋理的實例：給地形貼上一張真實的紋理。

12.WebGL簡易教程(十二)：包圍球與投影
經過包圍球來設置模型視圖投影變換，顯示合適的渲染位置。

13.WebGL簡易教程(十三)：幀緩存對象(離屏渲染)
詳細論述了WebGL中幀緩衝區技術的實現。

14.WebGL簡易教程(十四)：陰影
詳述了WebGL中生成陰影的ShadowMap算法。

3. 資源

其代碼已經上傳到GitHub：地址。我的看法不免有所疏漏，歡迎你們來互相交流。