飛通常的WebGL之唱起3D編程前的戰歌

前言

計算機圖形的最初形式就是在一塊麪板上閃爍的燈。

從上圖能夠推出「燈泡編程」大體過程是：程序員先對這些機器編程，而後閱讀機器的計算結果，最後將計算結果經過不少燈泡的亮滅組合來向計算機用戶傳達有用的信息。這就是最先的計算機圖形。

瞭解和掌握計算機圖形學，能夠更好的走向3D圖形編程，圖形學中理論的知識就不說了，本文章也不介紹不少關鍵點，我把我學習過程當中總結的一些很重要的知識分享出來。

---

從2D走向3D

3D，D是 Dimension 的簡寫，維度的意識，也就是3維，那麼3維是指什麼？3維是指：寬度、高度和深度。 3D圖形能夠很通俗的解釋爲：一個圖形具備三個維度，分別爲寬度、高度和深度。那麼回頭看一下2D圖形，也就只有兩個維度了，寬度和高度。

那麼問題來了，2D圖形是在計算機屏幕上顯示，3D圖形也是。可是計算機屏幕僅僅是面，怎麼才能顯示出3D圖像呢？

其實計算機3D圖形在本質上也是平面的，它只是在計算機屏幕上所顯示的二維圖像，那它如何實現3維的感受呢？

這是理解從2D走向3D最關鍵的知識，其實3D圖形是經過在計算機屏幕上顯示二維圖像的同時，再提供深度也就是第三維，來讓咱們的眼睛對圖形產生3D的錯覺。以下圖經過增長深度來讓眼睛產生3D的錯覺。

從2D走向3D的本質能夠用下面的公式來表達：

2D + 透視 = 3D 
複製代碼

經過給二維圖形增長透視(Perspective)，來讓咱們產生深度的幻覺，從而產生3D既視感。這就是2D走向3D的一個關鍵知識點。

---

光柵化

看到光柵化的時候，必定會想 光柵 是什麼，這裏學過光學的小夥伴必定都知道是什麼，雖然我在大學時，光機電算控都學。可是我這裏就不解釋光柵了，想了解的請自行百度。由於我以爲沒有必要解釋它，解釋它會引來更多的專有名詞和疑惑。可是什麼是光柵化，我能夠很通俗和簡單的解釋給大家聽。

我將光柵化這樣解釋：

光柵化是將幾何數據通過一系列變換後最終轉換爲像素，從而呈如今顯示設備上的過程。

好比下圖：

這兩張圖片對比看看，考慮考慮，左邊是一張圖片的幾何座標數據，右邊是一張圖片的像素位置。再看看兩張圖有什麼區別，而後看下面定義：

光柵化的本質是座標變換、幾何離散化。

從圖中能夠看到頂點座標變了，幾何連續數據被離散化了。離散化就是將模擬數據轉換成了離散數據。

咱們如今再回頭看圖片光柵化，思考一個問題，爲何圖片在展現在計算機屏幕上時，要進行光柵化？

答案就是：GIF、JPEG、PNG等圖片是基於光柵的，再想一下，也就是基於像素的。這些圖片的格式稱爲光柵圖像格式。圖片是基於光柵的，那麼要將圖片在顯示設備中顯示，就須要對其進行光柵化。由於圖片自己是模擬數據，必須通過光柵化來輸出到光柵顯示器上。也就是計算機屏幕上。

圖片光柵化的過程就是將2D圖片轉化爲一個個柵格組成的圖像。

---

3D物體投影到2D平面上

這個涉及到一個很重要的知識，叫座標轉換。首先3D物體在空間中使用笛卡爾座標系(3維座標系)來表示位置，由於虛擬3D世界中的幾何信息都是三維的。可是目前用於顯示的設備都是二維的，因此在光柵化以前，須要將3D世界中的物體投影到二維平面上。這就須要將笛卡爾座標轉換成屏幕上的二維座標。詳細座標轉換留在往後再說，如今只須要知道3D座標是經過一種規則來變換成2D座標。從而在屏幕上的2D表面(窗口背景)上展現。

---

再看光柵化和座標轉換

經過上面的解釋，咱們能夠得出這樣的總結：

咱們經過將一個3D物體的座標轉換成2D座標，讓其能夠在二維顯示器上顯示，而後再將2D座標下圍成的圖形區域進行光柵化，從而在計算機屏幕上渲染出以像素爲單位的圖像。

---

總結

進行3D編程，或者進行2D編程時，須要去了解計算機圖形的一些基本知識，只有這樣才能對圖形編程有一個宏觀和全面的認識，要學會知其然，知其因此然。

可愛聲明: 文章可能有一些錯誤，若是有，我很是開心的邀請你在評論處指出，就好像是生產上的Bug，出了Bug雖然影響比較嚴重，可是教訓和收穫也是深入的。固然啦，熱烈歡迎討論~