8

Estoy usando uGui para mostrar fuentes en pantalla. Pero el resultado final no es todo lo satisfactorio que debería. El hardware es bastante limitado: color de 8 bpp (256 colores en total), con 3 bits para el rojo, 3 bits para el verde, y 2 bits para el azul ( 3:3:2 ).

El código original para obtener el color de un punto es:

color = (((fc & 0xFF) * b + (bc & 0xFF) * (256 - b)) >> 8) & 0xFF |//Blue component
        (((fc & 0xFF00) * b + (bc & 0xFF00) * (256 - b)) >> 8)  & 0xFF00|//Green component
        (((fc & 0xFF0000) * b + (bc & 0xFF0000) * (256 - b)) >> 8) & 0xFF0000; //Red component

Siendo:

  • fc: uint32_t, el color de la tinta para ese caracter.
  • bc: uint32_t, el color del fondo para ese caracter.
  • b: uint8_t, porcentaje de mezcla tinta/fondo para un punto concreto del caracter.

Ese último dato se toma del archivo de fuentes, previamente renderizadas (mediante una utilidad externa) y convertidas a array[] de unsigned char, en el que cada elemento representa la proporción tinta/fondo del punto.

Los resultados del código original son bastante satisfactorios:

introducir la descripción de la imagen aquí

Pero se aprecian varios artefactos de color (sobre todo en las A). Si hacemos zoom ...

introducir la descripción de la imagen aquí

En un intento por mi parte de limitar o eliminar esto, y teniendo en cuenta que solo se usan ciertos colores para el texto/fondo, se me ocurrió limitar artificialmente el número de colores posibles a aplicar para el alisado: por ejemplo, si la tinta es negra, usar solo el color gris para los puntos que no son tinta ni fondo.

El código quedó así:

// Calculamos el color para el antialiasing.
UG_COLOR acolor; // unsigned char
switch( fc ) {
case 0x92: // GRAY
  acolor = 0xDB;
  break;
case 0x1C: // GREEN
  acolor = 0x5E;
  break;
case 0xF0: // ORANGE
  acolor = 0x90;
  break;
case 0xDB: // SEMI_WHITE
  acolor = 0xFF;
  break;
default: // BLACK
  acolor = 0xB6; // GRAY;
  break;
}

color = (((fc & 0xFF) * b + (bc & 0xFF) * (256 - b)) >> 8) & 0xFF |//Blue component
        (((fc & 0xFF00) * b + (bc & 0xFF00) * (256 - b)) >> 8)  & 0xFF00|//Green component
        (((fc & 0xFF0000) * b + (bc & 0xFF0000) * (256 - b)) >> 8) & 0xFF0000; //Red component

// Si no vamos a pintar ni con la tinta ni con el fondo, lo hacemos
// con el color para el antialiasing.
if( ( color != fc ) && ( color != bc ) ) color = acolor;

El resultado fué ... distinto:

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Se aprecia que los puntos de colores inapropiados casi han desaparecido, pero la calidad general .. deja bastante que desear.

¿ Cual es la forma correcta de realizar este tipo de alisado ? ¿ Que combinación/operación de bits debo realizar ?

Nota: C o C++, las operaciones de bits son iguales en ambos.

EDITO

En respuesta a @abufalia.

Para pintar un pixel en la pantalla, se usa un unsigned char:

*((unsigned char *)(posicion-en-memoria)) = color;

Siendo color un UG_COLOR, que a su vez es un uint32_t.

En todas las operaciones de pintar texto, el valor de fc y bc está limitado a 8 bits:

const UG_COLOR BLACK      = 0X00;
const UG_COLOR GRAY       = 0x92;
const UG_COLOR SEMI_WHITE = 0xDB;
const UG_COLOR WHITE      = 0XFF;
const UG_COLOR GREEN      = 0X1C;
const UG_COLOR ORANGE     = 0XF0;

Para obtener el porcentaje de mezcla, se usa:

b = font->p[index++];

siendo:

