25/10/2015
En el mundo del desarrollo web, la realidad aumentada ha dejado de ser una fantasía futurista para convertirse en una herramienta accesible y potente. Si alguna vez te has preguntado cómo crear tus propios filtros faciales interactivos, similares a los que ves en redes sociales, has llegado al lugar indicado. Hoy exploraremos a fondo JeelizFaceFilter, una librería de JavaScript que te permite detectar y seguir rostros en tiempo real para superponer contenido 3D, y lo mejor de todo, es ligera, robusta y de código abierto.
¿Qué es JeelizFaceFilter?
JeelizFaceFilter es una biblioteca de JavaScript y WebGL diseñada específicamente para la creación de filtros faciales en aplicaciones de realidad aumentada. Su principal función es detectar y rastrear el rostro de un usuario en tiempo real a través de la transmisión de video de la cámara, utilizando WebRTC. Una vez que el rostro es detectado, la librería proporciona datos precisos sobre su posición, escala y rotación.
Lo que hace especial a esta librería es su enfoque agnóstico respecto a los frameworks. No te obliga a usar un motor 3D específico. En su lugar, te entrega los datos en crudo: si el rostro fue detectado, sus coordenadas, su tamaño y los ángulos de rotación. A partir de ahí, tienes total libertad para utilizar estos datos con tu motor preferido, ya sea THREE.JS, BABYLON.JS, A-FRAME, o incluso con APIs más sencillas como Canvas 2D y CSS3D, lo que la convierte en una opción increíblemente versátil.
Características Principales
Esta librería viene cargada de funcionalidades que facilitan el desarrollo de experiencias inmersivas. Aquí te presentamos las más destacadas:
- Detección y seguimiento facial: Identifica y sigue el rostro con alta precisión.
- Detección de rotación: Captura los ángulos de Euler (inclinación, giro y rotación) de la cabeza.
- Análisis de expresiones: Puede detectar la apertura de la boca, permitiendo crear filtros interactivos.
- Soporte para múltiples rostros: Es capaz de detectar y rastrear hasta 8 rostros simultáneamente en el mismo video.
- Robustez: Funciona de manera fiable en diversas condiciones de iluminación.
- Compatibilidad móvil: Está optimizada para funcionar fluidamente en dispositivos móviles.
- Adquisición de video HD: Permite utilizar la cámara web con capacidad de video en alta definición.
Guía de Inicio Rápido: Tu Primer Filtro en 3 Pasos
Empezar a usar JeelizFaceFilter es sorprendentemente sencillo. Sigue estos pasos para poner en marcha tu primer proyecto.
Paso 1: Incluir la Librería
Primero, necesitas añadir el script principal de la librería en la sección <head> de tu archivo HTML.
<script src="dist/jeelizFaceFilter.js"></script>
Paso 2: Preparar el Canvas
Luego, añade un elemento <canvas> en el <body> de tu página. Este canvas será utilizado por WebGL tanto para el cómputo del seguimiento facial como para el renderizado 3D.
<canvas width="600" height="600" id='jeeFaceFilterCanvas'></canvas>
Es crucial definir las dimensiones del canvas, ya que de esto dependerá la resolución del renderizado. Para facilitar el manejo del tamaño del canvas y la resolución del video, se recomienda usar el script de ayuda /helpers/JeelizResizer.js.
Paso 3: Inicializar el Filtro
Finalmente, una vez que la página haya cargado, ejecuta la función de inicialización. Aquí es donde la magia comienza.
JEELIZFACEFILTER.init({ canvasId: 'jeeFaceFilterCanvas', NNCPath: '../../../neuralNets/', // Ruta al modelo de red neuronal callbackReady: function(errCode, spec) { if (errCode) { console.log('Ocurrió un error. CÓDIGO =', errCode); return; } console.log('INFO: JEELIZFACEFILTER está listo.'); // Aquí inicializas tu escena 3D... }, callbackTrack: function(detectState) { // Esta función se llama en cada fotograma. // Aquí renderizas tu escena 3D usando los datos de detectState. } });
El objeto detectState que recibes en callbackTrack contiene toda la información que necesitas: la probabilidad de detección, las coordenadas 2D del rostro (x, y), la escala (s) y los ángulos de rotación (rx, ry, rz).
Eligiendo la Red Neuronal Adecuada
Una de las grandes ventajas de JeelizFaceFilter es la posibilidad de cambiar el modelo de red neuronal según tus necesidades. Puedes especificar cuál usar durante la inicialización a través del parámetro NNCPath. Cada modelo ofrece un equilibrio diferente entre rendimiento, tamaño y precisión.
| Modelo de Red Neuronal | Descripción | Caso de Uso Ideal |
|---|---|---|
| NN_DEFAULT.json | El modelo por defecto. Ofrece un buen equilibrio entre tamaño y rendimiento. | Aplicaciones de propósito general. |
| NN_WIDEANGLES_X.json | Mejor para detectar ángulos de cabeza amplios, aunque menos preciso en ángulos pequeños. | Filtros que requieren que el usuario gire mucho la cabeza. |
| NN_LIGHT_X.json | Una versión más ligera. El archivo es más pequeño y se ejecuta más rápido, pero es menos preciso con rotaciones amplias. | Dispositivos móviles de gama baja o cuando el rendimiento es crítico. |
| NN_4EXPR_X.json | Además del seguimiento, detecta 4 expresiones faciales (boca abierta, sonrisa, ceño fruncido, cejas levantadas). | Filtros interactivos que reaccionan a las expresiones del usuario. |
Consejos de Optimización para un Rendimiento Fluido
Para garantizar que tus filtros faciales funcionen sin problemas en todos los dispositivos, ten en cuenta estos consejos:
- Resolución del video: No proceses más píxeles de los necesarios. Utiliza el ayudante
JeelizResizer.jspara encontrar la resolución de video óptima que coincida con el tamaño de tu canvas. Una resolución de cámara demasiado alta puede ralentizar la aplicación innecesariamente. - Recursos 3D ligeros: Utiliza modelos 3D con un bajo número de polígonos y texturas con la menor resolución posible que mantenga la calidad deseada. Activa el mipmapping para un mejor rendimiento en el filtrado de texturas.
- Añade efectos gradualmente: Incorpora los efectos 3D uno por uno y mide el impacto en la tasa de fotogramas (FPS) para evitar cuellos de botella.
- Motor de renderizado: En términos de rendimiento, las demos basadas en WebGL son más eficientes que las que usan Canvas 2D, y estas, a su vez, son más rápidas que las que utilizan CSS3D. Elige según la complejidad de tu proyecto.
Preguntas Frecuentes (FAQ)
¿Dónde puedo encontrar un repositorio de código para un filtro facial con CSS3D?
El repositorio de JeelizFaceFilter es exactamente lo que buscas. Dentro de su carpeta /demos/ encontrarás ejemplos específicos que utilizan CSS3D para superponer elementos HTML sobre el rostro detectado. Estos demos son el punto de partida perfecto para construir tu propia aplicación.
¿Cómo añado un filtro facial a mi propio repositorio de GitHub?
Integrar JeelizFaceFilter en tu propio proyecto es un proceso claro:
- Explora el proyecto: Comienza por clonar o hacer un fork del repositorio de JeelizFaceFilter para familiarizarte con su estructura y los ejemplos.
- Integra la librería: Copia los archivos necesarios de la carpeta
/dist/a tu propio proyecto. También necesitarás al menos un modelo de red neuronal de la carpeta/neuralNets/. - Desarrolla tu filtro: Utiliza la guía de inicio rápido y los ejemplos como base para escribir el código de tu filtro. Define la lógica de cómo tus objetos 3D o elementos CSS deben reaccionar a los datos de
detectState. - Publica en GitHub: Una vez que tu proyecto funcione localmente, súbelo a tu propio repositorio de GitHub. ¡No olvides que necesitarás desplegarlo en un servidor con HTTPS para que la cámara funcione!
¿Necesito un servidor HTTPS para usar esta librería?
Sí, es un requisito indispensable. La librería utiliza la API MediaStream para acceder a la cámara del usuario. Por motivos de seguridad y privacidad, los navegadores modernos solo permiten el acceso a la cámara en páginas servidas a través de un protocolo seguro (HTTPS).
¿Esta librería es gratuita para uso comercial?
Sí. JeelizFaceFilter se distribuye bajo la licencia Apache 2.0, lo que significa que es completamente gratuita tanto para uso personal como comercial. Esto te da la libertad de construir y monetizar tus aplicaciones sin preocuparte por licencias.
La compatibilidad depende de la implementación de WebGL. La librería requiere WebGL2, o en su defecto, WebGL1 con las extensiones OES_TEXTURE_FLOAT u OES_TEXTURE_HALF_FLOAT. Si encuentras un problema, primero asegúrate de que ninguna otra aplicación (como Skype u otra pestaña del navegador) esté usando la cámara. Luego, visita webglreport.com para verificar la compatibilidad de tu navegador y GPU. Si el problema persiste, puedes abrir un issue en el repositorio de GitHub proporcionando detalles sobre tu sistema operativo, navegador y la consola de errores.
Si quieres conocer otros artículos parecidos a Filtros Faciales 3D con CSS3D y JavaScript puedes visitar la categoría Juegos.