在两个场景中,必须在glMatrix中交换变换。
即。在glMatrix中实现1):
mat4.translate(modelViewMatrix, modelViewMatrix, [0.6, 0.0, 0.0]);
mat4.rotateZ(modelViewMatrix, modelViewMatrix, degToRad(45));
为什么转换顺序会逆转?
答案 0 :(得分:11)
这不仅适用于WebGL,也适用于OpenGL。实际上,它可能会令人困惑:转换应用的顺序与它们在源代码中出现的顺序相反。
简化/缩短"伪代码"您提供的代码版本如下:
M = identity();
M = M * T; // Where T = Translation
M = M * R; // Where R = Rotation
更简短的写作方式是
M = T * R;
现在想象你用这个矩阵变换一个顶点 - 这可以写成
transformedVertex = M * vertex
回顾M = T * R
,这与
transformedVertex = T * R * vertex
你也可以把它写成
transformedVertex = T * (R * vertex)
或者,使其更加明显:
rotatedVertex = R * vertex
transformedVertex = T * rotatedVertex
因此首先旋转顶点。 (然后,旋转的顶点被翻译)
当然,你基本上可以扭转局面。在OpenGL中乘以矩阵的常用方法是"后乘法"或者"右乘......",格式为
newMatrix = oldMatrix * additionalTransformation
(就像你在代码中所做的那样)。另一种方法是写
newMatrix = additionalTransformation * oldMatrix
这有时被称为"预乘"或"左乘"。所以你也可以写
M = identity();
M = T * M; // Where T = Translation
M = R * M; // Where R = Rotation
所以最后,
M = R * T
在这种情况下,翻译在源代码中的旋转之前出现,并且在旋转之前也将应用。
但是在OpenGL的背景下,这是相当不寻常的。 (并且混合两种方式都会非常混乱 - 我不建议这样做。)
附注:当glPushMatrix
and glPopMatrix
仍然是OpenGL API的一部分时,这一切可能更有意义。思考这个问题的方法类似于场景图的遍历。您首先应用" global"转换,然后"本地"的。
回应评论:我会尝试写一些可能证明某些概念合理的词。总结这里有点困难。我会尝试简化它,并省略一些可能超出单一答案范围的细节。这里提到的一些事情是指在早期版本的OpenGL中如何完成的事情,现在已经有了不同的解决方法 - 尽管许多概念仍然是相同的!
以场景图形的形式表示3D场景并不罕见。这是场景的分层结构表示,通常是树的形式:
root
/ \
nodeA nodeB
/ \ \
nodeA0 nodeA1 nodeB0
object object object
节点包含变换矩阵(例如旋转或平移)。 3D对象附加到这些节点。在渲染过程中,遍历此图形:访问每个节点,并渲染其对象。这是以递归方式完成的,从根开始,并访问所有孩子,直到叶子。例如,渲染器可以按以下顺序访问上述节点:
root
nodeA
nodeA0
nodeA1
nodeB
nodeB0
在此遍历期间,渲染器维护一个"矩阵堆栈"。在早期的OpenGL版本中,有专门的方法来维护这个堆栈。例如,glPushMatrix
推送当前" top"的副本堆栈上的矩阵,glPopMatrix
从堆栈中删除最顶层的矩阵。或glMultMatrix
乘以当前" top"堆栈的矩阵与另一个。
渲染对象时,始终使用位于此堆栈顶部的矩阵进行渲染。 (当时没有着色器和mat4
制服......)
因此渲染器可以使用像这样的简单递归方法(伪代码)渲染场景图:
void render(Node node) {
glPushMatrix();
glMultMatrix(node.matrix);
renderObject(node.object);
foreach (child in node.children) {
render(child);
}
glPopMatrix();
}
通过"封闭"渲染为glPushMatrix
/ glPopMatrix
对,渲染器可以始终为其正在访问的节点维护正确的当前矩阵。现在,渲染器访问了这些节点,并维护了矩阵堆栈:
Node: Matrix Stack:
-----------------------------
root identity
nodeA identity * nodeA.matrix
nodeA0 identity * nodeA.matrix * nodeA0.matrix
nodeA1 identity * nodeA.matrix * nodeA1.matrix
nodeB identity * nodeB.matrix
nodeB0 identity * nodeB.matrix * nodeB0.matrix
可以看出,用于在节点中渲染对象的矩阵由沿着从根到相应节点的路径的所有矩阵的乘积给出。
当考虑一个"大"时,这些概念的可能性能优势和优雅可能会变得更加明显。场景图:
root
nodeA
nodeB
nodeC
nodeD0
nodeD1
nodeD2
...
nodeD1000
可以计算产品
nodeA.matrix * nodeB.matrix * nodeC.matrix
一次,然后将nodeD0
... nodeD1000
的矩阵与此矩阵相乘。相反,如果想要转动乘法,则必须计算
nodeD0.matrix * nodeC.matrix * nodeB.matrix * nodeA.matrix
nodeD1.matrix * nodeC.matrix * nodeB.matrix * nodeA.matrix
...
nodeD1000.matrix * nodeC.matrix * nodeB.matrix * nodeA.matrix
浪费大量资源进行矩阵乘法。 (这些冗余计算可以通过其他方法避免,但这些方法几乎不会如此优雅和简单)。
答案 1 :(得分:0)
我不太确定这个glMatrix是落后的。
例如watching these videos它似乎是标准的
m1 * m2 * m3 * vector
并给出视频中显示的与
对应的顺序gl_Position = projection * view * world * position;
与GL和GLSL完全匹配。
它也匹配glMatrix。
var m = mat4.create();
mat4.projection(m, fov, aspect, zNear, zFar);
mat4.multiply(m, m, view);
mat4.translate(m, m, [x, y, z]);
mat4.rotateY(m, m, someAngle);
mat4.scale(m, m, [sx, sy, sz]);
完全符合
m = projection *
view *
translation *
rotation *
scale;
向我展示。
var vs = `
uniform mat4 u_worldViewProjection;
attribute vec4 position;
attribute vec2 texcoord;
varying vec2 v_texCoord;
void main() {
v_texCoord = texcoord;
gl_Position = u_worldViewProjection * position;
}
`;
var fs = `
precision mediump float;
varying vec2 v_texCoord;
uniform sampler2D u_diffuse;
void main() {
gl_FragColor = texture2D(u_diffuse, v_texCoord);
}
`;
"use strict";
var gl = document.querySelector("canvas").getContext("webgl");
var programInfo = twgl.createProgramInfo(gl, [vs, fs]);
var arrays = {
position: [1, 1, -1, 1, 1, 1, 1, -1, 1, 1, -1, -1, -1, 1, 1, -1, 1, -1, -1, -1, -1, -1, -1, 1, -1, 1, 1, 1, 1, 1, 1, 1, -1, -1, 1, -1, -1, -1, -1, 1, -1, -1, 1, -1, 1, -1, -1, 1, 1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1, -1, 1, -1, 1, 1, -1, 1, -1, -1, -1, -1, -1],
normal: [1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1],
texcoord: [1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1],
indices: [0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11, 12, 13, 14, 12, 14, 15, 16, 17, 18, 16, 18, 19, 20, 21, 22, 20, 22, 23],
};
var bufferInfo = twgl.createBufferInfoFromArrays(gl, arrays);
var tex = twgl.createTexture(gl, {
min: gl.NEAREST,
mag: gl.NEAREST,
src: [
255, 0, 0, 255,
192, 192, 192, 255,
0, 0, 192, 255,
255, 0, 255, 255,
],
});
var uniforms = {
u_lightWorldPos: [1, 8, -10],
u_lightColor: [1, 0.8, 0.8, 1],
u_ambient: [0, 0, 0, 1],
u_specular: [1, 1, 1, 1],
u_shininess: 50,
u_specularFactor: 1,
u_diffuse: tex,
};
function render(time) {
time *= 0.001;
twgl.resizeCanvasToDisplaySize(gl.canvas);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.enable(gl.DEPTH_TEST);
gl.enable(gl.CULL_FACE);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
var eye = [1, 4, -6];
var target = [0, 0, 0];
var up = [0, 1, 0];
var view = mat4.create();
var camera = mat4.create();
// glMatrix's lookAt is arguably backward.
// It's making an inverse lookAt which is far less useful.
// There's one camera in the scene but hundreds of other
// objects that might want to use a lookAt to you know, look at things.
mat4.lookAt(view, eye, target, up);
//mat4.lookAt(camera, eye, target, up);
//mat4.invert(view, camera);
var m = mat4.create();
var fov = 30 * Math.PI / 180;
var aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
var zNear = 0.5;
var zFar = 10;
mat4.perspective(m, fov, aspect, zNear, zFar);
mat4.multiply(m, m, view);
mat4.translate(m, m, [1, 0, 0]);
mat4.rotateY(m, m, time);
mat4.scale(m, m, [1, 0.5, 0.7]);
uniforms.u_worldViewProjection = m;
gl.useProgram(programInfo.program);
twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
twgl.setUniforms(programInfo, uniforms);
twgl.drawBufferInfo(gl, gl.TRIANGLES, bufferInfo);
requestAnimationFrame(render);
}
requestAnimationFrame(render);

body { margin: 0; }
canvas { width: 100vw; height: 100vh; display block; }

<script src="https://twgljs.org/dist/twgl-full.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.3.2/gl-matrix-min.js"></script>
<canvas></canvas>
&#13;
答案 2 :(得分:0)
我现在需要你,看看:
http://nidza.html-5.me/zlatnaspirala2/project/index.html
源代码:
https://github.com/zlatnaspirala/zlatnaspirala2 https://github.com/zlatnaspirala/zlatnaspirala2/blob/master/project/zlatnaspirala/zlatnaspirala.js
魔术是:
mat4.translate(mvMatrix, [0.0, 0.0, 0.0]);
xRot = YY;
yRot = alfa + XX;
mat4.rotate(mvMatrix, degToRad(xRot), [1, 0, 0]);
mat4.rotate(mvMatrix, degToRad(yRot), [0, 1, 0]);
mat4.translate(mvMatrix, [transX +TX,transY + TY,transZ +TZ]);
1)转换为零
2)旋转
3)转换为3d世界中的最后一个或当前位置。