typedef struct {
   unsigned char* p;
   FONT_TYPE font_type;
   UG_S16 char_width;
   UG_S16 char_height;
   UG_U16 start_char;
   UG_U16 end_char;
   UG_U8  *widths;
} UG_FONT;
3
  • Si la tinta y el fondo son siempre negro y blanco, respectivamente ¿no sería una buena opción pasar los colores a grayscale?
    – abulafia
    Commented el 10 may. 2018 a las 10:55
  • Pero es que no son siempre blanco y negro. Hay verdes, grises ... y tampoco está fijado en piedra, aún hay tiempo de cambiar :-(
    – Trauma
    Commented el 10 may. 2018 a las 10:57
  • técnicamente un gris en RGB tiene los mismos valores de R, G y B. casos extremos negro = 000 000 00, blanco = 111 111 11 , para "engrisar" el B que tiene 2 bits tendrías que poner a 0 el bit mas significativo de R y G ej. 011 011 11 . cosa de que al final R, G y B tengan valores similares sino iguales (aunque dependerá como se dibuje al final el pixel teniendo en cuenta la diferencia de bits, si completa a menos o a mas ) Commented el 10 may. 2018 a las 18:56

3 respuestas 3

8

No se... pero esa función tiene ciertas carencias o yo no he entendido algo de la pregunta:

using Color = unsigned int;

Color color(Color fc, Color bc, unsigned char b)
{
  return (((fc & 0xFF) * b + (bc & 0xFF) * (256 - b)) >> 8) & 0xFF |//Blue component
         (((fc & 0xFF00) * b + (bc & 0xFF00) * (256 - b)) >> 8)  & 0xFF00|//Green component
         (((fc & 0xFF0000) * b + (bc & 0xFF0000) * (256 - b)) >> 8) & 0xFF0000; //Red component
}

int main(int, char **)
{
  Color fc = 0xFF;
  Color bc = 0x00;
  unsigned char b = 255;

  std::cout << std::hex
            << color(fc,bc,255) << '\n'
            << color(fc,bc,125) << '\n'
            << color(fc,bc,0)   << '\n';
}

La salida del programa es:

fe
7c
0

No se pero salvo que haya entendido algo mal no me convencen esos resultados:

  • Lo primero que llama la atención es que la función trabaja con 1 byte para cada componente... cuando 1 byte es lo que debe ocupar el color en sí mismo (las tres componentes)... de hecho así se refleja en el switch (fc está definido en 1 byte)
  • el primer resultado ya empieza mal... pierde un bit de azul así por las buenas
  • el segundo se va del todo... no tiene componente azul y debería ser un gris. Llama poderosamente la atención que la componente G está a tope... (7c = 011 111 00). Aquí yo esperaría más bien un valor similar a 6e (011 011 10) o 6d.
  • el tercer valor es el único que coincide... es el color de fondo tal cual.

Esa función no parece ir muy fina ya que se inventa colores... que casualmente es lo que te sucede a ti.

Yo empezaría por sustituir ese algoritmo por uno un poco más predecible:

typedef unsigned Color;

unsigned GetR(Color color)
{
  return color >> 5;
}

unsigned GetG(Color color)
{
  return (color >> 2) & 0x07;
}

unsigned GetB(Color color)
{
  return color & 0x03;
}

Color color1(Color fc, Color bc, unsigned char b)
{
  unsigned pfc = b;
  unsigned pbc = 255-b;

  Color color = (((GetR(fc) * pfc + GetR(bc) * pbc) / 255) << 5)
              | (((GetG(fc) * pfc + GetG(bc) * pbc) / 255) << 2)
              |  ((GetB(fc) * pfc + GetB(bc) * pbc) / 255);

  return color;
}

AÑADIDO POR EL AUTOR DE LA PREGUNTA

Ya que no hay forma de probarlo sin el hardware adecuado, coloco aquí los resultados de esta excelente respuesta:

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Si bien son similares a los generados originalmente, son tonos mas oscuros en general, lo cual hace que esos puntos aparentemente incorrectos apenas se noten; de hecho, en el display real (recordemos que, para mostrarlo en un PC, hay que mapear de 8bpp a 24bpp; eso hace que los colores no sean exactos), los resultados son poco menos que perfectos.

3
  • @Trauma yo revisaría la conversión de 8 bits a 24... no debería inventarse colores
    – eferion
    Commented el 11 may. 2018 a las 10:39
  • No no, eso es solo al mostrar en el PC los volcados de pantalla del cacharro; entiendo que es normal que no coincidan al 100% (tecnología del monitor/display distintas, curvas de temperaturas distintas, ..). Lo importante, en el cacharro, se ve de lujo :-O
    – Trauma
    Commented el 11 may. 2018 a las 10:43
  • 1
    @Trauma ah ok, genial entonces ;)
    – eferion
    Commented el 11 may. 2018 a las 10:43
