Explicación y Uso del Canal Alpha en Blender

Canal Alpha

Imagen1

Comenzando con un poco de Teoría del Color

Cualquier color que mires está hecho de 3 y de sólo 3 colores (Rojo-Verde-Azul); llamados “Colores Básicos” (RGB por sus siglas en inglés). Dependiendo de qué tanta cantidad de color básico Rojo, Verde y Azul, el mezclarlos produce un nuevo color.

Imagen2

En este ejemplo se tiene un total del 70% del color Rojo, 12% del verde y 85% del azul. Si queremos escribir esto en términos de una manera más corta para dar al color púrpura un número y manejarlo como tal, esto siempre dentro del RGB, podemos hacer esto:

Número del color Púrpura: 701285.

Un archivo de imagen

Básicamente un archivo de imagen es nada más que una tabla con una X cantidad de anchura (columnas) y cantidad de altura (filas). Significa que cada celda de la tabla representa un pixel. Si escalas una imagen al extremo (utilizando herramientas como Photoshop o GIMP) verás los pixeles mostrados como cuadros. Cada celda de la tabla, contiene 1 y sólo 1 número porque cada pixel sólo puede tener 1 solo color. El número de este color o dato está escrito de una manera análoga que en la ilustración 2, pero no utilizando porcentaje, sino hexadecimal (para acortar se escribe HEX).

Imagen3

Si usas Blender para visualizar imágenes, te leerá estos números para cada celda de la tabla, fila por fila, columna por columna y muestra el color correspondiente.

¿Por qué y Qué es Hexadecimal?

Hexadecimal es una forma muy conveniente de representar números binarios en computadora. Un color básico tiene a su disposición el uso de un byte, y un byte está definido como un contenedor de 8 dígitos binarios.

Byte = XXXXXXXX

El número más pequeño formado en un sistema decimal utilizando 8 posiciones es el 00000000 y el más grande es el 99999999, para calcular la cantidad posible de soluciones usamos la fórmula:

108

Base 10 ya que se utilizan 10 dígitos (0-9) y 8 refiriéndose a los 8 espacios utilizados para formar las combinaciones. Entonces 108=1 000 000 000 de diferentes combinaciones.

Análogamente esto visto en el sistema binario que es el que maneja la computadora se tiene sólo 2 dígitos (0 y 1) formado el número más pequeño el 00000000 y el más grande el 11111111. Sólo son 2 dígitos, por lo tanto la base es 2 y las posiciones siguen siendo 8; así 2= 256 posibles combinaciones. Como resultado cada uno de los colores básicos posee 256 combinaciones posibles de color, desde 0 hasta 255. Como en la Ilustración 2, 0=0% y 255=100%.

Usando un ejemplo similar al de la Ilustración 2, solo que esta vez en lugar de utilizar % sino con números tal cual.

El valor para rojo                            10101010                          (Combinación 170 de 256)

El valor para verde                         00011001                          (Combinación 25 de 256)

El valor para azul                            11001101                          (Combinación 205 de 256)

 

Número RGB = 101010100001100111001101

 

La computadora sabe exactamente que los primeros 8 dígitos son rojo, los siguientes ocho pertenecen al verde y los últimos ocho pertenecen al azul. Recordar este número tan grande puede ser tedioso, para eso se utiliza el sistema hexadecimal. El sistema hexadecimal utiliza 16 dígitos:

0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F

Para reemplazar un número binario de 8 posiciones, conteniendo sólo 1 y 0, con un sistema hexadecimal, se necesitan sólo 2 posiciones. Esto se debe a que 28=256 162=256.

 

Nuestro número RGB = 101010100001100111001101 convertido a hexadecimal daría el número #AA19CD. En esta combinación, los primeros 2 dígitos pertenecen al rojo, los siguientes 2 pertenecen al verde y los últimos 2 pertenecen al azul.

El símbolo “#” comúnmente precede a lo que es un número. FF puede tener diferentes significados como son “Fast Forward” o 255. Si escribes #FF no existirá duda de que es un número.

