transformation - glMatrixで変換順序が逆になっていますか?

Question

両方のシーンで、glMatrix で変換を交換する必要があります。

つまり、glMatrix で 1) を達成するには:

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

変換順序が逆なのはなぜですか?

score 15 · Accepted Answer

これは 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 のコンテキストでは、これはかなり珍しいことです。（そして、両方の方法を混在させると非常に混乱します-これはお勧めしません）。

補足: これらはすべて、OpenGL API の一部であり、まだその一部であった時点glPushMatrixでglPopMatrix、もう少し理にかなっている可能性があります。これについての考え方は、シーングラフのトラバーサルに似ています。最初に「グローバル」変換を適用し、次に「ローカル」変換を適用します。

アップデート：

_{コメントに応えて: 特定の概念を正当化する可能性のあるいくつかの単語を書きます。ここでこれを要約するのは少し難しいです。私はそれを単純化しようとし、ここでの単一の回答の範囲を超えている可能性が高いいくつかの詳細を省略します. ここで言及されていることのいくつかは、以前のバージョンの 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

once、次に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

行列の乗算に多くのリソースを浪費します。(これらの冗長な計算は、他の方法で回避できた可能性がありますが、これらはそれほどエレガントで簡単ではありませんでした)。

score 1 · Accepted Answer

この glMatrix が後方にあるとは確信が持てません。

たとえば、これらのビデオを見るのは、それが標準のようです

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>

transformation - glMatrixで変換順序が逆になっていますか?

3 に答える 3

アップデート：

Related

Reference