Construye un Sistema Solar 3D con Reconocimiento de Manos y Three.js

Rate this content
Bookmark

Vivimos en tiempos emocionantes. Marcos de trabajo como TensorFlowJS nos permiten aprovechar el poder de los modelos de IA en el navegador, mientras que otros como Three.js nos permiten crear fácilmente mundos 3D. En esta charla veremos cómo podemos combinar ambos, para construir un sistema solar completo, en nuestro navegador, ¡usando nada más que gestos de mano!

Liad Yosef
Liad Yosef
36 min
16 Jun, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla explora el uso de TypeScript, 3JS, reconocimiento de manos y TensorFlow.js para crear experiencias 3D en la web. Cubre temas como la representación de objetos 3D, la adición de luces y objetos, el seguimiento de manos y la creación de gestos interactivos. El orador demuestra cómo construir un cubo y una caja rebotante, mover objetos con gestos de flick y crear un sistema solar con estrellas y planetas. La charla también discute las posibilidades de usar gestos de mano para la navegación web y el control de sitios web, así como los límites de rendimiento de estas tecnologías.

Available in English

1. Introducción a la demo de TypeScript

Short description:

Vamos a entender mejor TypeScript utilizando TypeScript. Vamos a la demo. Hola a todos, bienvenidos de vuelta del almuerzo.

Vamos a entender mejor TypeScript utilizando TypeScript. Vamos a la demo. Hola a todos, bienvenidos de vuelta del almuerzo. Hola a todos los que están viendo la demo. Así que nuestra charla va a ser un poco más agradable, un poco más divertida. Este es el espacio después del almuerzo. Va a ser más ligero. Quiero intentar empezar con algo. Veamos. Permíteme intentar hacer eso. Espera. Uh-oh. Sabes que funcionó cuando... No. Espera un segundo. Siempre funciona diez veces antes del show. Bueno. Y puedo simplemente rotarlo con mis manos. Así que hola, JS Nation. Espero que las otras demos funcionen mejor.

2. Introducción a la charla temática espacial

Short description:

Permíteme presentarme. Soy un arquitecto de front-end y astronauta analógico. Pasemos al tema principal: temática espacial. Discutiremos por qué hablamos de 3JS y reconocimiento de manos. Es importante entender las tecnologías que conocemos y explorar nuevas. Compartiré un mapa de Netflix de tecnologías para aprender. Elegí centrarme en el metaverso y la creación de experiencias 3D. El reconocimiento de manos es crucial para la navegación y permite interacciones geniales como jugar Beat Saber. ¡Vamos a sumergirnos!

Así que permíteme empezar un poco sobre mí. Soy el jefe arquitecto de front-end y entusiasta de la web. Y también soy astronauta analógico para el foro espacial austriaco. Hago misiones analógicas alrededor del mundo. Es un mes de aislamiento en el desierto para probar el equipo espacial y las misiones espaciales. Así que para eso vamos a cambiar la charla al tema principal de la conversación, temática espacial. Lo haremos. Y la primera pregunta que necesitas hacer cuando ves el tema de la conversación, el tema de la charla es por qué. ¿Por qué hablar de 3JS y reconocimiento de manos? ¿Por qué combinar todo junto? ¿Por qué no hacer otra charla sobre módulos de ES modules o otra charla sobre performance en JavaScript? Y es porque hay un gran dicho que dice si tuviera ocho horas para cortar un árbol, pasaría diez horas para cortar un árbol. ¿Cuál es el punto de hablar sobre tecnología? Necesitas entender las tecnologías que conoces para entenderlas mejor, entenderlas perfectamente. Me gusta más esta cita. El universo es mucho más complicado de lo que piensas. Así que no te quedes solo con las tecnologías que conoces. Intenta expandir, intenta explorar otras tecnologías y otros aspectos.

Así que, para eso, hagamos un rápido 20 minutos dentro y fuera de la charla. Entonces, ¿qué pasa si quieres construir un proyecto paralelo? Como yo, ¿verdad? Trabajo con JavaScript todo el tiempo, trabajo con React todo el tiempo, quería experimentar un poco con diferentes tecnologías, así que voy a la web y busco bibliotecas para usar, busco herramientas para usar y hay una plétora de cosas para aprender. Puedes aprender a escribir en Solidity o Unity o TensorFlow o lo que quieras y simplemente te confundes. Realmente no sabes qué elegir. Y entonces, ¿qué hacemos? Simplemente encendemos Netflix, ¿verdad? Bueno, no voy a aprender nada nuevo. Pero podemos usar Netflix como un método para intentar y mapear las tecnologías que queremos aprender, ¿verdad? Así que, te doy el mapa de Netflix de las tecnologías que yo quería explorar. Así que, tienes en la línea superior las cosas que yo recomendaría para mí como desarrollador de JavaScript como performance y hooks y trucos y mobics y juego de lectura. Y en la segunda línea es algo que es un poco más profundo, un poco más complejo, como architecture, mundos de servidores, metaverso. Y hay una línea de shows completos que necesitamos evitar, como NPM list y logger y kit de referencia perdido. Sí, así que, elegí aprender sobre el metaverso porque lo escuché, y dije bien, quiero adentrarme un poco más en él, en el metaverso. Así que, cuando hablo del metaverso, no hablo de estas estafas de NFTs, de las cosas que nadie entiende. Pero estoy pensando en esto. ¿Cómo crear experiencias 3D, verdad? Esto es como una demo de una tienda virtual H&M, y esas son las cosas que quería crear. Y en el metaverso o en esa especie de realidad virtual o AR, sabes que la interfaz de reconocimiento de manos es clave porque esto es lo que usas para navegar. Y puedes hacer cosas realmente geniales con ello, ¿verdad? Puedes, como, jugar un poco de Beat Saber así. No olvides limpiar después de ti mismo.

3. Construyendo Mundos 3D con Gestos de Mano en la Web

Short description:

Puedes crear hermosos mundos 3D utilizando gestos de mano en la web. Tecnologías como Unity, 3JS, gestos de mano, TensorFlow y PyTorch lo permiten. Sin embargo, construir un cubo rotatorio con código WebGL requiere un conocimiento complejo de la teoría 3D y WebGL. Afortunadamente, Three.js abstrae esta complejidad y proporciona una interfaz fácil para los desarrolladores.

