首页 > 代码库 > WebGL常用数学公式
WebGL常用数学公式
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
y‘ = dx + ey + fzy‘ = x sinb + y cosb
这个矩阵被称为变换矩阵(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常用数学公式