2D GUI anti-aliasing

Can 2D GUI be anti-aliased?

When linking a rectangle to a mesh, it is drawn pixel accurate, which looks sharp in a single frame, but the rectangle moves choppy (by pixel) while the mesh moves smoothly (sub-pixel).

I understand that for lines and text, sub-pixel placement looks blurry, but my rectangle is big enough to not suffer from that effect.

Welcome aboard!

Would you have a repro in the Playground to show the effect?

When trying in this PG it does not seem choppy to me:

Slow it down with a factor of 10, and you’ll see the sphere move smoothly, still, and the green textblock take small steps.

mm, I have a 90 dpi laptop screen… but alas, high dpi mobile platform fares no better.

I’m not sure we can do anything for that…

We are not truncating the calculation, so the top/left positions of the rectangle are floating point numbers, we don’t snap the position to a pixel.

If your design allows, maybe you can try to use a billboard plane instead, which is following the mesh?

It’s common that 2D frameworks round to pixels for sharp edges… Often, certainly for static screens, that looks better, sometimes not. Not sure you can do something about that, either. It’s the browser’s 2D rendering engine, in this case, I guess?

I’m working with distance to camera that is changing an order of magnitude, at least. Although a billboard plane would be smooth, I’d have to resize it continuously to look nice. The linkWithMesh is a great time saver, compared to that :wink: Maybe I’ll do it eventually.

Yes, we are using canvas as the backend for the 2D GUI.