Esta es una demostración de Push Metrics. Y puedes hacer cosas súper geniales una vez que tienes una interfaz de reconocimiento de mano. Entonces, quería crear hermosos mundos 3D utilizando solo gestos de mano en la web. Y si aíslo solo las partes importantes, mundos 3D gestos de mano en la web. Si miro las tecnologías que me permiten hacer eso, mundos 3D que pueden usar Unity, 3JS, gestos de mano, TensorFlow y PyTorch en el backend. Y en la web tenemos TFJS, de lo que vamos a hablar pronto.

Entonces, si quiero construir una escena 3D, ves esto, está renderizado por Unreal 5. Esta es una escena renderizada en 3D. No es una película real. Es una demostración para Matrix. Eso es súper impresionante. Y nosotros, como desarrolladores, pensamos, está bien, solo soltaremos algunas líneas, ¿verdad? Y haremos, está bien, crea un paisaje 3D, tenemos bibliotecas para eso y crearemos esta hermosa escena 3D. El problema es que hay muchos tutoriales por ahí que explican cómo construir un cubo rotatorio. Escribe mucho código, y luego hay un cubo rotatorio y luego el último párrafo del tutorial está bien. Hazlo, continúa, después de eso.

Entonces, está bien, no es como en esta charla voy a enseñarte más que cómo construir un cubo, pero al menos eso es algo que queremos profundizar. Y si quieres código algo que es un poco más complejo, entonces necesitas aprender teoría 3D y trabajar con vértices y píxeles y tienes que escribir algo de código WebGL que se ve así. Y lo genial de WebGL es que escribes todo este código y al final obtienes, no, un cubo rotatorio. Entonces, para construir realmente un cubo rotatorio con código WebGL, eso no es fácil y necesitamos algo para abstraer eso. Necesitamos alguna forma para nosotros como desarrolladores de escribir algo que no tengamos que tener un doctorado y matemáticas 3D para escribir.

Entonces, no me rendí. No es algo que quisiera hacer, rendirme. Entonces, está Three.js, Three.js al rescate. Para aquellos de ustedes que conocen Three.js, no conocen Three.js, esa es una biblioteca que sabe abstraer todo el código que acabas de ver y nos permite construirlo con una interfaz fácil. La página de demostración de Three.js, puedes ver muchos ejemplos. La mayoría de ellos o todos ellos son realmente geniales. No entraré en todos ellos. Puedes hacer cosas realmente geniales como este sitio web donde tomas modelos 3D y luego los renderizas. Esto es web.

4. Renderizando Objetos 3D con Three.js

Short description:

Renderiza objetos 3D en la web y cambia el ángulo. La página de portafolio de Bruno Simon es un gran ejemplo. También ofrece un curso de 3.js recomendado. GitHub co-pilot facilita el aprendizaje pero puede ser frustrante. Three.js requiere una escena, cámara y renderizador. Crea una nueva escena, define una cámara de perspectiva y establece los grados, el campo cercano y el campo lejano. Renderiza la escena en un lienzo y proyéctala en una pantalla 2D.

Renderízalos en la web y puedes intentar cambiar el ángulo de las cosas. Lo veremos en un segundo. Otro ejemplo es la página de portafolio de Bruno Simon que está toda renderizada en 3D. Eso es súper increíble. Lo vi hace unos años y me voló la mente. Es jugable. Es interactivo. Es realmente genial. Y Bruno Simon también tiene un curso de 3.js, súper recomendado, donde empieza desde el principio de Three.js, se llama Three.js journey, desde el principio, cómo escribir cómo jugar con cámaras, con luces, con objetos, con lo que quieras y luego te adentras más en la tecnología.

Cuando empecé a escribir Three.js, tenía activado GitHub co-pilot. Escribí cuatro palabras y co-pilot completó todo. Fue súper fácil y súper frustrante intentar aprender una nueva tecnología, donde tienes a co-pilot completando todo, y, sí. Así que co-pilot va a tomar nuestros trabajos, eso es bastante seguro.

Así que hablemos un poco sobre Three.js. ¿Vale? Intentemos desglosarlo en cómo funciona. Así que para renderizar algo en 3D, necesitas tener tres componentes principales. Tienes que tener la escena donde ocurren las cosas, tienes que tener algún tipo de cámara, así, alguien que está viendo la escena, y tienes que tener un renderizador porque al final estás tomando una escena en 3D e intentando proyectarla en una pantalla 2D, así que alguien necesita saber cómo hacer eso. ¿Correcto?

Así que si tomamos esas cosas e intentamos decir, vale, ¿qué necesitamos para cada una de ellas? Así que 3js nos da una interfaz muy bonita para eso. Para crear una escena, creas una nueva escena, eso es todo. La cámara es un poco más complicada pero no tanto complicada. Creas una cámara de perspectiva, eso es para nuestros propósitos, y necesitas definir los grados, ¿verdad?, de la cámara. Necesitas definir el campo cercano, así que todo lo que esté más cerca que el campo cercano no se renderizará, y el campo lejano, que es todo lo que está más lejos que el campo lejano no se renderizará. Y al final, necesitas tener el renderizador que renderiza, toma la escena, toma la cámara, y dice esta es la cámara, esto es lo que mostraré en la pantalla. Así que, de nuevo, súper fácil. Solo defines un lugar en tu sitio o en tu página donde quieres que esté este 3D, lo siento, el lienzo. Luego pones la escena. Así es como se ve la cámara y si intentamos ver cómo proyecta las cosas, entonces puedes ver que tienes la escena 3D a la derecha y puedes ver a la izquierda cómo se proyecta. Esta es la proyección 2D. Estoy tocando este punto porque vamos a volver en la otra dirección pronto. Así es como se ve y al final renderizas la escena.

5. Añadiendo Luces, Objetos e IA con TensorFlow.js

Short description:

En 3GS, puedes agregar fácilmente luces y objetos a tu mundo 3D. Puedes crear resultados geniales como un objeto esférico con el mapa correcto, iluminado y reflejando luz. También puedes cargar modelos desde software como Blender. Usando IA y aprendizaje automático en la web, podemos interactuar con escenas 3GS. TensorFlow.js, una versión de TensorFlow para la web, permite ejecutar modelos de IA en el navegador usando WebGL.

