头“秃”来自“the book of shader”
明天我的文章可能会有点形象。我尽量“有图有假相”，不让大家的大脑内存透露！
本文会讲到：
- transform 2D变换背地的数学原理
- 如何直观了解一个矩阵
- 齐次变换是什么？
- 可能会波及一些：逆矩阵()，正交()，向量的常识，用到的时候伪装本人晓得就能够了！
- 但根本不会波及3D，四元数，各类引擎中MVP矩阵变换 。话不多说咱们开始吧
scale+skew+rotate我全都要
作为一个传统前端，一个资深csser，肯定晓得transform属性上，是能够配置rotate用于旋转，scale用于缩放，skew用于斜切。
更进一步，transform还提供matrix，matrix3d这样的操作让咱们能够更自在地变换图形：
所以大略可能想到2D的rotate，scale，skew实质其实就是某种非凡的矩阵。
那么接下来就是如何把这三个操作写成矩阵模式。
不过，在此之前咱们先想想，矩阵操作的根本单元是什么？
是“点”
点组成了线，线组成了面!
如果你有写过shader，你会晓得gl也是操作一堆的点来生成画面的。
所以“女神放大了都是马赛克
当然！不放大也可能有马赛克(误)
既然晓得矩阵操作的单元是“点”，那么任意的点p(x,y)通过一个矩阵变动后的后果是什么？
2D:
3D:
上图公式示意矩阵的乘法:
矩阵*矩阵，则能够把右矩阵看成两个点/向量拼接而成的。乘法规定不变
当初让咱们来看看scale/skew/rotate所对应的矩阵：
对于最简略的scale矩阵，(x,y)通过缩放矩阵变换咱们冀望它变成（scaleXx, scaleYy）,带入下面的公式1验证:
而对于旋转矩阵，这个 示意逆时针旋转后向量，与原向量之间的夹角。
让咱们验证一下，假如对于p0(1,1)那么它通过 =45度旋转后，将变为p1(0,√2）：
斜切矩阵也是相似的套路，角度从一个变成了两个。这个后文咱们还会提到。读者也能够自行验证下。
目前咱们尽管把scale，skew，rotate三种变换写成了矩阵，但他们三者仍旧是独立的。人类总是贪心的，能不能只用一种形式去了解它们？换言之，咱们更想要晓得，对于任意的变换（这里说任意其实不太谨严，这个咱们前面会提到），其对应的矩阵是什么？
那就要用引入一个新的概念：
“基”向量(必须用个紫色)
咱们晓得矩阵其实是在扭转“点”，在空间中咱们如何示意一个点？
在2D笛卡尔坐标体系下，两个互相垂直的方向形成x轴和y轴。任意点P则用一对数(a,b)示意。比方(2,3)就示意2D空间中的一个确定的点,这里的2，3的意义又是什么？
这里2的意思就是p在x方向占据2个单位长度，3就示意在y方向占据3个单位长度。这两个单位长度用向量示意为[1,0]^T与[0,1]^T 。
这种观点下，点能够写成：2 [1,0]^T + 3 [0,1]^T ：
T就是转置，能够了解把原先横着写的行向量，竖着写成列向量。看！就是下图那种。
推广到任意坐标（a,b）：
｜1 0｜｜a｜ ｜0 1｜｜b｜ 而其中[1,0]^T与[0,1]^T 就被称为一组基向量。他们组成的这个矩阵其实有个名字叫做单位矩阵。
单位矩阵在更简单的交互中其实有很多重要的性质，然而和明天的话题没啥关系，就当听个冷常识吧！
high-level地了解矩阵
咱们当初把“基向量”和用“基向量”示意的点都带入线性变换中，看看通过一次变换之后基向量会如何扭转 ？
这里咱们发现了一个乏味的景象：
原先的基向量x0，y0，通过变换后变为 1， 1(就是上图中红色的局部)。原先的点P0通过变换后变为P1，此时点p1是能够用 1， 1形容。而 1， 1后面的系数还是原来p0(a,b)的系数。（尽管形态产生了变动，但图中红色的虚线网格与基向量的比例不变）
整顿成数学语言就是：
举个“栗”子：
对于一个缩放操作，x轴放大1.5倍，y轴放大2倍。
[x] = [1.5,0]^T
[y] = [0,2]^T
那么该变换对应的矩阵就是：
｜x y｜ = ｜1.5 0 ｜ = ｜scaleX 0 ｜ ｜ 0 2 ｜ ｜ 0 scaleY ｜同理，旋转和斜切变换也能够应用基向量的思路，易得对应矩阵：
这样包含但不限于rotate/scale/skew的矩阵变换，咱们都能够从基向量的角度去了解了。
说到这，对于2D矩阵的知识点，大抵就完结了！吗？
是不是有哪里怪怪的？
老子动不了了！
对！咱们齐全没有解释translate。到目前为止咱们说的2*2矩阵只能进行如下操作
只能把点[x,y]变换成[ax+cy,bx+dy]^T的模式。
这种变换被叫做线性变换，线性变换有2个比拟显著的特点：
- 线性：对于矩阵变换去察看空间中任意的点，它们所受到的影响是统一的。或者不谨严地说，网格不会在变换后变成曲线（如下图）也不会不平均:部分放大，另一部分放大。
- 对于原点对称：
图中不管基向量如何变动，原点都没有产生扭转。
这个性质其实也很好了解，[0,0]这个点不论用什么矩阵解决后都是[0,0] ，这意味着实际上矩阵变换没有能力进行平移操作。
因为线性变换的代数实质是：
然鹅！平移操作的代数实质是：
这时候仅仅应用一个2D矩阵，想要平移。就真的是“臣妾做不到了”，所以这时咱们引入一个新的变换“齐次变换”！
齐次变换
说好是2D怎么又给我整成3D？尽管咱们把原来的2维点[x,y]拓展为三维的点[x,y,1]。
但咱们不用操心第三个行，咱们仅看矩阵的前两行即可：
实际上，它就是css中的matrix(a,b,c,d,tx,tx)。而这个矩阵变换的后果就真的实现了2D线性变换与平移：
至此，2D矩阵的变换的原理局部就根本说完了。上面咱们联合下PIXI.js的源代码进行一些简略的源码剖析：
秃头环节
PIXI.js采纳transform+matrix的组合实现图形操作。
让咱们先来看看Matrix.ts.。
export class Matrix{// ...... constructor(a = 1, b = 0, c = 0, d = 1, tx = 0, ty = 0) { /** * @member {number} * @default 1 */ this.a = a; /** * @member {number} * @default 0 */ this.b = b; /** * @member {number} * @default 0 */ this.c = c; /** * @member {number} * @default 1 */ this.d = d; /** * @member {number} * @default 0 */ this.tx = tx; /** * @member {number} * @default 0 */ this.ty = ty; }// .....}能够看到这个构造函数的参数，和咱们上文所说的齐次变换矩阵的前两行是一毛一样的，也与css中的matrix参数统一。
然而它的正文还是容易引起一些误会的：
/** * @param {number} [a=1] - x scale * @param {number} [b=0] - y skew * @param {number} [c=0] - x skew * @param {number} [d=1] - y scale * @param {number} [tx=0] - x translation * @param {number} [ty=0] - y translation*/具体每个参数的用处，大可不必拘泥，咱们当初能够从基向量的角度去精确了解了。
matrix的大部分办法都比拟容易了解，这里咱们筛选几个来说说吧！
rotate(angle: number): this { const cos = Math.cos(angle); const sin = Math.sin(angle); const a1 = this.a; const c1 = this.c; const tx1 = this.tx; this.a = (a1 * cos) - (this.b * sin); this.b = (a1 * sin) + (this.b * cos); this.c = (c1 * cos) - (this.d * sin); this.d = (c1 * sin) + (this.d * cos); this.tx = (tx1 * cos) - (this.ty * sin); this.ty = (tx1 * sin) + (this.ty * cos); return this; }rotate的作用就是旋转，matrix自身也记录了一套变换。那么在此基础上，再进行操作就须要应用矩阵的乘法。矩阵的乘法是有程序的。例如咱们须要对点进行如图平移，缩放，平移操作，就必须把矩阵顺次序相乘：
而rotate操作是在原有矩阵之后执行的，所以新矩阵就是[Result] = Rotate:
是不是恍然大悟？
是的！除非是一些非凡操作，大部分失常人类是不会违心面对矩阵计算的，因而PIXI提供了另一个类Transform。把矩阵变换用一些比拟容易了解的属性（position，scale,rotate...）代替（CSS重的transform也有相似效用）除外，Transform代码也比拟业务，它下面的数据都是ObservablePoint，还实现了父子级的关系。而理论运行时，Transform通过decompose办法实现本身数据与Matrix数据的转换。
decompose(transform: Transform): Transform { // sort out rotation / skew.. const a = this.a; const b = this.b; const c = this.c; const d = this.d; const pivot = transform.pivot; const skewX = -Math.atan2(-c, d); const skewY = Math.atan2(b, a); const delta = Math.abs(skewX + skewY); if (delta < 0.00001 || Math.abs(PI_2 - delta) < 0.00001) { transform.rotation = skewY; transform.skew.x = transform.skew.y = 0; } else { transform.rotation = 0; transform.skew.x = skewX; transform.skew.y = skewY; } // next set scale transform.scale.x = Math.sqrt((a * a) + (b * b)); transform.scale.y = Math.sqrt((c * c) + (d * d)); // next set position transform.position.x = this.tx + ((pivot.x * a) + (pivot.y * c)); transform.position.y = this.ty + ((pivot.x * b) + (pivot.y * d)); return transform; }其中Math.atan2(-c, d)和Math.atan2(b, a)。其实在计算2个基向量变换前后的夹角：
当ø与 相等时，咱们就认为这是一个旋转操作。然而因为数值精度的问题，浮点数很难会相等，所以 PIXI采纳差值法判断,即
var delta = Math.abs(ø - )；if(delta < Number.EPSILON){ ...}else{ ....}这里须要留神x基向量确定的是Y方向的斜切值，而y基向量确定的是X方向的斜切值：
此处呈现了我感觉是这段代码中最神来之笔的中央。
因为咱们算进去的skewX其实是负方向的。而delta = Math.abs(ø - )又须要取两值之差。PIXI就间接在Math.atan2(-c, d)加上了符号。后续判断间接应用delta = Math.abs(skewX + skewY)；而skewX方向也被校对了。这种代码上的整合和巧思其实遍布PIXI.js的每个角落，切实拜服作者的逻辑能力。
最初说说scale和position
position就是失常的齐次变换。
而对于scale，咱们判断是否有缩放的规范就是基向量是否缩放，所以scale.x就是旋转后x基向量的模长（aa+bb）^0.5
scale.y同理。
以上就是集体总结的一些对于2D矩阵的知识点，心愿各位大佬不吝赐教。
忽然发现咱们好久没聊shader了，下期咱们就来聊聊水雾和毛玻璃的shader要如何实现吧。
参考资料：
Fundamentals of Computer Graphics, Fourth Edition
《3blue1Brown线性代数实质》
thebookofshaders