还在被 WebGL 的矩阵搞得头大？想不通平移、旋转、缩放的矩阵怎么写，更不懂复合变换的顺序？
本文将深入探讨标准矩阵乘法在 WebGL 中的应用，从基础原理到实战动画，手把手教你用纯矩阵写法实现 WebGL 平移、旋转、缩放，甚至用 gl-matrix 库实现炫酷的复合动画。彻底搞懂矩阵在 WebGL 中的核心作用。
1. 先搞懂：WebGL + 矩阵 = 3D 图形的灵魂
WebGL（Web Graphics Library）是浏览器原生的 3D/2D 渲染 API，无需插件、直接调用 GPU 加速。但想要玩转 WebGL 动画，矩阵乘法是绕不开的核心！
核心优势（标准矩阵版）
- 矩阵统一变换逻辑：平移、旋转、缩放都通过「矩阵 × 顶点坐标」实现，完全符合 GPU 渲染规范
- GPU 友好：矩阵运算可被 GPU 高效并行处理，动画更丝滑
- 复合变换超灵活：多个矩阵相乘就能实现「平移 + 旋转 + 缩放」组合效果，扩展无压力
2. WebGL + 矩阵工作原理
WebGL 基于 OpenGL ES，核心是着色器；而矩阵是连接「JavaScript 逻辑」和「GPU 渲染」的桥梁：
- 开发者在 CPU 端构建变换矩阵（平移 / 旋转 / 缩放 / 复合）
- 将 4x4 矩阵传入顶点着色器的
uniform变量 - GPU 通过「矩阵 × 顶点坐标」的乘法运算，计算顶点最终位置并完成渲染
关键：WebGL 中所有变换的标准写法是
gl_Position = 变换矩阵 * 顶点坐标，而非直接修改顶点 x/y 分量！
2.1 平移变换
平移是最基础的仿射变换，用 4x4 矩阵表示后，能和其他变换无缝组合！
平移矩阵原理（新手秒懂）
在计算机图形学中，平移的数学原理通过齐次坐标 + 4x4 矩阵实现：
- 三维点表示为齐次坐标 (x,y,z,1)
- 三维平移矩阵（WebGL 标准 4x4 形式）：
[ 1 0 0 tx ]
[ 0 1 0 ty ]
[ 0 0 1 tz ]
[ 0 0 0 1 ]
矩阵乘法计算过程：
对三维点 (x,y,z,1) 执行矩阵乘法：
x' = 1*x + 0*y + 0*z + tx*1 = x + tx
y' = 0*x + 1*y + 0*z + ty*1 = y + ty
z' = 0*x + 0*y + 1*z + tz*1 = z + tz
w' = 0*x + 0*y + 0*z + 1*1 = 1
注：WebGL 中即使处理 2D 图形，也统一使用 4x4 矩阵（z/tz 设为 0），这是 GPU 原生支持的标准格式。
实战：纯矩阵实现平移动画（代码可直接跑）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>WebGL 矩阵实战：平移的红色三角形</title>
<style>
canvas { border: 2px solid #ff4400; display: block; margin: 20px auto; border-radius: 8px; }
</style>
</head>
<body>
<canvas id="glCanvas"></canvas>
<script>
// 1. 获取 Canvas 和 WebGL 上下文
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
alert('您的浏览器不支持 WebGL！换 Chrome/Firefox 试试');
throw new Error('WebGL not supported');
}
// 2. 设置黑色背景
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// 3. 着色器（核心：纯矩阵乘法实现平移）
const vertexShaderSource = `
attribute vec4 a_Position;
uniform mat4 u_TranslateMatrix; // 4x4 平移矩阵
void main() {
// WebGL 标准写法：矩阵 × 顶点坐标
gl_Position = u_TranslateMatrix * a_Position;
}
`;
const fragmentShaderSource = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色
}
`;
// 4. 封装着色器创建函数
function createShader(gl, source, type) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error('着色器编译错误:', gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}
// 5. 创建并链接程序
const vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX_SHADER);
const fragmentShader = createShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
// 6. 顶点数据（三角形）
const vertices = new Float32Array([
-0.2, -0.2, 0.0,
0.2, -0.2, 0.0,
0.0, 0.2, 0.0
]);
// 7. 绑定顶点数据到 GPU
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
const a_Position = gl.getAttribLocation(program, 'a_Position');
gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(a_Position);
// 8. 矩阵平移核心：构建 4x4 平移矩阵
const u_TranslateMatrix = gl.getUniformLocation(program, 'u_TranslateMatrix');
const translateMatrix = new Float32Array(16); // WebGL 矩阵格式（16 个元素的 Float32Array）
let tx = 0.0; // 平移量 x
const step = 0.02; // 构建 4x4 平移矩阵的函数（WebGL 列主序）
function setTranslateMatrix(matrix, tx, ty, tz) {
matrix.set([
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
tx, ty, tz, 1
]);
}
// 9. 动画循环
function animate() {
// 更新平移量
tx += step;
if (tx > 1.0) tx = -1.0;
// 构建 4x4 平移矩阵
setTranslateMatrix(translateMatrix, tx, 0.0, 0.0);
// 传递矩阵给着色器（false=不转置，WebGL 默认列主序）
gl.uniformMatrix4fv(u_TranslateMatrix, false, translateMatrix);
// 清屏 + 绘制
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
效果
红色三角形沿 x 轴平移，本质是不断更新 4x4 平移矩阵的 tx 分量，GPU 通过「矩阵 × 顶点」计算新位置！
2.2 旋转变换
旋转的核心是「4x4 旋转矩阵」，纯矩阵乘法写法更易和其他变换组合！
旋转矩阵原理（重点！）
二维点绕原点逆时针旋转 θ 角的 4x4 矩阵（WebGL 标准格式）：
[ cosθ -sinθ 0 0 ]
[ sinθ cosθ 0 0 ]
[ 0 0 1 0 ]
[ 0 0 0 1 ]
矩阵乘法计算过程：
对二维点 (x,y)（齐次坐标 (x,y,0,1)）执行矩阵乘法：
x' = cosθ * x + (-sinθ) * y + 0 * 0 + 0 * 1 = x*cosθ - y*sinθ
y' = sinθ * x + cosθ * y + 0 * 0 + 0 * 1 = x*sinθ + y*cosθ
z' = 0 * x + 0 * y + 1 * 0 + 0 * 1 = 0
w' = 0 * x + 0 * y + 0 * 0 + 1 * 1 = 1
矩阵乘法结果等价于：
x' = x*cosθ - y*sinθ
y' = x*sinθ + y*cosθ
关键：矩阵形式无需在着色器中写三角函数，只需传递完整矩阵，更符合 GPU 渲染规范！
实战：纯矩阵实现旋转动画
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>WebGL 矩阵实战：旋转的红色三角形</title>
<style>
canvas { border: 2px solid #ff4400; display: block; margin: 20px auto; border-radius: 8px; }
</style>
</head>
<body>
<canvas id="glCanvas"></canvas>
<script>
// 1. 获取上下文
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
alert('换 Chrome/Firefox 试试！');
throw new Error('WebGL not supported');
}
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// 2. 着色器（核心：纯矩阵乘法实现旋转）
const vertexShaderSource = `
attribute vec4 a_Position;
uniform mat4 u_RotateMatrix; // 4x4 旋转矩阵
void main() {
// WebGL 标准写法：旋转矩阵 × 顶点坐标
gl_Position = u_RotateMatrix * a_Position;
}
`;
const fragmentShaderSource = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色
}
`;
// 3. 创建着色器 + 程序（复用）
function createShader(gl, source, type) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error('编译错误:', gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}
const vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX_SHADER);
const fragmentShader = createShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
// 4. 顶点数据
const vertices = new Float32Array([
0.0, 0.5, 0.0,
-0.5, -0.5, 0.0,
0.5, -0.5, 0.0
]);
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
const a_Position = gl.getAttribLocation(program, 'a_Position');
gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(a_Position);
// 5. 旋转矩阵核心：构建 4x4 绕 Z 轴旋转矩阵
const u_RotateMatrix = gl.getUniformLocation(program, 'u_RotateMatrix');
const rotateMatrix = new Float32Array(16);
let angle = 0.0; // 旋转角度θ（弧度）
// 构建 4x4 绕 Z 轴旋转矩阵的函数
function setRotateZMatrix(matrix, angle) {
const cos = Math.cos(angle);
const sin = Math.sin(angle);
matrix.set([
cos, -sin, 0, 0,
sin, cos, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
]);
}
// 6. 动画循环
function animateRotate() {
angle += 0.02;
// 构建 4x4 旋转矩阵
setRotateZMatrix(rotateMatrix, angle);
// 传递旋转矩阵给着色器
gl.uniformMatrix4fv(u_RotateMatrix, false, rotateMatrix);
// 绘制
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);
requestAnimationFrame(animateRotate);
}
animateRotate();
</script>
</body>
</html>
效果
三角形绕原点旋转，本质是不断更新 4x4 旋转矩阵的 cosθ/sinθ 分量，GPU 自动完成「矩阵 × 顶点」运算！
2.3 缩放变换
缩放是改变图形大小的核心变换，同样通过 4x4 矩阵乘法实现，是复合变换的重要组成部分！
缩放矩阵原理（核心！）
二维点沿 x/y 轴缩放的 4x4 矩阵（WebGL 标准格式）：
[ sx 0 0 0 ]
[ 0 sy 0 0 ]
[ 0 0 sz 0 ]
[ 0 0 0 1 ]
sx：x 轴缩放因子（>1 放大，<1 缩小，负数翻转）sy：y 轴缩放因子sz：z 轴缩放因子（2D 场景设为 1）
矩阵乘法计算过程：
对二维点 (x,y)（齐次坐标 (x,y,0,1)）执行矩阵乘法：
x' = sx * x + 0 * y + 0 * 0 + 0 * 1 = x * sx
y' = 0 * x + sy * y + 0 * 0 + 0 * 1 = y * sy
z' = 0 * x + 0 * y + sz * 0 + 0 * 1 = 0 （2D 场景 sz=1）
w' = 0 * x + 0 * y + 0 * 0 + 1 * 1 = 1
矩阵乘法结果等价于：
x' = x * sx
y' = y * sy
关键：缩放矩阵的核心是对角线上的缩放因子，非对角线元素均为 0，保证仅改变大小不改变位置（绕原点缩放）。
实战：纯矩阵实现缩放动画
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>WebGL 矩阵实战：缩放的红色三角形</title>
<style>
canvas { border: 2px solid #ff4400; display: block; margin: 20px auto; border-radius: 8px; }
</style>
</head>
<body>
<canvas id="glCanvas"></canvas>
<script>
// 1. 获取上下文
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
alert('您的浏览器不支持 WebGL！换 Chrome/Firefox 试试');
throw new Error('WebGL not supported');
}
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// 2. 着色器（核心：纯矩阵乘法实现缩放）
const vertexShaderSource = `
attribute vec4 a_Position;
uniform mat4 u_ScaleMatrix; // 4x4 缩放矩阵
void main() {
// WebGL 标准写法：缩放矩阵 × 顶点坐标
gl_Position = u_ScaleMatrix * a_Position;
}
`;
const fragmentShaderSource = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色
}
`;
// 3. 创建着色器 + 程序（复用）
function createShader(gl, source, type) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error('编译错误:', gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}
const vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX_SHADER);
const fragmentShader = createShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
// 4. 顶点数据
const vertices = new Float32Array([
0.0, 0.5, 0.0,
-0.5, -0.5, 0.0,
0.5, -0.5, 0.0
]);
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
const a_Position = gl.getAttribLocation(program, 'a_Position');
gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(a_Position);
// 5. 缩放矩阵核心：构建 4x4 缩放矩阵
const u_ScaleMatrix = gl.getUniformLocation(program, 'u_ScaleMatrix');
const scaleMatrix = new Float32Array(16);
let scaleFactor = 1.0; // 缩放因子
const step = 0.01; // 缩放步长
let isEnlarging = true; // 放大/缩小标记
// 构建 4x4 缩放矩阵的函数
function setScaleMatrix(matrix, sx, sy, sz) {
matrix.set([
sx, 0, 0, 0,
0, sy, 0, 0,
0, 0, sz, 0,
0, 0, 0, 1
]);
}
// 6. 动画循环
function animateScale() {
// 更新缩放因子（来回缩放）
if (isEnlarging) {
scaleFactor += step;
if (scaleFactor >= 2.0) isEnlarging = false;
} else {
scaleFactor -= step;
if (scaleFactor <= 0.5) isEnlarging = true;
}
// 构建 4x4 缩放矩阵（x/y 轴等比缩放）
setScaleMatrix(scaleMatrix, scaleFactor, scaleFactor, 1.0);
// 传递缩放矩阵给着色器
gl.uniformMatrix4fv(u_ScaleMatrix, false, scaleMatrix);
// 清屏 + 绘制
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);
requestAnimationFrame(animateScale);
}
animateScale();
</script>
</body>
</html>
效果
三角形绕原点在 0.5 倍～2 倍之间来回缩放，本质是不断更新 4x4 缩放矩阵的 sx/sy 分量，GPU 自动完成「矩阵 × 顶点」运算！
2.4 矩阵进阶：平移 + 旋转 + 缩放复合变换
手动组合多个矩阵容易出错？gl-matrix 库可一键完成「平移 + 旋转 + 缩放」的矩阵乘法，是工业级开发的首选方案！
gl-matrix 库的核心优势
- 封装所有 4x4 矩阵运算：
mat4.translate()/mat4.rotateZ()/mat4.scale()直接生成变换矩阵 - 自动处理矩阵乘法：复合变换只需按顺序调用 API，无需手动计算矩阵相乘
- 性能优化：针对 WebGL 做了 GPU 适配，动画更丝滑
💻 实战：平移 + 旋转 + 缩放复合动画
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>WebGL 矩阵进阶：平移 + 旋转 + 缩放复合动画</title>
<style>
canvas { border: 2px solid #ff4400; display: block; margin: 20px auto; border-radius: 8px; }
</style>
<!-- 引入 gl-matrix 库（直接用 CDN） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"></script>
</head>
<body>
<canvas id="glCanvas"></canvas>
<script>
// 1. 获取上下文
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
alert('您的浏览器不支持 WebGL！换 Chrome/Firefox 试试');
throw new Error('WebGL not supported');
}
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// 2. 着色器（核心：接收 4x4 复合变换矩阵）
const vertexShaderSource = `
attribute vec4 a_Position;
uniform mat4 u_ModelMatrix; // 复合变换矩阵（平移 + 旋转 + 缩放）
void main() {
// 标准写法：复合矩阵 × 顶点坐标
gl_Position = u_ModelMatrix * a_Position;
}
`;
const fragmentShaderSource = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色
}
`;
// 3. 创建着色器 + 程序（复用）
function createShader(gl, source, type) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error('编译错误:', gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}
const vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX_SHADER);
const fragmentShader = createShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
// 4. 顶点数据
const vertices = new Float32Array([
0.0, 0.5, 0.0,
-0.5, -0.5, 0.0,
0.5, -0.5, 0.0
]);
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
const a_Position = gl.getAttribLocation(program, 'a_Position');
gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(a_Position);
// 5. 复合矩阵核心（重点！）
const u_ModelMatrix = gl.getUniformLocation(program, 'u_ModelMatrix');
const modelMatrix = mat4.create(); // 创建单位矩阵（初始无变换）
let tx = 0.0; // 平移量 x
let angle = 0.0; // 旋转角度θ
let scaleFactor = 1.0; // 缩放因子
let isEnlarging = true;
function animateWithMatrix() {
// 1. 重置为单位矩阵（每次循环清空变换）
mat4.identity(modelMatrix);
// 2. 按顺序执行复合变换（⚠️ 顺序决定最终效果！）
// 第一步：缩放（先缩放，保证旋转/平移基于原始大小）
mat4.scale(modelMatrix, modelMatrix, [scaleFactor, scaleFactor, 1.0]);
// 第二步：旋转（再旋转，保证平移基于旋转后的方向）
mat4.rotateZ(modelMatrix, modelMatrix, angle);
// 第三步：平移（最后平移，保证整体位置移动）
mat4.translate(modelMatrix, modelMatrix, [tx, 0.0, 0.0]);
// 3. 更新参数
tx += 0.015;
if (tx > 1.0) tx = -1.0;
angle += 0.02;
// 缩放参数更新
if (isEnlarging) {
scaleFactor += 0.005;
if (scaleFactor >= 1.5) isEnlarging = false;
} else {
scaleFactor -= 0.005;
if (scaleFactor <= 0.7) isEnlarging = true;
}
// 4. 传递复合矩阵给 GPU
gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix);
// 5. 绘制
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);
requestAnimationFrame(animateWithMatrix);
}
animateWithMatrix();
</script>
</body>
</html>
效果
三角形同时完成「沿 x 轴平移 + 绕原点旋转 + 0.7~1.5 倍缩放」的复合动画，gl-matrix 自动完成所有矩阵乘法运算，代码简洁且高效！
矩阵核心知识点（必记！）
- 变换顺序≠乘法交换律：矩阵乘法不满足交换律，变换顺序直接决定最终效果（推荐顺序：缩放 → 旋转 → 平移）：
- 缩放→旋转→平移：图形先调整大小，再旋转方向，最后移动位置（最符合直觉）
- 平移→旋转→缩放：图形先移动，再旋转，最后缩放（会导致平移距离也被缩放）
- 单位矩阵是基础：
mat4.identity()生成单位矩阵（无变换），是所有矩阵变换的起点 - 矩阵格式要正确：WebGL 中矩阵必须是
Float32Array类型的 16 个元素（列主序），传递时gl.uniformMatrix4fv的第二个参数必须为false
🎁 新手矩阵避坑指南
- 先跑通代码，再理解矩阵：不用一开始死磕矩阵乘法，先改
tx/angle/scaleFactor数值，看动画变化，直观理解矩阵作用 - 拒绝手动改顶点坐标：WebGL 标准写法是「矩阵 × 顶点」，直接修改 x/y 分量会丧失 GPU 并行计算优势
- 优先用 gl-matrix 库：实际开发中避免手动拼矩阵，减少 90% 错误，专注业务逻辑
- 注意缩放中心：默认缩放绕原点进行，若需绕自定义点缩放，需先平移到原点→缩放→平移回原位置
3. 矩阵核心总结
- WebGL 动画的本质：CPU 端构建 4x4 变换矩阵 → 传递给着色器 → GPU 执行「矩阵 × 顶点坐标」计算新位置
- 三大基础变换矩阵：
- 平移：第四列前三个元素为平移量（tx/ty/tz）
- 旋转：左上角 2x2 矩阵为 cosθ/sinθ 组合（绕 Z 轴）
- 缩放：对角线上的元素为缩放因子（sx/sy/sz）
- 实战技巧：用 gl-matrix 库简化矩阵操作，严格遵守「缩放→旋转→平移」的复合变换顺序，注意矩阵乘法无交换律