Este es el code y te sorprenderá, pero no crea nada. Nada, ¿verdad? Porque tenemos una escena, tenemos un renderizador, tenemos una cámara, pero no tenemos las cosas importantes en nuestro mundo 3D que son objetos y luces.

Para agregar luces u objetos, eso es súper fácil en 3GS, los defines. Dices que quieres luz ambiental que es la luz que ilumina toda la escena o luz puntual o quiero que apunte a algún lugar. Los objetos, de nuevo, defines la geometría y el material de los objetos y luego simplemente los colocas en algún lugar de la escena.

Si lo haces correctamente, puedes obtener resultados realmente geniales desde el principio, ¿verdad? Puedes tener, por ejemplo, este tipo de objeto esférico con el mapa correcto y tienes eso. Puedes tenerlo iluminado y reflejar la luz y eso es bastante genial. Sí. Vale. Puedes cargar modelos desde cualquier software como Blender o cualquier cosa a 3GS y creo que en realidad hay una charla sobre esto en la charla de mañana. Así que esto es realmente genial y te mostraré cómo se ve.

Entonces, de nuevo, este es nuestro cubo rotatorio pero puedes ver que está completamente renderizado en 3D y puedo jugar con las luces aquí. Puedo jugar con las luces y ves cómo los focos, afectan la iluminación del cubo. Así que puedo mostrarte aquí, puedo mostrarte el foco. Así que ves que estos son los focos y cuando juego con ellos, ves cómo cambian las sombras y la escena se ve diferente. Así que esto es realmente muy simple, muy fácil de hacer. Y puedes hacer cosas incluso más complejas. Esto es de la página de demostración de 3GS. Puedes tener un, juegas con un material y tienes un material reflectante que refleja la escena a su alrededor y luego puedes llegar a esos resultados, que son bastante agradables. Vale. Así que esto fue 3GS, que es agradable, interesante. Ya sabíamos cómo hacer eso.

Pero lo que me interesa más es cómo podemos usar AI o algún tipo de machine learning en la web para interactuar con estas escenas 3GS. Y lo que lo desencadenó fue un tweet de Charlie Gerard, Charlie, donde demostró cómo con gestos de mano puede crear un plugin de Figma para controlar Figma con gestos de mano, lo cual me pareció bastante genial. Así que quería profundizar un poco en esta tecnología.

Entonces, cuando hablamos de AI o machine learning, estamos hablando de bibliotecas como TensorFlow. TensorFlow es un framework para AI y machine learning en el backend, en Python. Y hay una versión de TensorFlow para la web llamada TensorFlow.js por las buenas personas de Google, que puede ejecutar modelos, como modelos de AI en la web, en el navegador, ejecutar inferencias en modelos de AI. ¿Cómo funciona? Con WebGL, el villano del primer acto ahora es el TensorFlow.js. Se ejecuta en tu tarjeta gráfica en la web y eso es bastante asombroso que pueda hacer eso.

6. Explorando TensorFlow.js y el seguimiento de manos

Short description:

Hay mucho que puedes hacer con TensorFlow.js, como jugar juegos web y entrenar modelos para identificar objetos. TensorFlow.js puede funcionar en dispositivos móviles y web utilizando Wasm con WebAssembly. El seguimiento de manos se facilita con el modelo de pose de mano, que devuelve un array de puntos reconocidos que se pueden utilizar para diversas interacciones.

Hay muchas cosas que puedes hacer con TensorFlow.js. Di una charla sobre cómo puedes usar TensorFlow.js para jugar juegos web por ti. Así que aprende a jugar y ganar los juegos por ti, lo cual es agradable.

Hay muchas cosas que puedes hacer con TensorFlow.js. Y también hay un proyecto llamado la máquina enseñable donde definitivamente puedes echarle un vistazo de la gente de Google donde puedes entrenar el modelo en la web para identificar todo tipo de cosas. ¿Recuerdas el hot dog, no hot dog? Ahora puedes hacerlo con perros, lo cual es bastante genial.

Vale. Es como la evolución de TensorFlow.js. Porque correr en la tarjeta gráfica no es algo que puedas hacer en dispositivos móviles o en dispositivos Wicked. Así que sabe cómo correr en Wasm con WebAssembly. Y nos ofrece modelos muy dedicados para el reconocimiento facial o el reconocimiento de todo el cuerpo, lo cual es bastante agradable. Y esos podemos correr en la web. Solo necesitamos pasar un feed de cámara a media pipe y luego tienes esta salida.

Pero estamos interesados en el seguimiento de manos, ¿verdad? Así que tienen un modelo llamado pose de mano donde puedes simplemente pasar un feed de video y lo analiza fotograma a fotograma y luego te devuelve algo. Así que es súper fácil hacer eso. Solo enciendes el detector y creas el detector y luego dices, vale, necesito estimar las manos del video de la cámara. Vale. Genial. ¿Qué devuelve? Devuelve un array de todos los puntos que ha reconocido en la mano. Vale. Así que para cada dedo tienes como cuatro o cinco puntos clave. Y hay un array y se ve así. Así que la imagen de la cámara va a estos puntos, estos puntos clave, y luego puedes usar estos puntos clave para dibujar algo en el lienzo o interactuar con tu aplicación o lo que quieras, lo cual es bastante agradable. Y puedes superponer esos puntos en el video o no. Así que veamos. Veamos eso en acción. Ves, estoy superponiendo esos puntos en el video. No tengo que hacer eso. Solo puedo tener el video y tener esos puntos en algún otro lugar. ¿Vale? Así que esto es lo que podemos hacer.

7. Construyendo un Cubo con Gestos de Mano

Short description:

Construyamos un cubo utilizando gestos de mano. El mejor gesto es un chasquido. Necesitamos identificar el patrón de chasquido comprobando las posiciones de los dedos. Convertimos las coordenadas 2D a 3D para crear una escena. Crear una caja es fácil, solo hay que posicionarla en las coordenadas. Veámoslo en acción.

