Visión por Computadora en tu Navegador con Filtros SVG

Hola a todos, mi nombre es Adam Klein. Soy el CTO y uno de los cofundadores de Cover with Double V. Somos una plataforma de tiendas de swag por lo que podemos abrir tiendas de swag, enviar regalos de marca a nivel mundial a tus empleados para celebrar diferentes hitos. Y es una plataforma muy genial y hacemos mucha visión por computadora en el navegador. Así es como llegamos a conocer los Filtros SVG y así es como nació esta charla. Así que vamos directo al grano.

Me gustaría comenzar esta charla con dos trucos de magia porque una de mis pasiones secretas es la magia y especialmente me gusta saber cómo se hace la magia. Así que el primer truco de magia haré un truco de cartas muy simple. Esta es una carta de marca que puedes pedir en nuestra plataforma de nuestra empresa o de tu empresa y el truco es muy simple. Simplemente tomamos la carta y, lo siento, la hacemos desaparecer. Y luego la hacemos reaparecer de la nada. Este es el primer truco y voy a mostrar cómo se hace al final de la charla.

Y el segundo truco es mi tipo favorito de trucos, es un truco que ya se hizo y ni siquiera eras consciente de ello. Porque como puedes ver, estoy grabando mi webcam y esto de hecho no es un filtro de Zoom o un fondo. Esto es solo un filtro de pantalla verde que creé con este simple código de SVG markup. Y al final de esta charla, voy a enseñarte, no vas a saber cómo funciona este código y como puedes ver, es súper simple. Así que comencemos primero moviéndonos a un mejor fondo que este feo filtro de pantalla verde. Perfecto.

Así que aprendamos sobre los filtros SVG. Como puedes ver, he hecho esta pequeña aplicación tipo Instagram donde puedes cambiar filtros. Así que el primero que viste fue un filtro de pantalla verde. Tenemos otros filtros como este genial efecto de vidrio esmerilado o este efecto infrarrojo espeluznante o este con como si hubiera gotas de agua en la pantalla y hay otros filtros también. Y lo genial de los filtros SVG, como puedes ver, es solo SVG markup. No hay JavaScript, no hay es solo SVG. Es un primitivo de visión por computadora, primitivos simples de visión por computadora que puedes combinar juntos para crear estos efectos geniales. Ahora, porque es todo SVG markup, puedes aplicarlo en lo que quieras. Así que aquí lo estoy aplicando en la webcam. Puedo aplicarlo en una imagen o lo siento en un video. Puedo aplicarlo en como puedes ver hay un video en el fondo. Puedo aplicarlo en una imagen.

Puedo aplicarlo en texto. Hello. De nuevo, un filtro diferente, vidrio esmerilado en una imagen en un video. Y esto es realmente genial. Y porque de nuevo, esto es solo HTML o SVG, es realmente fácil de animar.

Así que tomemos este efecto de gotas de agua. Es realmente genial animarlo y hacer que las gotas de agua caigan. Volvamos a la webcam para que realmente puedas verme. Como puedes ver, las aguas están cayendo, es realmente fácil de hacer. Efecto de afilado, así que esto es sin el efecto, esto es con el efecto. Muy genial. Este genial efecto de animación de difusión, pixelado de nuevo en una imagen en texto y este realmente genial efecto de crayón. Así que todo esto se hace con un código de SVG markup muy simple, efectos muy diferentes y voy a mostrarte cómo se hace. Así que comencemos desde este efecto de vidrio esmerilado y veamos cómo se hace.

Como puedes ver, esto es un filtro. Tiene un ID y este filtro puede aplicarse más tarde en diferentes elementos. Y el filtro es como una tubería de funciones que se ejecutan en los píxeles mismos. Como sabes, una imagen es solo un arreglo de píxeles y cada píxel tiene un valor, un rojo, verde, azul y alfa, que es la transparencia. Así que veamos por ejemplo cómo funciona el efecto de vidrio esmerilado. Y lo que es realmente genial de los filtros SVG, puedes depurarlos fácilmente y desglosarlos porque son solo un código de markup. Así que comentemos estos dos y veamos cómo se ve el primer filtro. Así que este es el filtro turbulento. Como puedes ver, es solo ruido aleatorio.

