I understand that the new engine/editor uses Gamma 2.2 for the camera, and this is affecting all my UI elements, including text. How can this be fixed? My UI shouldn’t be affected in this way.
Is there a simple solution? I can’t create a second camera just for the UI, due to the complexity of my project. It was an idea, because setting the Gamma to 1 returns everything to normal for my UI, but my 3D looks horribly messed up and dark.
You should set sRGB tick on the texture as well, it seem you maybe are not?
Any warnings in the Asset Auditor (next to Console, at the bottom)?
No, no warnings. All my textures have sRGB enabled. The problem is with dynamic images coming from my server, which I’ve corrected using a script (they’re not quite the same, but acceptable). However, I don’t know how to correct the text.
I use Tonemapping (ACES2) plus Gamma 2.2 on my camera.
Here are some examples
This is from engine 1
and this thing about engine 2
The number 2 or the number 3 inside the small squares on the right in engine 2, come out brighter, with a white border, and the central image, despite having applied corrections by script, also comes out more washed out in engine 2. This happens to me in all my APP
To correct dynamic textures coming from a database, I apply this. Am I doing it right?
// Code
function _patchTextureForUI(tex, graphicsDevice, opts) {
const o = Object.assign({
mipmaps: true,
anisotropy: 4
}, opts || {});
const gd = graphicsDevice;
const isWebgl2 = !!gd.webgl2;
// Si WebGL1 y textura no es POT, desactivamos mipmaps
if (!isWebgl2) {
const pot = _isPowerOfTwo(tex.width) && _isPowerOfTwo(tex.height);
if (!pot) o.mipmaps = false;
}
// sRGB
if ('colorSpace' in tex) tex.colorSpace = pc.COLORSPACE_SRGB;
else tex.srgb = true; // legacy
// Filtros y direccionamiento
tex.mipmaps = !!o.mipmaps;
tex.minFilter = o.mipmaps ? pc.FILTER_LINEAR_MIPMAP_LINEAR : pc.FILTER_LINEAR;
tex.magFilter = pc.FILTER_LINEAR;
tex.addressU = pc.ADDRESS_CLAMP_TO_EDGE;
tex.addressV = pc.ADDRESS_CLAMP_TO_EDGE;
// Anisotropía
const maxAniso = (gd && gd.maxAnisotropy) || 1;
tex.anisotropy = Math.min(o.anisotropy, maxAniso);
// Evita halos blancos en PNG con alpha
tex.premultiplyAlpha = true;
tex.upload();
}
how do you create those textures?
just like that
if (this.apartmentScript.apartData.pictures[this.imageNumber]) {
// Obtener la URL de la imagen
var imageUrl = this.apartmentScript.apartData.pictures[this.imageNumber].fullpath;
// Cargar la imagen y obtener sus dimensiones
loadImageFromURL(imageUrl, function(width, height) {
// Llamar a la función cuando la imagen esté cargada
onImageLoaded.call(this, width, height); // Usar .call para mantener el contexto
asset = new pc.Asset("myTexture" + this.imageNumber, "texture", {
url: imageUrl
});
this.app.assets.add(asset);
asset.on("error", function (message) {
console.log(message);
});
asset.on("load", function (asset) {
var element = this.entity.element;
element.texture = asset.resource;
}.bind(this));
this.app.assets.load(asset);
this.assetStatus = true;
}.bind(this));
}
While my UI images are also affected, what worries me and I can’t fix are the UI texts.
specify srgb like this for the texture assets as needed:
red_button_atlas: new pc.Asset('atlas', 'texture', {
url: `red_button_atlas.png`
}, { srgb: true })
For the texts, do you have any ideas?
do you set up text color using script or something like that?
No, I don’t use anything to set my text color. The error is simple, and my question is simple: is there a way to make gamma 2.2 NOT affect my UI?
I did a very simple test. I created a project from scratch with two cameras, one with gamma 1 and the other with gamma 2. And you can clearly see the text and my image with gamma 2.2 are overexposed, with the text having a white halo around its edges.
Here’s the link to the project.
Here is the image with gamma 1, where everything looks correct.
and here with gamma 2.2
Clearly the gamma is affecting my UI, I don’t use any material or shader or anything, I need to be able to control how much the gamma affects my texts and images, can you explain to me what is the best way?
Whole engine v2 uses linear workflow now, see more here:
Where all texture data / colors are stored in gamma space.
Shader converts it to linear space, to do a correct lighting and similar. And when written out to the screen (or render target), this is converted to gamma space again for correct display on screens.
So the gamma 2.2 affects the UI, but as long as all color data are correctly in gamma space, it should all workout to look exactly the same way in engine v1.
