从矩阵走入 WebGL 世界

Created by jasonChen1982

陈剑鑫（阿里 UC）

营销活动

编程动画、WebGL

感受下矩阵

Feel by heart

矩阵

Matrix

CSS3 transform ♥♥♥ Matrix

transform 2d变换

translate

rotate

scale

skew

transform 3d变换

描述旋转

Expression rotation in math

矩阵

↡

matrix3d




|        |
| matrix |
|        |

欧拉角

↡

rotateX|Y|Z

四元数

↡

rotate3d

svg动画

transform 2d

canvas 2d api

transform 2d

Matrix Is very important

transform 的实现基于矩阵

What is matrix


|m00  m01  m02  m03|
|m10  m11  m12  m13|
|m20  m21  m22  m23|
|m30  m31  m32  m33|

描述几何空间的仿射变换

矩阵乘法

变换坐标点


| x` |   |1  0  0  tx|   | x |
| y` | = |0  1  0  ty| * | y |
| z` |   |0  0  1  tz|   | z |
| w` |   |0  0  0   1|   | w |


  | x` | = |x + tx|
  | y` | = |y + ty|
  | z` | = |z + tz|
  | w` | = |  w   |

传递性


|1  0  0  tx|   |cosβ  -sinβ  0  0|
|0  1  0  ty| * |sinβ  cosβ   0  0|
|0  0  1  tz|   |  0    0     1  0|
|0  0  0   1|   |  0    0     0  1|

不符合交换律


.animate {
  transform:
    rotate(1turn) translateX(90px);
}


.animate {
  transform:
    translateX(90px) rotate(1turn);
}

额外价值

Extra value


|m00  m01  m02  m03|
|m10  m11  m12  m13|
|m20  m21  m22  m23|
|m30  m31  m32  m33|

进一步了解矩阵

单位矩阵


|1  0  0  0|
|0  1  0  0|
|0  0  1  0|
|0  0  0  1|

各种变换矩阵


位移矩阵          缩放矩阵          X轴旋转矩阵
|1  0  0  tx|   |sx  0   0  0|   |1   0     0    0|
|0  1  0  ty|   |0   sy  0  0|   |0  cosβ  sinβ  0|
|0  0  1  tz|   |0   0   sz 0|   |0 -sinβ  cosβ  0|
|0  0  0   1|   |0   0   0  1|   |0   0     0    1|


Y轴旋转矩阵             Z轴旋转矩阵
|cosβ   0   sinβ  0|   |cosβ  -sinβ  0  0|
|  0    1    0    0|   |sinβ  cosβ   0  0|
|-sinβ  0   cosβ  0|   |  0    0     1  0|
|  0    0    0    1|   |  0    0     0  1|

rotateZ(βdeg) 矩阵推导

x y

r(x, y)

(x`, y`) α β


// 单位圆得到等式
x` = cos(β+α) * r
y` = sin(β+α) * r
z` = z


// 已知
r = √(x^2+y^2)
// 和差化积公式
sin(β+α) = sin(β)cos(α) + cos(β)sin(α)
cos(β+α) = cos(β)cos(α) - sin(β)sin(α)
// 正弦余弦定义
cos(α) = x/r
sin(α) = y/r


// 愉快的代入 
x` = (cos(β)x/r - sin(β)y/r) * r = cos(β)x - sin(β)y
y` = (sin(β)x/r + cos(β)y/r) * r = sin(β)x + cos(β)y


/* 所以猜想旋转矩阵 ＝> */ |cos(β) -sin(β)|
                        |sin(β)  cos(β)|

/* 验证下     => */      |x`|   |cos(β) -sin(β)|   |x|
                        |y`| = |sin(β)  cos(β)| * |y|

x` = cos(β)x - sin(β)y
y` = sin(β)x + cos(β)y

矩阵 + WebGL

WebGL

着色器、几何数据、渲染管线

位移矩阵


|1  0  0  tx|
|0  1  0  ty|
|0  0  1  tz|
|0  0  0   1|

旋转矩阵


X轴旋转矩阵            Y轴旋转矩阵             Z轴旋转矩阵
|1   0     0    0|   |cosβ   0   sinβ  0|   |cosβ  -sinβ  0  0|
|0  cosβ  sinβ  0|   |  0    1    0    0|   |sinβ  cosβ   0  0|
|0 -sinβ  cosβ  0|   |-sinβ  0   cosβ  0|   |  0    0     1  0|
|0   0     0    1|   |  0    0    0    1|   |  0    0     0  1|

旋转矩阵 * 位移矩阵


位移矩阵          X轴旋转矩阵             Y轴旋转矩阵
|1  0  0  tx|   |1   0     0    0|   |cosβ   0   sinβ  0|
|0  1  0  ty|   |0  cosβ  sinβ  0|   |  0    1    0    0|
|0  0  1  tz|   |0 -sinβ  cosβ  0|   |-sinβ  0   cosβ  0|
|0  0  0   1|   |0   0     0    1|   |  0    0    0    1|

实用点～

4*4列矩阵 + canvas 2d完成三维效果

深入一点的应用

加上其它知识点～

thanks for paperplanes`s model

AR技术

矩阵在AR上的应用

demo

移动端的阻碍

WebRTC、Get video frame

VR技术

矩阵在VR上的应用

VR → Web VR 视觉

别说话，先上车

来松鼠村看看

Q&A

END

thanks