Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

?id=61cae03a-0d03-4cb4-bd37-f47709bbe13f

Cómo funcionan las transparencias en las imágenes: el canal "Alpha"

Transparencia

En este artículo vamos a examinar brevemente los fundamentos de las transparencias en los gráficos y ventanas del sistema.

Como seguramente sabrás, el color de un píxel de la pantalla está determinado por sus valores de componente de color rojo, verde y azul (RGB, por sus siglas en inglés Red, Green and Blue). Variando los valores de cada componente o el "canal" se pueden crear millones de colores diferentes.

Cuando todos los canales están apagados el resultado es un píxel negro. Y al contrario: cuando todos los canales están en su máxima intensidad se muestra un píxel blanco. La intensidad de cada canal está representada por un número donde un 0 significa "apagado" y el valor máximo es la intensidad máxima posible. Así, por ejemplo, a partir de un píxel negro (todos los canales "apagados"), aumentando gradualmente el valor del canal rojo se mostrará gradualmente un punto más brillante de ese color. Al ir variando los otros dos canales se hacen mezclas de cada componente de color, consiguiéndose los diferentes colores.

Normalmente se utiliza un número de 8 bits (1 byte) para representar la intensidad de cada canal, por lo que la intensidad máxima está representada por el número 255. Con tres canales, 3 bytes (24 bits) es suficiente para representar todos los colores del espectro visible.

La mayoría de los procesadores utilizados en ordenadores personales han sido tradicionalmente de 32 bits durante las últimas dos décadas, aunque ahora son casi todos de 64bits. Que un procesador sea de 32 bits significa que los registros internos y la memoria trabajan de manera más eficaz cuando manejan datos que son de esa misma de longitud (o sea, 32 bits  o, lo que es lo mismo, un valor DWORD). Si utilizamos un valor DWORD para representar cada píxel, con sólo 24 bits utilizados para obtener información de color, eso nos deja 8 bits de "información perdida" o "información no utilizada". Esos bits no utilizados en cada píxel son demasiado seductores para omitirlos. No se tardó mucho tiempo antes de que alguien tuviese una excelente idea: utilizar esos bits de repuesto. Esta idea data de finales de los años 1970 de todos modos, y uno de sus co-inventores fue Alvy  Ray Smith, uno de los fundadores de los estudios Pixar.

Se aprovechó ese byte extra para crear un nuevo canal de información de cada pixel: el canal alfa. Éste utiliza esos 8 bits "sobrantes" para representar el "Blending" para cada píxel - "PPA: per píxel Alpha".

Cuando el píxel está pintado en la pantalla, se determina su transparencia a través de este valor alfa. Un valor alfa de cero indica un píxel completamente transparente - que no contribuye en absoluto a la imagen final. Un píxel totalmente opaco - uno que pinta completamente cualquier píxel subyacente - está representado por el máximo valor alfa de 255. Valores de alfa entre 0 y 255 representan contribuciones parciales o colores semi-transparentes. Un valor más alto de alfa significa una contribución más fuerte de los píxeles de la imagen.

Así, por ejemplo, un pixel con las componentes de color 0, 255, 0, 127 representaría un punto de color verde puro semi-transparente (el 127 es la transparencia, que al ser la mitad de 255 representa un 50% de transparencia).

File:Alpha compositing.svg

Ahora, en lugar de simplemente modelo RGB, tenemos un modelo de color RGBA (A para Alpha), o imágenes de 32 bits por píxel (32bpp).

Muchos formatos gráficos, como PNG, TIFF, TGA o PSD soportan el canal alfa y por tanto las transparencias. Otros como el formato JPEG sin embargo no tienen esta capacidad.

Crédito de la fotografía: BenSeese
Imagen de transparencia: Wikipedia.

Fecha de publicación:
Bruno Capuano Bruno es un experimentado desarrollador y arquitecto de software que ha trabajado en proyectos de gran envergadura en diversos países, tanto en roles de desarrollo, como de gestión e innovación. Puedes seguirlo en Twitter en @elbruno o leer su blog técnico. Ver todos los posts de Bruno Capuano
Archivado en: General

Boletín campusMVP.es

Solo cosas útiles. Una vez al mes.

🚀 Únete a miles de desarrolladores

DATE DE ALTA

x No me interesa | x Ya soy suscriptor

La mejor formación online para desarrolladores como tú

Agregar comentario

Los datos anteriores se utilizarán exclusivamente para permitirte hacer el comentario y, si lo seleccionas, notificarte de nuevos comentarios en este artículo, pero no se procesarán ni se utilizarán para ningún otro propósito. Lee nuestra política de privacidad.