glMatrix 中的转换顺序颠倒了吗？

Question

在这两个场景中，都必须在 glMatrix 中交换转换。

即在 glMatrix 中实现 1):

mat4.translate(modelViewMatrix, modelViewMatrix, [0.6, 0.0, 0.0]);
mat4.rotateZ(modelViewMatrix, modelViewMatrix, degToRad(45));

为什么转换顺序颠倒了？

Answer 1

这不仅适用于 WebGL，而且适用于一般的 OpenGL。事实上，这可能会令人困惑：应用转换的顺序与它们在源代码中出现的顺序相反。

您提供的代码的 simplified/shortened "pseudocode" 版本如下：

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 中矩阵相乘的常用方法是 "post-multiplication" 或 "right-multiplication"，形式为

newMatrix = oldMatrix * additionalTransformation

（就像您在代码中所做的一样）。另一种方法是写

newMatrix = additionalTransformation * oldMatrix

这有时称为 "pre-multiplication" 或 "left-multiplication"。所以你也可以写

M = identity();
M = T * M; // Where T = Translation
M = R * M; // Where R = Rotation

所以最后，

M = R * T

在这种情况下，翻译出现在源代码中的旋转之前，翻译也会在之前旋转应用。

但在 OpenGL 的上下文中，这是相当不寻常的。（而且混合两种方式会非常混乱——我不推荐这样做）。

旁注：在 glPushMatrix and glPopMatrix 仍然是 OpenGL API 的一部分时，所有这些可能更有意义。思考这个的方式类似于场景图的遍历。您首先应用 "global" 转换，然后应用 "local" 转换。

更新：

_{回应评论：我会尝试写几句话来证明某些概念。在这里总结这个有点困难。我将尝试简化它，并省略一些可能超出此处单个答案范围的细节。这里提到的其中一些事情是指在早期版本的 OpenGL 中是如何完成的，现在的解决方式有所不同 - 尽管许多概念仍然是一样的！}

以场景图的形式表示 3D 场景并不少见。这是场景的层次结构表示，通常以树的形式表示：

             root
            /    \
       nodeA      nodeB
      /  \           \
nodeA0    nodeA1    nodeB0
object    object    object

节点包含变换矩阵（例如旋转或平移）。 3D 对象附加到这些节点。在渲染期间，遍历此图：访问每个节点，并渲染其对象。这是递归完成的，从根开始，访问所有子节点，直到叶子节点。例如，渲染器可能会按照以下顺序访问上述节点：

root 
  nodeA
    nodeA0
    nodeA1
  nodeB
    nodeB0

在此遍历期间，渲染器维护一个 "matrix stack"。在早期的 OpenGL 版本中，有专门的方法来维护这个堆栈。例如，glPushMatrix to push a copy of the current "top" matrix on the stack, and glPopMatrix to remove the topmost matrix from the stack. Or glMultMatrix 将堆栈的当前 "top" 矩阵与另一个矩阵相乘。

渲染对象时，它始终使用位于此堆栈顶部的矩阵进行渲染。（那时还没有着色器和 mat4 制服...）

因此渲染器可以使用像这样的简单递归方法（伪代码）渲染场景图：

void render(Node node) {

    glPushMatrix();
    glMultMatrix(node.matrix);

    renderObject(node.object);

    foreach (child in node.children) {
        render(child);
    }

    glPopMatrix();
}

通过 "enclosing" 渲染成 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

可以看出，用于在节点中渲染对象的矩阵是由沿从根到相应节点的路径上的所有矩阵的乘积给出的。

在考虑 "large" 场景图时，这些概念可能带来的性能优势和优雅可能会变得更加明显：

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

矩阵乘法浪费大量资源。（这些多余的计算本来可以用其他方法避免的，但这些计算不会那么优雅和简单）。

Answer 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>

Answer 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 中的转换顺序颠倒了吗？

Transformation order reversed in glMatrix?

transformation

gl-matrix

更新：