Bien, ¿cómo nos ayuda esto? Tomemos el segundo, en realidad el último aquí, que es el displacement map. Y ahora ves, bien, de repente de alguna manera este ruido se está traduciendo al elemento mismo. Y el displacement map es un primitivo muy simple. Lo que hace es desplazar píxeles ya sea por el eje x o el eje y. Así que esta es la imagen original. Y después de mover los píxeles hacia la izquierda o derecha, arriba y abajo, todo se vuelve un poco raro. Y la forma en que funciona el displacement map es muy simple. Tenemos, como puedes ver, un selector de canal x y un selector de canal y. Lo que esto significa es que tomamos la turbulencia que creamos antes, este ruido aleatorio, cada píxel en la turbulencia tiene un valor rojo, un valor verde, azul y alfa. Aquí ignoramos el azul y el alfa y usamos el rojo y el verde como una especie de medidor para decir cuánto movemos el píxel. Así que digamos que si el rojo en la turbulencia, en el ruido es cero, entonces movemos el píxel mucho hacia la izquierda. Y si el valor es 255, movemos el píxel mucho hacia la derecha. Y si es 127, entonces lo mantenemos en su lugar. Así que básicamente estamos usando los valores rojo y verde solo para decirle al displacement map cuánto desplazar en el eje x y en el eje y. Y la escala básicamente significa cuánto lo movemos. Así que si volvemos al efecto de vidrio esmerilado, si aumentamos el valor aquí, de repente el efecto se vuelve más intenso. Si lo disminuimos, entonces es mucho más ligero. Pero aún no es exactamente el efecto de vidrio esmerilado que teníamos antes, porque es más suave porque la turbulencia crea transiciones suaves entre colores. La forma de hacerlo como este vidrio esmerilado que es un efecto más roto, teníamos otro filtro llamado component transfer, que nos permite ejecutar una función en cada píxel. En lugar de moverlo, cambiamos el valor del píxel. Así que el píxel se queda en su lugar, pero podemos cambiar los valores de diferentes canales. Así que volvamos a los efectos y volvamos a este filtro. Y como puedes ver, ahora está más roto porque lo que hicimos fue ejecutar una función llamada discrete. Así que en component transfer, tienes diferentes funciones. Aquí elegimos una discreta. La ejecutamos en el canal rojo y el canal verde. Y le decimos, bien, no importa qué valor tengas aquí. Los valores están entre 0 y 1, no entre 0 y 255. Y decimos que es como un tipo de ajuste. Así que se ajusta al valor más cercano de esta lista.

Así que la salida sería exactamente 0, exactamente 0.6, o exactamente 1. Así que si es 0.9, se ajustará a 1. Si es 0.7, se ajustará a 0.6, etcétera. Así que pone valores discretos. Es por eso que este efecto es más roto que suave.

Genial. Así que este es el efecto de vidrio esmerilado. Veamos otro, que es el efecto infrarrojo, que es uno de mis favoritos. Y de nuevo, como puedes ver, código realmente simple. Turbulence y displacement que ya conoces. La principal diferencia que hicimos aquí es, déjame mostrarte la turbulence. En lugar de este ruido completamente aleatorio, sigue siendo ruido. Pero como puedes ver, le di estos diferentes valores de frecuencia para el eje x y el eje y. Es por eso que ves que es más como estas líneas en lugar de puntos. Y es por eso que crea estos bordes, esta perturbación en la imagen.

