WebGL筆記_繪製流程以及三維座標變換(一)
阿新 • • 發佈:2019-01-23
WebGL繪製一個模型的步驟:
1、獲取模型的頂點座標
2、圖元裝配(即畫相應的三角形面片)
3、光柵化(生成片元,繪製每個三角片上的畫素點,染色、紋理對映都在此步)
頂點座標處理
現實中最常見的三維模型,都是通過3D建模軟體匯出的檔案,檔案內容通常包括,模型的頂點格式,模型的頂點座標,以及定點之間的對映關係。通常要經過以下過程,才能將模型檔案所描述的三維模型繪製到二維的螢幕上。
相關座標系介紹:
- 本地座標系:描述模型頂點的座標系,一般都在模型的做下端,位置不是固定不變的。
- 世界座標系:描述每個模型在三維場景中位置的座標系。
- 試圖座標系:描述視點(可理解為眼睛或相機)的位置、上方向(正著看還是斜著看)、被觀察者的位置。
- 裁剪座標:描述投影盒子的座標系,例如:如果是正方形投影盒子,則需要確定6個面的位置。
WebGL中給出的繪製基本幾何的api為:
WebGL通過gl.drawArrays()函式可以繪製一些基本圖形,接收的引數如下 :
- 點 (gl . POINTS)
- 線段 (gl . LINES)
- 線條 (gl . LINE_STRIP)
- 迴路 (gl . LINE_LOOP)
- 三角形 (gl . TRIANGLES)
- 三角帶(gl . TRIANGLE_STRIP)
- 三角扇(gl . TRIANGLE_FAN)
圖元裝配
一個複雜的模型,都是由一個個三角形畫出來的。圖元裝配就是由頂點生成一個個的圖元(即三角形)。也可以理解成是將一個三維模型的表面拆成一個個三角片,方便gpu進行光柵化。圖元裝配需要利用頂點著色器
頂點著色器工作流程:有多少個頂點,頂點著色器就執行多少次。
光柵化
圖元生成完畢之後,我們需要給模型“上色”,也可以理解為給每個圖元進行畫素點裝填上色。完成這部分工作的,是執行在GPU的“片元著色器”來完成。模型的質地(顏色、漫反射貼圖等)、燈光等由片元著色器來計算。
片元著色器工作流程:有多少個畫素點,片元著色器就執行多少次。
圖元裝配之前獲取頂點所用到的矩陣:
1 . 基本變換矩陣(平移、伸縮、旋轉)
2 . 檢視矩陣(view matrix)
為了確定觀察者的狀態,需要知道視點和觀察目標點,可以確定視線,但是最後要把觀察的景象繪製到螢幕上,還需要確定上方向.
- 視點 : 觀察者在三維空間的位置 . (eyeX , eyeY , eyeZ)
- 觀察目標點 : 被觀察目標的位置. (centerX , centerY , centerZ)
- 上方向 : 最終繪製在螢幕上的影像中的上方向.( upX , upY , upZ)
這三個向量確定了最終的檢視矩陣 .
var e, fx, fy, fz, rlf, sx, sy, sz, rls, ux, uy, uz; fx = centerX - eyeX; fy = centerY - eyeY; fz = centerZ - eyeZ; //Normalize f. rlf = 1 / Math.sqrt(fx*fx + fy*fy + fz*fz); fx *= rlf; fy *= rlf; fz *= rlf; // Calculate cross product of f and up. sx = fy * upZ - fz * upY; sy = fz * upX - fx * upZ; sz = fx * upY - fy * upX; // Normalize s. rls = 1 / Math.sqrt(sx*sx + sy*sy + sz*sz); sx *= rls; sy *= rls; sz *= rls; // Calculate cross product of s and f. ux = sy * fz - sz * fy; uy = sz * fx - sx * fz; uz = sx * fy - sy * fx;
檢視矩陣
3 . 投影矩陣(可視空間)
3.1 長方體可視空間
- 長方體可視空間由正射投影(orthographic projection)產生.
- 一個長方體的確定只要確定6個面的位置,即 : left , right , bottom , top , near , far
正射投影矩陣