做网站的工作,溧阳建设局网站6,中国精准扶贫网站建设现状,怎样自己做公司网站矩阵
矩阵#xff08;Matrix#xff09;是一个按照矩形纵横排列的复数集合 矩阵就像一个矩形的阵盘#xff0c;通过其中纵横排列的元素我们可以摆出不同功能的阵法#xff0c;比如位移矩阵、旋转矩阵、缩放矩阵 …在矩阵中的每一行#xff0c;或者每一列数字构成的集合Matrix是一个按照矩形纵横排列的复数集合 矩阵就像一个矩形的阵盘通过其中纵横排列的元素我们可以摆出不同功能的阵法比如位移矩阵、旋转矩阵、缩放矩阵 …在矩阵中的每一行或者每一列数字构成的集合可以视之为向量 关于复数 z a bi 实数: b 0 有理数: 整数和分数无理数: eg: 圆周率 π sqrt(2) 虚数: b ! 0
向量
向量又叫矢量它是一个用于表示方向和量的对象在webgl 里的向量有1维向量、2维向量、3维向量和4维向量 1维向量中有1个数字对应的是单轴坐标系里的点位2维向量中有2个数字对应的是2维坐标系里的点位3维向量中有3个数字对应的是3维坐标系里的点位4维向量中有4个数字对应的是3维坐标系里的点位外加一个附加数据至于这个数据是什么要看我们的项目需求
矩阵和向量的乘法
矩阵和向量的乘法图 矩阵乘以向量时向量是几维的那矩阵中就应该有几个向量如上图向量v 是2维的那么矩阵中就有2组向量这两组向量可以是横着的两组向量也可以是竖着的两组向量 横着的两组向量是向量(a,b)、向量(e,f)竖着的两组向量是向量(a,e)、向量(b,f)横着的两组遵循的规则是行主序即将矩阵中的一行数据视之为一个向量竖着的两组遵循的规则是列主序即将矩阵中的一列数据视之为一个向量 我们是使用行主序还是列主序这就得看规则的定制者在webgl 里矩阵元素的排列规则是列主序数学中常用的写法是行主序所以我们接下来就用行主序例子 矩阵和向量相乘的规则就是让矩阵中的每个向量和向量v相乘。向量和向量相乘就是在求向量的点积其结果是一个实数而不再是向量比如上图中向量(a,b)乘以向量v(x,y)的结果是a * x b * y因为a、b、x、y都是实数所以其结果也是实数上图中矩阵m乘以向量v 会得到两个结果即axby和exfy这两个结果会构成一个新的向量v’(x’,y’)x a * x b * y
y e * x f * y这时我们可以将其和数学里的旋转公式做一下比较点A(ax,ay)围绕z轴旋β度,其旋转后的位置是点B(bx,by)则bx cosβ * ax - sinβ * ay
by sinβ * ax cosβ * ay对比上面的两组公式试想一下向量v是可以当成一个点位那我现在就让向量v代表的位置就是点A的位置。那么矩阵m乘以向量v是不是可以让向量v代表的这个点位旋转β度呢如果可以那么矩阵里的元素应该满足什么条件呢满足以下条件即可a cosβ
b -sinβ
e sinβ
f cosβ这样用矩阵乘以向量的方法得到的旋转结果和用数学公式得到的结果就是一样的即;a * x b * y cosβ * ax - sinβ * ay
e * x f * y sinβ *ax cosβ * ay最终我们就可以用矩阵乘以向量的方式让点p旋转β度
也就是说可以用矩阵乘以向量的方式求向量OA旋转了 β \beta β° 的位置 ### 在着色器中书写矩阵
1 核心代码
在着色器中建立矩阵对象 mat2 是二维矩阵对象
script idvertexShader typex-shader/x-vertexattribute vec4 a_Position;float angle radians(40.0);float sinB sin(angle);float cosB cos(angle);mat2 m2 mat2(cosB, sinB,-sinB, cosB);void main() {gl_Position vec4(m2 * vec2(a_Position),a_Position.z, a_Position.w);}
/script2 完整代码
canvas idcanvas/canvas
script idvertexShader typex-shader/x-vertexattribute vec4 a_Position;float angle radians(40.0);float cosB cos(angle);float sinB sin(angle);// 列主序mat2 m2 mat2(cosB, sinB,-sinB, cosB);void main() {gl_Position vec4(m2 * vec2(a_Position),a_Position.z, a_Position.w);}
/script
script idfragmentShader typex-shader/x-fragmentvoid main() {gl_FragColor vec4(1.0, 1.0, 0.0, 1.0);}
/script
script typemoduleimport { initShaders } from ./utils.js;const canvas document.getElementById(canvas);canvas.width window.innerWidth;canvas.height window.innerHeight;const gl canvas.getContext(webgl);const vsSource document.getElementById(vertexShader).innerText;const fsSource document.getElementById(fragmentShader).innerText;initShaders(gl, vsSource, fsSource);const vertices new Float32Array([0.0, 0.1,-0.1, -0.1,0.1, -0.1])const vertexBuffer gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);const a_Position gl.getAttribLocation(gl.program, a_Position);gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);gl.enableVertexAttribArray(a_Position);gl.clearColor(0.0, 0.0, 0.0, 1.0);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLES, 0, 3);
/script用js建立矩阵对象并传递给着色器
1 核心代码 在顶点着色器中建立uniform变量 script idvertexShader typex-shader/x-vertexattribute vec4 a_Position;uniform mat2 u_Matrix;void main() {gl_Position vec4(u_Matrix * vec2(a_Position),a_Position.z, a_Position.w);}
/script获取并修改uniform 变量 const u_Matrix gl.getUniformLocation(gl.program, u_Matrix);
let angle 0.2;
const [sinB, cosB] [Math.sin(angle), Math.cos(angle)];
const matrix [cosB, sinB,-sinB, cosB
];
gl.uniformMatrix2fv(u_Matrix, false, matrix);后面我们也可以在其中添加动画 const u_Matrix gl.getUniformLocation(gl.program, u_Matrix);
let angle 0.2;
!(function animate() {angle 0.02;const [sinB, cosB] [Math.sin(angle), Math.cos(angle)];const matrix [cosB, sinB,-sinB, cosB];gl.uniformMatrix2fv(u_Matrix, false, matrix);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLES, 0, 3);requestAnimationFrame(animate)
})()2 完整代码
canvas idcanvas/canvas
script idvertexShader typex-shader/x-vertexattribute vec4 a_Position;// 列主序uniform mat2 u_Matrix;void main() {gl_Position vec4(u_Matrix * vec2(a_Position),a_Position.z,a_Position.w);}
/script
script idfragmentShader typex-shader/x-fragmentvoid main() {gl_FragColor vec4(1.0, 1.0, 0.0, 1.0);}
/scriptscript typemoduleimport { initShaders } from ./utils.js;const canvas document.getElementById(canvas);canvas.width window.innerWidth;canvas.height window.innerHeight;const gl canvas.getContext(webgl);const vsSource document.getElementById(vertexShader).innerText;const fsSource document.getElementById(fragmentShader).innerText;initShaders(gl, vsSource, fsSource);const vertices new Float32Array([0.0, 0.1,-0.1, -0.1,0.1, -0.1]);const vertexBuffer gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);const a_Position gl.getAttribLocation(gl.program, a_Position);gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);gl.enableVertexAttribArray(a_Position);const u_Matrix gl.getUniformLocation(gl.program, u_Matrix);let angle 0.5;const sinB Math.sin(angle);const cosB Math.cos(angle);const matrix [cosB, sinB,-sinB, cosB];gl.uniformMatrix2fv(u_Matrix, false, matrix);gl.clearColor(0.0, 0.0, 0.0, 1.0);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLES, 0, 3);!(function animate() {angle 0.05;const sinB Math.sin(angle);const cosB Math.cos(angle);const matrix [cosB, sinB,-sinB, cosB];gl.uniformMatrix2fv(u_Matrix, false, matrix);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLES, 0, 3);requestAnimationFrame(animate);})()
/script以上是最简单的二维矩阵我们也可以给顶点着色器一个四维矩阵
四维矩阵在着色器里的处理
应用原理和二维矩阵是一样的
1 核心代码
script idvertexShader typex-shader/x-vertexattribute vec4 a_Position;float angle radians(10.0);float cosB cos(angle);float sinB sin(angle);mat4 m4 mat4(cosB, sinB, 0.0, 0.0,-sinB, cosB, 0.0, 0.0,0.0, 0.0, 1.0, 0.0,0.0, 0.0, 0.0, 1.0);void main() {gl_Position m4 * a_Position;}
/script2 完整代码
canvas idcanvas/canvas
script idvertexShader typex-shader/x-vertexattribute vec4 a_Position;float angle radians(10.0);float cosB cos(angle);float sinB sin(angle);// 列主序mat4 m4 mat4(cosB, sinB, 0.0, 0.0,-sinB, cosB, 0.0, 0.0,0.0, 0.0, 1.0, 0.0,0.0, 0.0, 0.0, 1.0);void main() {gl_Position m4 * a_Position;}
/script
script idfragmentShader typex-shader/x-fragmentvoid main() {gl_FragColor vec4(1.0, 1.0, 0.0, 1.0);}
/script
script typemoduleimport { initShaders } from ./utils.js;const canvas document.getElementById(canvas);canvas.width window.innerWidth;canvas.height window.innerHeight;const gl canvas.getContext(webgl);const vsSource document.getElementById(vertexShader).innerText;const fsSource document.getElementById(fragmentShader).innerText;initShaders(gl, vsSource, fsSource);const vertices new Float32Array([0.0, 0.1,-0.1, -0.1,0.1, -0.1])const vertexBuffer gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);const a_Position gl.getAttribLocation(gl.program, a_Position);gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);gl.enableVertexAttribArray(a_Position);gl.clearColor(0.0, 0.0, 0.0, 1.0);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLES, 0, 3);
/script用js向顶点着色器传递四维矩阵
1 核心代码
const u_Matrix gl.getUniformLocation(gl.program, u_Matrix);
let angle 0.1;
const [sinB, cosB] [Math.sin(angle), Math.cos(angle)];
const matrix [cosB, sinB, 0.0, 0.0,-sinB, cosB, 0.0, 0.0,0.0, 0.0, 1.0, 0.0,0.0, 0.0, 0.0, 1.0
];
gl.uniformMatrix4fv(u_Matrix, false, matrix);2 完整代码
canvas idcanvas/canvas
script idvertexShader typex-shader/x-vertexattribute vec4 a_Position;// 列主序uniform mat4 u_Matrix;void main() {gl_Position u_Matrix * a_Position;}
/script
script idfragmentShader typex-shader/x-fragmentvoid main() {gl_FragColor vec4(1.0,1.0,0.0,1.0);}
/script
script typemoduleimport { initShaders } from ./utils.js;const canvas document.getElementById(canvas);canvas.width window.innerWidth;canvas.height window.innerHeight;const gl canvas.getContext(webgl);const vsSource document.getElementById(vertexShader).innerText;const fsSource document.getElementById(fragmentShader).innerText;initShaders(gl, vsSource, fsSource);const vertices new Float32Array([0.0, 0.1,-0.1, -0.1,0.1, -0.1]);const vertexBuffer gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);const a_Position gl.getAttribLocation(gl.program, a_Position);gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);gl.enableVertexAttribArray(a_Position);const u_Matrix gl.getUniformLocation(gl.program, u_Matrix);let angle 0.5;const sinB Math.sin(angle);const cosB Math.cos(angle);const matrix [cosB, sinB, 0, 0,-sinB, cosB, 0, 0,0, 0, 1, 0,0, 0, 0, 1];gl.uniformMatrix4fv(u_Matrix, false, matrix);gl.clearColor(0.0, 0.0, 0.0, 1.0);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLES, 0, 3);!(function animate() {angle 0.05;const sinB Math.sin(angle);const cosB Math.cos(angle);const matrix [cosB, sinB, 0, 0,-sinB, cosB, 0, 0,0, 0, 1, 0,0, 0, 0, 1];gl.uniformMatrix4fv(u_Matrix, false, matrix);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLES, 0, 3);requestAnimationFrame(animate);})()
/script
