What are the best practices for anti-aliasing between MRT and MSAA ?

[ouzhou]

After read lessons/webgpu-multiple-canvases and lessons/webgpu-multisampling

I encountered some confusion while using MRT and MSAA.

When a triangle rotates, aliasing occurs, and I began to try using MSAA for anti-aliasing. (In my case, I used MRT to implement the object selection feature, which determines whether an object is selected by reading the pixel color.)

I found that when a pipeline sets the multisample.count to 4, all textures must have a sampleCount of 4. Therefore, I now have to set the pickingObjectTexture to 4 as well.

I have the following questions:

1. Can the pickingObjectTexture still work properly? Will it also be affected by sampling contamination?
2. If it is contaminated, is the best solution for me to use two pipelines, one for the main rendering and one for object rendering? However, I feel that this approach would be less performant than using MRT.
3. Besides MSAA, what other methods can be used to achieve anti-aliasing (a rotate rectangle aliasing)?

[greggman]

1. Can the pickingObjectTexture still work properly? Will it also be affected by sampling contamination?

You can use texture_multisampled_2d<u32/i32/f32> and then textureLoad to read indiviudal samples in a multisampled texture so they will have the correct picking value (they will not have been "resolved" into different values).

3. Besides MSAA, what other methods can be used to achieve anti-aliasing (a rotate rectangle aliasing)?

I honestly don't know what state of the art is. There's a ton of techniques. They each have strengths and weaknesses. Sorry I don't have an answer. see https://www.google.com/search?q=gpu+antialiasing+methods

btw: there's a picking example here. It is not anti-aliased though, nor is it using MRT.

[ouzhou]

Thank you for your reply!