Magia. Vale. Así que tenemos este increíble poder de controlar la web con nuestras manos, así que construyamos un cubo con este poder. Vale, podemos usar las coordenadas de la mano para crear un nuevo cubo. Recuerda que tenemos las coordenadas de los dedos.

Pero, ¿cuál podría ser el mejor gesto para crear algo? Si hay fans de Marvel por aquí, van a estar molestos, pero este es realmente el mejor gesto para crear algo, ¿verdad? Solo un chasquido. Y si hablamos de un chasquido, profundicemos un poco en lo que significa tener un chasquido. Porque solo obtenemos las coordenadas, recuerda, solo obtenemos las coordenadas de media pipe, pero necesitamos identificar el patrón de chasquido. Si tomamos este movimiento de chasquido, ¿verdad?, podemos dividirlo en dos partes. Una donde los dedos están cerrados, una donde los dedos están lejos. Si chasqueas ahora mismo, verás que primero, el pulgar y el dedo medio están cerrados y luego la punta del pulgar está por encima de la punta del dedo medio. ¿Vale? Eso es importante. Si escribimos una especie de pseudocódigo para eso, entonces podemos detectar primero la distancia entre la punta del pulgar y la punta del dedo medio y luego podemos decir que el pulgar está por encima de la punta del medio. De nuevo, en code es súper fácil. Detectas esto, que es el pulgar y el medio, el pulgar y el dedo medio están cerrados y luego compruebas que están lejos, pero necesitas comprobar que el pulgar está por encima del dedo medio. ¿Vale?

Y luego tienes que hacer algo un poco más complicado porque tienes esas coordenadas 2D, pero queremos de alguna manera crear una escena 3D. Así que necesitamos convertir el vector de 2D a 3D. Lo veremos en un segundo. No es súper fácil, pero no importa. Así que hablemos de cómo pasar de 2D a 3D. Vimos que nuestra cámara puede tomar 3D en 2D, así que para hacer eso, tomamos la proyección de la cámara, la invertimos, simplemente la normalizamos, y realmente no importa. No importa realmente cómo pasar de 2D a 3D, porque puedes hacer lo que hice, y simplemente tomarlo paso a paso. ¿Vale? 2D a 3D no es divertido, pero tienes gente buena en la Web que ya hizo estas matemáticas por ti, y lo único que necesitas hacer es copiar y pegar. Entonces, ¿cómo creamos una caja? Súper fácil, tenemos las coordenadas, ¿verdad? Así que simplemente creamos la caja como vimos antes, geometría, material básico, pero solo necesitamos posicionarlos en las coordenadas que tenemos. Así que la posicionamos en X, Y, y Z. Veámoslo en acción. Y esta vez, es mejor que funcione. Así que veamos si ahora identificará mi chasquido. Espera. APLAUSOS Ahora, tengo que decir, la razón por la que no funciona suavemente es debido a este tipo, que confunde a la cámara.

8. Creando una Caja Saltarina con GreenSock

Short description:

Hagamos la creación de la caja más interesante utilizando la biblioteca GreenSock para animaciones. Podemos usar la función de suavizado de GreenSock para crear un efecto de caja saltarina. Al escalar la caja hasta el 110% y luego reducirla al 90% con GreenSock, parecerá como si se hubiera creado de la nada.

Entonces, sí. De todos modos, crea la caja, lo cual es bastante agradable. Entonces, hiciste esto. Lo cual es agradable. Pero probablemente notaste que es un poco plano, la creación de la caja.

Así que hagamos algo un poco más interesante. Hagámoslo destacar con Gsup o GreenSock. Es una biblioteca para crear animations y puedes hacer cosas realmente asombrosas con ella como esta. Pero lo más interesante que queremos hacer con GreenSock es usar su función de suavizado. Así que GreenSock puede darte una función de suavizado donde puedes decir, quiero que algún tipo de valor vaya elásticamente a otro valor o rebote, o lo que quieras. Entonces, para hacer una caja saltarina, cuando la creamos, solo necesitamos scale hasta el 110% y luego tener Gsup o GreenSock, reducirlo elásticamente al 90%. Así que parece que fue creado de la nada. Esta es la caja saltarina, recuerda eso.

9. Mover Cajas con un Gesto de Flick

Short description:

Ahora, exploremos cómo mover las cajas usando un gesto de flick. La anatomía de un flick implica cerrar las puntas de los dedos pulgar e índice y luego moverlas lejos una de la otra. Para identificar un objeto móvil, verificamos la distancia entre el pulgar y el índice y recorremos todos los elementos en la escena. Una vez que tenemos el candidato para el flick, guardamos la ubicación del pulgar y detectamos cuando se libera el flick. Con el vector de dirección, podemos usar Gsup para animar el movimiento del objeto.

Y ahora queremos alguna forma de moverlo, de mover las cajas alrededor. Entonces, de nuevo, queremos usar un flick. ¿Cuál es la anatomía de un flick? Solo hazlo y lo verás. Primero, las puntas de los dedos pulgar e índice están cerradas, luego las puntas de los dedos pulgar e índice están lejos. Eso es un flick.

De nuevo, pseudocódigo, super fácil. La distancia es pequeña. La distancia es lejana. Números mágicos por todas partes pero es solo prueba y error.

Otra cosa que necesitamos hacer con un flick que no necesitamos hacer con un snap es identificar si algo va a ser móvil porque necesitamos que este objeto se mueva a algún lugar. Entonces, para hacer eso, de nuevo, primero verificamos que el pulgar y el índice están cerca y luego recorremos todos los elementos en la escena y verificamos para cada uno de ellos cuál es su distancia al candidato para el flick que vamos a hacer. De nuevo, obtenemos el vector desde xy, eso es 2D, 3D, pero es lo mismo en todos lados. No es tan difícil.

Y una vez que identificamos que este es el candidato para el flick, necesitamos guardar la ubicación del pulgar. ¿Por qué? Lo veremos en un segundo. Pero necesitamos decir, está bien, esto es lo primero que vamos a hacer con el flick. Y luego necesitamos identificar que el flick se está liberando, ¿verdad? Entonces, la distancia es grande. Y ahora obtenemos el vector, la dirección del flick. Entonces, tenemos el candidato para el flick. Tenemos la ubicación del pulgar. Y tenemos el vector, que de nuevo, es matemática euclidiana, super fácil. Y usaremos a nuestro amigo Gsup aquí para animar el movimiento de la tierra o lo que sea que usemos. Así.

Y veamos eso en acción. Ooh, muchas cajas. Vale. Voy a intentarlo. Veamos si aparece ahora. ¿Lo hace? No. Funciona mucho mejor en mi máquina.

10. Manos Parpadeantes y Demostraciones en Vivo

Short description:

El parpadeo de las manos es causado por el fondo. Permíteme intentar algo más. Ahora intentamos y lo lanzamos. Eso fue un buen ejemplo. Gracias.

Entonces, ves, en realidad, parpadea debido a esto. Así que solo intentaré. Y tal vez. Espera. Oh, habrías estado tan impresionado ahora mismo. Vale. Así que has visto el estallido. Y ahora cuando lo lanzo. El problema que ves aquí, el parpadeo de las manos, es debido al fondo. Y porque reconoce las manos que están aquí. Así que permíteme intentar hacer algo más. Tal vez hacer así. Vale. Así que ahora intentamos y lo lanzamos. Vamos. Impresiónate. Vale. Eso fue un buen ejemplo. ¿Vale? Gracias. Y las demostraciones en vivo son difíciles.

11. Creando Esferas y Estrellas en el Sistema Solar

Short description:

MediaPipe tiene módulos para detectar gestos, pero tuvimos que crear nuestra propia detección de gestos continua. En el Sistema Solar, usamos esferas en lugar de cubos. Crear una esfera con 3JS implica definir su geometría, material y textura. La textura es una imagen de la esfera, y se pueden agregar texturas adicionales. Al agregar una topografía y ajustar el brillo, podemos crear sombras y reflejos realistas. Para crear estrellas, colocamos puntos en una esfera utilizando datos reales de estrellas de nuestra galaxia.

Entonces probablemente pienses para ti mismo, ¿tengo que hacer todas estas matemáticas yo mismo? Así que MediaPipe sí tiene modules o tiene algún tipo de lógica para detectar gestos. Entonces puedes enseñar a MediaPipe a detectar este gesto o este gesto. Pero como necesitábamos algo que sea continuo, tuvimos que hacerlo nosotros mismos.

Bien, ahora vamos al Solar. Queríamos crear un Sistema Solar, con suerte. Así que con Solar, ya no podemos usar cubos. Tenemos que usar esferas. ¿Y cómo creamos una esfera con 3JS? Primero que nada, necesitamos crear un material o geometría de esfera, lo siento, y podemos definir de cuántos triángulos consistirá esta esfera. Y luego tenemos que tener el material de la esfera. Tenemos que tener la textura. ¿Entonces cómo se ve? La textura es en realidad la imagen de la esfera. Y también puedes poner texturas adicionales en ella.

Entonces tenemos la textura, que es cómo se ve la Tierra desde lejos. Y también podemos tener una imagen en blanco y negro que dice cuál es la topografía de la Tierra. Entonces cómo se comportarán las sombras. Así que tenemos una esfera blanca. Ponemos una textura y luego podemos tener esta textura, que es un poco plana. Ponemos una topografía. Y con suerte te darás cuenta de que ahora las montañas tienen sombras. Puedes poner un brillo porque los océanos reflejan la luz de manera diferente que la tierra, ¿verdad? Entonces puedo poner brillo y luego tengo este resplandor. Y puedo agregar otra capa de nubes, lo cual es agradable.

Ahora queremos crear las estrellas. Para crear las estrellas necesitamos crear una esfera y estar dentro de la esfera. Imagina que las estrellas están a tu alrededor. Necesitas que la cámara esté dentro de la esfera. Así que usaremos datos reales de estrellas de nuestra galaxia. Y para la magnitud de la estrella definiremos el tamaño del punto que vamos a poner. Así que simplemente vamos a crear un array de puntos. Y luego simplemente los vamos a poner en la esfera. De nuevo geometría esférica.

12. Creando Estrellas y el Sol

Short description:

Utilizamos un sistema de eventos para crear estrellas, lo que lo hace escalable. Para crear el sol, utilizamos una máquina de estados con gestos de snap. Creamos una luz puntual dentro del sol para iluminar todo. Los gestos de escalado y flick se utilizan para entrar al sol. Introducimos un gesto de giro detectando los ángulos y la dirección de los dedos. El sol gira utilizando un bucle de animación.

Y luego tenemos el campo de estrellas. Ahora es interesante porque usamos snap para crear las cajas antes. Queremos usar snap para crear las estrellas. Entonces, ¿podemos simplemente reemplazar crear caja con crear estrellas, verdad? Pero eso no es bueno. Queremos usar algún tipo de sistema de eventos. Y ahora esto puede ser mucho más escalable. Podemos tener un detector de snap que solo detecta snap. Y simplemente publica el evento de un snap. Y podemos tener en otro lugar, las estrellas simplemente se suscriben al snap y crean las estrellas.

Bueno, esto va a ser realmente útil más tarde. Para crear el sol, es un poco más complicado. Ahora necesitamos algún tipo de máquina de estados, primer snap para las estrellas, segundo snap para el sol. Entonces, ¿cuál es la máquina de estados más compleja que puedes pensar? No, simplemente usamos un switch case porque de nuevo, proyecto lateral de fin de semana. Entonces, creamos las estrellas, luego pasamos al sol, luego al fin de los tiempos.

Para crear el sol, creamos una luz puntual que está dentro del sol e iluminará todo a su alrededor. Y para entrar al sol, de nuevo, lo haremos estallar, ¿verdad? Scale al 110%, luego scale de vuelta al 90%. Bueno, necesitamos hacer un flick al centro, lo cual es súper fácil con el sol porque tenemos eventos, ¿recuerdas? Entonces, necesitamos suscribirnos al flick y necesitamos mover el sol a 0000, el centro de la escena. Y el último gesto que quería introducir es hacer que gire, hacer que el sol, como, se gire a sí mismo. Entonces, veamos la anatomía de un giro. Necesitas detectar el dedo recto, luego necesitas encontrar el elemento superpuesto, ¿verdad?, que es, de nuevo, fácil. Y luego, necesitas detectar el dedo recto y diagonal. Entonces, necesita ser recto, pero el ángulo no debería ser de 180 grados. Y luego necesitas desencadenar el evento del giro para ese elemento. ¿Y cómo giramos? Necesitamos identificar si es la mano derecha o la izquierda para saber la dirección del giro. De nuevo, los eventos son increíbles. Y luego tenemos el bucle de animación que simplemente dice, bueno, el sol necesita girar con algún tipo de velocidad. Entonces, en cada cuadro de animation, simplemente añado la velocidad a la rotación del sol. Se ve así. Es realmente, realmente simple.

