安全等级保护每个网站必须做吗,2022年热点营销案例,安徽省住房和城乡建设厅网站首页,购物网站主要的功能模块矩阵的变换
变换
变换有三种状态#xff1a;平移、旋转、缩放。当我们变换一个图形时#xff0c;实际上就是在移动这个图形的所有顶点。解释 webgl 要绘图的话#xff0c;它是先定顶点的#xff0c;就比如说我要画个三角形#xff0c;那它会先把这三角形的三个顶点定出来…矩阵的变换
变换
变换有三种状态平移、旋转、缩放。当我们变换一个图形时实际上就是在移动这个图形的所有顶点。解释 webgl 要绘图的话它是先定顶点的就比如说我要画个三角形那它会先把这三角形的三个顶点定出来。然后它再考虑以什么样的方式去绘制这个三角形, 就比如说在 gl.drawArrays(gl.TRIANGLES, 0, 3) 这个方法 第一个参数是 TRIANGLES让它画一个独立三角形我依次连接这三个点然后逐片元给它们填充颜色接下来我就可以对三角形进行变换操作了比如旋转缩放平移。我在做这三种操作的时候实际上就是改变了三角形的顶点位置
平移 对图形的平移啊就是对图形所有顶点的平移 举个简单的例子 就比如说已知点p的位置是(x,y,z)那我要对它进行一个相对的移动移动的三个分量分别是 tx, ty, tz, 那么求它移动完之后的位置 p’ (x’, y’, z’)只要让它这三个分量做加法就可以了 即如下图 xxtx
yyty
zztz如果上面这个图形中并非只有一个顶点而是三个顶点或者更多那么所有的顶点也是按同样的原理去进行位移的就比如下面这个图这个三角形在位移的时候啊其实上也就是它的所有顶点去做一个相对的位移 向量的加法
在实际的编码中要有一个向量的概念。就比如说 (x,y,z) 这三个量可以构成一个三维点位我们可以说它是一个顶点位置也可以说它是一个向量, 至于这个 (x,y,z) 到底是什么我们要看它是要做什么的就比如说我把点p(x,y,z)作为点位的时候那它就是个点如果我把p的移动距离 tx, ty, tz 封装成一个对象 pt(tx,ty,tz), 那么 pt 就是一个向量一个为点p 指明移动方向和距离的向量那么点 p 的移动结果 p’ 就可以这么写p’ p pt由此可知顶点的位移就是向量的加法
编写向量加法代码 在GLSLES语言里是直接可以进行向量运算的下面是顶点着色器里的代码 attribute vec4 a_Position;
vec4 translation vec4(0, 0.2, 0, 0);
void main() {gl_Position a_Position translation;
}a_Position 是原始点位属于attribute 变量translation 是顶点着色器里的私有变量没有向外部暴露属于4维向量a_Position translation 便是着色器内的向量加法这里是对原始点位进行位移 基于对初始的这个a_Position 点位进行一个位移的话那我可以直接让它加上一个四维的向量就比如这里的这个translation就是我声明的一个个四四维向量让它直接加上即可 上述 translation 是写死的 我们也可以把 translation 变量暴露出去让js可以修改图形位置 script idvertexShader typex-shader/x-vertexattribute vec4 a_Position;uniform vec4 u_Translation;void main() {gl_Position a_Position u_Translation;}
/script在js 中修改uniform 变量的方法我们之前已经说过 // 获取 uniform 变量
const u_Translation gl.getUniformLocation(gl.program, u_Translation);
// 为 uniform 变量赋值
gl.uniform4f(u_Translation, 0, 0.5, 0, 0);之后可以加一段逐帧动画 let y 0;
!(function animate() {y 0.02;if(y 1) y -1;gl.uniform4f(u_Translation, 0, y, 0, 0);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLES, 0, 3);requestAnimationFrame(animate)
})()完整代码
canvas idcanvas/canvas
script idvertexShader typex-shader/x-vertexattribute vec4 a_Position;uniform vec4 u_Translation;void main() {gl_Position a_Position u_Translation;}
/script
script idfragmentShader typex-shader/x-fragmentvoid main() {gl_FragColor vec4(1.0,1.0,0.0,1.0);}
/script
script typemodule// 这里参考之前博文代码import { initShaders } from ./util.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);//获取uniform 变量const u_Translation gl.getUniformLocation(gl.program, u_Translation);//为uniform 变量赋值gl.uniform4f(u_Translation, 0, 0.5, 0, 0);gl.clearColor(0.0, 0.0, 0.0, 1.0);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLES, 0, 3);let y 0!(function animate() {y 0.02;if (y 1) y -1;gl.uniform4f(u_Translation, 0, y, 0, 0);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLES, 0, 3);requestAnimationFrame(animate);})()
/script
