# WebGLFundamentals.org

Fix, Fork, Contribute

# WebGL 矩阵 vs 数学中的矩阵

## col·umn

/ˈkäləm/

1. 一根直立的柱子，通常是圆柱形的，由石头或混凝土制成，支撑着一个底座、拱门或其他结构，或作为一个纪念碑单独存在。

同义词：pillar, post, pole, upright, vertical, ...

2. 页面或文本的竖直分割线。

## row

/rō/

• 表格条目中的水平线。

``````const m3x3 = [
0, 1, 2,  // 行 0
3, 4, 5,  // 行 1
6, 7, 8,  // 行 2
];

const m4x4 = [
0,  1,  2,  3,  // 行 0
4,  5,  6,  7,  // 行 1
8,  9, 10, 11,  // 行 2
12, 13, 14, 15,  // 行 3
];
``````

``````const some3x3TranslationMatrix = [
1,  0,  0,
0,  1,  0,
tx, ty,  1,
];
``````

``````const some4x4TranslationMatrix = [
1,  0,  0,  0,
0,  1,  0,  0,
0,  0,  1,  0,
tx, ty, tz,  1,
];
``````

4x4 变换矩阵像这样：

``````const some4x4TranslationMatrix = [
1,  0,  0,  tx,
0,  1,  0,  ty,
0,  0,  1,  tx,
0,  0,  0,  1,
];
``````

``````const zAxis = [
some4x4Matrix[2],
some4x4Matrix[6],
some4x4Matrix[10],
];
``````

ಠ_ಠ !

``````const some4x4TranslationMatrix = [
1,  0,  0,  0,   // 这是列 0
0,  1,  0,  0,   // 这是列 1
0,  0,  1,  0,   // 这是列 2
tx, ty, tz,  1,   // 这是列 3
];
``````

``````const zAxis = some4x4Matrix.slice(9, 11);
``````

``````// C++
struct Vec4 {
float x;
float y;
float z;
float w;
};
``````

``````// C++
struct Mat4x4 {
Vec4 x_axis;
Vec4 y_axis;
Vec4 z_axis;
Vec4 translation;
}
``````

``````// C++
struct Mat4x4 {
Vec4 column[4];
}
``````

``````// C++
Mat4x4 someTranslationMatrix = {
{  1,  0,  0,  0, },
{  0,  1,  0,  0, },
{  0,  0,  1,  0, },
{ tx, ty, tz,  1, },
};
``````

``````const someTranslationMatrix = [
1,  0,  0,  0,
0,  1,  0,  0,
0,  0,  1,  0,
tx, ty, tz,  1,
];
``````

``````const someTranslationMatrix = [
1,  0,  0,  0,  // 行 0
0,  1,  0,  0,  // 行 1
0,  0,  1,  0,  // 行 2
tx, ty, tz,  1,  // 行 3
];
``````

``````// 笑脸图片
const dataFor7x8OneChannelImage = [
0, 255, 255, 255, 255, 255,   0,  // 行 0
255,   0,   0,   0,   0,   0, 255,  // 行 1
255,   0, 255,   0, 255,   0, 255,  // 行 2
255,   0,   0,   0,   0,   0, 255,  // 行 3
255,   0, 255,   0, 255,   0, 255,  // 行 4
255,   0, 255, 255, 255,   0, 255,  // 行 5
255,   0,   0,   0,   0,   0, 255,  // 行 6
0, 255, 255, 255, 255, 255,   0,  // 行 7
]
``````

• 基础概念
• 图像处理
• 二维平移，旋转，缩放和矩阵运算
• 三维
• 光照
• 组织和重构
• 几何
• 纹理
• 渲染到纹理