webgl_图形变换(旋转，平移，缩放)

平移
平移一个三角形，你需要对顶点坐标的每个分量(x和y)，加上三角形在对应轴（如X轴或Y轴）上平移的距离。比如，将点p(x, y, z)平移到p’(x’, y’, z’)，在X轴、Y轴、Z轴三个方向上平移的距离分别为Tx，Ty，Tz，其中Tz为0，如下图所示。
那么在坐标的对应分量上，直接加上这些T值，就可以确定p’的坐标了，如下所示。
x’= x +Tx
y’ = y + Ty
z’=z+Tz

我们只需要着色器中为顶点坐标的每个分量加上一个常量就可以实现上面的等式。显然，这是一个逐顶点操作，上述修改应当发生在顶点着色器，而不是片元着色器中。
修改代码时，将平移距离Tx、Ty、Tz的值传入顶点着色器，然后分别加在顶点坐标的对应分量上，再赋值给gl_Position。下面看看修改后的示例程序。

旋转
旋转比平移稍微复杂一些，为了描述一个旋转,你必须指明:
●旋转轴(图形将围绕旋转轴旋转)。
●旋转方向(方向:顺时针或逆时针)。
●旋转角度(图形旋转经过的角度)。
设点p(x， y, z)旋转β角度之后变为了点p ‘(x ’ , y ‘,z’):首先旋转是绕Z轴进行的，所以z坐标不会变，可以直接忽略﹔然后，x坐标和y坐标的情况有一些复杂，如下图：
在图3.22中，r是从原点到点p的距离，而α是X轴旋转到点p的角度。用这两个变量计算出点p的坐标，如下所示：
x = rcosα
y = rsinα
类似地，你可以使用r、α、β来表示点p’的坐标,再经过一系列装换得到最终等式，如下所示:
x’= r cos (α +β)
y’= r sin (α +β)
===>
x’ = r (cosα cos β - sinα sin β)
y’ = r (sinα cos β + cosα sin β)
===>
x’= x cos β - y sin β
y’= x sin β + y cos β
z’=z
同样，对于旋转操作来讲，也是在顶点着色器上操作，修改程序如下：

如上，在定义变量u_cosB和u_sinB时，之所以使用uniform变量，是因为这两个变量的值与顶点无关。

变换矩阵:旋转
如果图形经过旋转在平移这种复杂操作后，我们如果按上面所示计算，就会很复杂，所以我们就引入变换矩阵，他也是后续对于图形变换操作的基础。
假设有一个如下的矩阵，同矢量(x,y,z)，经过相乘后得到一个新的矢量（x’,y’,z’）：(注意：矩阵和矢量相乘不符合乘法的分配率，AxB不等于BxA的)

在本例中，矩阵与矢量相乘得到的新矢量，其三个分量为x’、y’、z，其值如下所示。注意，只有在矩阵的列数与矢量的行数相等时，才可以将两者相乘。
x’ = ax + by + cz
y’ = dx + ey + fz
z’ = gx + hy + iz
现在，为了理解矩阵是如何代替数学表达式的，下面将矩阵等式与数学表达式进行比较。

将结果带入，可得新的矢量（x’,y’,z’)如下：

这个矩阵就被称为变换矩阵,因为它将右侧的矢量(x, y,z)“变换”为了左侧的矢量(x ', y ‘, z’)。上面这个变换矩阵进行的变换是一次旋转，所以这个矩阵又可以被称为旋转矩阵。

4*4的旋转矩阵

变换矩阵:平移

变换矩阵:缩放

我们在数组中存储矩阵的每个元素，但问题是:矩阵是二维的，其元素按照行和列进行排列，而数组是一维的，其元素只是排成一行。这里，我们可以按照两种方式在数组中存储矩阵元素:按行主序和按列主序，webGL和OpenGL一样，矩阵元素是按列主序存储在数组中的。如下图：

看到这里大家应该对图形的变化有了一定的了解，那就用这些变化去实现复杂的变换效果吧。

webgl_图形变换(旋转，平移，缩放)相关推荐

PAOGD个人作业3——OpenGL，实现模型自身的旋转,平移,缩放
中山大学数据科学与计算机学院本科生实验报告 (2019年春季学期) 课程名称 PAOGD 任课老师郑贵锋年级 16 专业(方向) 软件工程(计算机应用方向) 学号 16340132 姓名梁颖霖 ...
【工作需要】CAD+VBA 实现图块的旋转平移缩放和拼接
CAD+VBA 实现图块的旋转平移缩放和拼接前言一.需求二.实现步骤 1.识别文件中的正确的坐标信息 2.选择图块上的角点,计算正确坐标信息与正确角点坐标之间的平移旋转参数,并进行平移旋转,加入 ...
openGL-读取off、stl、obj文件并旋转平移缩放操作
说明很多朋友反馈,加载完毕后是一片空白-不用担心.我认为你很大程度上已经配置成功.这时候你可以试一试点击数字1.2.3进行查看. 此外我建议你使用点面数目规模较小的模型例如bunny等而不是使用ki ...
opengl加载和绘制STL模型+旋转平移缩放光照
一.开发环境说明操作系统:windows 开发软件:Visual Studio 2017 编程语言:基于控制台下的opengl 用到的库: glut opengl环境配置查看博客二.STL文件介绍 ...
计算机图形学学习笔记（七）：二维图形变换：平移，比例，旋转，坐标变换等
接上文计算机图形学学习笔记(六):消隐算法:Z-buffer,区间扫描线,Warnock,光栅图形学小结在图形学中,有两大基本工具:向量分析,图形变换.本文将重点讲解向量和二维图形的变换. 5. ...
线性代数：矩阵变换图形（三维平移缩放旋转）
紧接上一篇:http://blog.csdn.net/yinhun2012/article/details/79544205 这篇博文我只是准备对上一篇博文的内容进行扩展,因为上一篇我写完二维xy仿射 ...
【OpenGL学习笔记⑥】——3D变换【旋转的正方体实现地月系统旋转+平移+缩放】
✈️ 文章目录零. 成果预览图一.3D立方体的顶点数组二.纹理旋转三.纹理缩放四.画n个3D图形五.轨道的数学公式六.深度缓冲(Z 缓冲) 七.完整代码八.参考附录: 神器的正方体 ☁ ...
matlab坐标旋转平移缩放,MATLAB实现RGB图像的平移、缩放和旋转
Func的1 2 3分别对应平移.旋转.缩放功能 function []=transition(func,I) if func==1 delta_x=str2double(inputdlg('请输入向 ...
html图形的旋转平移,《图形的平移和旋转》教学案例
教材简析: 平移和旋转是新课程新增的一个内容.图形的平移和旋转,对于学生建立空间观念,掌握变换的数学思想方法有很大的作用.从儿童空间知觉的认知发展来说,是从静态的前.后.左.右的空间知觉进入感悟平移和 ...

webgl_图形变换(旋转，平移，缩放)

webgl_图形变换(旋转，平移，缩放)相关推荐

最新文章

热门文章