Hace unos posts mostré un video acerca de como usar Kinect en el desarrollo de software, pero mientras veíamos nuevas opciones, me llegó a la cabeza el reconocimiento facial, alguna vez lo ví en flash y pues se me ocurrió hacerlo ahora vía Silverlight.
Por suerte no tuve que dar muchas vueltas, gracias al proyecto de Rene Schulte que habla acerca de este mismo tema todo fue mucho mas sencillo
Este es su artículo (Ahí mismo puedes descargar el código).
Si checas su demo obtendrás algo parecido a esta imagen.
Para efectos de este tutorial, solo necesitamos la imagen en la que las dos líneas convergen. Así que empezaremos por depurarlas.
Si descargaste el proyecto podrás ver que es demasiada la funcionalidad que tiene para los fines que nosotros queremos, así que para ahorrarte un poco de tiempo depuré todo para quedar únicamente con lo necesario
Descarga aquí el código de inicio.
Si ejecutas el código inicial, verás que solo dejé el proyecto con la imagen que necesitamos, y es la que nos interesa porque necesitamos ubicar en donde se encuentran las dos líneas que convergen en el centro de nuestra cara, de hecho para obtener sus coordenadas lo haremos con un par de TextBlock, así que en el MainPage colócalos de la siguiente manera.
Y en el Event Handler captureSource_CaptureImageCompleted al final solo escribe dos líneas de la siguiente manera.
txtEjeX.Text = visualizador.Histogram.MaxIndex.X.ToString(); txtEjeY.Text = visualizador.Histogram.MaxIndex.Y.ToString(); |
Con esto tenemos lo suficiente como para poder ubicar en donde se encuentra nuestra cara, ahora vamos por la parte del objeto 3D, para ello usaremos las librerías de Balder.
Mientras Silverlight 5 no aparezca oficialmente, la mejor manera de crear elementos en 3D es con Balder, si quieres saber a que me refiero, visita este link.
Ya que tienes una idea de lo que se puede hacer con Balder (asumo que ya entraste a sus ejemplos interactivos), vamos al proyecto de nuevo.
Si checas en la carpeta de Assets, tienes todo lo necesario para trabajar, pero te explico una parte muy importante.
Los archivos .ASE son archivos que puedes crear con 3D Max Studio, pero hay dos cosas que son fundamentales al momento de utilizarlos dentro de un proyecto Silverlight, la primera es que el archivo, si lleva una textura debe tener una ruta relativa para la imagen y además la imagen debe estar dentro del mismo folder. En caso contrario abre el archivo .ASE y modifica este parámetro (lo puedes hacer desde Visual Studio).
La segunda es que todo debe estar cargado dentro del proyecto como “Resource”, las imágenes comúnmente se cargan así, mas no el .ASE, así que debes checarlo pues de lo contrario encontrará un error al momento de buscar el recurso solicitado.
Ya que has verificado los dos detalles que podrían causar algún conflicto, vas a colocar el objeto 3D de Balder con el recurso recién asignado, descarga de la página de codeplex las librerías necesarias (son dos, Balder y Ninject) e incorpóralas a tu proyecto.
Después de eso, ve a tu MainPage y asigna los espacios de nombres necesarios, que son los siguientes.
xmlns:View="clr-namespace:Balder.View;assembly=Balder" xmlns:Geometries="clr-namespace:Balder.Objects.Geometries;assembly=Balder" xmlns:Lighting="clr-namespace:Balder.Lighting;assembly=Balder" xmlns:Execution="clr-namespace:Balder.Execution;assembly=Balder" |
Y ya con los espacios de nombres puedes insertar los objetos necesarios, para que tu MainPage completo quede de la siguiente manera.
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:View="clr-namespace:Balder.View;assembly=Balder"
xmlns:Geometries="clr-namespace:Balder.Objects.Geometries;assembly=Balder"
xmlns:Lighting="clr-namespace:Balder.Lighting;assembly=Balder"
xmlns:Execution="clr-namespace:Balder.Execution;assembly=Balder"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" x:Class="Reconocimiento_facial.MainPage"
d:DesignWidth="640" d:DesignHeight="480" Loaded="UserControl_Loaded"> |
Y el resultado debe ser como la imagen siguiente. (Ya habiendo tenido la cámara activada).
Ya que notaste que el mundo interactúa con tu puntero al presionar el mouse podemos continuar, y una buena forma de hacerlo es quitando la visibilidad de la imagen, o de plano quitarla del ahí, como gustes, y el valor que le asignamos a los TextBox de hasta abajo ahora lo usaremos para la cámara.
//Alterar la vista del objeto Game.Camera.Position.X = -(visualizador.Histogram.MaxIndex.X - 140) * 4.5; Game.Camera.Position.Y = -(visualizador.Histogram.MaxIndex.Y - 155) * 2.3478; |
¿Porqué de esta forma? Es sencillo la figura tiene 360 grados, nuestra área de trabajo no tiene tal cantidad de valores, así que con una pequeña conversión podemos adaptar uno con el otro y listo.
Ahora si, a disfrutar de mover elementos con nuestra bella cara.
Descarga aquí el código fuente final.