Vulkan Transparent 2D Textures - c++

Question

I'm trying to load 2D sprites containing transparent pixels using Vulkan, where so far I have been able to load the sprite, but have not been able to get the transparency working (Transparent pixels should blend with the background color blue). I'm not sure what to do to get it right.
Color Blend State:
VkPipelineColorBlendAttachmentState colorBlendAttachment {};
colorBlendAttachment.colorWriteMask =
VK_COLOR_COMPONENT_R_BIT |
VK_COLOR_COMPONENT_G_BIT |
VK_COLOR_COMPONENT_B_BIT |
VK_COLOR_COMPONENT_A_BIT;
colorBlendAttachment.blendEnable = VK_TRUE;
colorBlendAttachment.srcColorBlendFactor = VK_BLEND_FACTOR_SRC_ALPHA;
colorBlendAttachment.dstColorBlendFactor = VK_BLEND_FACTOR_ONE_MINUS_SRC_ALPHA;
colorBlendAttachment.colorBlendOp = VK_BLEND_OP_ADD;
colorBlendAttachment.srcAlphaBlendFactor = VK_BLEND_FACTOR_SRC_ALPHA;
colorBlendAttachment.dstAlphaBlendFactor = VK_BLEND_FACTOR_ONE_MINUS_SRC_ALPHA;
colorBlendAttachment.alphaBlendOp = VK_BLEND_OP_ADD;
VkPipelineColorBlendStateCreateInfo colorBlendState {};
colorBlendState.sType = VK_STRUCTURE_TYPE_PIPELINE_COLOR_BLEND_STATE_CREATE_INFO;
colorBlendState.logicOpEnable = VK_FALSE;
colorBlendState.logicOp = VK_LOGIC_OP_COPY;
colorBlendState.attachmentCount = 1;
colorBlendState.pAttachments = &colorBlendAttachment;
colorBlendState.blendConstants[0] = 1.f;
colorBlendState.blendConstants[1] = 1.f;
colorBlendState.blendConstants[2] = 1.f;
colorBlendState.blendConstants[3] = 1.f;
Depth Stencil State:
VkPipelineDepthStencilStateCreateInfo info {};
Rasterization State:
VkPipelineRasterizationStateCreateInfo info {};
info.sType = VK_STRUCTURE_TYPE_PIPELINE_RASTERIZATION_STATE_CREATE_INFO;
info.depthClampEnable = VK_FALSE;
info.rasterizerDiscardEnable = VK_FALSE;
info.polygonMode = polygonMode;
info.lineWidth = 1.0f;
info.cullMode = VK_CULL_MODE_NONE;
info.frontFace = VK_FRONT_FACE_CLOCKWISE;
info.depthBiasEnable = VK_FALSE;
info.depthBiasConstantFactor = 0.0f;
info.depthBiasClamp = 0.0f;
info.depthBiasSlopeFactor = 0.0f;
Vertex Shader:
#version 460
layout (location = 0) in vec2 vPosition;
layout (location = 1) in vec2 vTexCoord;
layout (location = 0) out vec2 texCoord;
void main()
{
gl_Position = vec4(vPosition, 0.0f, 1.0f);
texCoord = vTexCoord;
}
Fragment Shader:
#version 460
layout (location = 0) in vec2 texCoord;
layout (location = 0) out vec4 outFragColor;
layout(set = 0, binding = 0) uniform sampler2D tex;
void main()
{
vec3 color = texture(tex, texCoord).xyz;
outFragColor = vec4(color, 1.0f);
}

Answer 1

When rendering in Vulkan we have to be explicit with how the color blending should be performed. You can read more here.
Some common mistakes when it comes to color blending is choosing the wrong blend factors and blend operations. But it's also very common to forget enabling blending .blendEnable = true;. Because In Vulkan you're able to attach attachments without them taking effect, which is why you have to be explicit
typedef struct VkPipelineColorBlendAttachmentState
{
VkBool32 blendEnable;
VkBlendFactor srcColorBlendFactor;
VkBlendFactor dstColorBlendFactor;
VkBlendOp colorBlendOp;
VkBlendFactor srcAlphaBlendFactor;
VkBlendFactor dstAlphaBlendFactor;
VkBlendOp alphaBlendOp;
VkColorComponentFlags colorWriteMask;
} VkPipelineColorBlendAttachmentState;
It may also be that you're pixel shader is not taking your textures alpha values into consideration as shown in the question above outFragColor = vec4(color, 1.0f);. Instead one should retrieve the texel coordinate as a vector4 texture(texture, uv).xyzw;
One may also be using the wrong file format or even simply not having proper transparency in texture files. Recommended texture files for game engines: dds, png, tga

Answer 2

In general, fully transparent pixels of 2D textures should not be handled by blend factors in Vulkan. If you cannot guarantee ordered drawing it is very easy to end with scenarios where transparent pixels overwrite non-transparent sections.
The fast solution is to discard transparent pixels in the fragment shader. This prevents the z buffer from being written to and all is well. I use code like this in my billboard shader:
outColor = texture(global_textures[nonuniformEXT(texIndex)], fragTexCoord);
// discard transparent pixels (== do not write z-buffer)
if (outColor.w < 0.8) {
discard;
}