经过阅览本文，你将取得以下收成：
1.图画改换的概念
2.图画改换的数学原理：向量、矩阵
3.经过矩阵对图画进行改换操作
闲谈几句
时光荏苒，本专栏由于众所周知和世人所不周知的原因现已停更好长一段时刻了，在这段时刻里，发生了许多事情。卡塔尔世界杯满意落下帷幕，球王梅西总算真实加冕，从此真实封王(封面致敬)。国内疫情在封控了长达3年时刻之后，总算放开，经过一个月左右十分艰难的全国个人抗疫时期之后，现在疫情的阴云总算散去，现在生活暂时看起来现已逐步恢复到疫情前的模样，期望能够从此作别疫情。现在新年现已拉开序幕，回来上班转眼现已2个星期，如同现已没有理由再蓄势待发（偷懒躺平）了，到了持续专栏脚步的时分了，所以我便打开了笔记本开端奋笔疾书…
上篇回忆
上一篇文章一看就懂的OpenGL ES教程——仿抖音滤镜的各种奇技淫巧之根底滤镜 现已给咱们展示了如何使用OpenGl es实现最基本的滤镜，包括灰度滤镜、反色滤镜、分镜滤镜，许多童鞋表明看得还不行过瘾，表明要看更炫的滤镜，上一篇滤镜讲到黄金段位，那么咱们依照王者的段位持续下一种滤镜：改换滤镜，从这儿开端，滤镜开端迎来动画的元素。
既然是改换滤镜，那么有一个根底知识真的是重中之重，它事关各位学习图画处理相关的前途，这个重要的知识点便是——图画的改换。所谓”勿在浮沙筑高台“，今日就来好好打打数学根底。（有些童鞋看到数学或许会有点慌，但是请莫慌，请信任我能讲的通俗易懂~）
图画改换
这儿的改换详细指的是几许改换，改换分为2大类：
一种是仿射改换，比方平移、缩放、旋转、错切这些常见的2维操作以及其组合操作，他们的特点是本来平行的直线改换之后仍然坚持平行。
另外一种是透视改换，它是一种3维空间的改换，特点是本来平行的直线改换之后不一定坚持平行，一般用于图画的矫正（例如在移动机器人视觉导航研究中，由于摄像机与地上之间有一倾斜角，而不是直接笔直朝下（正投影），有时期望将图象校正成正投影的方法）。
当然今日的主题是仿射改换，关于透视改换或许会在今后的图画处理相关博文讲到，咱们能够拭目而待一下哈哈。
图画的改换其实实质便是图画上每个点方位的改变，咱们知道，空间坐标系中的每个点都能够用（x,y,z）这样的坐标点来表明:
假如看过之前专栏的章节，就知道在图画中每个点在OpenGL的是用向量vec来表明的，咱们假如现已写过几回着色器代码，那应该关于vec这东西很熟悉了吧，所以关于点的改换，便是对向量的改换。那么，今日就必须先来一堂数学课，来从向量入手，渐渐揭开图画改换的面纱。
向量根底知识
其实这个是高中的数学知识了，就作为温习一下，所谓温故而知新，能够为师矣~
咱们平常经常接触的相似1+1的运算便是标量的运算，标量(Scalar)仅仅一个数字。而向量有一个方向(Direction)和巨细(Magnitude，也叫做强度或长度)的数字，比方在2D空间中，向量就长得以下的模样：
上图表明有3个向量v→\overrightarrow{v}，w→\overrightarrow{w}，n→\overrightarrow{n}。咱们通常设定一个向量的原点为(0, 0)，然后是指向一个方向的一条线段。比方说向量ab→\overrightarrow{ab}是起点在(0, 0)，并会指向(a, b)的一条线段。2维向量能够看做是在3维空间坐标系中z重量为0的情况。
在图画处理领域，咱们一般用向量来表明点的方位，经过向量的核算来处理对点的改换操作。
向量的运算
向量与标量运算
当把一个向量加/减/乘/除一个标量，咱们能够简略的把向量的每个重量别离进行该运算，例如向量v←\overleftarrow{v} = (2,4),那么v←\overleftarrow{v}/2 = (1,2)。不过有一点要注意，便是减法除法向量只能作为被减数或许被除数，假如倒过来让标量减/除以向量，那是没有任何含义的。
向量加法
由于向量是带有方向的，所以运算的时分这个方向就必须考虑进去，一图胜千言，向量加法如下图所示：
上图是向量v→\overrightarrow{v}和向量k→\overrightarrow{k}相加，能够这姿态通俗易懂地了解向量相加：一个人从原点O出发，先走到（4,2），然后转弯，以（4,2）为临时原点走到（1,2）点，这样，他就走到了原点O坐标系下的（5,4）点，即向量（4,2）+（1,2） = （5,4），效果和从原点直接走到（5,4）点是相同的。所以向量加法得到的成果便是相加的向量头尾连接在一起的成果。
当然也能够把第二个向量平移到原点，如下图：
那么相加后得到的向量其实便是2个向量组成的平行四边形的对角线，方向由原点指向2个向量的平行辅助线的交点。
能够看出，向量加法其实便是将各个重量叠加起来，即假如向量v→\overrightarrow{v}=（a,b）,向量u→\overrightarrow{u}=(c,d),则v→\overrightarrow{v}+u→\overrightarrow{u}=(a+c,b+d)。
向量减法
减法实质也是加法，仅仅加上向量和一个负数标量的乘积，比方向量w→\overrightarrow{w}–v→\overrightarrow{v}，
即w→\overrightarrow{w}+（-v→\overrightarrow{v}）：
由图能够看出，向量相减得到的成果便是从作为减数的向量的箭头指向作为被减数的向量的箭头的新的向量。
向量乘法
向量的乘法内容就开端有点丰富了，有2种玩法，别离是点乘和叉乘。
点乘:
两个向量的点乘等于它们各个重量相乘成果之和。即假如向量v→\overrightarrow{v}=（a,b）,向量u→\overrightarrow{u}=(c,d),则v→\overrightarrow{v}.u→\overrightarrow{u}=(ac+bd)。
从几许含义上来说，2个向量点乘等于2个向量的长度乘上其夹角的余弦值：
v→\overrightarrow{v}.u→\overrightarrow{u} =∣v→∣∣u→∣cos|\overrightarrow{v}||\overrightarrow{u}|\cos\theta
其间∣v→∣|\overrightarrow{v}|能够经过勾股定理来得：
所以： ∣v→∣=a2+b2|\overrightarrow{v}|=\sqrt{\def\foo{a^2} \foo + \def\foo{b^2} \foo}
点乘的几许含义是能够用来表征或核算两个向量之间的夹角，以及在b向量在a向量方向上的投影.
叉乘:
点乘得到的是一个标量，叉乘得到的仍然是一个向量。
叉乘只在3D空间中有界说，它需求两个不平行向量作为输入，生成一个笔直于两个输入向量所在平面的第三个向量。假如输入的两个向量也是正交的，那么叉乘之后将会发生3个相互正交的向量。
如下图所示，v→\overrightarrow{v}和k→\overrightarrow{k}的叉乘成果为笔直于它们的第三个向量。
假如向量v→\overrightarrow{v}=（a,b,c）,向量k→\overrightarrow{k}=(d,f,g)，则两者的叉乘v→\overrightarrow{v}w→\overrightarrow{w}为：
(abc)\begin{pmatrix}a\\b\\c\end{pmatrix}(dfg)\begin{pmatrix}d\\f\\g\end{pmatrix}= (bg−cfcd−agaf−bd)\begin{pmatrix} bg-cf\\ cd-ag \\ af-bd \end{pmatrix}
老实说，仍是有点难记的，不过确实没必要专门记住，只需记住叉乘成果为笔直于它们的第三个向量即可~
说了半天，叉乘有什么效果呢？
在3D图画学中，叉乘的概念十分有用，能够经过两个向量的叉乘，生成第三个笔直于a，b所在平面的法向量。（关于法向量有什么效果，敬请期待后边章节的解说。）
矩阵根底知识
向量的根底现已带各位回忆完，接下来开端回忆矩阵了。
简略来说矩阵便是一个矩形的数字、符号或表达式数组。矩阵中每一项叫做矩阵的元素(Element)。比方下图便是一个2*3的矩阵：
[236598]\begin{bmatrix}2 & 3 & 6\\ 5 & 9 & 8 \end{bmatrix}
这儿每个元素有它的索引，便是一个记载元素在矩阵中的方位的符号，比方上面的矩阵，元素“2”索引为（0,0），元素“9”索引为（1,1），以此类推。
表面看矩阵便是一个由多个数字组合起来的方阵，但是它关于搞图形处理来说，那但是含义严重，就犹如经典日漫《钢铁神兵》中铁兵得到了X相同（没看过这个动漫？强烈推荐去看），下面就一步步向你揭晓它在图画处理中的效果。
首要，咱们先了解下矩阵的基本运算：
矩阵加减法
矩阵加减法很简略，便是对相同索引下的元素进行加减，那便是说只要行数和列数共同的矩阵才能进行加上运算。也便是说一个32矩阵和一个23矩阵（或一个33矩阵与44矩阵）是不能进行加减的。
矩阵相加减别离如下面2个图所示：
简略到没什么好讲的~
矩阵乘法数乘和
和向量相同，矩阵乘法又分为数乘和矩阵之间相乘。
矩阵数乘
数乘便是矩阵和一个标量进行乘法运算，矩阵与标量之间的乘法也是矩阵的每一个元素别离乘以该标量，如下图所示：
如同又是简略到没什么好讲的…
矩阵相乘
提到矩阵与矩阵的乘法，刚接触的时分总觉得有点让人觉得别扭，2个矩阵相乘，简略来说，便是榜首个矩阵的行与第二个矩阵对应的列的元素一一相乘之和作为成果矩阵的对应元素…
看起来有点抽象吧，咱们举个比如就能看懂了。
以下是2个矩阵的相乘：
能够看到左面2个红框的每个元素对应相乘再相加就能得到右边红框部分对应的元素，结合我上面总结的，或许咱们都能看懂了。那么总结下通用的公式即：
成果矩阵的第（i,j）是榜首个矩阵的第i行和第j列的一切对应元素（即一切的榜首个矩阵的（i,n）元素和第二个矩阵的（n,j）元素）相乘，并将一切相乘相加而成。
所以又得到了两条定论：
1.只要当左边矩阵的列数与右侧矩阵的行数持平，两个矩阵才能相乘。
2.成果矩阵的维度是(n, m)，n等于左边矩阵的行数，m等于右侧矩阵的列数。
3.矩阵乘法不满足交换律，满足结合律（这个各位能够亲自证明下）
图画改换矩阵
上面章节讲过向量一般用来描述空间中的一个点，那么矩阵能够说便是用来处理这个点的一个规划精巧的东西装备。
缩放改换
为了简略了解，这儿从二维空间切入。这儿假定二维空间中有一个时钟，现在要把时钟缩小到本来的0.5倍巨细，如下图：
要怎么处理呢？当然聪明的你，很快能想到，便是对时钟的每个点对应的向量做缩小的核算。
假定时钟上的一个点坐标为（x,y），现在要对该点进行缩小0.5的核算，即将该点挪动到（0.5x,0.5y）的地方，假定该点为（x’,y’），则能够得到下面的方程式子：
{x′=0.5xy′=0.5y\begin{cases} x’ = 0.5x\\ y’ = 0.5y \end{cases}
前面咱们提到空间中的点能够用向量来表明，那么聪明的古人就考虑，能不能把上面的方程式子拆成三个部分呢：
榜首部分，代数x左面的系数；
第二部分，代数x自身；
第三部分，是等号右边的数字
所以聪明的古人将上面的方程式子转化为这样的表明方法：
[x′y′]\begin{bmatrix}x’ \\y’ \end{bmatrix} = [0.5000.5]\begin{bmatrix}0.5 & 0 \\ 0 & 0.5 \end{bmatrix} [xy]\begin{bmatrix}x \\y \end{bmatrix}
咦，最左面的不便是矩阵么？
所以这样拆出来的优点是对图画上的点的改换处理，就能够用矩阵和向量相乘的方法表明了。
所以假如x方向缩放系数为a，y方向的缩放系数为b，则咱们能够得到一个缩放的通用改换矩阵：
[a00b]\begin{bmatrix}a & 0 \\ 0 & b \end{bmatrix}
而在后边章节，咱们更能领会这种改换矩阵的优点。
另外提个有意思的东西，当a或b为负数的时分，就能够完成镜面翻转改换。
当a为负数时，便是对y轴做镜面翻转：
当b为负数时，便是对x轴做镜面翻转：
平移改换
再看下平移的比如：
如上图所示，便是将空间中一个矩形向x,y方向别离移动（-xlx_l,-yly_l）。
咱们又能够假定矩形中的一个点为（x,y）,在x,y方向别离平移xtx_t、yty_t到点（x’,y’）则能够得到以下方程式子：
{x′=x+xty′=y+yt\begin{cases} x’ = x + x_t \\ y’ = y + y_t \end{cases}
所以聪明的你一定能推到为向量的表明方法：
[x′y′]\begin{bmatrix}x’ \\y’ \end{bmatrix} = [xy]\begin{bmatrix}x \\y \end{bmatrix} + [xtyt]\begin{bmatrix}x_t \\y_t \end{bmatrix}
便是这么简略，连矩阵都不需求~
旋转改换
改换越来越有意思了，一起来看下旋转改换：
旋转的改换矩阵的推导就没有缩放平和移来的那么简略了。以下是让人热血沸腾的数学推导进程，不感兴趣的同学能够直接看最终的定论。
咱们仍然对其间某个点作为分析的切入点：
假定某个点为a，此时要将a逆时针旋转\phi角度到b点，如下图所示：
数学推导进程：
榜首步，列出点a坐标点和其对应向量长度以及向量和x轴夹角之间的关系：
假定a点的坐标为（xax_a,yay_a），则a点对应的向量a→\overrightarrow{a}的长度r为：
r=xa2+ya2r=\sqrt{\def\foo{x_a^2} \foo + \def\foo{y_a^2} \foo}
假定a和x坐标正方向的夹角为\alpha，则能够推导出：
xa=rcosx_a = r\cos\alpha
ya=rsiny_a = r\sin\alpha
第二步，列出点b坐标点和其对应向量长度以及向量和x轴夹角之间的关系：
由于b点是由a点旋转得到的，所以对应的向量b→\overrightarrow{b}的长度也是r，不同的是向量b→\overrightarrow{b}和x轴正方向的夹角为（+\alpha+\phi）,所以相同能够推出：
xb=rcos(+)x_b = r\cos(\alpha+\phi)
yb=rsin(+)y_b = r\sin(\alpha+\phi)
或许不少人就卡到这儿了，那么接下来要怎么持续推导呢？（接下来便是表现多年的数学功底的时分了）
三角函数中，有个东西叫做二角和差公式，所以经过这个公式，又能够将上面的式子拆解为：
xb=rcoscos−rsinsinx_b = r\cos\alpha\cos\phi – r\sin\alpha\sin\phi
yb=rsincos+rcossiny_b = r\sin\alpha\cos\phi + r\cos\alpha\sin\phi
第三步，将榜首步得到的关系式子代入第二步得到的关系式子：
xb=xacos−yasinx_b = x_a\cos\phi – y_a\sin\phi
yb=yacos+xasiny_b = y_a\cos\phi + x_a\sin\phi
第四步，将第三步转化为向量和矩阵之间的关系式子：
走到第三步，根据之前缩放的解说，许多童鞋应该能够推导出改换矩阵了吧：
[xbyb]\begin{bmatrix}x_b \\y_b \end{bmatrix} = [cos−sinsincos]\begin{bmatrix}\cos\phi & -\sin\phi \\ \sin\phi & cos\phi \end{bmatrix} [xaya]\begin{bmatrix}x_a \\y_a \end{bmatrix}
所以，能够大声宣布，假如要对一个图画逆时针旋转\phi 度，则旋转改换的改换矩阵便是：
[cos−sinsincos]\begin{bmatrix}\cos\phi & -\sin\phi \\ \sin\phi & cos\phi \end{bmatrix}
组合改换
经过上面的解说，咱们知道本来对一个图画的做几许改换，或许要对每个点进行多个步骤的代数和三角函数，现在变成用一个矩阵就能处理问题了，而现在核算机gpu关于矩阵核算但是十分拿手的，这姿态不仅人看起来舒畅便利，核算机也十分爽。不过，上面不同的改换，所运用的矩阵也是不同的，能不能将其大一统，即用一个矩阵来表明多个改换呢？即用以下的表明方法表明各种改换的组合：
[x′y′]\begin{bmatrix}x’ \\y’ \end{bmatrix} = [abcd]\begin{bmatrix}a & b \\ c & d \end{bmatrix} [xy]\begin{bmatrix}x \\y \end{bmatrix}
比方咱们现在要对一个点（x,y）先进行缩放(x轴缩放a倍，y轴缩放b倍)，然后进行逆时针旋转\phi度，最终再进行平移(x轴平移x_t，y轴平移y_t)，根据上面的每种改换推出来的定论，假如改换后的点位（x’,y’）咱们能够得到式子（这儿要注意相乘的次序，由于矩阵不满足交换律，所以先改换的要先和点向量相乘）：
[x′y′]\begin{bmatrix}x’ \\y’ \end{bmatrix} = [cos−sinsincos]\begin{bmatrix}\cos\phi & -\sin\phi \\ \sin\phi & cos\phi \end{bmatrix} [a00b]\begin{bmatrix}a & 0 \\ 0 & b \end{bmatrix} [xaya]\begin{bmatrix}x_a \\y_a \end{bmatrix} +[xtyt]\begin{bmatrix}x_t \\y_t \end{bmatrix}
缩放矩阵和旋转矩阵的相乘最终得到的仍是一个矩阵，所以仍是线性改换，问题就出现”万恶“的平移，是加一个固定向量，导致整个式子不是线性改换，以至于不能用一个矩阵便是一切改换的组合，而咱们又不想平移改换成为一个特例。
聪明的古人早已巧妙处理了这个问题，他们用的处理方案叫做齐次坐标。
齐次坐标
用二维的方法确实处理不了这个问题，那么把思路打开，可不能够用3维矩阵的方法来处理呢？咱们能够测验拓宽一个维度看看：
比方现在假定点的向量变为为[xy1]\begin{bmatrix}x \\y \\1 \end{bmatrix}，即拓宽的多一维固定指定为1，那么最终改换成果的点向量就会变成：[x′+xty′+yt1]\begin{bmatrix}x’+x_t \\y’+y_t \\1 \end{bmatrix}，所以，就能够找到一个神奇的矩阵能够表达平移改换了：
[10xt01yt001]\begin{bmatrix}1 & 0 & x_t \\ 0 & 1 & y_t \\ 0 & 0 & 1 \end{bmatrix}
经过巧妙增加一维，再利用矩阵乘法的法则，使得用矩阵乘法也能够表明一个向量的相加。
[x′y′]\begin{bmatrix}x’ \\y’ \end{bmatrix} = [xy]\begin{bmatrix}x \\y \end{bmatrix} + [xtyt]\begin{bmatrix}x_t \\y_t \end{bmatrix}
⇒\Rightarrow
[x′+xty′+yt1]\begin{bmatrix}x’+x_t \\y’+y_t \\1 \end{bmatrix} = [10xt01yt001]\begin{bmatrix}1 & 0 & x_t \\ 0 & 1 & y_t \\ 0 & 0 & 1 \end{bmatrix} [xy1]\begin{bmatrix}x \\y \\1 \end{bmatrix}
而增加的这一维，便是齐次坐标。
以此类推，能够推出在增加齐次坐标之后，各种改换对应的改换矩阵如下所示：
所以乎，组合的改换就能够用大一统的矩阵表明了：
[x′y′1]\begin{bmatrix}x’ \\y’ \\1\end{bmatrix} = [10xt01yt001]\begin{bmatrix}1 & 0 & x_t \\ 0 & 1 & y_t \\ 0 & 0 & 1 \end{bmatrix} [cos−sin0sincos0001]\begin{bmatrix}\cos\phi & -\sin\phi & 0\\ \sin\phi & cos\phi & 0 \\ 0 & 0 & 1 \end{bmatrix} [a000b0001]\begin{bmatrix}a & 0 & 0\\ 0 & b & 0 \\ 0 & 0 & 1 \end{bmatrix} [xaya1]\begin{bmatrix}x_a \\y_a \\1 \end{bmatrix}
而最终，咱们将得到相似这样的式子：
其间组合改换矩阵
即为[10xt01yt001]\begin{bmatrix}1 & 0 & x_t \\ 0 & 1 & y_t \\ 0 & 0 & 1 \end{bmatrix} [cos−sin0sincos0001]\begin{bmatrix}\cos\phi & -\sin\phi & 0\\ \sin\phi & cos\phi & 0 \\ 0 & 0 & 1 \end{bmatrix} [a000b0001]\begin{bmatrix}a & 0 & 0\\ 0 & b & 0 \\ 0 & 0 & 1 \end{bmatrix} 的核算成果。
其间mxm_x表明缩放、旋转、错切相关的改换，xtx_t、yty_t、ztz_t表明平移改换。
由于不同改换的次序不同，最终得到的mkm_k也是不同。咱们能够看下面的图领会下不同改换次序对成果的影响：
以上别离是对同一个图画先进行缩小再旋转与先旋转再缩小操作，可见成果是不相同的，由于前面一步的操作会影响后边的操作，这也和矩阵不符合交换律共同。
这种整合起来的改换便是前面现已讲过的仿射改换（线性改换加平移）。
咱们要记住的便是，关于仿射改换来说，改换矩阵最终一行是固定的[0,0,1]：
而投影改换就不是固定的[0,0,1]。
当然其次坐标的效果还不止这些，在3D空间中，它还表明和深度相关，在投影改换矩阵的核算中十分重要。
总结
今日妥妥给各位讲了一节数学课，不知各位看理解了没（不理解的或许持续看下一篇就理解了哈哈）。主要是回忆了向量、矩阵的根底知识，并要点讲了图画处理中改换矩阵的推导，最终讲了齐次坐标的概念，并论述了如何经过齐次坐标来处理平移不能“大一统”到组合改换矩阵的问题。下一篇，就将开端把今日讲的理论知识一一付诸实践，这个时分，你就能真实领会到改换矩阵”大一统“的优越性，真实体验图画改换的乐趣~下一篇：一看就懂的OpenGL ES教程——仿抖音滤镜的之改换滤镜（实践篇）
项目代码
opengl-es-study-demo 不断更新中，欢迎各位来star~
参阅：
GAMES101-现代核算机图形学入门-闫令琪
改换
Fundamentals of Computer Graphics, Fourth Edition
原创不易，假如觉得本文对自己有协助，别忘了随手点赞和重视，这也是我创作的最大动力~
系列文章目录
体系化学习系列博文，请看音视频体系学习总目录
实践项目： 介绍一个自己刚出炉的安卓音视频播放录制开源项目 欢迎各位来star~
相关专栏：
C/C++根底与进阶之路
音视频理论根底系列专栏
音视频开发实战系列专栏
一看就懂的OpenGL es教程