Before I asked the question, I had read this example, and I guessed that using MRT (Multiple Render Targets) might offer better performance than rendering twice each time (though I don't have any evidence or benchmarks).

I haven't worked with texture_multisampled_2d before, so I'll need to spend some time testing it.

[greggman]

seems to work.

[ouzhou]

For the image inside a triangle, I tested the following code and found that the anti-aliasing effect is very poor when scaling. Is there a better way?

The anti-aliasing results I obtained are as follows: the lines and arrows are rendered using MSAA (Multisample Anti-Aliasing), while the circles are achieved through smoothstep.

The effect I truly want is like this: higher quality and more refined.

const borderColor = vec4f(0.0, 0.0, 0.0, 1.0);
const outlineColor = vec4f(0.0, 1.0, 1, 0.7);
const transparentColor = vec4f(0.0, 0.0, 0.0, 0.0);
const center = vec2f(0.0, 0.0);
const borderWidthPercent = 0.07;
const outlinePercent = 0.14;
const circleWidthPercent = 1;
const circleRange = circleWidthPercent - borderWidthPercent;
const outlineRange = circleWidthPercent + outlinePercent;
const borderRange = circleWidthPercent;

const smoothWidth = 0.02;

@fragment
fn fragmentShader(input: VertexOutput) -> FragmentOutput {
    var color = transparentColor;
    let dist = distance(input.quad_position, center);

    if(dist < (circleRange + smoothWidth)) {
        color = input.color;
        let alpha = 1 - smoothstep(circleRange - smoothWidth, circleRange + smoothWidth, dist);
        color.a = alpha;
    }    
    // else if(dist < borderRange) {
    //     color = borderColor;
    // } else if(dist < outlineRange) {
    //     color = outlineColor;
    // }

    return FragmentOutput(color, vec4f(input.idColor));
}

[greggman]

well, there's the smoothstep circle

@fragment fn fs(vin: VSOut) -> @location(0) vec4f {
  //
  //                    inner         outer          border             fade
  //  center            radius        radius         radius             radius
  //   V                  V             V              V                  V
  //   | <--- circle ---> | <- blend -> | <- border -> | <- anti-alias -> |
  //   |      color       |   to border |    color     |    blend to 0    |

  const innerRadius = 0.2;
  const outerRadius = 0.3;
  const borderRadius = 0.4;
  const fadeRadius = 0.5;

  let distance = length(vin.uv - 0.5);
  let innerMix = smoothstep(innerRadius, outerRadius, distance);
  let outerMix = smoothstep(borderRadius, fadeRadius, distance);

  let circleColor = vec4f(1, 0, 0, 1);
  let borderColor = vec4f(1, 1, 0, 1);
  let edgeColor = vec4f(0, 0, 0, 0);

  let color = mix(
       mix(circleColor, borderColor, innerMix),
       edgeColor,
       outerMix);

  // premultiply
  return vec4f(color.rgb * color.a, color.a);
}

you'll need to choose radii that fit the current resolution the quad is being rendered, or use fWidth or dpdx, dpdy to compute pixel values

I think this works.

@fragment fn fs(vin: VSOut) -> @location(0) vec4f {
  //
  //                    inner         outer          border             fade
  //  center            radius        radius         radius             radius
  //   V                  V             V              V                  V
  //   | <--- circle ---> | <- blend -> | <- border -> | <- anti-alias -> |
  //   |      color       |   to border |    color     |    blend to 0    |

  let oneTexel = fwidth(vin.uv.x);  // assumes we're drawing a 2d quad 
  let innerRadius = 0.2;  // the quad is -0.5 to +0.5 so the circle is 40% the size of the quad
  let outerRadius = innerRadius + oneTexel;  // anit-alias between circle and border is 1 pixel
  let borderRadius = innerRadius + oneTexel * 3.0; // border is 3 pixels
  let fadeRadius = borderRadius + oneTexel * 1.5; // anti-alias after border is 1.5 pixels

  let distance = length(vin.uv - 0.5);
  let innerMix = smoothstep(innerRadius, outerRadius, distance);
  let outerMix = smoothstep(borderRadius, fadeRadius, distance);

  let circleColor = vec4f(1, 0, 0, 1);
  let borderColor = vec4f(1, 1, 0, 1);
  let edgeColor = vec4f(0, 0, 0, 0);

  let color = mix(
       mix(circleColor, borderColor, innerMix),
       edgeColor,
       outerMix);

  // premultiply
  return vec4f(color.rgb * color.a, color.a);
}

https://jsgist.org/?src=4cdf3b8fbda29da028ebec850936f8de

[greggman]

also saw this in my search

https://www.shadertoy.com/view/4dGXW1

[ouzhou]

It has an effect, but it only improved a little bit.

const transparentColor = vec4f(0.0, 0.0, 0.0, 0.0);
const center = vec2f(0.0, 0.0);
const feather = 0.01;

// quad_position.xy range is (-1,1)

@fragment
fn fragmentShader(input: VertexOutput) -> FragmentOutput {
    var uv = vec2((input.quad_position.x + 1 ) / 2, 1 - (input.quad_position.y + 1 ) / 2); // (-1,1) to (0,1)
    var color = transparentColor;

    let fw = fwidth(uv);
    let dist = distance(input.quad_position, center);

    let alpha = smoothstep(circleRange - (fw.x + feather), circleRange + (fw.x + feather), dist);
    color = mix(input.color, transparentColor, alpha);
    color = vec4f(color.rgb * color.a, color.a);

    return FragmentOutput(color, input.idColor);  
}

[greggman]

I think, given the math in the shader, you want to use an edge color that's the same as the circle color with alpha set to 0.

In other words, if the circle color is [1, 0.5, 0, 1] (orange) then fade to [1, 0.5, 0, 0]. If we fade to 0,0,0,0 then, given the math, we're fading to black and that's why there is gray at the edges. Or, you could just do that in the shader fadeColor = vec4f(edgeColor.rgb, 0)

https://jsgist.org/?src=6ba7b3272f6a0c1e621fbaa7de6dccc5

[ouzhou]

Yes, you are absolutely right. This indeed fixes the gray edges issue. However, my concern is that it still looks somewhat blurry. Compared to the following case, I am trying to upscale the canvas by 2x and then scale it back down to 1x using CSS to resolve the blurriness. Is this the correct approach?

webgl demo

[greggman]

I don't really have a suggestion. My example above has a fade distance of 1.5 pixels. You could try adjusting that.

Rendering to double the size and letting it scale via CSS also kinda works. That's easier said than done though if you really care about "double" because of all the zoom / devicePixelRatio issues.

I'm not an expert in quality 2d rendering. I suspect some pixel snapping and other things are required for best results.