5

¿ Cual es la forma correcta de realizar este tipo de alisado ?

No lo puedo asegurar al 100% pero creo que la fórmula que usas es correcta, lo que no es correcto es el tratamiento del color.

Entiendo que si estás mezclando color de fuente negra con fondo blanco, el resultado deberían ser grises; el color gris tiene la particularidad que todos sus componentes RGB tienen el mismo valor, por ejemplo 50% de blanco y negro, 75% de blanco 25% de negro, 25% de blanco 75% de negro...

Tu estructura de color es r3g3b2 pero el tratamiento que haces es de r8g8b8, así que si paso estos valores:

  • fc: 0x00000000 (todos los bits a 0: negro).
  • bc: 0xffffffff (todos los bits a 1: blanco).
  • b: 0x7f (la mitad del máximo de uint8_t: 50%).

Con tu fórmula obtengo el valor 128, que si lo interpretamos como r3g3b2 es 57.14% rojo 0% verde y 0% azul, o sea: rojo.


Lo que necesitas es tratar los componentes como r3g3b2, para ello te sugiero crear unas funciones que te permitan obtener cada componente (código C++):

using color = std::uint8_t;

constexpr color R(color c) { return (c & 0b11100000) >> 5; } // 3 bits de mayor peso: R
constexpr color G(color c) { return (c & 0b00011100) >> 2; } // bits 2-4: G
constexpr color B(color c) { return (c & 0b00000011); }      // bits 0-1: B

No se exáctamente cómo funciona el alpha blend, pero teniendo estas funciones la operación podría quedar así:

color blend(color fc, color bc, color b)
{
    const float font = b / 255.f;         // % de color de fuente
    const float background = 1.f - font;  // % de color de fondo

    std::uint8_t red = (R(fc) * font) + (R(bc) * background);
    std::uint8_t green = (G(fc) * font) + (G(bc) * background);
    std::uint8_t blue = (B(fc) * font) + (B(bc) * background);

    /* R será los bits 5 a 7
       G será los bits 2 a 4
       B será los bits 0 a 1 */
    return (red << 5) | (green << 2) | blue;
}

Posiblemente el algoritmo no funcione con colores que no sean gris (mezclar rojo y azul debería salir fucisa).

0
4

Creo que no están claros los tamaños de los tipos de datos en que almacenas colores.

Por un lado dices que fc y bc son de tipo uint32_t, lo que induce a pensar que usan 8 bits por cada componente, es decir, es RGB de 24 bits (y que por tanto el blanco se almacenaría como 0xFFFFFF).

De hecho, la función que computa el mix de color entre fc y bc que has proporcionado está escrita suponiendo que ambos colores son RGB con 8 bits por componente (mira las máscaras que aplicas, como 0xFF , 0xFF00 y 0xFF0000).

Sin embargo, en el switch que pones luego, parece deducirse que en realidad cada color son 8 bits, pues por ejemplo 0xF0 está etiquetado como "orange".

Si este fuera el caso, entonces la respuesta de @eferion sería la que computa correctamente el mix de color, con máscaras que usan el reparto (3:3:2) de bits por componente.

También pudiera ser el caso de que los colores de tinta y fondo te vengan realmente en 24 bits, con lo que tu fórmula estaría correcta. En ese caso el color 0xFF no representa el blanco (como supuso @eferion), sino un verde muy brillante (0x0000FF), y el resultado de la fórmula para valores decrecientes de b estaría bien, dando verdes cada vez más oscuros (0x0000FE, 0x00007C, 0x000000).

Pero ya que la fórmula produce un color RGB de 24 bits y tu display maneja colores de 8 bits, aún faltaría un paso extra en el que esos 24 bits se convierten en 8 (3:3:2) y pudiera ser que fuera ese paso quien lo hace de forma incorrecta. Si este fuera el caso, no estaríamos viendo ese paso. Quizás lo hace el hardware.

Debes aclarar en qué formato te vienen los colores de tinta y papel (si en 8 o en 24 bits), y en qué formato debes generar el color resultante (si en 8 o en 24 bits).

2
  • El primero es el código original de GitHub, no es mio. Los tipos son correctos; no obstante, en cuanto pueda reviso los fuentes y lo confirmo.
    – Trauma
    Commented el 10 may. 2018 a las 11:49
  • Confirmado y añadido a la pregunta.
    – Trauma
    Commented el 10 may. 2018 a las 13:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.