[WebGL入门]十,矩阵计算和外部库

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

重要的使用方法

矩阵的计算方法,也不是什么特别奇怪复杂的东西,如果数学好好学习的话,没有基础也可以进行基本的矩阵计算。但是,如果不知道矩阵的加法和乘法运算的话,要进行稍微复杂一些的矩阵计算是非常难的。
DirectX也好,OpenGL也好,事实上,如果你不能掌握矩阵的使用的话,编程会变得非常难的。但是,也不是说,必须把矩阵的每一个角落都掌握。
重要的是,矩阵的使用方法,并不是详细的计算方法。特别是在3D开发中,矩阵能够做什么,通过什么运算能得到什么样的结果,主要是掌握矩阵的使用方法,这一点很重要。
如果在一定程度上理解了矩阵的使用方法,在实际开发中遇到了什么问题,就可以知道如何去查找原因了。然后,就可以进一步提高了。所以,不用一下子全部理解,首先掌握矩阵的处理流程和用途就可以了。

熟练使用外部库

DirectX和OpenGL中,内置了许多矩阵相关的处理,即使不使用外部库也可以进行矩阵计算。
但是,WebGL中这些矩阵相关的计算是没有的,可能为了简化吧,当然,不是说没有办法了,而是,矩阵相关的一切计算,都需要自己来处理。
话虽如此,但是WebGL中的矩阵计算还是一个很大的问题。数学好的人当然是没有问题了,但是对于其他人数学不太好的人就太困难了。
但是,不用怕,有很多使用javascript写的矩阵计算的外部库,使用这些外部库的话,就算自己不会矩阵计算,也可以进行矩阵相关的处理,下面是其中的几个。

glMatrix

http://code.google.com/p/glmatrix/

mjs

http://code.google.com/p/webgl-mjs/

Sylvester

http://sylvester.jcoglan.com/

closure

http://code.google.com/p/closure-library/

TDL

http://code.google.com/p/threedlibrary/

使用矩阵计算的外部库的时候,只需要掌握了这些库的使用方法,就可以进行矩阵计算了,但是要掌握这些库的使用方法可能也是件不容易的事吧。
在本网站,使用的是自己开发的minMatrix.js库,这个js文件里,只包含了矩阵的基本计算,并不是特别完善,所以大家可以完全免费使用,商用也可以,没有什么特别的限制要求。
以后,本网站中的代码和案例等,都是使用这个minMatrix.js库为前提的来解说的。这个库的连接会在本篇文章的最下面给出,大家可以自由下载使用。
另外,这个minMatrix.js文件中关于矩阵的计算,参考了其他的网页和glMatrix的内容,非常感谢各个网页作者和glMatrix的作者Brandon Jones(Brandon Jones的博客 ->TojiCode

总结

从长远来看,真正进行非常复杂的处理时,矩阵的知识还是不能缺少的。但是,要提前把这些都理解是很苦难的。所以,先熟练使用外部库,等能够熟练进行3D开发之后,再逐步了解这些知识是比较理想的。
使用外部库的时候,也可能存在平台问题,必须边理解外部库的特征边使用,并不是说完全没有问题。本网站使用的库是管理人(lufy:这里说的管理人就是作者本人)自己的库,会尽可能减低使用的门槛。

下次开始,使用minMatrix.js来表示一个多边形。另外minMatrix.js的下载连接如下。

wgld.org开发的矩阵计算的库minMatrix.js

http://wgld.org/j/minMatrix.js

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

[WebGL入门]十,矩阵计算和外部库

时间: 2024-10-07 19:50:40

[WebGL入门]十,矩阵计算和外部库的相关文章

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

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 这是本次的demo的运行结果 绘制流程 这次终于该绘制多边形了,之前的文章(十一,着色器的编译和连接)中介绍了HTML,顶点着色器和片段着色器,这次看一下javascript从开始到最终的全部处理.如果前两篇文章介绍的内容完全理解的话,这次的内容也应该不难了.或许会有不容易理解的地方,不要着急

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

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 本次的demo的运行结果 增加顶点属性的个数 上次,终于绘制了一个三角形,但是只绘制了一个纯白色的多边形.这次,给多边形的顶点中添加颜色属性,基本上做的事情和上一篇文章一样,只是稍微增加点步骤而已.首先,就像以前多次重复的那样,顶点可以包含很多种情报(参考:顶点缓存和基础),而且每一个情报叫做

[WebGL入门]十二,模型数据和顶点属性

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 顶点属性的意思 上次的文章中,介绍了一下从着色器的生成,编译,到程序对象的生成和着色器的连接.这次,简单的说一下模型数据的定义和顶点属性的处理.另外,介绍一下根据模型数据生成VBO的方法.VBO的使用要比生成难理解一些,但是不要担心,后面会慢慢说明.接下来看一下顶点属性.顶点属性,说的简单点,

[WebGL入门]十九,遮挡剔除和深度测试

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 本次的demo的运行结果 多边形的外侧,内侧和遮挡剔除 上次介绍了索引缓存,以及使用IBO来绘图,使用索引缓存可以循环利用重复的顶点,能够提高绘图效率.这之后的文章,如果没有特殊的原因的话,基本上都会使用索引缓存,通过drawElements来绘图.这次来说一下遮挡剔除和深度测试,这是两个重要

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

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 本次的demo的运行结果 对应复杂的模型 上次,通过操作模型坐标变换矩阵,实现了多个模型的移动,旋转和放大缩小.但是,渲染的依然是简单的三角形,是个构造及其简单的模型.但是实际中,用WebGL来绘制一个简单的三角形的机会是很少见的.至少是个四角多边形吧,通常会是更复杂的模型.伴随着模型的复杂化

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

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 本次的demo的运行结果 顶点缓存的重复利用 上一篇文章中,向多边形的三个顶点中添加了颜色这个新的顶点属性,给多边形涂抹了颜色.而且知道,使用新的VBO可以给对顶点属性进行自由的扩张.那么,这次来挑战一下同时绘制多个模型.但是,不准备新的VBO,还利用上次的VBO,就是说,重复利用VBO,只操

[WebGL入门]二十,绘制立体模型(圆环体)

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 本次的demo的运行结果 立体的模型 这次稍微喘口气,开始绘制立体模型.这里说的[喘口气]是指本次的文章中没有出现任何新的技术知识点.只是利用到现在为止所介绍过的内容,来绘制一个立体的圆环体.到现在为止,只绘制了三角形和四边形,当然,在三维空间中绘制简单的多边形也没什么不对,但是缺点儿说服力.

[WebGL入门]十三,minMatrix.js和坐标变换矩阵

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 坐标变换矩阵的基本功能 进行基本的3D渲染的时候,需要准备3个坐标变换矩阵,这个在之前的文章中说过很多次了.第一个是模型变换矩阵,DirectX中叫做世界变换矩阵.模型变换矩阵影响的是所绘制的模型,模型的位置,模型的旋转,模型的放大和缩小等相关的情况.第二个是视图变换矩阵,简单来说,就是定义拍

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

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 反复重复的东西 这已经是第11篇了,因为只说了一些基本的东西,到现在为止连个多边形也没绘制出来.哎呀呀呀......不管怎么说吧,基础是很重要的.那就在这些基础上,来绘制一个多边形吧.需要准备的知识都已经介绍过了,剩下的就是按照步骤开始绘制多边形.首先,来确认一下绘制的步骤.?从HTML中获取