WebGL之旅（四）簡單變換

變換又叫仿射變換，包括平移，縮放，旋轉。

首先，我們繪製乙個三角形，後續將對其進行變換，**：

/**

* 變換前
* [email protected]
* */
// 頂點著色器原始碼
var vertexshadersrc =
`attribute vec4 a_position;// 接收傳入位置座標，必須宣告為全域性
void main()`
;// 片段著色器原始碼
var fragmentshadersrc =
`void main()`
;// 初始化使用的shader
function
initshader
(gl)
function
main()
function
initvertexbuffers
(gl)

平移是指將所有頂點的分量按照某個向量分量進行移動。下面是將上面的三角形沿向量（0.5, 0.5, 0.0）移動的示例。

/**

* 平移變換
* [email protected]
* */
// 頂點著色器原始碼
var vertexshadersrc =
`attribute vec4 a_position;// 接收傳入位置座標，必須宣告為全域性
uniform vec4 u_translation;// 平移向量
void main()`
;// 片段著色器原始碼
var fragmentshadersrc =
`void main()`
;// 初始化使用的shader
function
initshader
(gl)
function
main()
function
initvertexbuffers
(gl)

旋轉比移動複雜一點，需要三個變數才能表示：

旋轉軸旋轉方向（右手法則旋**右手握拳，大拇指指向旋轉軸正向，其餘手指指向旋轉的正方向）

旋轉角度

計算原理可以參考我之前的這篇部落格。

且看示例：

/**

* 旋轉變換
* [email protected]
* */
// 頂點著色器原始碼
var vertexshadersrc =
`attribute vec4 a_position;// 接收傳入位置座標，必須宣告為全域性
uniform float u_sin, u_cos;// 旋轉角的正余弦值
void main()`
;// 片段著色器原始碼
var fragmentshadersrc =
`void main()`
;// 初始化使用的shader
function
initshader
(gl)
function
main()
function
initvertexbuffers
(gl)

縮放比較簡單，將頂點的每個分乘以乙個縮放因子即可。

**：

/**

* 伸縮變換
* [email protected]
* */
// 頂點著色器原始碼
var vertexshadersrc =
`attribute vec4 a_position;// 接收傳入位置座標，必須宣告為全域性
uniform float u_rate;// 旋轉角的正余弦值
void main()`
;// 片段著色器原始碼
var fragmentshadersrc =
`void main()`
;// 初始化使用的shader
function
initshader
(gl)
function
main()
function
initvertexbuffers
(gl)

這裡所有的變換都單一的一種，當各種變換組合疊加起來之後，就需要使用矩陣。

在組合變換之前，首先看看如何用矩陣實現上面幾種變換。

/**

* 使用矩陣變換
* [email protected]
* */
// 頂點著色器原始碼
var vertexshadersrc =
`attribute vec4 a_position;// 接收傳入位置座標，必須宣告為全域性
uniform mat4 u_mat;// 旋轉矩陣
void main()`
;// 片段著色器原始碼
var fragmentshadersrc =
`void main()`
;// 初始化使用的shader
function
initshader
(gl)
function
main()
function
initvertexbuffers
(gl)

為了方便後面的操作，將獲取矩陣的方法封裝起來。

/**

* 由平移向量獲取平移矩陣
* */
function
gettranslationmatrix
(x, y, z)
/** * 由旋轉弧度和旋轉軸獲取旋轉矩陣
* */
function
getrotationmatrix
(rad, x, y, z)
else
if(y >0)
else
if(z >0)
else
}/**
* 由縮放因子獲取縮放矩陣
* */
function
getscalematrix
(xscale, yscale, zscale)

function

main()

webgl之旅:

WebGL 繪製和變換

1.使用緩衝區物件向頂點著色器傳入多個頂點的資料，需要遵循以下五個步驟 1.1 建立緩衝區物件 gl.createbuffer 1.2 繫結緩衝區物件 gl.bindbuffer 1.3 將資料寫入緩衝區物件 gl.bufferdata 1.4 將緩衝區物件分配給乙個attribute變數 gl.v...

WebGL之旅（十六） 層級模型

在變換時，父節點的變換會待著子節點一起，而子節點的變換則不會影響父節點。例如手臂的運動會帶動手肘的運動，而手肘的運動不影響手臂的運動。即 示例，如下兩個立方體柱子，下面的為父節點，上面的未子節點。層次模型 xu.lidong qq.com g radparent 0.0 g radchild 0.0...

WebGL 頂點資料矩陣變換

此處需要了解乙個矩陣函式庫cuon matrix.js這是 webgl程式設計指南 作者寫的乙個庫，它封裝了一些簡單易用的方法，來實現一些複雜繁瑣的矩陣計算操作 具體方法如下表 matrix4物件有兩種方法，一種是名稱中帶有set和一種不帶set的 使用上面的方法可以方便進行矩陣變換 如平移操作 v...