[OpenGL] テクスチャを張ると画像が乱れる原因が知りたい。

提示コードの///コメント部のテクスチャ設定関数とコンストラクタ部の///コメント部内部のコードなのですがUV座標をを使ってテクスチャの描画には成功したのですがなぜ画像が乱れてしまうのでしょうか？

参考サイト: https://learnopengl.com/Getting-started/Textures

cpp
1#include "DrawTest_2D.hpp"
2
3#include <iostream>
4#include "Shader.hpp"
5
6#include <glm/glm.hpp>
7#include <glm/gtx/transform.hpp>
8#include <glm/gtc/matrix_transform.hpp>
9
10//コンストラクタ
11DrawTest_2D::DrawTest_2D()
12{
13	//shader = std::make_shared<Shader>("BasicMono_2D.vert", "BasicMono_2D.frag");	//シェーダー
14	shader = std::make_shared<Shader>("Basic_2D.vert", "Basic_2D.frag");	//シェーダー
15
16	//頂点情報
17	Vertex rectangleVertex[6] =
18	{
19		//頂点			UV座標
20		{0.0f, 1.0f,	0.0f, 1.0f},
21		{1.0f, 0.0f,	1.0f, 0.0f},
22		{0.0f, 0.0f,	0.0f, 0.0f},
23
24		{0.0f, 1.0f,	0.0f, 1.0f},
25		{1.0f, 1.0f,	1.0f, 1.0f},
26		{1.0f, 0.0f,	1.0f, 0.0f},
27
28	};
29
30	//vao
31	glGenVertexArrays(1, &vao);
32	glBindVertexArray(vao);
33
34	//vbo
35	glGenBuffers(1, &vbo);
36	glBindBuffer(GL_ARRAY_BUFFER, vbo);
37////////////////////////////////////////////////////////////////////////
38	//テクスチャバインド
39	glGenTextures(1, &texID);
40	setupTexture(texID, "texture.png", 100, 100);
41/////////////////////////////////////////////////////////////////////////
42
43	//頂点座標
44	GLint attrib = shader->getAttribLocation("vertexPosition");
45	glEnableVertexAttribArray(attrib);
46	glBufferData(GL_ARRAY_BUFFER, 6 * sizeof(Vertex), rectangleVertex, GL_STATIC_DRAW);
47	glVertexAttribPointer(attrib, 2, GL_FLOAT, GL_FALSE, 4 * sizeof(GLfloat), (GLvoid*)0);
48	
49
50	//UV座標
51	attrib = shader->getAttribLocation("vertexUV");
52	glEnableVertexAttribArray(attrib);
53	glBufferData(GL_ARRAY_BUFFER, 6 * sizeof(Vertex), rectangleVertex, GL_STATIC_DRAW);
54	glVertexAttribPointer(attrib, 2, GL_FLOAT, GL_FALSE, 4 * sizeof(GLfloat), (GLvoid*)(2 * sizeof(GLfloat)));
55	
56
57	
58	//モデル行列のパラメータを初期化
59	size = glm::vec2(100.0f,100.0f);
60	vecScale = glm::vec3(size.x, size.y, 1.0f);		//拡大縮小
61	vecRotate = glm::vec3(0.0f, 0.0f, -1.0f);		//回転
62	angle = 0.0f;									//回転量
63	vecTranslate = glm::vec3(0.0f, 0.0f, 0.0f);		//平行移動
64
65	//モデル行列
66	translate = glm::translate(glm::mat4(1), vecTranslate);									//平行移動
67
68	//回転
69	glm::mat4 m = glm::translate(translate, glm::vec3(size.x * 0.5f, size.y * 0.5f,0));		
70	rotate = glm::rotate(m,angle, vecRotate);												
71	translate = glm::translate(translate, glm::vec3(-size.x * 0.5f, -size.y * 0.5f, 0));
72	scale = glm::scale(glm::mat4(1), vecScale);												//拡大縮小
73	projection = glm::ortho(0.0f, 640.0f, 480.0f, 0.0f, -1.0f, 1.0f);	//正射形
74
75}
76/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
77//テクスチャを設定
78void DrawTest_2D::setupTexture(GLuint texID, const char* file, const int width, const int height)
79{
80
81	//画像をロード
82	std::ifstream fstr(file, std::ios::binary);		//ファイル読み込み
83	if (fstr.is_open() == false)
84	{
85		std::cerr << "ファイルが読み込めません。" << std::endl;
86	}
87	else 
88	{
89		const size_t fileSize = (size_t)fstr.seekg(0, fstr.end).tellg();	//サイズ計算
90		fstr.seekg(0, fstr.beg);
91
92		std::vector<char> textureBuffer(fileSize);
93		fstr.read(&textureBuffer[0], fileSize);
94
95		//テクスチャIDと画像データをバインド
96		glBindTexture(GL_TEXTURE_2D, texID);
97		glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, &textureBuffer[0]);
98
99		//テクスチャの設定
100		glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
101		glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
102		glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
103		glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
104
105	}
106
107
108
109}
110////////////////////////////////////////////////////////////////////////////////////////////////////////////////
111
112
113//更新
114void DrawTest_2D::Update()
115{
116
117}
118
119//描画
120void DrawTest_2D::Draw()
121{
122	shader->setEnable();
123	shader->setBindAttribVertex("vertexPosition");
124	shader->setBindAttribVertex("vertexUV");
125
126	/*########## Uniform  ##########*/
127	//shader->setUniform4f("uFragment", glm::vec4(0.0, 0.0, 1.0, 1.0));
128	shader->setUniformMatrix4fv("uTranslate", translate);
129	shader->setUniformMatrix4fv("uRotate", rotate);
130	shader->setUniformMatrix4fv("uScale", scale);
131	shader->setUniformMatrix4fv("uProjection", projection);
132
133
134
135	glBindTexture(GL_TEXTURE_2D,texID);
136	glBindVertexArray(vao);
137	glDrawArrays(GL_TRIANGLES, 0, 6);
138	glBindVertexArray(0);
139
140
141	shader->setDisable();
142}
143
144//デストラクタ
145DrawTest_2D::~DrawTest_2D()
146{
147	glDeleteVertexArrays(1, &vao);
148	glDeleteBuffers(1, &vbo);
149}
150
151

