Need help in graphics pipeline setup.

[nikitablack]

Hello. I'm trying to use egui with Vulkan. I was able to upload geometry and font texture to the GPU but I can't make the scene look good. At first, I thought it was an issue with the texture but @emilk explained that it's not when I submitted an issue. Nevertheless, I have the following image:

There's no horizontal line under the header and no resize handle in the bottom right corner. I pass vertices as is without any modification. I'm using the shader code from the glium implementation:

// v.color is u32
vec4 color = vec4(v.color & 0xFFu, (v.color >> 8) & 0xFFu, (v.color >> 16) & 0xFFu, (v.color >> 24) & 0xFFu);
outColor = linear_from_srgba(color);

But if I treat the vertex color as linear, i.e.:

// v.color is u32
outColor = vec4((v.color & 0xFFu), ((v.color >> 8) & 0xFFu), ((v.color >> 16) & 0xFFu), ((v.color >> 24) & 0xFFu));
outColor /= 255.0;

Then I get the following image:

which looks ok to me but I have a feeling that it's wrong. Also, the shadows on both images are looking weird.

I tried to follow the recommendations and used the required sampler filter and address modes, blend factors. The font texture has R8G8B8A8_SRGB format.

I would be happy to hear ideas of what I could forget.

[emilk]

You should verify that both the texture sampler and the framebuffer are sRGB/gamma-aware. If so, you can then copy the shaders from https://github.com/emilk/egui/blob/master/egui_glium/src/shader/vertex_140.glsl and https://github.com/emilk/egui/blob/master/egui_glium/src/shader/fragment_140.glsl

If not, follow the shaders at https://github.com/emilk/egui/blob/master/egui_web/src/shader/vertex_100es.glsl and https://github.com/emilk/egui/blob/master/egui_web/src/shader/fragment_100es.glsl

It is probably worth reading up a bit about gamma/sRGB encoded colors if you want to understand what you're doing :)

[nikitablack]

Yeah, I knew about gamma before but I was under the impression that all I need to do is to rise a color to 2.2 or 1/2.2. After a day of reading, I finally can explain what's going on in my images, maybe it'll be helpful to somebody.

1. The font Vulkan texture has R8G8B8A8_SRGB format. The font data, as written in egui documentation is stored as alpha premultiplied sRGB. That means that the hardware will automatically decode the data and bring it to linear space when sampled in the fragment shader.
2. Vertex color is also stored as alpha premultiplied sRGB but because I access the raw data no automatic decoding happens.
3. Initially the surface format I used was B8G8R8A8_UNORM and color space SRGB_NONLINEAR. Core Vulkan has only one color space available - ColorSpaceKHR::SRGB_NONLINEAR. I think that means that the API requires that all implementations support the sRGB transfer function.

This is what happens when I use the following setup:

1. In the vertex shader I decode the vertex color to bring it to linear space.
2. In the fragment shader the texture color is in linear space because of R8G8B8A8_SRGB format.
3. The multiplication is done in linear space and since the swapchain (my framebuffer) format is B8G8R8A8_UNORM the hardware does not perform any encoding and the linear color is presented in non-linear space. This is wrong!

If I do not decode the vertex color in the vertex shader this is what happens:

1. The vertex color stays encoded (in sRGB space).
2. In the fragment shader the texture color is in linear space as before.
3. Two multiplied colors are in different spaces! The hardware does not encode the output color. Though it looks ok (the second picture), this is completely wrong.

How to fix this? It's obvious - the surface format (swapchain/framebuffer format) has to be B8G8R8A8_SRGB. In this case, the following happens:

1. In the vertex shader I decode the vertex color to bring it to linear space.
2. In the fragment shader the texture color is in linear space.
3. The multiplication is done in linear space and the hardware performs encoding automatically.

After the fix was applied I got the following image: