Webgl：回転するオブジェクトが軸に沿って歪む

Question

3Dで3つのデカルト平面を表示しようとすると、プレーンが一方向（z軸、青色）に伸び、別の（x軸

45度：

95度：

135度： Y軸回りの回転を示し、これらの画像のような）、赤

IはGL-行列ライブラリからmat4.perspectiveと、透視行列を計算する：

private near_ = 0.1; 
private far_ = 1000.0; 
private vFieldOfView_ = 60.0 * Math.PI/180; 

頂点シェーダ：

void main(void) { 
    gl_Position = uProjection * uView * uTransform * vec4(aVertexPosition, 1.0); 
} 

の値を持つ

mat4.perspective(this.pMatrix_, this.vFieldOfView_, this.aspect_, this.near_, this.far_); 

ビューマトリックスはオブジェクト2.0単位をカメラから変換します。 * 回転*翻訳：

let t = new Mat4(); 
t.array[12] = v.x; 
t.array[13] = v.y; 
t.array[14] = v.z; 

私はこのコードから生成行列用いてY軸周りの平面回転：

// identity matrix already set 
let rad = angle * Math.PI/180; 
r.array[0] = Math.cos(rad); 
r.array[2] = Math.sin(rad); 
r.array[8] = -1.0 * Math.sin(rad); 
r.array[10] = Math.cos(rad); 

および私は3がこの順にオブジェクトの変換行列乗算します規模。回転を扱うために四元数を使用していましたが、同様に歪んでいたので、回転行列を使用して回転を1つの軸に単純化しました。私は間違った順序でいくつかの乗算ステップを行っているか、パースペクティブマトリックスを正しく使用していないか、間違っているようです。

更新：mat.perspective（...）から得

が

uProjection = pMatrix_ =値：

ただ、頂点シェーダで行列のいくつかの値を明確にします。

uView = [1、0、0、0、0,1,0,0,0,0,1,2.0,0,0,0,1]すなわち、z軸で2単位離れた行列。

uこの例では、変換は単位行列でなければなりません。

アップデート2：

uViewが実際に[1、0、0、0、0、1、0、0、0、0、1、0、0、0、-2.0、1]

Answer 1

ました

ビューマトリックスを転置しました。あなたは

1 0 0 0 
0 1 0 0 
0 0 1 0 
0 0 -2 1 

を持っているあなたは欲しい：あなただけのGL-行列で立ち往生してmat4.translate()を使用した場合

1 0 0 0 
0 1 0 0 
0 0 1 -2 
0 0 0 1 

この間違いが起こってもみませんでした。これは、マトリックスを作成するために直接配列アクセスを使用しない理由です。スクラップするのは簡単です。

OpenGL行列は列ベクトルの配列のように格納されることに注意してください。だから、インデックスは次のように行く：私は私の実装で間違ったつもりだった場所を見つけ

0 4 8 12 
1 5 9 13 
2 6 10 14 
3 7 11 15 

Answer 2

、それは行列の乗算とありました。正しいコードは次のとおりです：

static multiply(a: Mat4, b: Mat4, out: Mat4) { 

    let a11 = a.array[0], a12 = a.array[1], a13 = a.array[2], a14 = a.array[3], 
     a21 = a.array[4], a22 = a.array[5], a23 = a.array[6], a24 = a.array[7], 
     a31 = a.array[8], a32 = a.array[9], a33 = a.array[10], a34 = a.array[11], 
     a41 = a.array[12], a42 = a.array[13], a43 = a.array[14], a44 = a.array[15]; 

    for (let i = 0; i < 16; i += 4) { 
     let b1 = b.array[i], b2 = b.array[i + 1], b3 = b.array[i + 2], b4 = b.array[i + 3]; 
     out.array[i] = b1 * a11 + b2 * a21 + b3 * a31 + b4 * a41; 
     out.array[i + 1] = b1 * a12 + b2 * a22 + b3 * a32 + b4 * a42; 
     out.array[i + 2] = b1 * a13 + b2 * a23 + b3 * a33 + b4 * a43; 
     out.array[i + 3] = b1 * a14 + b2 * a24 + b3 * a34 + b4 * a44; 
    } 
};