This is an issue I’ve mentioned before, because when working with gamma 2.2, my UI text is drastically affected. Shouldn’t the UI be exempt from gamma?
How can I fix this problem?
Exactly the same text with gamma 1 and with 2.2
With gamma 2.2 my text explodes.
In the new 2.0 engine, we work with gamma 2.2 because the 3D looks great, but this happens with the UI. How can we fix this?
Please read this and also the Textures subsection
The UI uses the same workflow. Typically you’d set up your camera to use gamma 2.2, and mark all (color) textures as in gamma space, and it all works out.
I understand that, but how do I mark up text? A text font doesn’t have the sRGB parameter exposed. The help section you provided doesn’t talk about text; it explains textures, materials, etc., but not UI text. How can I make text work correctly?
That’s unexpected … mind to share your repro project?
Here’s a simple example: change the camera to gamma 1, press play and look at the text, then change to gamma 2.2, press play, and look at the text again.
Overview | Dashboard | Gamma 2.2 Problem | PlayCanvas | 3D HTML5 & WebGL Game Engine
Ok I did some investigation, I forgot some of this.
The engine uses linear workflow everywhere, both for 3d scene rendering as well as UI. The gamma setting on the camera:
2.2 - the default. Means linear workflow, and the camera converts the output to gamma space for display
1.0 - this means the rendering stays in linear space, which is useful for HDR. This would typically need to be in a set up where the HDR output is converted to SRGB at some point for display, otherwise it won’t look correctly, as linear values are not really supposed to be displayed.
So this is usually used when rendering HDR to texture, and then later this gets tonemapped and gamma corrected.
So there is expected to be visual different if tonemapping and gamma is not done.
I hope that makes sense.
Is there a way to adjust a text atlas? Does the engine generate a texture with the fonts? Is there a way to alter that texture with a script to correct it? No matter how much I adjust the color, transparency, or anything else in my text, it comes out broken, with a white border. I don’t know how to apply any of your explanations to text. The truth is, the text used to work fine, but now in engine 2.0 it doesn’t. If there’s no solution, we’ll unfortunately have to go back to working with engine 1.0.
I think the problem with white border might be your clear color - it’s white with 0 alpha. You might either want (255, 255, 255, 255) or (0, 0, 0, 0). Premultiplied colors are strange that way sometimes.
The engine generates textures, but those are not color textures, but MSDF textures, which represent distances. So a special encoding to allow text zooming with smooth edges. Nothing you can “adjust” so to speak.
For reference, I updated the docs to clarify gamma of 1.0 being HDR linear output.
Basically, I’ve come to the conclusion that using the default settings, Linear + Gamma 2.2, the UI text only works correctly on a background of white (255.255.255) or black (0.0.0).
If there are intermediate tones in the background, the engine has trouble rendering the colors the user needs, and it also creates that white border. I don’t know if I’m right, but this is what I can deduce right now. I’m sorry there isn’t a solution to this, even a scripted one.
Gray text with 100% opacity on a black background, works OK
Gray text with 100% opacity on a white background, works OK
Gray text with 100% opacity on a gray background, malfunctions
