WebGL常用數學公式

標籤：函數   span   images   完全   div   計算   matrix   padding   矩陣   

1.三角函數

    座標軸採用右手法則，沿Z軸的逆時針方向為正角度，假設原始點為p(x,y,z),a是X軸旋轉到點p的角度，r是從原始點到p點的距離。用這兩個變數計算出點p的座標，等式如下：

x = rcos a;y = rsin a;

    類似的可以使用r,a,b(p旋轉的角度)來表示p‘的座標:

x‘ = r cos(a + b);y‘ = r sin(a + b);

    利用三角函數兩角和公式：

sin(a +/- b) = sin a cos b +/- cos a sin bcos(a +/- b) = cos a cos b -/+ sin a sin b

    可得：

x‘ = r(cos a cos b - sin a sin b)y‘ = r(sin a cos b + cos a sin b)

    最後將x,y等式帶入，消除r 和 a 可得等式：

x‘ = x cos b - y sin by‘ = x sin b + y cos bz‘ = z

    另外計算中也會用到弧度計算功能：

radian = a * (PI / 180)

2.變換矩陣：旋轉

    矩陣和向量的方式可以用如下等式表示：

    等式的右邊由x、y、z組成的向量被稱為三維向量。計算方式如下：

x‘ = ax + by + czy‘ = dx + ey + fzz‘ = gx + hy + iz

    在看看三角函數的等式,並與其比較：

x‘ = ax + by + czx‘ = x cosb - y sinb

    如果 a = cosb, b = -sinb,c = 0,那麼兩個等式完全相同。在看y‘:

y‘ = dx + ey + fzy‘ = x sinb + y cosb

    如果 d = sinb, e = cobb, f = 0,那麼兩個等式完全相同。將這些結果代入到等式3.4中，得到等式：

    這個矩陣被稱為變換矩陣（transformation matrix），也被稱為旋轉矩陣（rotation matrix）。

3.變換矩陣：平移

    平移公式:x‘ = x + Tx。

    如下所示是4*4矩陣：

    該矩陣的乘法結果如下所示：

   

    根據最後一個式子 1 = mx + ny + oz + p,很容易求得係數m = 0, n = 0, o = 0, p = 1;比較x‘,可知 a = 1, b = 0, c = 0, d = Tx;類似地，比較y‘，可知e = 0, f = 1,g = 0, h = Ty；比較z‘，可知i = 0, j = 0, k = 1, l = Tz。這樣，就可以寫出表示平移的矩陣，又稱為平移矩陣（translation matrix）。如下所示：

4. 4*4的旋轉矩陣

    將旋轉矩陣從一個3*3矩陣轉變為一個4*4矩陣，只需要將旋轉公式和4*4矩陣公式比較下:

x‘ = xcosb - ysinby‘ = xsinb + ycosbz‘ = zx‘ = ax + by + cz + dy‘ = ex + fy + gz + hz‘ = ix + jy + kz + ll = mx + ny + oz + p

    例如，當你通過比較x‘ = xcosb - ysinb與x‘ = ax + by +cz +d時，可知a = cosb, b = -sinb, c= 0, d = 0。以此類推，求得y‘和z‘等式中的係數，最終得到4*4的旋轉矩陣。如下所示：

5.變換矩陣：縮放

    假設在三個方向X軸，Y軸，Z軸的縮放因子Sx, Sy, Sz不相關，那麼有：

x‘ = Sx * xy‘ = Sy * yz‘ = Sz * z

    和矩陣的乘法結果比較，可知縮放操作的變換矩陣：

   

WebGL常用數學公式