变量如下定义：

vec3 v3a, v3b, v3c;
float t;

矢量和浮点数的运算

v3b = v3a + f;

其效果是为矢量的每一个分量加上浮点数f，与下面代码相同：

v3b.x = v3a.x + f;
v3b.y = v3a.y + f;
v3b.z = v3a.z + f;

其它操作符 -、*、/ 效果一样。

矢量与矢量运算

v3c = v3a + v3b;

矢量运算操作发生在矢量的每个分量上，与下面代码相同：

v3c.x = v3a.x + v3b.x;
v3c.y = v3a.y + v3b.y;
v3c.z = v3a.z + v3b.z;

其它操作符 -、*、/ 效果一样。

矩阵与浮点数的运算

m3b = m3a * f;

矩阵与浮点数的运算发生在矩阵的每个分量上，与下面等价：

m3b[0].x = m3a[0].x * f;
m3b[0].y = m3a[0].y * f;
m3b[0].x = m3a[0].y * f;
m3b[1].x = m3a[1].x * f;
m3b[1].y = m3a[1].y * f;
m3b[1].x = m3a[1].y * f;
m3b[2].x = m3a[2].x * f;
m3b[2].y = m3a[2].y * f;
m3b[2].x = m3a[2].y * f;

矩阵右乘矢量

v3b = m3a * v3a;

矩阵右乘矢量的结果是矢量，其中每个分量都是原矢量中的对应分量，乘上矩阵对应行的每个元素的积的加和， 与下面等价：

v3b.x = m3a[0].x * v3a.x + m3a[1].x * v3a.y + m3a[2].x * v3a.z;
v3b.y = m3a[0].y * v3a.x + m3a[1].y * v3a.y + m3a[2].y * v3a.z;
v3b.z = m3a[0].z * v3a.x + m3a[1].z * v3a.y + m3a[2].z * v3a.z;

矩阵左乘矢量

v3b = v3a * m3a;

矩阵也可以与矢量左乘，但与左乘不同，规则如下：

v3b.x =  v3a.x * m3a[0].x +v3a.y * m3a[0].y + v3a.z * m3a[0].z;
v3b.y =  v3a.x * m3a[1].x +v3a.y * m3a[1].y + v3a.z * m3a[1].z;
v3b.z =  v3a.x * m3a[2].x +v3a.y * m3a[2].y + v3a.z * m3a[2].z;

矩阵与矩阵相乘

m3c = m3a * m3b;

矩阵相乘在变换和动画中会用到，看下面规则：

m3c[0].x = m3a[0].x * m3b[0].x + m3a[1].x * m3b[0].y + m3a[2].x * m3b[0].z
m3c[1].x = m3a[0].x * m3b[1].x + m3a[1].x * m3b[1].y + m3a[2].x * m3b[1].z
m3c[2].x = m3a[0].x * m3b[2].x + m3a[1].x * m3b[2].y + m3a[2].x * m3b[2].z
m3c[0].y = m3a[0].y * m3b[0].x + m3a[1].y * m3b[0].y + m3a[2].y * m3b[0].z
m3c[1].y = m3a[0].y * m3b[1].x + m3a[1].y * m3b[1].y + m3a[2].y * m3b[1].z
m3c[2].y = m3a[0].y * m3b[2].x + m3a[1].y * m3b[2].y + m3a[2].y * m3b[2].z
m3c[0].z = m3a[0].z * m3b[0].x + m3a[1].z * m3b[0].y + m3a[2].z * m3b[0].z
m3c[1].z = m3a[0].z * m3b[1].x + m3a[1].z * m3b[1].y + m3a[2].z * m3b[1].z
m3c[2].z = m3a[0].z * m3b[2].x + m3a[1].z * m3b[2].y + m3a[2].z * m3b[2].z

《WebGL编程指南》是入门WebGL的绝佳好书，对了解游戏引擎底层渲染原理大有裨益，「奎特尔星球」公众号计划将书中内容拆解成若干篇的知识点笔记，方便大家在碎片时间学习，欢迎你一起学习！

1. WebGL学习笔记 | 使用着色器绘制一个点

2. WebGL学习笔记 | 创建着色器程序

3. GLSL 语言—矢量和矩阵 [ ] 运算符

4. GLSL ES 语言—矢量点(.)运算符

5. GLSL ES 语言—矢量和矩阵的赋值构造函数

6. GLSL ES 语言—变量数值类型

7. GLSL ES 语言基础

8. GitChat新作，如何较为优雅地实现新手引导功能！

9. 大神驾到 |「大掌教」Cocos3D组件详解

10. Cocos Creator 3D 梦想再起航！