Goal: Render solid color quads with 0.5 alpha to my own transparent render target texture, then map the texture to a quad and render it to the screen. The texture should blend correctly (normal blend mode) with whatever is on the screen.

Problem: When rendering the resulting texture, the quads are rendered with half the alpha and never exceeding 0.5 alpha even when multiple quads are rendered on top of each other (within the custom render texture). My fragment shaders output straight alpha colors but it seems that the colors written to the render target texture are not straight alpha colors. When I sample the texture later, the colors are not what I would expect them to be. Ideally the texture would contain exactly the colors I output in my fragment shader, but that’s not the case for some reason.

Details: For simplicity, I’m rendering only a red color with 0.5 alpha. In the texture debugging view the pixel output shows a different color though. When I draw multiple quads on top of each other, I’d expect the color to eventually sample to fully opaque red (1, 0, 0, 1), but it never goes above 0.5 alpha as you can see in the screenshot (even though the color is clearly fully opaque red for the pixel [753, 498].

Here’s my texture, render pass and pipeline for rending the quads into the texture:

let textureDescriptor = MTLTextureDescriptor()
textureDescriptor.pixelFormat = pixelFormat
textureDescriptor.width = width
textureDescriptor.height = height
textureDescriptor.usage = [.renderTarget, .shaderRead]
textureDescriptor.storageMode = .shared
textureDescriptor.sampleCount = 1
textureDescriptor.textureType = .type2D

guard let texture = device.makeTexture(descriptor: textureDescriptor) else {
    throw MetalError.imageTexture
}

let renderPassDescriptor = MTLRenderPassDescriptor()
renderPassDescriptor.colorAttachments[0].loadAction = .clear
renderPassDescriptor.colorAttachments[0].clearColor = UIColor.white.withAlphaComponent(0).asMetalClearColor
renderPassDescriptor.colorAttachments[0].texture = texture
renderPassDescriptor.colorAttachments[0].storeAction = .store

...

let descriptor = MTLRenderPipelineDescriptor()
descriptor.vertexFunction = library.makeFunction(name: "vertexSolidShader")
descriptor.fragmentFunction = library.makeFunction(name: "fragmentColoredShader")
descriptor.colorAttachments[0].pixelFormat = pixelFormat
descriptor.colorAttachments[0].isBlendingEnabled = true
descriptor.colorAttachments[0].rgbBlendOperation = .add
descriptor.colorAttachments[0].alphaBlendOperation = .add
descriptor.colorAttachments[0].sourceRGBBlendFactor = .sourceAlpha
descriptor.colorAttachments[0].sourceAlphaBlendFactor = .sourceAlpha
descriptor.colorAttachments[0].destinationRGBBlendFactor = .oneMinusSourceAlpha
descriptor.colorAttachments[0].destinationAlphaBlendFactor = .oneMinusSourceAlpha
descriptor.sampleCount = 1
descriptor.rasterSampleCount = 1
descriptor.vertexBuffers[.vertexInputVerticesIndex].mutability = .immutable
descriptor.vertexBuffers[.vertexInputViewportSizeIndex].mutability = .immutable
descriptor.vertexBuffers[.vertexInputWorldUniformsIndex].mutability = .immutable
descriptor.vertexBuffers[.vertexInputRenderableUniformsIndex].mutability = .immutable

I’ve confirmed the fragmentColoredShader is returning the colors as expected (1, 0, 0, 0.5).

For testing purposes, I’m first rendering a large red quad with 0.5 alpha directly to the screen (MTKView’s render target) using the pipeline above and then on top of that I render a quad that has the custom texture mapped to it. Even the blending of the large solid quad and the textured quad is a bit weird (as if the alpha was not additive).

The render pipeline for rendering the textured quad is the same as above, except for the vertex/fragment functions, omitting vertex shader for clarity, nothing unusual there:

fragment half4 fragmentShader(MetalTexturedVertexOutput in [[stage_in]],
                              texture2d<half> colorTexture [[ texture(MetalTextureInputIndex) ]])
{
    constexpr sampler textureSampler (mag_filter::linear,
                                      min_filter::linear,
                                      address::repeat);
    const half4 colorSample = colorTexture.sample(textureSampler, in.textureCoordinate);
    return colorSample;
}

Notes:

I tried to play around with the sourceRGB and sourceAlpha blending factors – setting sourceAlpha to .one allows the quads within the texture go over the 0.5 alpha threshold, but each individual quad is still rendered with 0.25 alpha only. Blending with the large red quad still doesn’t work.

When I stop using my own texture for rendering the quads and render them to the MTKView’s texture right away, it all works as expected. Here’s the screenshot of what the actual result should be: