Alpha blending es la técnica con la cual podemos trabajar con transparencias tanto en 2D como en 3D, nos centraremos en pintar un plano con una textura y veremos diferentes formas de aplicar esta técnica.
Para el primer ejemplo usaremos una textura de vidriera:
la cual nos gustaría aplicar a un plano en 3D y que se viese translucido. Si simplemente la textura el resultado sería algo como:
Aquí entran en juego todos los parámetros con los que podemos trabajar, estos los podemos dividir en 3 grupos y sus valores por defecto son:
GraphicsDevice.RenderState.AlphaBlendEnable = false;
GraphicsDevice.RenderState.BlendFunction = BlendFunction.Add;
GraphicsDevice.RenderState.BlendFactor = new Color(255, 255, 255, 255);
GraphicsDevice.RenderState.SourceBlend = Blend.One;
GraphicsDevice.RenderState.DestinationBlend = Blend.Zero;
GraphicsDevice.RenderState.SeparateAlphaBlendEnabled = false;
GraphicsDevice.RenderState.AlphaBlendOperation = BlendFunction.Add;
GraphicsDevice.RenderState.AlphaSourceBlend = Blend.One;
GraphicsDevice.RenderState.AlphaDestinationBlend = Blend.Zero;
GraphicsDevice.RenderState.AlphaTestEnable = false;
GraphicsDevice.RenderState.AlphaFunction = CompareFunction.Always;
GraphicsDevice.RenderState.ReferenceAlpha = 0;
Todos estos son muchos parámetros y mucha gente termina confundiéndolos, para empezar nos centraremos solo en el primer grupo:
AlphaBlendEnable deberemos ponerlo a true si queremos activar el test de AlphaBlending.
BlendFunction, SourceBlend y DestinationBlend serán usados para determinar el color de cada pixel en el framebuffer tras la mezcla mediante la siguiente fórmula:
(Source * SourceBlend) (blendFunction) (Destination * DestinationBlend)
En este ejemplo concreto:
– Source representará los colores almacenados en la textura de vidriera.
– SourceBlend será el valor por el que multiplicaremos Source e indicará su contribución a la mezcla.
– BlendFunction representa una operación que puede ser suma, recta….
– Destination es el color que ya está en el framebaffer en nuestro caso la imagen de fondo con los árboles.
– DestinationBlend indicará la contribución del fondo a la mezcla.
Para irnos familiarizando con todos estos parámetros seguiremos con el ejemplo de la vidriera, nosotros lo que queríamos era que se viese translucida (con el mismo valor de translucidez por toda la superficie) para ello usaremos el parámetro BlendFactor que os ayudará a aplicar un valor constante de translucidez a toda la superficie, la manera de usarlo será configurar el valor de BlendFactor y posteriormente usar este desde SourceBlend y DestinationBlend, por ejemplo:
//Activamos el AlphaBlending
GraphicsDevice.RenderState.AlphaBlendEnable = true;
//Los valores de color están entre (0-255) con 127 le estamos indicando que queremos que sea un 50% translucida
GraphicsDevice.RenderState.BlendFactor = new Color(127, 127, 127);
//Utilizamores como operador la suma para la mezcla
GraphicsDevice.RenderState.BlendFunction = BlendFunction.Add;
//Multiplica los valores RGB de la vidriera por el valor de BlendFactor
GraphicsDevice.RenderState.SourceBlend = Blend.BlendFactor;
//Multiplica los valores RGB del fondo por el valor inverso de Blend factor (1 - BlendFactor)
GraphicsDevice.RenderState.DestinationBlend = Blend.InverseBlendFactor;
El resultado:
En este caso estábamos trabajando con una textura que no traía información en el canal Alpha ó este veían vacio (todo a 1), las texturas suelen almacenar 4 canales Red, Green, Blue, Alpha (RGBA).
Probemos ahora con una textura con canal alpha para lo cual necesitaremos un formato que sea capaz de almacenarlo por ejemplo PNG:
El canal alpha al ser un solo canal, si lo presentamos en una imagen esta será en blanco y negro. En este caso podemos ver como la vidriera no tiene los mismos niveles de translucidez en toda su superficie, todo lo que esté más cercano al blanco será opaco, por lo que tanto el marco como el centro serán totalmente opacos (resultado de multiplicar RGB * 1).
Ahora ya el BlendFactor no nos sirve necesitamos que tanto SourceBlend como DestinationBlend reciban información del canal alpha de la textura, esto lo haremos de la siguiente forma:
//Activamos el AlphaBlending
GraphicsDevice.RenderState.AlphaBlendEnable = true;
//Utilizamores como operador la suma para la mezcla
GraphicsDevice.RenderState.BlendFunction = BlendFunction.Add;
//Multiplica los valores RGB de la vidriera por la información almacenada en el canal alpha de la textura
GraphicsDevice.RenderState.SourceBlend = Blend.SourceAlpha;
//Multiplica los valores RGB del fondo por el inverso de los valores multiplicados en el canal alpha de la textura (1 - alpha)
GraphicsDevice.RenderState.DestinationBlend = Blend.InverseSourceAlpha;
El resultado es el siguiente:
************************************************************************************************
– Alpha Blending en XNA (I de IV)
– Alpha Blending en XNA (II de IV)
– Alpha Blending en XNA (III de IV)
– Alpha Blending en XNA (IV de IV)
************************************************************************************************
Muy bueno! Tengo unas cuantas preguntas, pero esperaré a próximas entregas para hacerlas.
Saludos y gracias!