Alpha blending en XNA (I de IV)

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:

Glass

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:

Capture1

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:

Capture2

 

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:

Canales RGBGlass 

Canal AlphacanalAlpha

 

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:

Capture3

************************************************************************************************

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)

************************************************************************************************

Publicado por

jcanton

Javier is a Computer Science Engineer who has always had a passion for 3D graphics and software architecture. He learned C# almost at the same time as he learned to talk, and his first word was "base". He enjoys imparting talks about technology and has contributed in many important software and video game events. He has participated in multitude of software projects involving multitouch technologies, innovative user interfaces, augmented reality, and video games. Some of these projects were developed for companies such as Microsoft, Syderis, and nVidia. His professional achievements include being MVP for Windows DirectX and DirectX XNA for the last eight years, Xbox Ambassador, as well as Microsoft Student Partner and Microsoft Most Valuable Student during his years at college. Currently he works at Plainconcepts and he is the development team lead at WaveEngine project.

Un comentario en “Alpha blending en XNA (I de IV)”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *