opengl + emscripten textures not getting displayed - c++

Question

i am tring to display textures using opengles + emscripten, but all i am getting are black triangles.
output image
my vertex shader:
attribute vec3 position;
attribute vec4 color;
attribute vec3 normal;
attribute vec2 uv;
varying vec4 v_color;
varying vec3 v_normal;
varying vec2 v_uv;
uniform mat4 model;
uniform mat4 view;
uniform mat4 projection;
highp mat4 transpose(in highp mat4 inMatrix) {
highp vec4 i0 = inMatrix[0];
highp vec4 i1 = inMatrix[1];
highp vec4 i2 = inMatrix[2];
highp vec4 i3 = inMatrix[3];
highp mat4 outMatrix = mat4(
vec4(i0.x, i1.x, i2.x, i3.x),
vec4(i0.y, i1.y, i2.y, i3.y),
vec4(i0.z, i1.z, i2.z, i3.z),
vec4(i0.w, i1.w, i2.w, i3.w)
);
return outMatrix;
}
void main()
{
v_color = color;
v_normal = normal;
v_uv = uv;
gl_Position = projection * view * transpose(model) * vec4(position.xyz, 1.0);
}
fragment shader:
precision mediump float;
varying vec4 v_color;
varying vec3 v_normal;
varying vec2 v_uv;
uniform sampler2D tex;
void main()
{
// gl_FragColor = v_color;
gl_FragColor = texture2D(tex, v_uv.xy);
}
texture create function:
void IG::Texture::create(unsigned char* image,
uint32_t width,
uint32_t height,
uint32_t channels)
{
if(image == nullptr)
{
std::cout<<"Texture creation failed! invalid image data.."<<std::endl;
return;
}
glPixelStorei( GL_UNPACK_ALIGNMENT, 1 );
glGenTextures(1, &ID);
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, ID);
// set the texture wrapping parameters
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, attribs.uv_mode);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, attribs.uv_mode);
// set texture filtering parameters
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, attribs.min_filter);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, attribs.mag_filter);
glTexImage2D(GL_TEXTURE_2D,
attribs.mip_level,
GL_RGB,
width,
height,
attribs.border,
GL_RGB,
GL_UNSIGNED_BYTE,
image);
// glGenerateMipmap(GL_TEXTURE_2D);
}
here attribs is a struct with values:
uv_mode(GL_REPEAT),
min_filter(GL_LINEAR_MIPMAP_LINEAR),
mag_filter(GL_LINEAR),
mip_level(0),
border(0)
i have verified that the image is valid using stb_image.
inside the draw loop all triangles are iterated and drawn using this call:
void Renderer::draw_objects(){
for(auto& v : gl_objects){
auto &shape = v.second;
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, shape.tex.ID);
shader->set_mat4("model", shape.transform);
glBindVertexArray(shape.VAO);
glUniform1i(shape.tex.samplerLoc, 0);
glDrawArrays(GL_TRIANGLES, 0, 3);
}
}
i am taking references from these links learopengl emscripten opengles examples
i am unable to debug what i am doing wrong here. what could be the issue here?

Answer 1

Your problem come from the missing mipmaps, it try to render a specific mipmaps that is not created, resulting in black pixels.
A proper call to glGenerateMipmap after glTexImage2D would solve the issue.

Answer 2

If you don't generate mipmaps mipmaps (with glGenerateMipmap) you must use one of the non mipmap minifying functions (GL_NEAREST or GL_LINEAR). If you use a mipmap minification function, the texture would be "Mipmap Incomplete".
Eiter use min_filter(GL_LINEAR) or call glGenerateMipmap(GL_TEXTURE_2D);.