OpenGL(OpenTK)で四角形が意図していない方向から表示される

Question

実現したいこと

こんにちは。
最近OpenGL(OpenTK)の勉強を始めたので、勘違いしている点など多いかもしれませんが、
数時間試行錯誤しても解決しなかったのので質問させてください。

OpenGLを使用して赤色の四角形を描画したのですが、
カメラの位置と注視点を変更して描画すると、意図しない結果となります。
どこの指定が間違っているのか自分では判断が付かないので、
教えていただきたいです。

該当のソースコード

バーテックスシェーダー:

#version 460

uniform mat4 viewMatrix;
uniform mat4 projMatrix;
uniform mat4 modelMatrix;

layout (location = 0) in vec3 position;
layout (location = 1) in vec4 color;

out vec4 vColor;

void main()
{
	gl_Position = modelMatrix * viewMatrix * projMatrix * vec4(position, 1.0);
	vColor = color;
}

フラグメントシェーダー:

#version 460

precision mediump float;

in vec4 vColor;
out vec4 fragColor;

void main()
{
	fragColor = vColor;
}

//行列を設定
public void LoadMatrices()
{
    //射影行列
  　_projMatrix = Matrix4.CreatePerspectiveOffCenter(-Width / 2, Width / 2, -Height / 2, Height / 2, 0.5f, 600f);
    //ビュー行列
    //位置を100, 0, 130, 注視点を100, 0, 0に
    _viewMatrix = Matrix4.LookAt( 100, 0, 130,   100, 0, 0,   0, 1, 0 );
    //モデル行列
    _modelMatrix = Matrix4.Identity;
    //128倍に拡大
    _modelMatrix.M11 = 128;
    _modelMatrix.M22 = 128;
    _modelMatrix.M33 = 128;
}

protected override void OnRenderFrame( FrameEventArgs e )
{
    GL.Clear( ClearBufferMask.ColorBufferBit | ClearBufferMask.DepthBufferBit );
    
    //四角形の頂点
    float[] vertices = new float[]
    {
        -128, 128, 0,
        -128, -128, 0,
        128, 128, 0,
        128, -128, 0
    }
    
    //すべての頂点を赤色
    float[] colors = new float[]
    {
        1f, 0f, 0f, 1f,
        1f, 0f, 0f, 1f,
        1f, 0f, 0f, 1f,
        1f, 0f, 0f, 1f
    }

    //インデックス
    short[] indices = new short[]
    {
        0, 1, 2, 3
    }
    
    //GL.UniformMatrix4( int location, bool transpose, ref Matrix4 matrix )
    GL.UniformMatrix4( GL.GetUniformLocation( _program, "viewMatrix" ), true, ref _viewMatrix );
    GL.UniformMatrix4( GL.GetUniformLocation( _program, "projMatrix" ), true, ref _projMatrix );
    GL.UniformMatrix4( GL.GetUniformLocation( _program, "modelMatrix" ), true, ref _modelMatrix );

    GL.EnableVertexAttribArray(0);
    GL.EnableVertexAttribArray(1);

    GL.VertexAttribPointer(1, 4, VertexAttribPointerType.Float, false, 0, colors);
    GL.VertexAttribPointer(0, 3, VertexAttribPointerType.Float, false, 0, vertices);
    
    //描画
    GL.DrawElements( PrimitiveType.TriangleStrip, 4, DrawElementsType.UnsignedShort, indices );

    GL.DisableVertexAttribArray(0);
    GL.DisableVertexAttribArray(1);
    
    GL.Flush();
    SwapBuffers();
}

上記のコードにて、Matrix4.LookAtの引数に0, 0, 130, 0, 0, 0, 0, 1, 0(位置を0, 0, 130、注視点を0, 0, 0)
を指定すると、画面の中心に赤い四角形が表示されるのですが、コードにある通り、
100, 0, 130, 100, 0, 0, 0, 1, 0を指定すると、意図している結果としては、四角形が画面の左に向かって
平行移動したような結果なのですが、原点を注視点に設定しているような結果が得られます。
0, 0, 130から原点を注視点に描画した結果:

100, 0, 130から100, 0, 0を注視点に描画した結果:

補足情報（FW/ツールのバージョンなど）

・OpenGLのバージョン: 4.6.0
・GPU: NVIDIA GeForce GTX 1650

