[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

展开阅读全文

github上一个js矩阵的使用问题

03-10
最近在做的一个项目中要用js进行矩阵运算,发现了有这样一个矩阵运算的工具https://timqian.com/mathlab/ ![图片说明](https://img-ask.csdn.net/upload/202003/10/1583803312_237435.png) 用npm安装完成以后,想使用工具完成矩阵转置的功能,使用了上面工具中的transpose,下面是我测试的代码 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="module"> import transpose from 'mathlab/src/transpose.js' var k = transpose([[1, 2, 3], [4, 5, 6]]); console.log(k); //[[1,4], // [2,5], // [3,6]] </script> </body> </html> ``` 这串代码是按参考手册来的 ![图片说明](https://img-ask.csdn.net/upload/202003/10/1583803622_513162.png) 直接运行后浏览器报错 ![图片说明](https://img-ask.csdn.net/upload/202003/10/1583803685_209467.png) 我按照错误提示修改了代码 ![图片说明](https://img-ask.csdn.net/upload/202003/10/1583803840_330918.png) ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="module"> import transpose from './mathlab/src/transpose.js' var k = transpose([[1, 2, 3], [4, 5, 6]]); console.log(k); //[[1,4], // [2,5], // [3,6]] </script> </body> </html> ``` 运行后出现了这样的报错信息 ![图片说明](https://img-ask.csdn.net/upload/202003/10/1583803864_223170.png) 查了查说是什么chrome不支持file跨域什么什么的,想问下各位大神,我想使用mathlab这个工具到底应该怎么弄?
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值