我想做卖鱼苗网站怎样做,地推app,wordpress通过百度验证,ui设计周末培训学校矩阵平移的数学原理
让向量OA位移 x方向#xff0c;txy方向#xff0c;tyz方向#xff0c;tz 最终得到向量OB 矩阵平移的应用
再比如我要让顶点的x移动0.1#xff0c;y移动0.2#xff0c;z移动0.3
1 #xff09;顶点着色器核心代码
script idvertexShadertxy方向tyz方向tz 最终得到向量OB 矩阵平移的应用
再比如我要让顶点的x移动0.1y移动0.2z移动0.3
1 顶点着色器核心代码
script idvertexShader typex-shader/x-vertexattribute vec4 a_Position;// 列主序mat4 m4 mat4(1.0, 0.0, 0.0, 0.0,0.0, 1.0, 0.0, 0.0,0.0, 0.0, 1.0, 0.0,0.1, 0.2, 0.3, 1.0);void main() {gl_Position m4 * a_Position;}
/script2 完整代码
canvas idcanvas/canvas
script idvertexShader typex-shader/x-vertexattribute vec4 a_Position;float tx 0.4;float ty 0.3;float tz 0.2;// 列主序mat4 m4 mat4(1.0, 0.0, 0.0, 0.0,0.0, 1.0, 0.0, 0.0,0.0, 0.0, 1.0, 0.0,tx, ty, tz, 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 建立矩阵对象并传递给着色器的方法参考之前博文此处不再赘述
