UV座標を正しく指定しても画像が逆向きに表示される原因が知りたい

Question

提示コードの頂点属性のUVデータを更新コメント部内部のコードですがUV座標を正しく設定してもなぜか画像が左下を基準に描画されるのですがこれはなぜでしょうか？　画像は480,480の画像です。画像はフリー素材です。

やりたいこと「　画像の左上を基準に描画範囲を絞って描画させいたいが現状なぜか左下を基準に描画されてしまう。　」
試したこと「タイプAではAのうに表示されタイプBではBのように表示されます。」

利用ライブラリ
opengl
glfw
glew
glmライブラリ
stbライブラリ

Github: https://github.com/Shigurechan/OpenGL_FrameWork/tree/8c5474f912d17d070cdb94c610d6192bd9a14c3a
(Sprite.cpp DrawGprah()関数部)

A

B

sprite->DrawGraph(glm::vec2(100, 100), 0, 0, glm::vec2(0, 0), glm::vec2(0,0), glm::vec2(240, 240));

//描画
void FrameWork::Sprite::DrawGraph(glm::vec2 pos, unsigned char texNum,float r,glm::vec2 s,glm::vec2 startSize,glm::vec2 endSize)
{
	if (isDefaultShader == true)
	{
		setEnable();
	}

	glBindVertexArray(vao);
	glBindBuffer(GL_ARRAY_BUFFER, vbo);
	
	setDrawTextureID((unsigned char)texNum);	//テクチャーユニットを設定

	// ####################### 頂点属性のUVデータを更新  #######################
	// 	
	//UVサイズからピクセルサイズを算出
	const float sizeX = 1.0f / (float)textureID.at(texNum).size.x;
	const float sizeY = 1.0f / (float)textureID.at(texNum).size.y;




//タイプA
	//左上
	rectangleVertex[0].uv[0] = sizeX * startSize.x;
	rectangleVertex[0].uv[1] = 1.0f - (sizeY * startSize.y);

	//左下
	rectangleVertex[1].uv[0] = sizeX * startSize.x;
	rectangleVertex[1].uv[1] = 1.0f - (sizeY * endSize.y);
	rectangleVertex[4].uv[0] = sizeX * startSize.x;
	rectangleVertex[4].uv[1] = 1.0f - (sizeY * endSize.y);

	//右上
	rectangleVertex[2].uv[0] = (sizeX * endSize.x);
	rectangleVertex[2].uv[1] = 1.0f - (sizeY * startSize.y);
	rectangleVertex[3].uv[0] = (sizeX * endSize.x);
	rectangleVertex[3].uv[1] = 1.0f - (sizeY * startSize.y);

	//右下
	rectangleVertex[5].uv[0] = sizeX * endSize.x;
	rectangleVertex[5].uv[1] = 1.0f - (sizeY * endSize.y);

/*
//   タイプB
	//左上
	rectangleVertex[0].uv[0] = sizeX * startSize.x;
	rectangleVertex[0].uv[1] = (sizeY * startSize.y);

	//左下
	rectangleVertex[1].uv[0] = sizeX * startSize.x;
	rectangleVertex[1].uv[1] = (sizeY * endSize.y);
	rectangleVertex[4].uv[0] = sizeX * startSize.x;
	rectangleVertex[4].uv[1] = (sizeY * endSize.y);

	//右上
	rectangleVertex[2].uv[0] = (sizeX * endSize.x);
	rectangleVertex[2].uv[1] = (sizeY * startSize.y);
	rectangleVertex[3].uv[0] = (sizeX * endSize.x);
	rectangleVertex[3].uv[1] = (sizeY * startSize.y);

	//右下
	rectangleVertex[5].uv[0] = sizeX * endSize.x;
	rectangleVertex[5].uv[1] = (sizeY * endSize.y);
*/








	glBufferSubData(GL_ARRAY_BUFFER, 0, sizeof(VertexUV) * 6, rectangleVertex);
	//  ################################################### 


	
	//std::cout << windowContext->getSize().x << std::endl;

	//Transform
	//printf("%f\n", rectangleVertex[2].uv[0]);
	setSizeScale(glm::vec2(std::abs((endSize.x - startSize.x)), (std::abs(endSize.y - startSize.y))));			//サイズ	
	setScale(s);																								//スケール
	setRotate(r);																								//回転
	setTranslate(glm::vec3(pos.x + (getSizeScale().x / 2.0f), pos.y + (getSizeScale().y / 2.0f), 0.0f));		//平行移動
	
	//uniform
	setUniformMatrix4fv("uTranslate", translate);
	setUniformMatrix4fv("uRotate", rotate);
	setUniformMatrix4fv("uScale", scale);
	setUniformMatrix4fv("uViewProjection", glm::ortho(0.0f, windowContext->getSize().x, windowContext->getSize().y, 0.0f, -1.0f, 1.0f));
	


	//バインド＆描画
	glBindTexture(GL_TEXTURE_2D, textureID.at(texNum).ID);
	glDrawArrays(GL_TRIANGLES, 0, 6);

	


	if (isDefaultShader == true)
	{
		setDisable();
	}

	//バインドを解除
	glBindVertexArray(0);
	//glBindBuffer(GL_ARRAY_BUFFER, 0);
	glBindTexture(GL_TEXTURE_2D, 0);

}

Comments

[退会済みユーザー]

> UV座標を正しく設定してもその逆を設定しても

正しい設定、逆の設定とはどの設定のことでしょうか

[退会済みユーザー]

Y座標１の時は上ですがその逆をしました。

[退会済みユーザー]

> Y座標１の時は上ですがその逆をしました。

具体的な設定を追記してください。

[退会済みユーザー]

