四川住房和建设厅网站,邦邻网站建设熊掌号,北京望京企业网站建设,淘宝网页设计代码矩阵缩放的数学原理
和平移一样#xff0c;以同样的原理#xff0c;也可以理解缩放矩阵让向量OA基于原点进行缩放 x方向上缩放#xff1a;sxy方向上缩放#xff1a;syz方向上缩放#xff1a;sz 最终得到向量OB 矩阵缩放的应用
比如我要让顶点在x轴向缩放2#xff0c;y轴…矩阵缩放的数学原理
和平移一样以同样的原理也可以理解缩放矩阵让向量OA基于原点进行缩放 x方向上缩放sxy方向上缩放syz方向上缩放sz 最终得到向量OB 矩阵缩放的应用
比如我要让顶点在x轴向缩放2y轴向缩放3轴向缩放4
1 顶点着色器的核心代码
script idvertexShader typex-shader/x-vertexattribute vec4 a_Position;// 列主序mat4 m4 mat4(2.0, 0.0, 0.0, 0.0,0.0, 3.0, 0.0, 0.0,0.0, 0.0, 4.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 sx 2.0;float sy 3.0;float sz 4.0;// 列主序mat4 m4 mat4(sx, 0.0, 0.0, 0.0,0.0, sy, 0.0, 0.0,0.0, 0.0, sz, 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 建立矩阵对象并传递给着色器的方法参考之前博文此处不再赘述
