首页 > 专栏 > 计算机图形学 > 文章详情
WebGL图形变换:旋转矩阵 发布于:2023-02-26 20:45:33   原创发表   查看:45  讨论:0
一,原始步骤D34【易塔云】自习室
D34【易塔云】自习室
旋转比平移复杂一些,因为描述一个旋转本身就比描述一个平移复杂。为了描述旋转,你应该知道:D34【易塔云】自习室
1. 旋转轴(图形将围绕旋转轴旋转)D34【易塔云】自习室
2. 旋转方向(方向:顺时针或逆时针)D34【易塔云】自习室
3. 旋转角度(图形旋转经过的角度)D34【易塔云】自习室
这里这样描述:绕Z轴,逆时针旋转了 β 角度。
D34【易塔云】自习室
D34【易塔云】自习室
D34【易塔云】自习室
D34【易塔云】自习室
右手旋转法则:右手握拳,大拇指伸直并使其指向旋转轴的正方向,那么右手其余几个手指就指明了旋转的方向。现在我们看下旋转的数学表达式:D34【易塔云】自习室
设点p(x, y, z)旋转 β 角度之后变为 p'(x', y', z') ;首先旋转是绕z轴进行的,所以z坐标不会变,直接忽略,然后,x轴和y轴的情况有一些复杂。D34【易塔云】自习室
D34【易塔云】自习室
D34【易塔云】自习室
D34【易塔云】自习室
由于:D34【易塔云】自习室
x = r cos αD34【易塔云】自习室
y = r sin αD34【易塔云】自习室
类似的,你也可以表示点p'的坐标D34【易塔云】自习室
x' = r cos (α + β)D34【易塔云】自习室
y' = r sin (α + β)D34【易塔云】自习室
利用三角函数可得D34【易塔云】自习室
x' = r (cos α cos β - sin α sin β)D34【易塔云】自习室
y' = r (sin α cos β + cos α sin β)D34【易塔云】自习室
将等式1代入上式,得D34【易塔云】自习室
x' = x cos β - y sin βD34【易塔云】自习室
y' = y cos β + x sin βD34【易塔云】自习室
z' = zD34【易塔云】自习室
现在我们就可以把sin β 和 cos β 通过js 传递给着色器。D34【易塔云】自习室
着色器:D34【易塔云】自习室
gl_Position.x = a_Position.x * u_CosB - a_Position.y * u_SinB;D34【易塔云】自习室
gl_Position.y = a_Position.x * u_SinB + a_Position.y * u_CosB;D34【易塔云】自习室
js:D34【易塔云】自习室
var u_CosB = gl.getUniformLocation(gl.program, "u_CosB");D34【易塔云】自习室
var u_SinB = gl.getUniformLocation(gl.program, "u_SinB");D34【易塔云】自习室
gl.uniform1f(u_CosB );D34【易塔云】自习室
gl.uniform1f(u_SinB );
D34【易塔云】自习室
D34【易塔云】自习室
二,旋转矩阵D34【易塔云】自习室
D34【易塔云】自习室
由上一篇的平移矩阵,我们同样可以推理出,旋转矩阵,如图:D34【易塔云】自习室
D34【易塔云】自习室
D34【易塔云】自习室
D34【易塔云】自习室
三,沿X轴旋转和Y轴旋转的推到过程:D34【易塔云】自习室
D34【易塔云】自习室
D34【易塔云】自习室
D34【易塔云】自习室

发表评论

  • 匿名
还没有注册?