网站设计公司网站,网站关键词搜不到,网站制作的必备技巧有哪些,设计制作建筑模型教案前言#xff1a;依赖矩阵库 WebGL矩阵变换库_山楂树の的博客-CSDN博客
先平移#xff0c;后旋转的模型变换#xff1a;
1.将三角形沿着X轴平移一段距离。
2.在此基础上#xff0c;旋转三角形。 先写下第1条#xff08;平移操作#xff09;中的坐标方程式。
等式1依赖矩阵库 WebGL矩阵变换库_山楂树の的博客-CSDN博客
先平移后旋转的模型变换
1.将三角形沿着X轴平移一段距离。
2.在此基础上旋转三角形。 先写下第1条平移操作中的坐标方程式。
等式1 “平移” 后的坐标 平移矩阵 x 原始坐标 然后对平移后的坐标进行旋转。
等式2 “平移后旋转” 后的坐标 旋转矩阵 x 平移后的坐标 当然你也可以分步计算这两个等式但更好的方法是将等式1代入到等式2中把两个等式组合起来
等式3 “平移后旋转” 后的坐标 旋转矩阵 x平移矩阵 x 原始坐标 这里 旋转矩阵 x平移矩阵 x 原始坐标 等于注意括号的位置 旋转矩阵 x 平移矩阵x 原始坐标 最后我们可以在JavaScript中计算旋转矩阵×平移矩阵然后将得到的矩阵传入顶点着色器。像这样我们就可以把多个变换复合起来了。一个模型可能经过了多次变换将这些变换全部复合成一个等效的变换就得到了模型变换model transformation或称建模变换modeling transformation相应地模型变换的矩阵称为模型矩阵model matrix。
再来复习一下矩阵的乘法 如上所示将两个3×3矩阵A与B相乘的结果如下
等式4 上式是两个3×3矩阵相乘的结果实际用到的模型矩阵是4×4的矩阵。然而要注意矩阵相乘的次序很重要AB的结果并不一定等于BA。
下面就来看一下如何使用Matrix4对象进行矩阵乘法从而将多个变换复合起来实现先平移然后旋转。
示例代码
var VSHADER_SOURCE attribute vec4 a_Position;\n uniform mat4 u_ModelMatrix;\n void main() {\n gl_Position u_ModelMatrix * a_Position;\n }\n;var FSHADER_SOURCE void main() {\n gl_FragColor vec4(1.0, 0.0, 0.0, 1.0);\n }\n;function main() {var canvas document.getElementById(webgl);var gl getWebGLContext(canvas);if (!gl) {console.log(Failed to get the rendering context for WebGL);return;}if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {console.log(Failed to intialize shaders.);return;}var n initVertexBuffers(gl);if (n 0) {console.log(Failed to set the positions of the vertices);return;}// 创建Matrix4对象以进行模型变换var modelMatrix new Matrix4();// 计算模型矩阵var ANGLE 60.0; // 旋转角var Tx 0.5; // 平移距离modelMatrix.setRotate(ANGLE, 0, 0, 1); // 设置模型矩阵为旋转矩阵modelMatrix.translate(Tx, 0, 0); // 将模型矩阵乘以平移矩阵// 将模型矩阵传输给顶点着色器var u_ModelMatrix gl.getUniformLocation(gl.program, u_ModelMatrix);if (!u_ModelMatrix) {console.log(Failed to get the storage location of u_xformMatrix);return;}gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements);gl.clearColor(0, 0, 0, 1);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLES, 0, n);
}function initVertexBuffers(gl) {var vertices new Float32Array([0, 0.3, -0.3, -0.3, 0.3, -0.3]);var n 3; // The number of verticesvar vertexBuffer gl.createBuffer();if (!vertexBuffer) {console.log(Failed to create the buffer object);return false;}gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);var a_Position gl.getAttribLocation(gl.program, a_Position);if (a_Position 0) {console.log(Failed to get the storage location of a_Position);return -1;}gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);gl.enableVertexAttribArray(a_Position);return n;
}
最关键的两行是如下两行我们计算了旋转矩阵×平移矩阵 解释模型矩阵
我们首先调用了包含set前缀的方法setRotate传入的参数用以计算旋转矩阵并写入modelMatrix上图第一行。接下来我们调用了不带set前缀的方法translate意思就是先计算出一个平移矩阵然后用原先存储在modelMatrix变量中的矩阵乘以这个新计算出的平移矩阵将得到的结果写回modelMatrix中上图第二行。由于在第一步之后modelMatrix已经包含了一个旋转矩阵。那么经过了这一步modelMatrix中的矩阵就是旋转矩阵×平移矩阵了。
你可能会注意到“先平移后旋转”的顺序与构造模型矩阵旋转矩阵×平移矩阵的顺序是相反的这是因为变换矩阵最终要与三角形的三个顶点的原始坐标矢量相乘再看一下等式3你就明白了。
最后我们把模型矩阵传给顶点着色器中的u_ModelMatrix变量并如常将图形绘制出来。在浏览器中加载程序你可以看到如下平移和旋转后的红色三角形。 先旋转后平移的模型变换
让我们修改一下示例程序先进行旋转然后再平移。很简单你只需交换旋转和平移的次序。在这个例子中先调用含set前缀的方法setTranslate进行平移操作再调用不含set前缀的方法rotate进行旋转。 如你所见改变旋转和平移的次序之后结果就不一样了。原理是显而易见的如下图所示。
