Hi everyone,
I’m working on a Unity WebGL project and I’ve run into a problem with TextMeshPro text clarity.
- My UI canvas is set to Screen Space - Camera so that I can have anti-aliasing applied to images (like playing cards).
- This works fine for images, but my TMP text becomes noticeably blurrier compared to when the canvas is in Screen Space - Overlay.
- Since WebGL does not support MSAA in the same way as standalone builds, I can’t rely on regular camera-based AA.
What I would ideally like:
- Cards/images to look smooth (anti-aliased).
- TMP text to remain sharp (like in Overlay mode).
I’ve tried tweaking:
- TMP Font Asset (Sampling Point Size, Atlas size, Render Mode = SDFAA).
- TMP Material parameters
But the text is still not as crisp as without AA.
Question:
What is the recommended approach in WebGL to have smooth images (UI cards) while keeping TMP text pixel-perfect sharp?
Do I need to render the UI in two passes (RenderTexture split), or is there a simpler workaround?
Thanks a lot for your help!
