WebGL图形变换：旋转矩阵 - 易塔云建站-模板下载,web开发资源,技术博客

WebGL图形变换：旋转矩阵发布于：2023-02-26 20:45:33 原创发表查看：59 讨论：0

一，原始步骤

旋转比平移复杂一些，因为描述一个旋转本身就比描述一个平移复杂。为了描述旋转，你应该知道：
1. 旋转轴（图形将围绕旋转轴旋转）
2. 旋转方向（方向：顺时针或逆时针）
3. 旋转角度（图形旋转经过的角度）
这里这样描述：绕Z轴，逆时针旋转了 β 角度。

右手旋转法则：右手握拳，大拇指伸直并使其指向旋转轴的正方向，那么右手其余几个手指就指明了旋转的方向。现在我们看下旋转的数学表达式：
设点p(x, y, z)旋转 β 角度之后变为 p'(x', y', z') ；首先旋转是绕z轴进行的，所以z坐标不会变，直接忽略，然后，x轴和y轴的情况有一些复杂。

由于：
x = r cos α
y = r sin α
类似的，你也可以表示点p'的坐标
x' = r cos (α + β)
y' = r sin (α + β)
利用三角函数可得
x' = r (cos α cos β - sin α sin β)
y' = r (sin α cos β + cos α sin β)
将等式1代入上式，得
x' = x cos β - y sin β
y' = y cos β + x sin β
z' = z
现在我们就可以把sin β 和 cos β 通过js 传递给着色器。
着色器：
gl_Position.x = a_Position.x * u_CosB - a_Position.y * u_SinB;
gl_Position.y = a_Position.x * u_SinB + a_Position.y * u_CosB;
js：
var u_CosB = gl.getUniformLocation(gl.program, "u_CosB");
var u_SinB = gl.getUniformLocation(gl.program, "u_SinB");
gl.uniform1f(u_CosB );
gl.uniform1f(u_SinB );

二，旋转矩阵

由上一篇的平移矩阵，我们同样可以推理出，旋转矩阵，如图：

三，沿X轴旋转和Y轴旋转的推到过程：

上一篇：WebGL图形变换：平移矩阵下一篇：WebGL图形变换：缩放矩阵

评论

最新文章

热门笔记

可以直接扫码关注本站

易塔云建站：15811355317

微信扫一扫，添加好友