飛一般的WebGL之唱起3D編程前的戰歌

NO IMAGE

前言

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

飛一般的WebGL之唱起3D編程前的戰歌

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

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


從2D走向3D

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

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

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

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

飛一般的WebGL之唱起3D編程前的戰歌

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

    2D + 透視 = 3D 

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


光柵化

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

我將光柵化這樣解釋:

光柵化是將幾何數據經過一系列變換後最終轉換為像素,從而呈現在顯示設備上的過程。

比如下圖:

飛一般的WebGL之唱起3D編程前的戰歌

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

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

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

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

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

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


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

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


再看光柵化和座標轉換

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

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


總結

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

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

相關文章

探索Python來反補JavaScript,帶你CrossFire——JS數據類型的奧祕

前端獵奇系列之探索Python來反補JavaScript——上篇

一個前端工程師看完《代碼大全》後的二三總結

可能是最全面最易懂的解析前端浮動的文章