飛一般的WebGL之唱起3D程式設計前的戰歌

原始碼終結者發表於2019-03-02

前言

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

1

從上圖可以推出“燈泡程式設計”大致過程是:程式設計師先對這些機器程式設計,然後閱讀機器的計算結果,最後將計算結果通過很多燈泡的亮滅組合來向計算機使用者傳達有用的資訊。這就是最早的計算機圖形。

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


從2D走向3D

3D,D是 Dimension 的簡寫,維度的意識,也就是3維,那麼3維是指什麼?3維是指:寬度、高度和深度。
3D圖形可以很通俗的解釋為:一個圖形具有三個維度,分別為寬度、高度和深度。那麼回頭看一下2D圖形,也就只有兩個維度了,寬度和高度。

那麼問題來了,2D圖形是在計算機螢幕上顯示,3D圖形也是。但是計算機螢幕僅僅是面,怎麼才能顯示出3D影像呢?

其實計算機3D圖形在本質上也是平面的,它只是在計算機螢幕上所顯示的二維影像,那它如何實現3維的感覺呢?

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

2

從2D走向3D的本質可以用下面的公式來表達:

    2D + 透視 = 3D 
複製程式碼

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


光柵化

看到光柵化的時候,一定會想 光柵 是什麼,這裡學過光學的小夥伴一定都知道是什麼,雖然我在大學時,光機電算控都學。但是我這裡就不解釋光柵了,想了解的請自行百度。因為我覺得沒有必要解釋它,解釋它會引來更多的專有名詞和疑惑。但是什麼是光柵化,我可以很通俗和簡單的解釋給你們聽。

我將光柵化這樣解釋:

光柵化是將幾何資料經過一系列變換後最終轉換為畫素,從而呈現在顯示裝置上的過程。

比如下圖:

5

這兩張圖片對比看看,考慮考慮,左邊是一張圖片的幾何座標資料,右邊是一張圖片的畫素位置。再看看兩張圖有什麼區別,然後看下面定義:

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

從圖中可以看到頂點座標變了,幾何連續資料被離散化了。離散化就是將模擬資料轉換成了離散資料。

我們現在再回頭看圖片光柵化,思考一個問題,為什麼圖片在展示在計算機螢幕上時,要進行光柵化?

答案就是:GIF、JPEG、PNG等圖片是基於光柵的,再想一下,也就是基於畫素的。這些圖片的格式稱為光柵影像格式。圖片是基於光柵的,那麼要將圖片在顯示裝置中顯示,就需要對其進行光柵化。因為圖片本身是模擬資料,必須經過光柵化來輸出到光柵顯示器上。也就是計算機螢幕上。

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


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

3
這個涉及到一個很重要的知識,叫座標轉換。首先3D物體在空間中使用笛卡爾座標系(3維座標系)來表示位置,因為虛擬3D世界中的幾何資訊都是三維的。但是目前用於顯示的裝置都是二維的,所以在光柵化之前,需要將3D世界中的物體投影到二維平面上。這就需要將笛卡爾座標轉換成螢幕上的二維座標。詳細座標轉換留在日後再說,現在只需要知道3D座標是通過一種規則來變換成2D座標。從而在螢幕上的2D表面(視窗背景)上展示。


再看光柵化和座標轉換

通過上面的解釋,我們可以得出這樣的總結:

我們通過將一個3D物體的座標轉換成2D座標,讓其可以在二維顯示器上顯示,然後再將2D座標下圍成的圖形區域進行光柵化,從而在計算機螢幕上渲染出以畫素為單位的影像。


總結

進行3D程式設計,或者進行2D程式設計時,需要去了解計算機圖形的一些基本知識,只有這樣才能對圖形程式設計有一個巨集觀和全面的認識,要學會知其然,知其所以然。

可愛宣告: 文章可能有一些錯誤,如果有,我非常開心的邀請你在評論處指出,就好像是生產上的Bug,出了Bug雖然影響比較嚴重,但是教訓和收穫也是深刻的。當然啦,熱烈歡迎討論~

相關文章