glMatrix中的转换顺序颠倒了？
Posted
技术标签:
【中文标题】glMatrix中的转换顺序颠倒了？【英文标题】：Transformation order reversed in glMatrix? 【发布时间】：2016-11-20 09:28:00 【问题描述】：在这两个场景中，都必须在 glMatrix 中交换转换。
即实现 1) 在 glMatrix 中：
mat4.translate(modelViewMatrix, modelViewMatrix, [0.6, 0.0, 0.0]);
mat4.rotateZ(modelViewMatrix, modelViewMatrix, degToRad(45));
为什么转换顺序颠倒了？
【问题讨论】：
【参考方案1】：这不仅适用于 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 的一部分时，所有这些可能更有意义。对此的思考方式类似于场景图的遍历。您首先应用“全局”转换，然后应用“本地”转换。
更新：
作为对cmets的回应：我会试着写几句话来证明某些概念是正确的。在这里总结一下有点困难。我将尝试简化它，并省略一些可能超出单个答案范围的细节。这里提到的一些事情是指在早期版本的 OpenGL 中所做的事情以及现在的解决方式有所不同 - 尽管许多 概念 仍然是相同的！
以场景图的形式表示 3D 场景并不少见。这是场景的层次结构表示，通常采用树的形式：
root
/ \
nodeA nodeB
/ \ \
nodeA0 nodeA1 nodeB0
object object object
节点包含变换矩阵（例如旋转或平移）。 3D 对象附加到这些节点。在渲染过程中，会遍历这个图：访问每个节点，并渲染它的对象。这是递归完成的，从根开始，访问所有孩子，一直到叶子。例如，渲染器可能会按以下顺序访问上述节点：
root
nodeA
nodeA0
nodeA1
nodeB
nodeB0
在此遍历期间，渲染器维护一个“矩阵堆栈”。在早期的 OpenGL 版本中，有专门的方法来维护这个堆栈。例如，glPushMatrix 将当前“顶部”矩阵的副本推入堆栈，glPopMatrix 从堆栈中删除最顶部的矩阵。或glMultMatrix 将堆栈的当前“顶部”矩阵与另一个矩阵相乘。
当一个对象被渲染时，它总是使用这个堆栈顶部的矩阵来渲染。 （那时候还没有着色器和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
矩阵乘法浪费了大量资源。 （这些冗余计算可以通过其他方法避免，但这些方法几乎不会那么优雅和容易）。
【讨论】：
我很想知道为什么有人点击“这个答案没用”。有什么遗漏或不清楚吗？ @Maro13 其实很详细，很全面。我不明白的一件事是：为什么 OpenGL 有这种转换顺序？只需在转换操作中交换乘法顺序，就可以为我们省去很多痛苦。 @piegames 当你写T * R * vector 时，那么“数学定义”（不管 OpenGL）是，直观地说，顶点首先旋转然后平移。如前所述：您可以编写一些不同的代码来扭转这种局面，但即使您编写M = Identity; M = T * M; M = R * T;，那么结果将是M = R * T，即仍然是“翻译然后旋转”。 （抱歉，我不确定如何用听起来令人信服的方式来描述这一点。我试图为场景图遍历绘制图像，但这看起来令人困惑......）
我（我想我）理解顺序颠倒的原理以及它是如何工作的。但是在文档中：www.opengl.org/sdk/docs/man2/xhtml/glMultMatrix.xml 它说“使用参数 m = [...] 调用 glMultMatrix 将当前转换替换为 C × M × v [。 ..]”。此时顺序是任意的，也可以选择 M x C x v。但是为什么会这样呢？当我编写转换时，按我希望应用它们的顺序调用转换操作是很直观的。即使这打破了使用变换的数学方式，也没有人使用数学符号进行编程。
@piegames 从某种角度来看，数学和编程是非常密切相关的。带有+-*/ 运算符的算术、if-statements 的命题演算、OOP 的代数...，对于总是与矩阵、向量空间和喜欢。但是，我在答案中添加了 Update，希望它不会太混乱。【参考方案2】：
我不太确定这个 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>【讨论】：
感谢链接，这个系列真的很棒！【参考方案3】：我现在你需要什么，看看：
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 世界中的最后一个或当前位置。
【讨论】：
以上是关于glMatrix中的转换顺序颠倒了？的主要内容，如果未能解决你的问题，请参考以下文章