注:文章譯自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的額外說明,我會加上[lufy:],另外,鄙人webgl研究還不夠深入,一些專業詞語,如果翻譯有誤,歡迎大家指正。
二維和三維
三維空間--我們生活這個這個現實的世界就是一個三維空間。
在三維的世界裏,所有的東西都由橫,豎,深度。將這些東西重現,就是一個實時3D渲染。但是再現這個3D空間,我們是在一個2D的顯示器上來實現的。
電腦和手機的屏幕,都是一個2D的顯示器。至少現在還沒有一個3D的顯示設備,當然,研究所這些地方可能會有,但是一般的家庭肯定是沒有的。
利用WebGL可以模擬三維空間,但是最終必須輸出顯示在一個二維的顯示器上。由深度決定的前後關係,根據遠近進行放大和縮小,這些都必須提前進行運算得出結果。
OpenGL也好,DirectX也好,這個從三維到二維的變換等基本的計算手法一般是不會變的。當然,WebGL也是一樣的。
右手?左手?說一說座標系
雖然說3D的計算基本上都是一致的,但是DirectX和OpenGL之間還有點小差異。
說到DirectX和OpenGL的區別,經常會拿座標系來舉例。就是使用左手座標系還是右手座標系。OpenGL使用的是右手座標系。
下圖是右手座標系的圖解。
下圖是左手座標系的圖解。
比較的話,主要是Z座標的方向不同。x座標和y座標的話,哪個座標系都是一樣的。
除去Z座標的處理,哪個座標系都是沒有深度的概念的,所以沒必要想的太複雜。WebGL是OpenGL的一個分支,當然是使用右手座標系了。
座標變換
無論用DirectX還是OpenGL,最終都需要將三維的情報向二維進行變換。就像剛開始說的那樣,最終的圖像都是由二維顯示器來顯示的。
這時候,座標變換就是必須的了。座標變換大致可以分爲三種,將這些正確的組合在一起,最終決定顯示器上的位置。
用身邊的東西舉例說明的話,三維向二維轉換的例子就是照相機。照片和圖像,通過照相機已經全部變爲了二維,最終,輸出成了照片和動畫。
腦子裏想象一下使用照相機照相的一幕,來試着理解一下座標變換吧。
模型變換
三種座標變換中的第一個,是模型變換。在OpenGL的處理中雖然一般叫做模型變換,但是在DirectX中被叫做世界變換。
模型變換,是指爲了定義參照物在三維空間的什麼位置而進行的座標變換。和現實的世界不同,程序中的三維空間裏定義了世界的中心的基準點,就是原點。從這個原點出發,爲了知道參照物的相對位置,就需要進行必要的座標變換。
假設,虛擬的三維空間裏有一個蘋果,那麼爲了表示這個蘋果在什麼位置,就需要進行相應的模型變換了。
視圖變換
三種座標變換的第二個,是視圖變換。
視圖變換,定義了鏡頭的實際位置以及鏡頭的方向。拿剛剛舉例的蘋果來說,即使三維空間中有一個蘋果,如果鏡頭的方向不對着蘋果的話,同樣也是看不到這個蘋果的。而且,如果將鏡頭大幅度遠離蘋果,那麼也有可能看不到蘋果了。
爲了決定鏡頭的位置和角度所進行的座標變換就叫做視圖變換。
投影變換
三種座標變換中的最後一個,是投影變換。
這個變換,定義了三維空間的攝影區域。比如,是橫向攝影,還是縱向攝影,最遠拍攝多遠距離等。
一般的照相機,直接拍攝鏡頭前的所有圖像,最遠拍攝多遠也基本上沒什麼意識。但是,程序是無法模擬無限大的空間的,所以,從哪裏開始拍攝,拍攝到哪裏,必須有一個明確的範圍。
投影變幻,通過遠近法則,可以將近處的物體描畫的比較大,遠處的物體描畫的比較小。
總結
內容有點長了,來總結一下吧。
使用程序來模擬三維空間的時候,最終的情報必須變換成二維數據。而且三維座標,根據平臺不同,Z軸的處理是不一樣的。WebGL是OpenGL的處理系,使用的是右手座標系。
爲了模擬三維空間,將三維空間的情報向二維的情報進行轉換,需要三個座標變換。分別是模型變換,視圖變換和投影變換,將這些變換進行組合,最終決定描畫的圖形內容。
爲了使用WebGL進行開發,本次所介紹的座標系和座標變換的知識是必不可少的。細節先不說,如果大致的意思都不瞭解的話,後面實際處理的時候肯定會有疑惑的。最低限度,三個座標變換的意思一定要記住。
下一次,看一下爲了使用WebGL都需要做哪些準備。
轉載請註明:轉自lufy_legend的博客http://blog.csdn.net/lufy_legend