注：文章译自 http://wgld.org/ ，原作者杉本雅広( doxas )，文章中如果有我的额外说明，我会加上［lufy：］，另外，鄙人webgl研究还不够深入，一些专业词语，如果翻译有误，欢迎大家指正。

坐标变换矩阵的基本功能

进行基本的3D渲染的时候，需要准备3个坐标变换矩阵，这个在之前的文章中说过很多次了。
第一个是模型变换矩阵，DirectX中叫做世界变换矩阵。模型变换矩阵影响的是所绘制的模型，模型的位置，模型的旋转，模型的放大和缩小等相关的情况。
第二个是视图变换矩阵，简单来说，就是定义拍摄3D空间的镜头（摄像机），决定了镜头的位置，镜头的参考点，镜头的方向等。
第三个是投影变换矩阵，这个坐标变换定义了屏幕的横竖比例，剪切的领域等，另外获取远近法则的效果也需要用这个变换矩阵。
根据这些内容，差不多知道了需要对矩阵进行哪些操作。使用minMatrix.js可以对矩阵进行基本的操作，来看一下minMatrix.js都能完成哪些操作吧。

minMatrix.js的基本功能

本网站开发的minMatrix.js，包含矩阵的生成和矩阵的基本操作，minMatrix.js的核心是一个叫做matIV的对象，通过这个对象可以进行所有的矩阵操作，使用minMatrix.js来操作矩阵的时候，首先，需要生成一个matIV对象。

>生成matIV对象的代码

var m = new matIV();

只包含了特定的功能，所以设计的非常简单。

矩阵变换的流程

使用minMatrix.js的话，可以操作矩阵，那么先来确认一下操作顺序。

模型变换也好，视图变换，投影变换也好，如果不先生成矩阵的话，就什么也做不了。所以首先执行matIV.create生成矩形，然后通过matIV.identity来初始化矩阵，代码如下。

>使用matIV对象初始化矩阵

// 生成matIV对象
var m = new matIV();

// 矩阵初始化
var Matrix = m.identity(m.create());

>使用matIV对象初始化矩阵(2)

var Matrix = m.create();
m.identity(Matrix);

var Matrix = m.identity(m.create());
m.translate(Matrix, [1.0, 0.0, 0.0], Matrix);

但是，这样还没有完。

OpenGL的矩阵使用列向量，相乘的顺序正好相反。如果好好学习矩阵的计算方法的话就很容易明白了，列向量和行向量的相乘顺序是完全相反的。也就是说，刚才的的顺序 ［扩大缩小>旋转>移动］ 得到的结果是完全不一样的，正确的顺序应该是［移动>旋转>扩大缩小］，所以生成模型变换矩阵的时候，顺序要特别注意了。

视图变换矩阵的生成使用matIV.lookAt函数，投影变换矩阵的生成使用matIV.perspective函数。

到这一步，模型，视图，投影的各个变换矩阵都已经生成了，然后将三个矩阵相乘，生成最后的坐标变换矩阵，数组之间的相乘使用matIV.multiply函数。

但是，这里有些需要注意的地方。

模型，视图，投影的三个矩阵相乘的顺序很重要，之前的文章（五，矩阵的基础知识）也说明过了，矩阵相乘的顺序如果改变的话，结果也会改变。虽然说普通的四则运算中求积的时候，左右交换顺序得到的结果是一样的，但是矩阵的话，结果就变了。

坐标变换矩阵一般多使用模型，视图，投影的英文单词的第一个英文字母来表示，如mvpMatrix。相乘的顺序不是mvp，而是p>v>m。使用minMatrix.js的话，代码例子如下。

>准备坐标变换的例子

        // 各种矩阵的生成和初始化
var mMatrix = m.identity(m.create());   // 模型变换矩阵
var vMatrix = m.identity(m.create());   // 视图变换矩阵
var pMatrix = m.identity(m.create());   // 投影变换矩阵
var mvpMatrix = m.identity(m.create()); // 最终的坐标变换矩阵

// 各个矩阵相乘的顺序使用示例
m.multiply(pMatrix, vMatrix, mvpMatrix); // p和v相乘
m.multiply(mvpMatrix, mMatrix, mvpMatrix); // 然后和m相乘
    

总结

这次介绍了一下本网站的矩阵计算的库minMatrix.js的基本的使用方法，和坐标变换矩阵的顺序。

minMatrix.js通过一个叫做matIV的对象来对矩阵进行操作，各种方法的具体内容，现在不明白也不要紧，等必要的时候会进行具体的说明。生成了坐标变换矩阵之后，离绘制多边形还差一小步了。

下次，终于该让多边形显示到画面上了。

转载请注明： 转自lufy_legend的博客http://blog.csdn.net/lufy_legend

原文：http://blog.csdn.net/lufy_legend/article/details/38427571