Y el siguiente, que aún no conoces, es el column matrix, que parece, si vieras este código en cualquier lugar, dirías, no tengo idea de qué son estos números. Son solo números aleatorios. Pero después de escuchar la explicación, sabrás que es bastante fácil. Así que un column matrix, lo que hace, toma cada píxel en la imagen de entrada y lo multiplica por la matriz. Y ahora estás pensando, oh no, multiplicación de matrices. Aprendí esto en mi carrera de informática. En realidad es muy simple. Así que solo copiémoslo aquí para que pueda explicarlo. Así que básicamente, y solo pongámonos de nuevo en una webcam normal. Así que básicamente lo que esto significa es que cada línea aquí solo calcula un canal diferente. Así que la primera línea calculará el canal rojo. La segunda calculará el verde, el azul y el amarillo. Así que estos serán los píxeles de salida. Y las columnas son solo los píxeles de entrada. Así que este es el rojo.

Comentemos esto. Lo siento. Así que esto es solo el rojo, el verde, el azul, el alfa. Y aquí tenemos alguna constante que teníamos. Y esto es solo una función lineal. Así que la salida roja será 1 veces la entrada roja más 1 veces la entrada verde más 1 veces la entrada azul, RGB, más 0 veces la entrada alfa más 0. ¿Qué significa esto? El valor del rojo en el píxel de salida tomará su valor de la intensidad de todos los colores de entrada. Así que si el color original es muy verde, entonces la salida será muy roja. Si el color original es blanco, que tiene 1 en todos los elementos RGB, entonces será un rojo realmente intenso.

Así que mi camisa, por ejemplo, será un rojo realmente intenso. ¿Qué pasa con el verde y el azul? Simplemente los hacemos cero. Así que no hay componente verde, no hay componente azul. Y alfa es solo la ecuación de identidad. Así que la salida alfa es igual a la entrada alfa. Así que de nuevo, después de que te das cuenta de que esto es solo salidas y entradas, funciones lineales muy simples, entonces obtienes este efecto. Y como puedes ver, como mi camisa era blanca, ahora es muy roja. Mi barba es negra, así que es muy oscura. Y puedes jugar con ello. Así que si quisieras, sabes, si simplemente pusiera todo esto en cero y lo hiciera solo azul, entonces obtendremos todo azul. Es realmente simple. O si hacemos esto uno, todo es solo rojo, porque si está por encima de 1, será 1.

Y 1 es solo 255. Bien, así que ahora creo que es hora de que revelemos cómo hicimos el filtro de pantalla verde. Y creo que lo que vamos a hacer es construirlo juntos contigo. Así que copiemos esto tal vez aquí. Bien, así que lo primero que vamos a hacer es que no queremos desplazamiento, ¿verdad? Queremos que todos los píxeles permanezcan donde están. Y ni siquiera queremos cambiar los colores. Lo que queremos hacer es decir, si un píxel es verde, queremos hacerlo transparente. ¿Por qué? Porque en el fondo, hay algo más, digamos una imagen o un video.

Así que si el píxel de la webcam es transparente, entonces puedes ver lo que hay detrás. Así que comencemos con una matriz de color muy simple, donde los valores son las métricas de identidad. Así que la matriz de identidad básicamente dice que cada píxel de entrada se asigna al mismo píxel exacto en la salida. Así que no es una ecuación realmente interesante, solo toma el mismo píxel y los asigna. Estoy buscando algo verde para mostrarte, pero lo encontraré más tarde.

Así que esto básicamente no hace nada, lo cual no es lo que queremos. Queremos un filtro de pantalla verde. Pero lo que queremos es solo afectar esto. Esto es el alfa. Así que, por ejemplo, si hago esto cero, entonces puedes ver que todo es completamente transparente, lo cual no es lo que queremos, ¿verdad? Queremos que todo sea opaco, excepto los píxeles verdes. Así que lo que podemos hacer es decir, está bien, si un píxel es verde, reduzcamos la opacidad. ¿Cómo lo hacemos? Por ejemplo, podemos tomar el píxel verde y multiplicarlo por menos uno. Y ahora obtenemos este efecto extraño donde todo es un poco más oscuro, lo siento, más transparente. Y eso es porque tenemos una función suave, ¿verdad? Si el píxel de entrada es uno en el verde, entonces tendremos menos uno más uno, que es cero, que es completamente transparente. Pero la mayoría de los píxeles tienen, ya sabes, un valor en algún lugar entre cero y uno.