13. Creando Estrellas, Sol, Tierra y Marte

Short description:

Solo lo pones en un conjunto de rotación, y luego el bucle de animación lo hace girar. Intentemos crear las estrellas. Algo no funciona. Ahora intentemos crear nuestro sol. Crear la Tierra es súper fácil. También necesitamos agregar Marte. Añadiremos otro gesto que es rotar toda la escena con nuestras manos. Veámoslo todo. Y ahora... Buenas energías. Vale. Vamos.

Solo lo pones en un conjunto de rotación, y luego el bucle de animation lo hace girar. Y de nuevo, disculpas por adelantado.

Bien, intentemos crear las estrellas. No. Espera. Algo no funciona. Oh, tal vez el cordón lo está empeorando.

Ahora intentemos crear nuestro sol. Oh... No. No. Gracias.

Bien, crear la Tierra es súper fácil. No necesitas siete días, necesitas siete segundos porque tenemos este switch case, simplemente agregamos la Tierra y luego necesitamos de alguna manera ponerla en órbita. Para ponerla en órbita, la lanzaremos con un flick, pero necesitamos lanzarla solo a Y igual a cero, ¿verdad? Así que no necesitamos lanzarla al centro, solo al mismo plano que el sol. Y luego tenemos que tener algún tipo de bucle para hacerla girar alrededor del sol, así que, de nuevo, cada cuadro de animation simplemente se añadirá al ángulo de la Tierra.

Bien, no, no veremos porque también necesitamos agregar Marte, ¿verdad? Nos olvidamos de Marte. Para agregar Marte, simplemente lo añadimos al switch case. De nuevo, es súper fácil hacer eso. Y añadiremos otro gesto que es rotar toda la escena con nuestras manos. Así que para rotar todo, solo necesitamos detectar los dedos rectos. Así que sé que quiero hacer algo así, como en Minority Report. Así que todo está recto y vertical. Y luego necesito detectar el movimiento de los dedos para cambiar la cámara. Ya sea para rotarla o para ir hacia atrás y hacia adelante.

Bien, veámoslo todo. Y ahora... Buenas energías. Vale. Vamos.

14. Creando la Demostración del Sistema Solar

Short description:

Esto puede llevar un tiempo. Ve a buscar los sándwiches. Lo siento, no sé por qué está tardando tanto. Puedes chasquear conmigo. Primero el Sol. Luego flick. Giro. Tierra. Flick. Vamos Marte. Elon cuenta contigo. Giro.

Esto puede llevar un tiempo. Ve a buscar los sándwiches.

Espera. Lo siento, no sé por qué está tardando tanto. Sí, no debería.

Espera, espera, espera. Sí, puedes chasquear conmigo. Vale. Uno. Chasquea conmigo. Ayudará. Buen trabajo. Vamos. Podría haber sido una demostración realmente genial. Bueno, vale. Primero el Sol. Luego flick. Giro. Giro. Tierra. Giro. Flick. Atrás, atrás, atrás, atrás, atrás. Espera. Espera, espera, espera. Vamos Marte. Vamos Marte. Elon cuenta contigo. Vamos Marte. Giro.

15. Creando Gestos con la Mano y Explorando Posibilidades

Short description:

Y... Espera. Vamos. Es menos extraño de lo que parece. Una última oportunidad, Marte. Vamos. Marte no girará hoy. Pero tal vez podamos hacerlo saltar. Ahora podemos usar nuestra mano para rotar. Podemos usar la segunda mano para mover la cámara de adelante hacia atrás. Esto es genial. Hay un chico llamado Oz Ramos que usa gestos con la mano para navegar por la web y controlar sitios web. También podemos crear un avatar que se mueve de acuerdo a tu cámara web. Si esto fue demasiado, podemos volver a Netflix y relajarnos con un avatar familiar.

Y... Espera. Vamos. Quiero decir. Es menos extraño de lo que parece. Vale. Una última oportunidad, Marte. Vamos. Y perdí mi mano. Vale, Marte no girará hoy. Pero tal vez podamos hacerlo saltar. ¿Dónde está mi mano? En fin.

Ahora podemos usar nuestra mano para rotar. Y podemos usar la segunda mano. Cuando sea reconocida. Para mover la cámara de adelante hacia atrás. ¿Verdad? Entonces, esta es nuestra escena. Sí. Fue bastante divertido crearla.

¿Y a dónde vamos? Gracias. Aplausos. ¿A dónde vamos desde aquí? Increíble. Sí. Vale. Esto es genial. Hay muchas cosas que podemos hacer con esto. Hay un chico llamado Oz Ramos que usa gestos con la mano para navegar por la web y controlar sitios web, lo cual es bastante genial. Y podemos hacer cosas realmente geniales con el reconocimiento del cuerpo, como crear un avatar que se mueve de acuerdo a tu cámara web. Si esto fue demasiado, porque hay muchas cosas que asimilar, podemos volver a Netflix y simplemente relajarnos con un avatar familiar y agradable. Y eso es todo.

QnA

Preguntas y Respuestas sobre los Límites de Rendimiento y Cambio de Ponentes

Short description:

El futuro es increíble. Eres increíble. Muchas gracias. Gracias. Gracias. Muchas gracias. Vamos a dar otra ronda de aplausos. Ahora, pido amablemente a nuestro equipo de AV que ponga las preguntas en el escenario. Recuerdo la principal pregunta de la audiencia: ¿cuáles son los límites para el rendimiento? 3JS utiliza GPUs para renderizar escenas de manera fluida. Encuentra a Liat en el área de chat híbrido o pregunta de forma remota. Ahora, cambiamos rápidamente al siguiente ponente. Whoa, whoa, whoa. Ah, ah, ah, ah. Ah, ah, ah, ah. Ah, ah, ah, ah.