> その逆とはUV座標の上が１ですが。上が０という設定をしても正しくなりません

言葉が足りなかったようですが、具体的にどこに何を設定したのでしょうか

[退会済みユーザー]

頂点情報のUV座標を変更してみました。

[退会済みユーザー]

> 頂点情報のUV座標を変更してみました。

その設定した値を追記してください

> 正しくなりません

どうなることを期待しているのでしょうか

[退会済みユーザー]

UV座標を様々値に変更しましたが依然として向きが提示画像のように逆になってしまいます。

[退会済みユーザー]

> UV座標を様々値に変更しましたが依然として向きが提示画像のように逆になってしまいます。

その変更した値を試したこととして追記してください

「向きが提示画像のように逆」というのがわかりません。
画像の向き自体は正しいのではないでしょうか。
左下を基準に0,0から240,240の範囲で表示しているんですよね？

[退会済みユーザー]

いえ。右上から0,0 240,240と指定して描画したいのですが。左下になってしまう原因が知りたい。

[退会済みユーザー]

現状、UV座標に設定している値の意味を理解していない、ということでしょうか

[退会済みユーザー]

理解して色々触りましたがわからないのです。

[退会済みユーザー]

> 理解して色々触りましたがわからないのです。

色々触った上でわからないなら、それは理解していません

そもそもですが、何のために「OpenGL_FrameWork」を作っているのでしょうか
正直こんなことで躓く程度で、車輪の再発明したところで時間がもったいないと思いますが

[退会済みユーザー]

作りたいからです。あとちょっとなので。就活に使うつもりです。

[退会済みユーザー]

文章を修正しました。

[退会済みユーザー]

> 作りたいからです。あとちょっとなので。就活に使うつもりです。
目的があるならよかったです
就活であればUnityやUEの勉強の方が役立ちそうですが

> 文章を修正しました。
「色々触りました」とのことですが、試したのはこれだけですか？
それと文章じゃなく、試したコードを追記していただければと思います

Answer 1

（完全にエスパー回答ですが）

テクスチャに使う画像のデータの並び順（glTexImage2Dあたりに与えるデータ列の並び順）に由来しているのではないでしょうか．

例えば，WindowsのBitmapとかだと左下が(0,0)という形になっているので，そのPixelデータをファイルからそのままの順序で読み出して左上が(0,0)な系で使おうとすると，上下が逆になったりします．

---

例えば，3*3 の画像が，見た目には

A B C
D E F
G H I

という形だとして，
画像ファイルのフォーマットとして左下が原点である場合，そのファイルには画素値データが
{ G,H,I, D,E,F, A,B,C }
の順に並んでいる．

これをそのまま読み出して glTexImage2D に与えたとしたら，
テクスチャの(U,V)座標に対する画素値の並びは以下のようになる．

＋────→ U
│G H I
│D E F
│A B C
↓
V

…的なことになっていたりしませんか？

Comments

[退会済みユーザー]

提示コードを修正しました。それも試しましたが画像が反転されてしまいます。

Answer 2

2点指定なのに、暗黙的に「startSize」は左上を選択することになってるのがダサいですね。
せめて判定をかませてどちらも受け取れるようにすべきかと。
個人的には、左上の点、幅と高さを指定するほうが矩形選択としては好きです。

//左上
rectangleVertex[0].uv[0] = sizeX * startSize.x;
rectangleVertex[0].uv[1] = sizeY * endSize.y;

//左下
rectangleVertex[1].uv[0] = sizeX * startSize.x;
rectangleVertex[1].uv[1] = sizeY * startSize.y;
rectangleVertex[4].uv[0] = sizeX * startSize.x;
rectangleVertex[4].uv[1] = sizeY * startSize.y;

//右上
rectangleVertex[2].uv[0] = sizeX * endSize.x;
rectangleVertex[2].uv[1] = sizeY * endSize.y;
rectangleVertex[3].uv[0] = sizeX * endSize.x;
rectangleVertex[3].uv[1] = sizeY * endSize.y;

//右下
rectangleVertex[5].uv[0] = sizeX * endSize.x;
rectangleVertex[5].uv[1] = sizeY * startSize.y;

上記は質問中の画像とコードから考えた、机上のコードです。
「1.0f」から引いてる箇所を削除し、上下を入れ替えてあります。
そもそもに使い方がよくないなど、それらの問題は考慮しておりません。

Comments

[退会済みユーザー]

それを座標を指定する際に左上になるようにUV座標を指定したいのです。

[退会済みユーザー]

あなたの試したコードを追記してください
どれくらい理解していて、試したことが正しいのか判断できません
少なくとも、UV座標にどのような値を設定すれば、期待した動作をするかぐらいは理解しているんですよね

> rectangleVertex[0].uv[1] = 1.0f - (sizeY * startSize.y);

なぜ、「1.0f」から引いているのかとか説明できますか？

[退会済みユーザー]

Y座標は上が１なのたとえば0.4という値が来たらYの上が１なので全体(1.0f)を引くと0.6が来るのでその値がYが上が１の時のY座標のUV位置です。

[退会済みユーザー]

日本語がおかしいです。

> Y座標は上が１なの
> たとえば0.4という値が来たらYの上が１なので
> 全体(1.0f)を引くと0.6が来るので
> その値がYが上が１の時のY座標のUV位置です。

「1.0f」から引いていることについてですが、「1.0f」を引くのはなぜですか？
やってる処理についてじゃなくて、やってる理由についてです
（処理はコードをみればわかるので）

少なくとも私のこの回答のコードであなたの期待する動作にはなると思いますが、
試していないということでよろしいでしょうか

[退会済みユーザー]

試しまたが正しい状態になりました。