glsl
1/*#########################################################################
2# 単色の２D描画
3###########################################################################*/
4#version 430
5#extension GL_ARB_explicit_attrib_location: enable 
6
7/*########## 頂点情報  ##########*/
8layout(location = 0) in vec2 vertexPosition;	//頂点座標
9layout(location = 1) in vec2 vertexUV;			//UV座標
10
11
12
13
14
15/*##########　フラグメント　##########*/
16layout(location = 2) out vec2 vFragment;	//頂点カラー
17
18/*########## Uniform  ##########*/
19uniform mat4 uScale;		//スケール
20uniform mat4 uRotate;		//回転
21uniform mat4 uTranslate;	//平行移動
22uniform mat4 uProjection;	//正射形行列
23
24
25void main()
26{
27
28
29
30
31	//頂点座標を設定
32	vec4 vertex = vec4(vertexPosition,0.0,1.0);		//頂点座標
33	mat4 model = uTranslate * uRotate * uScale;		//モデル行列
34	gl_Position =  uProjection * model * vertex;	
35
36
37		
38	
39
40
41	vFragment = vertexUV;				//UV座標
42}

glsl
1/*#########################################################################
2# 単色の２D描画
3###########################################################################*/
4#version 430
5#extension GL_ARB_explicit_attrib_location: enable 
6/*########## 頂点シェーダー  ##########*/
7layout(location = 2) in vec2 TexCoords;	
8
9uniform sampler2D uImage;		//画像データ
10uniform vec3 spriteColor;		//スプライトカラー
11
12/*########## 出力  ##########*/
13out vec4 Color;
14
15void main()
16{
17	//Color = vec4(spriteColor, 1.0) * texture(uImage, TexCoords);
18	Color = texture(uImage, TexCoords);
19}

行動規範の内容に同意します

回答2件

ベストアンサー

回答としては「userisgod」さんの通りです．

貴方が参考サイトとして貼ってるurl先には次のような言葉が載っていました．

Texture images can be stored in dozens of file formats, each with their own structure and ordering of data, so how do we get those images in our application?

stb_image.h is a very popular single header image loading library by Sean Barrett that is able to load most popular file formats and is easy to integrate in your project(s)

https://learnopengl.com/Getting-started/Textures

cpp
1
2void DrawTest_2D::setupTexture(GLuint texID, const char* file, const int width, const int height)
3
4

この関数の中身を変えます．

まずstb_imageで画像を読み込んで

cpp
1
2int textureWidth, textureHeight, textureChannels;
3stbi_uc* pixels = stbi_load(file, &textureWidth, &textureHeight, &textureChannels, STBI_rgb_alpha);
4

既にあるglTexImage2D関数の引数を変更します．

cpp
1
2glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, textureWidth, textureHeight, 0, GL_RGBA, GL_UNSIGNED_BYTE, pixels);
3
4
5

既に書いてあるファイルの読み込みの部分のコードは削除して大丈夫だと思います．
もしライブラリを使いたくないのであれば，「png 規格」「png 仕様」なんかで検索して頑張って画像ローダーを作る必要があります．

投稿2021/04/29 03:34

fluid_love

総合スコア21

退会済みユーザー

2021/04/29 04:00

なるほど。openCVを使う方法は正解でしょうか？

fluid_love

2021/04/29 04:15

OpenCVとOpenGLを組み合わせて使うことはあるかと思いますが、画像をロードするだけでopencvを使う必要はないと思います。

行動規範の内容に同意します

cpp
1////////////////////////////////////////////////////////////////////////
2    //テクスチャバインド
3    glGenTextures(1, &texID);
4    setupTexture(texID, "texture.png", 100, 100);
5/////////////////////////////////////////////////////////////////////////