Answer 1

質問します。
＊　width、Height には何を入力しているのか不明ですので、教えて下さい。
＊　Matrix4.CreatePerspectiveOffCenter　を使っていますが、上記の変数が不定なのでこちらで現象を確認できません。
私は通常 Matrix4.CreatePerspectiveFieldOfView()を使っています。
CreatePerspectiveOffCenter　の代わりにMatrix4.CreatePerspectiveFieldOfView(0.75, 1, 0.5, 600.0)　では結果はどうなりますか？

Comments

[fana]

> width、Height には何を入力しているのか不明ですので、教えて下さい

なるほど，ものすごい広角な設定になっているだけなのかもしれませんね．
コードを良く見ると頂点の座標値は128でそこに128倍スケールがかかっているので，視点～原点距離(130)と比較して相当にでかいサイズになるのにこんな（四角形が小さな）絵が得られているし．

（何故か回答っぽくない文章体裁になっているが，核心を突いていそうな気がするので高評価を投じておく）

[cure_fontaine]

CreatePerspectiveOffCenter について簡単に調べてみましたが、中心をずらした射影行列を作成するようです。
これによって中心がずらされていると、原点が画面中心に来なくなる可能性があります。

[fana]

CreatePerspectiveOffCenter をググった感じ，最初の方の引数は「Near平面での」視野範囲を指定するものっぽいので，
そこに突っ込んでいる Width, Height が
Nearの値(0.5f)に対して非常にでかいスケールの値になっているのではないかと想像．
（それでも矩形が斜めから見た感じになってる点は謎だけど）

[Nauclhlt]

Matrix4.CreatePerspectiveOffCenterを提示して頂いた内容のコードに置き換えてみた所、
意図した通りの結果が得られました。Matrix4.CreatePerspectiveOffCenterメソッドについての、
理解が浅く、引数のWidth, Heightには、GameWindowの幅、高さをそのまま渡していました。
ありがとうございました。

[fana]

> 提示して頂いた内容のコードに置き換えてみた所，

というのは，別のメソッドである CreatePerspectiveFieldOfView を使うという話ですか？

> Matrix4.CreatePerspectiveOffCenterメソッドについての、
理解が浅く、引数のWidth, Heightには、GameWindowの幅、高さをそのまま渡していました。

とのことですが，あくまでもググった範疇の「想像」を書いているという状況ですから，そこは鵜呑みにせずに「引数を変えたら改善した」みたいな確認をされるべきに思います．
（元々使っていた CreatePerspectiveOffCenter を用いてうまくいくのであれば，別メソッドに乗り換える必要もないのでしょうし）

[cure_fontaine]

また質問してね！
ごきげんよう！

Answer 2

コードの字面をぱっと見しただけですが…

gl_Position = modelMatrix * viewMatrix * projMatrix * vec4(position, 1.0);

ここ，マトリクスを乗じていく順序は妥当ですか？
マトリクスの名称から考えれば，逆順：
gl_Position = projMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);
が自然かと思いますが．

Comments

[Nauclhlt]

https://stackoverflow.com/questions/11452241/opentk-matrix-transformations
こちらのページに
>Your OpenTK matrices are transposed by default.
>It looks to use row vectors instead of column vectors.
>Therefore you need to do the multiplication as (model * view * proj),
>not (proj * view * model). Either that
>or transpose all the matrices before uploading them.
とあるので乗算の順序に関しては間違ってないと思います。
試しに順序を逆にすると、何も描画されなくなります。

[fana]

OpenTK は触れたことが無いので，無価値な雑音になってしまったなら申し訳ないです．

* Either 以降の側の話を試してみてもダメなのでしょうか？

* そのリンク先で最終的な結果のコードがどうなったのかよくわかりませんが……
もしも「行ベクトルを扱う形で書かなきゃならない」のであれば，乗算の左側にベクトルが来る形になるという話だったりはしませんか？
すなわち，
vec4(position, 1.0) * modelMatrix * viewMatrix * projMatrix;
みたいな．

[fana]

※この回答の
gl_Position = projMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);
は，
vec4(position, 1.0)
が縦ベクトルだと思って書きました．

[fana]

質問者様へのお願い事項：

お手数ではございますが，回答内容が間違っていることが明確になった場合，その旨をコメントで示していただく&低評価を投じておいていただきたく．