当前位置: 首页 > Web前端 > HTML

Day54-100JS中的矩阵运算

时间:2023-03-28 19:48:07 HTML

(一)需求问矩阵23和矩阵32相乘多少次。我很困惑。记录总结(2)把矩阵想成1.为什么矩阵乘法对前端很重要?可以用少量的数来描述大量空间中的变换,并且可以方便地在程序之间共享。矩阵可以在不同的坐标空间中,甚至一些矩阵乘法可以将一组数据从一个坐标空间映射到另一个坐标空间。矩阵能够在生成它们的每个步骤中有效地存储转换。CSS33D变换使用矩阵乘法;WebGL使用了大量的矩阵运算,各种运算,比如点定位,光照运算,动态字符显卡特别擅长大量的点乘矩阵运算2、矩阵相乘的定义例如,设arr1=[[2,3,-1],[6,1,-2]]letarr2=[[4,-5],[-3,0],[1,2]]为了回答下面的第一个问题,矩阵23和矩阵32的乘法是2*2,如webGL中的应用程序所示functionWebGLBox(){//设置画布和WebGL上下文this.canvas=document.getElementById('canvas');this.canvas.width=window.innerWidth;this.canvas.height=window.innerHeight;this.gl=MDN.createContext(canvas);vargl=this.gl;//设置WebGL程序,MDN对象的任何部分都在本文之外定义this.webglProgram=MDN.createWebGLProgramFromIds(gl,'vertex-shader','fragment-shader');gl.useProgram(this.webglProgram);//保存属性和统一位置this.positionLocation=gl.getAttribLocation(this.webglProgram,'position');this.colorLocation=gl.getUniformLocation(this.webglProgram,'color');//告诉WebGL在绘制时测试深度,所以如果一个正方形在//另一个正方形后面,它就不会被绘制gl.enable(gl.DEPTH_TEST);}WebGLBox.prototype.draw=function(settings){//创建一些属性数据;这些是最终将被//绘制到屏幕上的三角形。有两个组成一个正方形。vardata=newFloat32Array([//三角形1settings.left,settings.bottom,settings.depth,settings.right,settings.bottom,settings.depth,settings.left,settings.top,settings.depth,//三角形2settings.left,settings.top,settings.depth,settings.right,settings.bottom,settings.depth,settings.right,settings.top,settings.depth]);//使用WebGL将其绘制到屏幕上。//性能说明:为每个绘制调用创建一个新的数组缓冲区很慢。//此函数仅用于说明目的。vargl=this.gl;//创建缓冲区并绑定数据varbuffer=gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER,缓冲区);gl.bufferData(gl.ARRAY_BUFFER,数据,gl.STATIC_DRAW);//设置指向我们的属性数据(三角形)的指针gl.enableVertexAttribArray(this.positionLocation);gl.vertexAttribPointer(this.positionLocation,3,gl.FLOAT,false,0,0);//设置所有三角形共享的颜色统一gl.uniform4fv(this.colorLocation,settings.color);//将三角形绘制到屏幕上gl.drawArrays(gl.TRIANGLES,0,6);}```###3.JS乘法如何制作矩阵####(1)使用JS数组表示数据+使用for循环遍历矩阵乘法;####(2)使用CSS3matrix()等现成的包装函数transform:matrix(1.2,0.2,-1,0.9,0,20);####(3)使用封装好的函数库gl-matrixhttps://github.com/toji/gl-matrix###参考链接MDNhttps://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API/Matrix_math_for_the_web###写在结束#####1.我建了一个前端学习群。有兴趣的小伙伴可以加我微信:learningisconnecting#####2.在学习的路上,我经常偷懒《有想学技术需要监督的同学嘛~》https://mp.weixin.qq.com/s/FyuddlwRY7DsHUejCjiVug#####3.分享成长与认知方法欢迎关注我的公众号:国兴聊成长,分享我每周学习的成长/认知方法