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;

檢視矩陣

sxux−fx0syuy−fy0szuz−fz0sx∗eyeX+ux∗eyeY−fx∗eyeZsy∗eyeX+uy∗eyeY−fy∗eyeZsz∗eyeX+uz∗eyeY−fz∗eyeZ1(視圖矩陣)$$\begin{array}{}\text{(檢視矩陣)}& \begin{array}{cccc}sx& sy& sz& sx\ast eyeX+ux\ast eyeY-fx\ast eyeZ\\ ux& uy& uz& sy\ast eyeX+uy\ast eyeY-fy\ast eyeZ\\ -fx& -fy& -fz& sz\ast eyeX+uz\ast eyeY-fz\ast eyeZ\\ 0& 0& 0& 1\end{array}\end{array}$$

3 . 投影矩陣（可視空間）

3.1 長方體可視空間

• 長方體可視空間由正射投影(orthographic projection)產生.
• 一個長方體的確定只要確定6個面的位置,即 : left , right , bottom , top , near , far

正射投影矩陣

相關推薦

WebGL筆記_繪製流程以及三維座標變換(一)

WebGL繪製一個模型的步驟： 1、獲取模型的頂點座標 2、圖元裝配（即畫相應的三角形面片） 3、光柵化（生成片元，繪製每個三角片上的畫素點，染色、紋理對映都在此步） 頂點座標處理 現實中最常見的三維模型，都是通過3D建模軟體匯出的檔案，檔案內

kinect2深度圖對齊以及三維座標的計算

