注:文章译自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();

像上面这样,变量m就是matIV对象的一个实例,通过m.方法名能够调用matIV对象中存在的方法。
以下,列举一下minMatrix.js中定义的matIV对象的方法,先不用立即明确它们的意思,大致看一下就能够。

>>minMatrix.js:create
函数 : matIV.create()
參数 :
返回值 : 矩阵
生成一个4x4的方阵,里面包括16个元素,事实上是一个Float32Array对象,全部的元素都被初始化为0。

>>minMatrix.js:identity
函数 : matIV.identity(dest)
參数 : dest > 初始化的矩阵
返回值 : 初始化后的矩阵
将接收的矩阵參数进行初始化并返回。

>>minMatrix.js:multiply
函数 : matIV.multiply(mat1,mat2,dest)
參数 : mat1 > 相乘的原始矩阵
參数 : mat2 > 作为乘数的矩阵
參数 : dest > 用来保存计算结果的矩阵
mat1在左,mat2在右,相乘后的结果保存到dest中。

>>minMatrix.js:scale
函数 : matIV.scale(mat,vec,dest)
參数 : mat > 原始矩阵
參数 : vec > 缩放向量
參数 : dest > 用来保存计算结果的矩阵
模型变换中的放大缩小,mat是原始矩阵,vec是X,Y,Z的各个缩放值组成的向量,最后的计算结果保存在dest中。

>>minMatrix.js:translate
函数 : matIV.translate(mat,vec,dest)
參数 : mat > 原始矩阵
參数 : vec > 表示从原点開始移动一定距离的向量
參数 : dest > 用来保存计算结果的矩阵
模型变换中的坐标移动,mat是原始矩阵,vec是X,Y,Z的各个方向上的移动量组成的向量,最后将计算结果保存到dest中。

>>minMatrix.js:rotate
函数 : matIV.rotate(mat,angle,axis,dest)
參数 : mat > 原始矩阵
參数 : angle > 旋转角度
參数 : axis > 旋转轴的向量
參数 : dest > 用来保存计算结果的矩阵
模型变换中的旋转,mat是原始矩阵,angle是旋转角度,axis是旋转轴向量,最后将计算结果保存到dest中。

>>minMatrix.js:lookAt
函数 : matIV.lookAt(eye,center,up,dest)
參数 : eye > 镜头位置向量
參数 : center > 镜头參考点的向量
參数 : up > 镜头的方向向量
參数 : dest > 用来保存计算结果的矩阵
视图变换矩阵的生成,eye是镜头在三维空间中的位置,center是这个镜头的參考点,up是镜头的方向向量,最后将计算结果保存到dest中。

>>minMatrix.js:perspective
函数 : matIV.perspective(fovy,aspect,near,far,dest)
參数 : fovy > 视角
參数 : aspect > 屏幕的宽高比例
參数 : near > 近截面的位置
參数 : far > 远截面的位置
參数 : dest > 用来保存计算结果的矩阵
投影变换矩阵的生成,这里生成的是一般被称为[透视射影]的投影变换矩阵,包括远近法则。fovy是视角,aspect是屏幕的横竖比例,near是近截面的位置(必须是大于0的数值),far远截面的位置(随意数值),最后将计算结果保存到dest中。

>>minMatrix.js:transpose
函数 : matIV.transpose()
參数 : mat > 原始矩阵
參数 : dest > 用来保存计算结果的矩阵
矩阵的行列互换,将计算结果保存到dest中。

>>minMatrix.js:inverse
函数 : matIV.inverse(mat,dest)
參数 : mat > 原始矩阵
參数 : dest > 用来保存计算结果的矩阵
求矩阵的逆矩阵,mat是原始矩阵,求的的逆矩阵保存到dest中。

仅仅包括了特定的功能,所以设计的非常简单。

矩阵变换的流程

使用minMatrix.js的话,能够操作矩阵,那么先来确认一下操作顺序。

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

>使用matIV对象初始化矩阵

// 生成matIV对象
var m = new matIV(); // 矩阵初始化
var Matrix = m.identity(m.create());

这种话,就能够使用Matrix变量了。
上面的代码同一时候运行矩阵的生成和初期化,向以下这样分开运行也是能够的。

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

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

然后用这个初始化完的矩阵,来运行自己想要的操作。比方,想使用模型矩阵将模型的坐标向x方向移动一个1.0,代码例如以下。
>モデル変換行列に移動成分を与える例

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

这种话,矩阵Matrix就成为经过了向x方向移动1.0的模型变换后的矩阵了。相同,旋转和缩放也是能够的。可是须要注意的是,移动,旋转,缩放的运行顺序。先移动后旋转和先旋转后移动的结果是有变化的。这是由于旋转是以原点为中心的。所以要十分注意模型变换的运行顺序。
详细的运行顺序应该是,扩大缩小>旋转>移动,这样就能将缩放旋转后的模型移动到正确的位置。

