1. 程式人生 > >WebGL簡易教程——目錄

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:地址。個人見解難免有所疏漏,歡迎大家來互相交流。