1. kinect2 深度圖與彩色圖對齊 IDepthFrame*frame1; hResult = depthreader->AcquireLatestFrame(&frame1); Mat depth_16bit(424, 512, CV

三維座標變換——旋轉矩陣與旋轉向量

https://blog.csdn.net/mightbxg/article/details/79363699 用 opencv 進行過雙目相機標定的同學都知道，單目標定 calibrateCamera() 函式能夠對每一張標定影象計算出一對 rvec 和 tvec，即旋轉平移向量，代表世界座標

Hibernate的工作流程以及三種狀態（面試題）

數據庫 delet 垃圾 打開 ron 工作流 沒有 flush 行數據 Hibernate的工作流程以及三種狀態 轉載自：http://www.cnblogs.com/fifiyong/p/6390699.html Hibernate的工作流程： 1. 讀取並解

Web工程師修行筆記_必備單詞(第三部)

計算機 group form sisd 位數 cti eid lan ctu 歷經千辛萬苦，整理了軟件開發過程中必備英文單詞，助你走向編程巔峰 !!! 連最難的英文單詞你都征服了，你還怕什麽？ (拒絕死記硬背，平時多看看，多用於代碼中，） 【不求全部都會，但求蒙的都對！】

CG-二維三維圖形變換-學習筆記

結果 設備 right 可行性 spl http 情況下 width 範圍 一、計算機圖形學中坐標系分類 世界坐標系、建模坐標系、觀察坐標系、設備坐標系、規範化坐標系 其中：規範化坐標系是一個中間坐標系，坐標值取值範圍0-1； 二、二維圖形變換 1. 變換種類：比例、旋轉、

Android-UI控制元件的繪製流程以及自定義控制元件的具體操作

  View檢視安卓應用中非常重要的組成部分，它不僅是構成應用介面的基本單元，還是與使用者互動的最直接物件。檢視View作為介面的基本元素，是由View System進行管理的。   在Android中，檢視控制元件主要被分成兩大類，一類是單一控制元件View，另外一類

android-進階（3）-自定義view(2)-Android中View繪製流程以及相關方法的分析

最近正在學自定義view,這篇文章主要講view的繪製流程和一些相關的方法，淺顯易懂，寫的非常好，忍不住就轉載了。             前言： 本文是我讀《Android核心剖析》第13章----View工作原理總結而成的，在此膜拜下作者 。

Android中View繪製流程以及invalidate()等相關方法分析

            前言： 本文是我讀《Android核心剖析》第13章----View工作原理總結而成的，在此膜拜下作者 。同時真摯地向渴望瞭解Android 框架層的網友，推薦這本書，希望你們能夠在Android開發裡學到更多的知識 。             整個V

Matlab繪製Griewank函式三維影象

function y = Griewank(x) % Griewan函式 % 輸入x,給出相應的y值,在x = ( 0 , 0 ,…, 0 )處有全域性極小點0. % 編制人： % 編制日期： [row,col] = size(x); if row > 1

三維圖形變換

四階 視圖 分類 平移 缺點 兩種 直線 交點 之間 三維圖形變換 是在二維方法基礎上增加了對z坐標的考慮得到的。與二維變換類似，引入齊次坐標表示，即：三維空間中某點的變換可以表示成點的齊次坐標與四階的三維變換矩陣相乘。 一、平移變換 二．比例變換 例如：對長方體進

線性三角形法確定空間點三維座標

Linear triangulation methods 又稱為線性三角形法，其作用是通過一組空間點在兩個檢視中的平面座標，求解這組空間點的世界座標。 已知條件為：空間點的世界座標X，X在兩個檢視中的平面座標，，以及兩個檢視的投影矩陣，。 求解過程：  1. 根據相機模型可以得

三維複合變換

P′=P⋅T=P⋅T1⋅T2…Tn P ′ = P

三維座標旋轉轉換公式（JavaScript）

此方法以右手座標系為準 function rotate_z(x, y, z, angle) {     var atopi = angle / 180 * Math.PI;     var xtoz = x * Math.cos(ato

OpenGL： 螢幕座標到物體三維座標的轉換

直接看程式碼吧，有註釋。 GLint viewport[4] = { 0 }; GLdouble modelview[16] = { 0 }; GLdouble projection[16] = { 0 }; GLfloat winX = 0.0f; GLfloat

Android檢視繪製流程完全解析，帶你一步步深入瞭解View(二)

在上一篇文章中，我帶著大家一起剖析了一下LayoutInflater的工作原理，可以算是對View進行深入瞭解的第一步吧。那麼本篇文章中，我們將繼續對View進行深入探究，看一看它的繪製流程到底是什麼樣的。如果你還沒有看過我的上一篇文章，可以先去閱讀 Android Layo

雙目求解影象中點的空間三維座標

首先用MATLAB求內參和外參。 方法1： https://blog.csdn.net/qq_15947787/article/details/53366592 不過該座標可能有問題。 方法2： https://blog.csdn.net/heyijia0327/article/detail

計算機圖形與OpenGL學習七(三維幾何變換2.一般三維旋轉)

一般三維旋轉對於繞與座標軸不一致的軸進行旋轉的變換矩陣，可以利用平移與座標軸旋轉的複合而得到。首先將指定旋轉軸經移動和旋轉變換到座標軸之一，然後對該座標軸應用適當的旋轉矩陣。最後將旋轉軸變回到原來位置。在某些特殊情況下，例如將物件繞平行於某座標軸的軸旋轉、可以通過下列變換順序

計算機圖形學 學習筆記（七）：二維圖形變換：平移，比例，旋轉，座標變換等

在圖形學中，有兩大基本工具：向量分析，圖形變換。本文將重點講解向量和二維圖形的變換。 5.1 向量基礎知識 我們所使用的所有點和向量都是基於某一座標系定義的，比如左手座標系或者右手座標系。 從幾何的角度來看，向量是具有長度和方向的實體，但是沒有

計算機圖形學（四）_幾何變換_1_基本的二維幾何變換(一)

4 .幾何變換        使用線段和填充區等圖元來描述場景，並利用屬性來輔助這些圖元。我們給出了掃描線演算法，可以將圖元顯示在光柵裝置上。現在，再看看可用於物件重定位或改變大小的變換操作。這些操作也用於將世界座標系中的場景描述轉換為輸出裝置上顯示的觀察子程式中。另外，它