kotlin-graphics/imgui

Image uv

Closed this issue · 7 comments

Hi ! I have a little problem, I don't know how to calculate uv0 and uv1 when displaying an image. I've managed to bind a texture with libGDX correctly but I don't understand how uv0 and uv1 work and I think that's why imgui shows me a black image. Thanks to you, Catvert

Salut!

So, in the demo for showing the atlas texture, he calls the following:

image(texId, texSize, Vec2(), Vec2(1), Vec4.fromColor(255, 255, 255, 255), Vec4.fromColor(255, 255, 255, 128))

Where image is:

fun image(userTextureId: Int, size: Vec2, uv0: Vec2 = Vec2(), uv1: Vec2 = Vec2(1), tintCol: Vec4 = Vec4(1), borderCol: Vec4 = Vec4()) {

So, I guess I'd say try the same, pass Vec2() (aka Vec2(0f, 0f)) for uv0 and Vec2(1) (aka Vec2(1f, 1f)) for uv1

Unfortunately it doesn't work, imgui just shows me a black texture, I wonder if it's not related to binding of the texture. For bind texture, I use the following method:

texID = Gdx.gl.glGenTexture()
Gdx.gl.glBindTexture(texture.glTarget, texID)

I'm not comfortable with opengl yet but I will continue my research and keep you updated.

Are you sure the texture is valid?

This issue may help

Can you point it to me in your project?

Common GENERIC OpenGL problems with getting black or garbled texture, in my experience and in no particular order, include using:

  • having blending off but having zeroes as alpha value and a shader that calculates color from the alpha
  • using an improper blending function/(or 2d draw order in regards to this)
  • mipmap in min/mag filters but not properly generating and uploading the mipmapped data (my most common mistake over the years). To make sure that you know the texture loading and uploading works always try first with GL_NEAREST on both = no surprises
  • depending on what you mean with black image (Like if the background is black and it's still black after drawing), it can also be vertex draw order and about what side of the polygon you're culling.
  • lighting.. if you have any lighting setup (immediate mode or by shader) and not having the proper normals on the vertices the image might just be pitch black dark. Also accidentily setting ambient light to zero would cause darkness ofcourse. (This is for 3D, but not knowing any specifics you might as well have called some function or used some shader that uses lighting values for all I know.)
  • Using the wrong texture id, having it bound to the wrong id or having the wrong ids active (maybe through some modern opengl or library API that remembers state.). Can happen if the the library demands presetting the texture in a certain way.
  • Edit: Also forgetting to actually upload any data with glTexImage2D or similar opengl feature might cause garbled or black image. (Logging OpenGL errors can help with a lot of these more technical things)

And for uv, it is just normalized texture coordinates, (0,0) is usually top left and (1,1) is the opposite corner. If you mean to use the whole texture those are usually the values you pass.

All of this assuming that your image loader properly decodes the image in the first place.

This is not much, but maybe it helps you reason about the problem.

Hello, thank you for your answer, it allowed me to better understand how textures are managed with opengl but it doesn't seem enough, I just feel like I'm missing an order and it will work.
I committed with the last few tests I did, if you want to take a look at it.
I tried to bind my texture with it:

texID = Gdx.gl.glGenTexture()

Gdx.gl.glBindTexture(texture.glTarget, texID)
GLTexture.uploadImageData(texture.glTarget, texture.textureData, 0) // upload texture data using glTexImage2D

And for rendering:

ImGui.image(texID, Vec2(300f, 300f))

I will of course update the wiki if we find the problem to help people with the same problem as me on libGDX.

Here @Catvert ,

init {
        stage + window("Menu principal") {
            verticalGroup {
                space(10f)

                textButton("Jouer !") {
                    onClick {
                        showSelectLevelsWindow()
                    }
                }
                textButton("Options") {
                    onClick {
                        showSettingsWindows()
                    }
                }
                textButton("Quitter") {
                    onClick {
                        Gdx.app.exit()
                    }
                }
            }

            setPosition(Gdx.graphics.width / 2f - width / 2f, Gdx.graphics.height / 2f - height / 2f)
        }

        backgroundTexture = PCGame.assetManager.loadOnDemand<Texture>(Constants.gameBackgroundMenuPath).asset

        texID = (texture as GLTexture).textureObjectHandle

}

Wow so efficient ! Again a big thank you for your help I think I could never have found this solution!