Metal triangle strips uniform opacity.

Question

Created 1w

Replies 1

Boosts 0

Participants 2

I have this drawing app that I have been working on for the past few years when I have free time. I recently rebuilt the app in Metal to build out other brushes and improve performance, need to render 10000s of lines in realtime.

I’m running into this issue trying to create a uniform opacity per path. I have a solution but do not love it - as this is a realtime app and the solution could have some bottlenecks. If I just generate a triangle strip from touch points and do my best to smooth, resample, and handle miters I will always get some overlaps. See: Pasted Graphic 1.png

To create a uniform opacity I render to an offscreen texture with blending disabled. I then pre-multiply the color and draw that texture to a composite texture with blending on (I do this per path). This works but gets tricky when you introduce a textured brush, the edges of the texture in the frag shader cut out the line. Pasted Graphic 1.png Solution: I discard below a threshold

 fragment float4 fragment_line(VertexOut in [[stage_in]],
 
                              texture2d<float> texture [[ texture(0) ]]) {
 
    constexpr sampler s(coord::normalized, address::mirrored_repeat, filter::linear);
 
   
 
    float2 texCoord = in.texCoord;
 
    float4 texColor = texture.sample(s, texCoord);
 
 
 
    if (texColor.a < 0.01) discard_fragment(); // may be slow (from what I read)
 
 
 
    return in.color * texColor;
 
}

Screenshot 2025-03-25 at 5.12.21 PM.png

Better but still not perfect.

Screenshot 2025-03-25 at 5.12.44 PM.png

Question: I'm looking for better ways to create a uniform opacity per path. I tried .max blending but that will cause no blending of other paths. Any tips, ideas, much appreciated. If this is too detailed of a question just achieve.

Boost

Answer 1

endecotp OP

1w

Looking at your first image, the traditional GPU solution would be to use the stencil buffer to only paint each pixel once.

If you have anti-aliased edges, the binary stencil buffer isn't perfect. But you can use the alpha channel in the framebuffer to get a similar but fractional effect.

Or you can re-triangulate your triangle strips on the CPU to get a geometry that doesn't self-intersect. You should aim to do that ahead-of-time, but it's not completely impossible to do it for every frame.

In your other images with the brush texture, I think that again using the framebuffer alpha as a pseudo-stencil is probably the best solution.

0

	fragment float4 fragment_line(VertexOut in [[stage_in]],

	texture2d<float> texture [[ texture(0) ]]) {

	constexpr sampler s(coord::normalized, address::mirrored_repeat, filter::linear);



	float2 texCoord = in.texCoord;

	float4 texColor = texture.sample(s, texCoord);



	if (texColor.a < 0.01) discard_fragment(); // may be slow (from what I read)



	return in.color * texColor;

	}