Así que lo que queremos hacer es agregar la transferencia de componentes, una transferencia de componentes discreta como teníamos antes. Y queremos decirle, está bien, los valores deben ser completamente opacos o completamente transparentes, que es básicamente lo que queremos con el filtro de pantalla verde. Pero lo que ves ahora es como mi camisa es blanca. ¿Por qué está haciendo este filtro? Porque el blanco tiene un componente muy fuerte de verde dentro de él, ¿verdad? El blanco es solo 255, o uno verde, uno rojo y uno azul. Así que lo que realmente queremos decir, no solo queremos tomar píxeles con un componente fuerte de verde. Queremos tomar los píxeles donde el componente de verde es mucho más fuerte que los componentes de rojo y azul. Así que lo que podemos hacer es decir, está bien, si el píxel es rojo, agreguemos. Opacidad. Si el píxel es verde, quitemos opacidad. Y si es azul, agreguemos opacidad. Y voy a conseguir algo verde solo para mostrarte. Así que como puedes ver, esto es verde. Pero no vemos ningún efecto. ¿Por qué? Porque el rojo y el azul están ganando.

Y tenemos este, como comenzamos con una base de uno. Así que aumentemos esto a 2. Bien. Y ahora puedes ver que el verde se está volviendo más transparente. Pero si te mostrara algunas cosas, entonces probablemente comenzarías a ver falsos positivos. No sé si puedes verlo en esto. Pero comienzas a ver falsos positivos si tienes cosas que son casi uno o casi verde. Así que lo que puedes hacer es comenzar a jugar con este número. Así que, por ejemplo, si esto fuera, por ejemplo, menos tres, entonces de repente obtienes muchos más falsos positivos. Pero si fuera menos, digamos, uno y medio, entonces tienes muchos más falsos negativos.

Así que básicamente lo que hice después de jugar mucho con los números, llegué a esta fórmula, que es lo que teníamos antes. Y también agregué más peso al uno en la función discreta. Así que básicamente estoy prefiriendo uno sobre cero. Y obtuve esta función y funciona. Lo probé en diferentes fondos y funcionó genial. Muy bien. Así que eso es todo. Ahora sabes cómo funcionan los SVG filters. He escuchado de bastantes empresas que realmente los están usando en producción. Son compatibles con todos los principales navegadores. Y como puedes ver, son muy eficientes. Pueden trabajar en la webcam porque se ejecutan en la GPU. Así que son increíbles.

Y una de las cosas que notarás cuando comiences a trabajar con SVG filters es que es realmente difícil entender a partir de la documentación lo que puedes hacer con ellos. Así que al leer la documentación, no entenderás cómo construir un filtro infrarrojo o frosted glass o lo que sea. Tienes que ser un poco creativo al respecto. Tienes que jugar con ellos, ver qué tipo de efectos obtienes. No es la mentalidad habitual cuando desarrollas algo que el producto te dice, esto es lo que quiero, y piensas cómo lo haces y lo implementas. Aquí es mucho más experimental. Es mucho más creativo. Te da como desarrollador un espíritu mucho más creativo, que es por lo que me gustan tanto. Y como puedes ver, ahora sabes cómo se hace la magia. Espero que lo disfrutes y lo uses y hayas disfrutado la charla y hayas aprendido algo nuevo. Y lo que realmente me gusta de saber trucos de magia es que algo que parecía imposible antes ahora parece muy fácil. Y espero que sientas lo mismo. Y házmelo saber si tienes alguna pregunta. Adiós.