可是,这样还没有完。

OpenGL的矩阵使用列向量,相乘的顺序正好相反。假设好好学习矩阵的计算方法的话就非常easy明确了,列向量和行向量的相乘顺序是全然相反的。也就是说,刚才的的顺序 [扩大缩小>旋转>移动] 得到的结果是全然不一样的,正确的顺序应该是[移动>旋转>扩大缩小],所以生成模型变换矩阵的时候,顺序要特别注意了。

视图变换矩阵的生成使用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相乘

使用到如今位置的步骤,生成坐标变换矩阵之后,终于通知给WebGL,这种方法下回再说。

总结

这次介绍了一下本站点的矩阵计算的库minMatrix.js的主要的用法,和坐标变换矩阵的顺序。

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

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

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

[WebGL入门]十三,minMatrix.js和坐标变换矩阵的更多相关文章

  1. [WebGL入门]十四,绘制多边形

    注意:文章翻译http://wgld.org/.原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上[lufy:].另外,鄙人webgl研究还不够深入.一些专业词语,假设翻译有误,欢迎大家 ...

  2. Bootstrap入门(二十三)JS插件1:模态框

    Bootstrap入门(二十三)JS插件1:模态框 1.静态实例 2.动态实例 3.模态框的尺寸和效果 4.包含表单的模态框 模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能 ...

  3. [WebGL入门]二十三,反射光的光照效果

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

  4. [WebGL入门]十六,绘制多个模型

    注意:文章翻译http://wgld.org/.原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上[lufy:],另外.鄙人webgl研究还不够深入.一些专业词语.假设翻译有误.欢迎大家 ...

  5. [WebGL入门]十八,利用索引缓存来画图

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

  6. [WebGL入门]二十一,从平行光源发出的光

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

  7. [WebGL入门]十五,为多边形涂抹颜色(顶点颜色的指定)

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

  8. [WebGL入门]十一,着色器编译器和连接器

    注意:文章翻译http://wgld.org/,原作者杉本雅広(doxas).文章中假设有我的额外说明.我会加上[lufy:].另外.鄙人webgl研究还不够深入.一些专业词语,假设翻译有误.欢迎大家 ...

  9. WebGL入门教程(二)-webgl绘制三角形

    前面已经介绍过了webgl,WebGL入门教程(一)-初识webgl(http://www.cnblogs.com/bsman/p/6128447.html),也知道了如何绘制一个点,接下来就用web ...

随机推荐

  1. Android RecyclerView嵌套RecyclerView

    原理 RecyclerView嵌套RecyclerView的条目,项目中可能会经常有这样的需求,但是我们将子条目设置为RecyclerView之后,却显示不出来.自己试了很久,终于找到了原因:必须先设 ...

  2. JS /CSS 实现模态框(注册和登录组件)

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. Python 极简教程(十一)字典 dict

    字典是以大括号标识,以键值对(key:value)的形式,无序,不可重复,可变的集合类型. 字典具有非常高效的读写效率. >>> d = {} # 创建一个空字典 >>& ...

  4. 泛型T和Object 区别?

    T表示不能确定具体类型,Object是超类.最直接的区别在于:当用T时,开发人员不用强转类型 如:public T MethodName(T t); 如果传入String,则T就是String,所以返 ...

  5. 宏的使用 extern

    声明全局变量使用的技术. 有些时候C语言的一些条条框框就像语法.学会C语言就是学会了语法. 但是语法怎样使用就又是另一回事了. 我希望自己能多学习一些技巧,而不是一些固定的C语言语法. 这篇文章真的很 ...

  6. 最短路算法详解(Dijkstra/SPFA/Floyd)

    新的整理版本版的地址见我新博客 http://www.hrwhisper.me/?p=1952 一.Dijkstra Dijkstra单源最短路算法,即计算从起点出发到每个点的最短路.所以Dijkst ...

  7. PyCharm下载主题以及个性化设置(详细)

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 一.下载主题 1.在http://www.themesmap.com/theme.html上选择自己喜欢的主题点进去后进行下载. ...

  8. 让自己的软件实现拖拽打开文件(覆盖WM_DROPFILES,使用DragQueryFile,DragFinish API函数)

    作者: 帅宏军 //声明 protected    procedure WMDROPFILES(var Msg : TMessage); message WM_DROPFILES; --------- ...

  9. Android 调用系统邮件,发送邮件到指定邮箱

    在项目中,最后有一个联络我们,要求是点击号码还有邮箱地址能够发送邮件,这时候解决的方案其实有两种,一种是调用系统发邮件的软件,可以添加邮箱账号就可以发送邮件:第二种是使用javamail来发送邮件.在 ...

  10. axios采坑之路

    POST请求设置Content-Type 由于后端采用的是form表单形式上送参数,需要设置Content-Type axios设置如下 const _axios = axios.create(con ...