El futuro es increíble. Eres increíble. Y mi code está allí. Funciona mucho mejor cuando no se hace una demostración en vivo. Muchas gracias. Gracias. Gracias. Muchas gracias. Hiciste una demostración en vivo muy buena. Vamos a dar otra ronda de aplausos. Sí.

Ahora, pido amablemente a nuestro equipo de AV que ponga las preguntas en el escenario. Creo que tenemos tiempo para quizás una de ellas. ¿Tenemos? Vale. Problemas técnicos pero recuerdo la pregunta. Recuerdo la principal pregunta de la audiencia que es cuáles son los límites para el performance. ¿Hay alguna posibilidad de renderizar algo realmente costoso en el navegador? ¿Cuál es tu experiencia con eso? Sí. Entonces, hay muchas consideraciones de performance cuando intentas renderizar algo con javascript. Pero 3JS utiliza GPUs. Así que si logras hacer que la GPU renderice la escena es muy fluido. De hecho, cuando construí la demo no utilicé GPUs y fue un poco entrecortado, pero con GPUs es súper fluido. Vale. Genial, genial, genial. Y aprovecha la oportunidad para encontrar a Liat en el área de chat híbrido y las personas que nos ven de forma remota tienen la oportunidad de preguntarle a Liat también. Sí, ahora cambiamos rápidamente al siguiente ponente.

Vamos, vamos, vamos. Whoa, whoa, whoa. Ah, ah, ah, ah. Ah, ah, ah, ah. Ah, ah, ah.

Interacción con la Audiencia y Emoción

Short description:

Ah, ah, ah. Vamos, vamos. Eh, eh, eh.

Ah, ah, ah. Ah, ah, ah. Ah, ah, ah. Ah, ah, ah.

Vamos, vamos. Vamos, vamos. Ah, ah, ah. Ah, ah, ah. Ah, ah, ah. Ah, ah, ah. Ah, ah, ah. Ah, ah, ah.

Vamos, vamos. Vamos, vamos. Eh, eh, eh. Eh, eh. Eh, eh. Eh, eh. Eh, eh. Eh, eh. Eh, eh. Eh, eh.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Charlie Gerard's Career Advice: Be intentional about how you spend your time and effort
6 min
Charlie Gerard's Career Advice: Be intentional about how you spend your time and effort
Featured Article
Charlie Gerard
Jan Tomes
2 authors
When it comes to career, Charlie has one trick: to focus. But that doesn’t mean that you shouldn’t try different things — currently a senior front-end developer at Netlify, she is also a sought-after speaker, mentor, and a machine learning trailblazer of the JavaScript universe. "Experiment with things, but build expertise in a specific area," she advises.

What led you to software engineering?My background is in digital marketing, so I started my career as a project manager in advertising agencies. After a couple of years of doing that, I realized that I wasn't learning and growing as much as I wanted to. I was interested in learning more about building websites, so I quit my job and signed up for an intensive coding boot camp called General Assembly. I absolutely loved it and started my career in tech from there.
 What is the most impactful thing you ever did to boost your career?I think it might be public speaking. Going on stage to share knowledge about things I learned while building my side projects gave me the opportunity to meet a lot of people in the industry, learn a ton from watching other people's talks and, for lack of better words, build a personal brand.
 What would be your three tips for engineers to level up their career?Practice your communication skills. I can't stress enough how important it is to be able to explain things in a way anyone can understand, but also communicate in a way that's inclusive and creates an environment where team members feel safe and welcome to contribute ideas, ask questions, and give feedback. In addition, build some expertise in a specific area. I'm a huge fan of learning and experimenting with lots of technologies but as you grow in your career, there comes a time where you need to pick an area to focus on to build more profound knowledge. This could be in a specific language like JavaScript or Python or in a practice like accessibility or web performance. It doesn't mean you shouldn't keep in touch with anything else that's going on in the industry, but it means that you focus on an area you want to have more expertise in. If you could be the "go-to" person for something, what would you want it to be? 
 And lastly, be intentional about how you spend your time and effort. Saying yes to everything isn't always helpful if it doesn't serve your goals. No matter the job, there are always projects and tasks that will help you reach your goals and some that won't. If you can, try to focus on the tasks that will grow the skills you want to grow or help you get the next job you'd like to have.
 What are you working on right now?Recently I've taken a pretty big break from side projects, but the next one I'd like to work on is a prototype of a tool that would allow hands-free coding using gaze detection. 
 Do you have some rituals that keep you focused and goal-oriented?Usually, when I come up with a side project idea I'm really excited about, that excitement is enough to keep me motivated. That's why I tend to avoid spending time on things I'm not genuinely interested in. Otherwise, breaking down projects into smaller chunks allows me to fit them better in my schedule. I make sure to take enough breaks, so I maintain a certain level of energy and motivation to finish what I have in mind.
 You wrote a book called Practical Machine Learning in JavaScript. What got you so excited about the connection between JavaScript and ML?The release of TensorFlow.js opened up the world of ML to frontend devs, and this is what really got me excited. I had machine learning on my list of things I wanted to learn for a few years, but I didn't start looking into it before because I knew I'd have to learn another language as well, like Python, for example. As soon as I realized it was now available in JS, that removed a big barrier and made it a lot more approachable. Considering that you can use JavaScript to build lots of different applications, including augmented reality, virtual reality, and IoT, and combine them with machine learning as well as some fun web APIs felt super exciting to me.


