Load colorful png and render to gui turns to gray.

[Allen Dang]

Backend: GLFW/GL3

I created a function to load png as texture.

func (renderer *OpenGL3) createImageTexture(img *image.RGBA) (uint32, error) {
	// Upload texture to graphics system
	var lastTexture int32
	var handle uint32
	gl.GetIntegerv(gl.TEXTURE_BINDING_2D, &lastTexture)
	gl.GenTextures(1, &handle)
	gl.BindTexture(gl.TEXTURE_2D, handle)
	gl.TexParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR) // minification filter
	gl.TexParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR) // magnification filter
	gl.TexImage2D(gl.TEXTURE_2D, 0, gl.RGBA, int32(img.Bounds().Dx()), int32(img.Bounds().Dy()), 0, gl.RGBA, gl.UNSIGNED_BYTE, gl.Ptr(img.Pix))
	gl.GenerateMipmap(gl.TEXTURE_2D)

	// Restore state
	gl.BindTexture(gl.TEXTURE_2D, uint32(lastTexture))

	return handle, nil
}

Then I tried to load this

imgFile, err := os.Open("gopher.png")
if err != nil {
	panic(err)
}
defer imgFile.Close()

// Decode detexts the type of image as long as its image/<type> is imported
img, _, err := image.Decode(imgFile)
if err != nil {
	panic(err)
}

rect := img.Bounds()
rgba := image.NewRGBA(rect)
draw.Draw(rgba, rect, img, rect.Min, draw.Src)

imageID, err = w.LoadImage(rgba)
if err != nil {
	panic(err)
}

And display to gui by

imgui.Image(imageID, imgui.Vec2{X: 128, Y: 128})

Here is it, gray

Any thoughts?

[Eva1ent]

You should check the "Out_Color" in your fragment shader source code.

[Allen Dang]

@Nicify
Oh my!!!! You just save my world!
I copied the fragmentShader from imgui's implementation and it just work!

[Allen Dang]

@dertseha
The fragment shader code of your demo's GL3 renderer should be changed to below to fix this.

uniform sampler2D Texture;
in vec2 Frag_UV;
in vec4 Frag_Color;
out vec4 Out_Color;
void main()
{
    Out_Color = Frag_Color * texture(Texture, Frag_UV.st);
}

[Christian Haas]

Hello there!

This might be a solution for the image, sadly this will break the anti-aliasing of curves (such as the feathering of fonts). If you look at curves and fonts, you'll see a difference now. The shader code is the copy from the original Dear ImGui example.

To have both a rendering of UI, as well as graphical color display, have a look at the similar problem #42 - and my lengthy answer there. This then is the complete answer and solution.

[Allen Dang]

@dertseha
Sign.... you are right, it ruin the curves and fonts and background color...
I miss those last night because my eye-protection color tuning software...

I'll check your answer and try to fix it.