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?

CodePudding user response：

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.

CodePudding user response：

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);.