Where do you see the fields going together in the future, near or far? I'd love to see more AI-powered web applications in the future, especially as machine learning models get smaller and more performant. However, it seems like the adoption of ML in JS is still rather low. Considering the amount of content we post online, there could be great opportunities to build tools that assist you in writing blog posts or that can automatically edit podcasts and videos. There are lots of tasks we do that feel cumbersome that could be made a bit easier with the help of machine learning.
 You are a frequent conference speaker. You have your own blog and even a newsletter. What made you start with content creation?I realized that I love learning new things because I love teaching. I think that if I kept what I know to myself, it would be pretty boring. If I'm excited about something, I want to share the knowledge I gained, and I'd like other people to feel the same excitement I feel. That's definitely what motivated me to start creating content.
 How has content affected your career?I don't track any metrics on my blog or likes and follows on Twitter, so I don't know what created different opportunities. Creating content to share something you built improves the chances of people stumbling upon it and learning more about you and what you like to do, but this is not something that's guaranteed. I think over time, I accumulated enough projects, blog posts, and conference talks that some conferences now invite me, so I don't always apply anymore. I sometimes get invited on podcasts and asked if I want to create video content and things like that. Having a backlog of content helps people better understand who you are and quickly decide if you're the right person for an opportunity.What pieces of your work are you most proud of?It is probably that I've managed to develop a mindset where I set myself hard challenges on my side project, and I'm not scared to fail and push the boundaries of what I think is possible. I don't prefer a particular project, it's more around the creative thinking I've developed over the years that I believe has become a big strength of mine.***Follow Charlie on Twitter
TensorFlow.js 101: ML in the Browser and Beyond
ML conf EU 2020ML conf EU 2020
41 min
TensorFlow.js 101: ML in the Browser and Beyond
Discover how to embrace machine learning in JavaScript using TensorFlow.js in the browser and beyond in this speedy talk. Get inspired through a whole bunch of creative prototypes that push the boundaries of what is possible in the modern web browser (things have come a long way) and then take your own first steps with machine learning in minutes. By the end of the talk everyone will understand how to recognize an object of their choice which could then be used in any creative way you can imagine. Familiarity with JavaScript is assumed, but no background in machine learning is required. Come take your first steps with TensorFlow.js!
TresJS, a declarative way of creating 3D scenes from Vue components
Vue.js London 2023Vue.js London 2023
27 min
TresJS, a declarative way of creating 3D scenes from Vue components
Meet TresJS ▲ ■ ●, a declarative way of bringing the magic of ThreeJS using everyday Vue Components and composables. Think of it as React-three-fiber or Lunchbox but without the need of a custom renderer. It just works.Are you ready to add a new dimension to your Vue Apps?
From Blender to the Web - the Journey of a 3D Model
React Advanced Conference 2021React Advanced Conference 2021
27 min
From Blender to the Web - the Journey of a 3D Model
Top Content
Creating 3D experiences in the web can be something that sounds very daunting. I'm here to remove this idea from your mind and show you that the 3D world is for everyone. For that we will get a model from the 3D software Blender into the web packed with animations, accessibility controls and optimised for web use so join me in this journey as we make the web more awesome.
Making “Bite-Sized” Web Games with GameSnacks
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Making “Bite-Sized” Web Games with GameSnacks
Top Content
One of the great strengths of gaming on the web is how easily accessible it can be. However, this key advantage is often negated large assets and long load times, especially on slow mobile connections. In this talk, Alex Hawker from Google’s GameSnacks will illustrate how they are tackling this problem and some key learnings the team found while optimizing third party games and designing their own ultra-lightweight game engine.
TensorFlow.JS 101: ML in the Browser and Beyond
JSNation Live 2021JSNation Live 2021
39 min
TensorFlow.JS 101: ML in the Browser and Beyond
Discover how to embrace machine learning in JavaScript using TensorFlow.js in the browser and beyond in this speedy talk. Get inspired through a whole bunch of creative prototypes that push the boundaries of what is possible in the modern web browser (things have come a long way) and then take your own first steps with machine learning in minutes. By the end of the talk everyone will understand how to recognize an object of their choice which could then be used in any creative way you can imagine. Familiarity with JavaScript is assumed, but no background in machine learning is required. Come take your first steps with TensorFlow.js!

Workshops on related topic

How to make amazing generative art with simple JavaScript code
JS GameDev Summit 2022JS GameDev Summit 2022
165 min
How to make amazing generative art with simple JavaScript code
Top Content
WorkshopFree
Frank Force
Frank Force
Instead of manually drawing each image like traditional art, generative artists write programs that are capable of producing a variety of results. In this workshop you will learn how to create incredible generative art using only a web browser and text editor. Starting with basic concepts and building towards advanced theory, we will cover everything you need to know.
Introduction to WebXR with Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introduction to WebXR with Babylon.js
Workshop
Gustavo Cordido
Gustavo Cordido
In this workshop, we'll introduce you to the core concepts of building Mixed Reality experiences with WebXR and Balon.js.
You'll learn the following:- How to add 3D mesh objects and buttons to a scene- How to use procedural textures- How to add actions to objects- How to take advantage of the default Cross Reality (XR) experience- How to add physics to a scene
For the first project in this workshop, you'll create an interactive Mixed Reality experience that'll display basketball player stats to fans and coaches. For the second project in this workshop, you'll create a voice activated WebXR app using Balon.js and Azure Speech-to-Text. You'll then deploy the web app using Static Website Hosting provided Azure Blob Storage.
Intro to AI for JavaScript Developers with Tensorflow.js
JSNation Live 2021JSNation Live 2021
81 min
Intro to AI for JavaScript Developers with Tensorflow.js
Workshop
Chris Achard
Chris Achard
Have you wanted to explore AI, but didn't want to learn Python to do it? Tensorflow.js lets you use AI and deep learning in javascript – no python required!
We'll take a look at the different tasks AI can help solve, and how to use Tensorflow.js to solve them. You don't need to know any AI to get started - we'll start with the basics, but we'll still be able to see some neat demos, because Tensorflow.js has a bunch of functionality and pre-built models that you can use on the server or in the browser.
After this workshop, you should be able to set up and run pre-built Tensorflow.js models, or begin to write and train your own models on your own data.
Hands on with TensorFlow.js
ML conf EU 2020ML conf EU 2020
160 min
Hands on with TensorFlow.js
Workshop
Jason Mayes
Jason Mayes
Come check out our workshop which will walk you through 3 common journeys when using TensorFlow.js. We will start with demonstrating how to use one of our pre-made models - super easy to use JS classes to get you working with ML fast. We will then look into how to retrain one of these models in minutes using in browser transfer learning via Teachable Machine and how that can be then used on your own custom website, and finally end with a hello world of writing your own model code from scratch to make a simple linear regression to predict fictional house prices based on their square footage.