¿Cómo se hizo la máscara del brik?, por Manuel Peliz.

Cuando se hace una aplicación de realidad aumentada nos encontramos con un problema inevitable y que no tiene solución a menos que juguemos con algún que otro truco.

La técnica de realidad aumentada nos permite incorporar objetos tridimensionales en un entorno real, uniendo la realidad con la ficción en la pantalla de nuestro monitor. Pero no es todo tan bonito.

A simple vista, cuando vemos un objeto sobre nuestra mano en un entorno de realidad aumentada da la impresión de que está sobre nuestra mano y es un efecto que, según el caso, puede resultar impresionante, pero el problema aparece cuando, por ejemplo, tenemos una “vaka” que vuela de un lado a otro de lo que nuestra webcam está “observando”.

Hagamos un stop para explicar, muy por encima, el proceso de dibujado en una aplicación de realidad aumentada:

Por un lado tenemos la imagen de la webcam que es lo que se dibuja en primer lugar, es decir, si fuera Photoshop, sería la primera capa de nuestro psd o foto.

Después, tenemos los objetos 3D que hemos de dibujar también y que corresponden a la segunda capa de nuestra foto. ¿Qué significa esto? Pues que siempre, siempre, tendremos los objetos 3D por encima de la imagen de la webcam.

Y e aquí la clave del asunto, nosotros no podemos conocer verdaderamente el entorno tridimensional que rodea a “LaVaka”, pero, dado un objeto conocido y su posición, podemos hacer una máscara de él (en este caso el brick de Central Lechera Asturiana) para simular que un objeto real de la vida misma está por delante de nuestro objeto ireal de la realidad aumentada.

Para muestra un botón:

Como se puede ver, no podemos conocer que hay una mesa que “choca” con nuestra compuerta, pero si conocemos la existencia de nuestro brick y que hemos modelado previamente. De este modo podemos hacer nuestra máscara para que “LaVaka” quede oculta en caso de volar por detrás del brick.

Seguro que hay un montón de métodos para hacer esta máscara, pero yo voy a comentar el empleado en este caso, por su facilidad de aplicación y su “escasa” necesidad de emplear líneas de código, además de la aportación que nos da la aceleración gráfica.

Como muchos sabrán, las gráficas nos permiten hacer “miniprogramitas” que van a ser ejecutados cuando dibujamos un pixel por pantalla. Es decir, si yo tengo un brick modelado en 3D con un color o una textura, etc. puedo decirle a la gráfica que cuando dibuje ese pixel concreto del brick antes de ponerlo por pantalla ejecute mi pequeño programita que va a modificar el color de ese pixel.

A ese programa se le llama Shader y es el encargado de modificar el color de ese pixel para sutituirlo por el color que yo le diga. De este modo le digo a la gráfica que cuando dibuje el pixel blanco del brick lo sustituya por el color del pixel de la webcam.

Así pues y con Shader Modelo 3 que tiene una estructura que nos facilita muchísimo la vida, podemos hacer esta máscara sin despeinarnos.

Esta estructura es la VPOS y nos da las coordenadas x e y del pixel que se está dibujando en ese preciso momento, con esa información y un pequeño cáculo de proporciones podemos sustituir la textura original del brick por la imagen de la webcam, de este modo, ya conseguimos el efecto deseado. La definimos de la siguiente manera:

struct PS_INPUT
{
float2 coord : VPOS;
};

Básicamente el pixel shader es tan simple como esto:

Realizamos el cálculo de proporciones para obtener el pixel que queremos dibujar :

IN.coord.x = IN.coord.x * webcam.x / screen.x;
IN.coord.y = IN.coord.y * webcam.y / screen.y;

Donde coord. es el pixel que se está dibujando y webcam/screen es la proporción entre la resolución de la webcam y el del monitor.

Esta coordenada obtenida tenemos que transformarla a un número entre 0 y 1 que será la que la gráfica entienda, y “cogerlo” de la textura de la webcam.

tex.x = IN.coord.x / 1024;
tex.y = IN.coord.y / 512;

En este caso mi textura es de 1.024×512.

Y sólo queda pedir el color del pixel de la textura que este caso es la imagen de la webcam:

float3 Color = tex2D(baseMap,tex);

y, finalmente, le decimos a la gráfica que dibuje el pixel con el color obtenido.

return float4(Color,1);

Anuncios

5 pensamientos en “¿Cómo se hizo la máscara del brik?, por Manuel Peliz.

  1. Carballo

    Habrá que pedir usuario y contraseña pa ver esta entrada, no vayamos a dar más pistas de la cuenta a la competencia… A no ser que Manuel se lo haya inventado todo, que es la impresión que tenemos los ignorantes como yo. XD XD

    Responder
  2. rafita

    Que Peliz ye un crack no hay duda. Pero me preocupa que ande por ahí con máscaras, porque como le dé por poner el gorro, ya tenemos al justiciero PeliZZZ y puede firmar con la Z como el Zorro. XD

    Responder
  3. Manuel

    Esto es como los trucos de magia, cuando se queda viejo lo enseñas. Además, luego hay que reproducirlo y que carai, si lo cuentas es que tienes más repertorio de trucos.

    Responder

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s