Puedes encontrar en Blender estos números en las opciones de color de cada objeto oprimiendo el botón HEX. Escribir el color  #AA19CD en espectro circular para obtener un cubo color púrpura. Si comienzas a manejar el cambio de colores te darás cuenta que no es necesarios escribir el símbolo “#”. Si cambias la forma de ver los colores a RGB, que es la que se maneja por defecto, Blender muestra los valores para cada color de 0 a 1. 0 representando el valor mínimo (0) y 1 representando el máximo (255), a esto se le llama Normalización de RGB, y el por qué Blender lo usa de esa manera está fuera del objetivo de este documento.

Imagen4

El número mínimo en el sistema hexadecimal para representar colores es #000000 (Negro) y el máximo es el #FFFFFF (Blanco). Regresaremos a observar desde otro punto de vista la Ilustración 3. Utilizando lo que se denomina como “CANAL”.

Imagen5

 

Desde la invención de las cámaras digitales es necesario crear aplicaciones que manipulen las imágenes que los usuarios toman, una idea fantástica. Pero siempre surgen problemas. Qué pasaría si deseáramos adherir otra cosa a la imagen, puedo ponerla encima de la que ya está, pero los bordes de la nueva imagen lucen mal encima de la otra. Se necesita transparentar los bordes para que sólo quede la imagen.

Hasta este punto, con lo que se ha visto no se puede lograr eso, sabiendo que el valor mínimo (negro) o valor máximo (blanco), los demás crean algún tipo de color.

Se tiene que lograr definir que un pixel tenga ausencia de color, en términos simples que sea trasparente. Pero qué pasaría si quisiera que mi nueva adhesión tenga una sombre en el borde que tenga efecto de “fade out”, o un efecto de brillo, es necesario dar valores para lograr esto; ¿qué tanta transparencia debe de tener un pixel?

Si abres el archivo en Blender utilizando efectos de sombra y brillo en el Editor “UV/Imagen” lo que verías sería esto:

Blender no puede mostrar la transparencia en la pantalla tal como uno esperaría, así que utiliza una especie de fondo para saber si posee o no transparencia. Como se aprecia en la imagen posee transparencia en los bordes, pero mientras más se acerque al centro comienza a opacar.

Imagen6

Canal Alpha

Hasta ahora hemos dado diferentes valores a cada uno de los colores que conforman el esquema RGB, asignándoles 1 byte (0-255) para formarlo. El formato usado era #XXXXXX. Nada nos detiene para agregar otro byte más:

#XXXXXX + XX = #XXXXXXXX

Para este nuevo byte podemos asignarle valores desde 0  hasta 255 para cada pixel en la tabla que representa la imagen, esto es el Canal Alpha.

Imagen7

 

Entonces tenemos ya un valor para cada pixel desde 0 (100% Transparencia) hasta 255 (100% Opacidad o 0% Transparencia). Este valor no posee color, solo es una medida para el fondo de la imagen. Con el valor 0 se hace negro y con el valor 255 se hace blanco, todos los valores entre estos dos son tonalidades de gris.

Si posees una imagen que tiene el Canal Alpha activo y deseas verlo (ya sea representado en blanco o negro), abre la imagen en Blender usando el editor “UV/Imagen”, haz click en botón “Alpha” y el canal Alpha sería de la siguiente manera:

Imagen8

Como ves la imagen está completamente blanca o 0% Transparencia.

Debes de tener mucho cuidado ya que no todas las imágenes tienen la capacidad de contener un Canal Alpha y no todas las imágenes que poseen este Canal poseen valores entre 0 y 255.

Las primeras computadoras utilizaban el esquema RGB ya que no había otro. El primer archivo de Mapa de Bits fue llamado BMP para Windows y DIB para MAC.

El primer paso para el Canal Alpha y el uso en transparencia fue en el formato GIF, que son imágenes de mapa de Bits que poseen un Canal Alpha, pero manejaban valores binarios 0 y 1 (si y no).

La siguiente mejora se presenta en el formato PNG que ya poseía valores entre 0 y 255. Para averiguar si una imagen puede manejar el Canal Alpha se puede verificar en Blender en el apartado “Output” en la pestaña de “Render”. Aquí puedes seleccionar diferentes tipos de imágenes, si tienen capacidad de manejar el Canal Alpha, debería aparecer una opción llamada “RGBA” (Red/Green/Blue/Alpha). Como se muestra el formato JPEG no maneja Canal Alpha ya que no aparece dicha opción (aunque se pueden importar imágenes y simular que son PNG).

Imagen9

Si no existe transparencia alguna, no hay razón para guardarlo en RGBA, utiliza RGB. De esta manera pesará 1 byte menos por pixel.

Ejemplo 1:

Para este ejempló utilicé un modelo hecho en Un real Engine e importado para su uso en Blender, además de importar una imagen como plano y agregarle transparencia. Antes de empezar es necesario tener la opción de importar imágenes como planos. Para lograr esto, una vez en Blender, ir al menú “File”, en el desplegado ir a “User Preferences”, también con la combinación Ctrl + Alt + U. Una vez aquí ir a la pestaña Add-Ons, aparecerán todos los Add-Ons posibles de habilitar, para hacer las cosas más sencillas, al lado izquierdo en “Categories” seleccionar “Import-Export” y hacer Check en la opción “Import-Export: Import Imagens as Planes”.

Imagen19

Ahora importamos una imagen dentro del proyecto, que para este caso ya se tiene un modelo previo con texturas, trabjaremos sobre Blender Render, esta imagen debe ser formato PNG o TIFF, para lograr la transparencia:

Imagen20

Se hacen modificaciones al plano, “Resize” y “Rotation”. Al momento de hacer un Render quedaría como sigue. La meta es remover ese fondo blanco de la imagen importada.

Imagen21

Para la versión utilizada [2.74] no es necesario el manejo del editor de nodos, ya que para las versiones más actuales de Blender, ya posee formas más fáciles e inteligentes de lograrlo. Ya que se tenga la imagen como se desee mostrarla, ir a Propiedades, en Material y marcar “Transparency” y en opciones de éste “Z Transparency”. Poco más abajo en “Options” marcar opciones “Face Textures” y “Face Texture Alpha”.

Imagen22

Esto no es suficiente, ya que aún no se indica que la imagen esté usando el canal Alpha, para lograr esto, ir a la pestaña Textura dentro de Propiedades y activar dentro de “Image” la casilla de “Use Alpha”.

Imagen23

Al renderizar quedaría la imagen sin el fondo blanco, logrando así la transparencia. Aquí está Kukulkan cargando a un Chain Chomp de la franquicia Súper Mario Bros.TM.

Imagen24

Ejemplo 2

Para este ejemplo, haremos digamos en términos que se entiendan, trampa, así es haremos trampa en el sentido de crear transparencia sin cumplir necesariamente con lo que dice la teoría del color. Esto se logra al sumar una imagen con otra y aplicando cierto grado de transparencia. Para este ejemplo es necesario conocer un poco el manejo del Editor de Nodos de Blender. Aplicaremos la transparencia a un modelo cargado previo y crearemos un efecto tipo fantasma sobre éste.

Antes que nada, debemos tener una imagen similar a la siguiente, que es la que vamos a sumar a nuestro modelo al momento de renderizar. Imagen con fondo negro y degradado lineal.

Imagen25

Ya teniendo la imagen, es momento de manejar el editor de nodos, utilizando vistas. Para esto, basta con jalar de la esquina superior derecha del área de trabajo y jalar en la dirección deseada.

Imagen26

Y en la nueva pantalla, cambiar a modo Editor de  Nodos.

Imagen27

Una vez aquí, seleccionamos la opción “Compositing Nodes” y damos Check a “Use Nodes”. Así aparecerán nodos que conforman al modelo.

Imagen28

Ahora añadiremos la imagen que se sumará, esto se hace desde “Add-Input-Image” como se muestra en la imagen:

Imagen29

Saldrá un nodo nuevo, en el cual cargaremos la imagen de fondo negro y degradado, dándole al botón “Open”.

Imagen30

De la misma manera agregar desde “Add-Color-Mix” y agregarlo. Se puede arrastrar de punto a punto para unir, o jalar fuera para eliminar la unión. Unir como se muestra a continuación, (mostrar cuidado en la habilitación del Mix):

Imagen31

Y al momento de Renderizar quedaría así:

Imagen32

 

 

 

 

 

Documento basado en Alfa_Channel.pdf obtenido de Dolores74

Deja un comentario