OpenGL 2D textures not displaying properly c++ - c++

Question

I'm fairly new to OpenGL and have run into a problem that I can't seem to crack. I'm trying to add a simple 2D texture to a triangle, the texture seems to be loading fine but it's getting displayed grainy and in black and white.
texture
result
Here's my related code:
main.cxx
#include <iostream>
#include "display.h"
#include "shader.h"
#include "texture.h"
#include "mesh.h"
#include <glm/glm.hpp>
#include <GLFW/glfw3.h>
int main()
{
Display display(800, 600, "project2");
Vertex vertices[] = {
Vertex(glm::vec3(-0.5f, -0.5f, 0.0f), glm::vec2(0.0f, 0.0f)),
Vertex(glm::vec3(0.5f, -0.5f, 0.0f), glm::vec2(1.0f, 0.0f)),
Vertex(glm::vec3(0.0f, 0.5f, 0.0f), glm::vec2(0.5f, 1.0f)),
};
Mesh mesh(vertices, sizeof(vertices)/sizeof(vertices[0]));
Shader shader("./shaders/shader");
Texture texture("./textures/container.jpg");
while (!display.IsClosed())
{
display.ProcessInput();
display.Clear(0.0f, 0.15f, 0.3f, 1.0f);
texture.Bind(0);
shader.Bind();
mesh.Draw();
display.Update();
}
return 0;
}
texture.cxx
#include "texture.h"
Texture::Texture(const std::string &filePath)
{
int width, height, numComponents;
unsigned char* imageData = stbi_load(filePath.c_str(), &width, &height, &numComponents, 4);
if (!imageData) {
std::cerr << "Failed to load texture: " << filePath << std::endl;
return;
}
stbi_set_flip_vertically_on_load(true);
glGenTextures(1, &texture);
glBindTexture(GL_TEXTURE_2D, texture);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, imageData);
glGenerateMipmap(GL_TEXTURE_2D);
stbi_image_free(imageData);
}
Texture::~Texture()
{
glDeleteTextures(1, &texture);
}
void Texture::Bind(unsigned int unit)
{
glActiveTexture(GL_TEXTURE0 + unit);
glBindTexture(GL_TEXTURE_2D, texture);
}
fragment shader
#version 330 core
out vec4 FragColor;
uniform sampler2D diffuse;
in vec2 texCoord0;
void main() {
FragColor = texture(diffuse, texCoord0);
}
vertex shader
#version 330 core
layout (location=0) in vec3 position;
layout (location=1) in vec2 texCoord;
out vec2 texCoord0;
void main() {
gl_Position = vec4(position, 1.0);
texCoord0 = texCoord;
}
I had textures working before in another project and my code looks almost identical, if anyone could help me out that would be much appreciated.

Answer 1

When a RGB image with 3 color channels is loaded to a texture object, then GL_UNPACK_ALIGNMENT has to be set to 1:
glPixelStorei(GL_UNPACK_ALIGNMENT, 1);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB,
GL_UNSIGNED_BYTE, imageData);
GL_UNPACK_ALIGNMENT specifies the alignment requirements for the start of each pixel row in memory. By default GL_UNPACK_ALIGNMENT is set to 4.
This means the start of each line of the image is assumed to be aligned to an address which is a multiple of 4. Since the image data are tightly packed and each pixel has a size of 3 bytes, the alignment has to be changed.
To proper read the image the last parameter of stbi_load has to be 0 (since the jpg format provides 3 color channesl) or 3 (to force 3 color channels):
unsigned char* imageData = stbi_load(filePath.c_str(),
&width, &height, &numComponents, 0);
stbi_load can be forced to generate an image with 4 color channels, by explicitly pass 4 to the last parameter:
See stb_image.h:
Basic usage (see HDR discussion below for HDR usage):
int x,y,n;
unsigned char *data = stbi_load(filename, &x, &y, &n, 0);
// ... process data if not NULL ...
// ... x = width, y = height, n = # 8-bit components per pixel ...
// ... replace '0' with '1'..'4' to force that many components per pixel
// ... but 'n' will always be the number that it would have been if you said 0
stbi_image_free(data)
In this case the format parameter has to be changed from GL_RGB to GL_RGBA when loading the image:
unsigned char* imageData = stbi_load(filePath.c_str(),
&width, &height, &numComponents, 0);
// [...]
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGBA,
GL_UNSIGNED_BYTE, imageData);