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

Rate this content
Bookmark

Vivimos en tiempos emocionantes. Frameworks 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 solo gestos de mano!

36 min
16 Jun, 2022

Video Summary and Transcription

Esta charla explora el uso de TypeScript, 3JS, reconocimiento de mano y TensorFlow.js para crear experiencias 3D en la web. Cubre temas como renderizar objetos 3D, agregar luces y objetos, seguimiento de mano y crear gestos interactivos. El orador demuestra cómo construir un cubo y una caja saltarina, mover objetos con gestos rápidos 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 demostración de TypeScript

Short description:

Vamos a darle más sentido a TypeScript utilizando TypeScript. Vamos a la demostración. Hola a todos, bienvenidos de vuelta del almuerzo.

Vamos a darle más sentido a TypeScript utilizando TypeScript. Vamos a la demostración. Hola a todos, bienvenidos de vuelta del almuerzo. Hola a todos los que están viendo la demostración. 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 comenzar con algo. Veamos. Déjame intentar hacer eso. Espera. Uh-oh. Sabes que funcionó cuando ... No. Espera un segundo. Siempre funciona diez veces antes del espectáculo. De acuerdo. Bueno, y puedo girarlo con mis manos. Así que hola, JS Nation. Espero que las otras demostraciones funcionen mejor.

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

Short description:

Permítanme presentarme. Soy un arquitecto de front-end y astronauta analógico. Cambiemos 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 tecnologías de Netflix para aprender. Elegí centrarme en el metaverso y crear experiencias en 3D. El reconocimiento de manos es crucial para la navegación y permite interacciones geniales como jugar Beat Saber. ¡Sumergámonos en ello!

Permítanme comenzar hablando un poco sobre mí. Soy el arquitecto principal de front-end y entusiasta de la web. También soy astronauta analógico para el Foro Espacial Austriaco. Realizo misiones analógicas en todo el mundo. Consisten en un mes de aislamiento en el desierto para probar equipos y misiones espaciales. Ahora cambiaremos el tema de la charla a la temática espacial. Lo haremos. Y la primera pregunta que deben hacerse cuando ven el tema de la charla es por qué. ¿Por qué hablar de 3JS y reconocimiento de manos? ¿Por qué combinar todo esto? ¿Por qué no hablar de otro tema como los módulos de ES o el rendimiento en JavaScript? Y es porque hay un gran dicho que dice: si tuviera ocho horas para cortar un árbol, pasaría diez horas afilando el hacha. ¿Cuál es el punto de hablar sobre tecnología? Necesitas entender las tecnologías que conoces para comprenderlas 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 expandirte, explorar otras tecnologías y otros aspectos.

Entonces, para eso, hagamos una breve introducción de 20 minutos a la charla. ¿Qué sucede si quieres construir un proyecto personal? Como yo, ¿vale? Trabajo con JavaScript todo el tiempo, trabajo con React todo el tiempo, pero quería experimentar un poco con diferentes tecnologías, así que busco en la web bibliotecas y herramientas para usar, y hay una gran cantidad de cosas para aprender. Puedes aprender a escribir en Solidity, Unity, TensorFlow o lo que quieras, y simplemente te confundes. No sabes realmente qué elegir. Y luego, ¿qué hacemos? Encendemos Netflix, ¿verdad? Vale, no voy a aprender nada nuevo. Pero podemos usar Netflix como un método para intentar mapear las tecnologías que queremos aprender, ¿no? Te presento el mapa de tecnologías de Netflix que quería explorar. En la línea superior, tienes las cosas que recomiendo para mí como desarrollador de JavaScript, como rendimiento, hooks, trucos y MobX. Y en la segunda línea, hay algo un poco más profundo, un poco más complejo, como arquitectura, servidores mundiales, metaverso. Y hay una línea de programas completos que debemos evitar, como la lista de NPM, el registro y el kit de referencia faltante. Sí, elegí aprender sobre el metaverso porque había oído hablar de él y dije: vale, quiero adentrarme un poco más en él, en el metaverso. Así que cuando hablo del metaverso, no me refiero a esas cosas de estafas de NFT, a cosas que nadie entiende. Pero estoy pensando en esto. ¿Cómo crear experiencias en 3D, verdad? Esto es como una demostración de una tienda virtual de H&M, y esas son las cosas que quería crear. Y en el metaverso o en ese tipo de realidad virtual o RA, sabes que la interfaz de reconocimiento de manos es clave porque es lo que usas para navegar. Y puedes hacer cosas realmente geniales con eso, ¿verdad? Puedes jugar a Beat Saber así. No te olvides de limpiar después de ti.

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 hacen posible. Sin embargo, construir un cubo giratorio con código WebGL requiere una teoría 3D compleja y conocimientos de 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. Así que, quería crear hermosos mundos 3D utilizando solo gestos de mano en la web. Y si aislo solo las partes importantes, mundos 3D gestos de mano en la web. Si observo 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, del que hablaremos pronto.

Entonces, si quiero construir alguna escena 3D, ves esta cosa, está renderizada por Unreal 5. Esta es una escena renderizada en 3D. No es una película real. Es una demostración para la matriz. Eso es súper impresionante. Y nosotros, como desarrolladores, pensamos, bueno, solo agregaremos algunas líneas, ¿verdad? Y haremos, bueno, crear 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 giratorio. Escribes mucho código y luego hay un cubo giratorio y luego el último párrafo del tutorial es bueno. Hazlo, continúa, después de eso.

Entonces, está bien, no es como si en esta charla fuera a enseñarte más que cómo construir un cubo, pero al menos eso es algo en lo que queremos profundizar. Y si quieres codificar algo 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 giratorio. Entonces, para construir realmente un cubo giratorio con código WebGL, eso no es fácil y necesitamos algo que abstraiga eso. Necesitamos alguna forma de que nosotros, como desarrolladores, escribamos algo que no tengamos que tener un doctorado en matemáticas 3D para escribir.

Entonces, no me rendí. No es algo que quisiera hacer, rendirme. Así que, ahí 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 recomendado de 3.js. GitHub co-pilot facilita el aprendizaje pero puede ser frustrante. Three.js requiere una escena, una cámara y un 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á completamente renderizada en 3D. Eso es súper asombroso. Lo vi hace unos años y me dejó impresionado. Es jugable. Es interactivo. Es realmente genial. Y Bruno Simon también tiene un curso de 3.js, muy recomendado, donde comienza 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 profundizas en la tecnología.

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

Así que hablemos un poco sobre Three.js. ¿De acuerdo? Intentemos desglosarlo en cómo funciona. 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, alguien que esté observando la escena, y tienes que tener un renderizador porque eventualmente estás tomando una escena 3D y tratando de proyectarla en una pantalla 2D, así que alguien necesita saber cómo hacer eso. ¿Correcto?

Entonces, si tomamos esas cosas y tratamos de decir, okay, ¿qué necesitamos para cada una de ellas? 3js nos brinda una interfaz realmente agradable para eso. Para crear una escena, creas una nueva escena, eso es todo. La cámara es un poco más complicada pero no tan 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 eventualmente, 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 colocas la escena. Luego 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 mencionando esto porque pronto volveremos en la otra dirección. Así es como se ve y eventualmente renderizas la escena.

5. Añadiendo Luces, Objetos y 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 de 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 utilizando WebGL.

Este es el código y te sorprenderás, 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 ambiente, que es la luz que ilumina toda la escena, o luz puntual o que quieres que apunte a algún lugar. Objetos, nuevamente, defines la geometría y el material de los objetos y luego 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 lo tienes. Puedes iluminarlo y reflejar la luz y eso es bastante genial. Sí. De acuerdo. Puedes cargar modelos desde cualquier software como Blender o cualquier otro 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, nuevamente, este es nuestro cubo giratorio pero puedes ver que está completamente renderizado en 3D y puedo jugar con las luces aquí. Puedo jugar con las luces y ver cómo las luces de foco, afectan la iluminación del cubo. Así que puedo mostrarte aquí, puedo mostrarte la luz de foco. Entonces ves que estas son las luces de foco y cuando juego con ellas, ves cómo cambian las sombras y la escena se ve diferente. Así que esto es realmente algo muy simple, muy fácil de hacer. E incluso puedes hacer cosas más complejas. Esto es de la página de demostración de 3GS. Puedes jugar con un material y tener un material reflectante que refleje la escena a su alrededor y luego puedes obtener esos resultados, que son bastante agradables. De acuerdo. Así fue 3GS, que es agradable e interesante. Ya sabíamos cómo hacer eso.

Pero lo que me interesa más es cómo podemos usar IA o algún tipo de aprendizaje automático 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 complemento de Figma para controlar Figma con gestos de mano, lo cual me pareció bastante genial. Así que quería adentrarme un poco en esta tecnología.

Cuando hablamos de IA o aprendizaje automático, estamos hablando de bibliotecas como TensorFlow. TensorFlow es un marco para IA y aprendizaje automático en el backend, en Python. Y hay una versión de TensorFlow para la web llamada TensorFlow.js creada por las buenas personas de Google, que puede ejecutar modelos, como modelos de IA en la web, en el navegador, ejecutar inferencias en modelos de IA. ¿Cómo funciona? Con WebGL, el villano del primer acto ahora es 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 Seguimiento de Mano

Short description:

Hay muchas cosas que puedes hacer con TensorFlow.js, como jugar juegos web y entrenar modelos para identificar objetos. TensorFlow.js puede ejecutarse en dispositivos móviles y web utilizando Wasm con WebAssembly. El seguimiento de mano se facilita con el modelo de pose de mano, que devuelve una matriz 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 cómo jugar y ganar los juegos por ti, lo cual es genial.

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

De acuerdo. Es como la evolución de TensorFlow.js. Porque ejecutar en la tarjeta gráfica no es algo que puedas hacer en dispositivos móviles o en dispositivos Wicked. Así que sabe cómo ejecutarse en Wasm con WebAssembly. Y nos brinda modelos muy dedicados para reconocimiento facial o reconocimiento de cuerpo completo, lo cual es bastante bueno. Y esos podemos ejecutarlos en la web. Solo necesitamos pasar una alimentación de cámara a media pipe y luego tienes esta salida.

Pero estamos interesados en el seguimiento de mano, ¿verdad? Entonces tienen un modelo llamado pose de mano donde solo puedes pasar una alimentación de video y lo analiza fotograma a fotograma y luego te devuelve algo. Así que es súper fácil hacer eso. Solo activas el detector y creas el detector y luego dices, de acuerdo, necesito estimar las manos del video de la cámara. De acuerdo. Genial. ¿Qué devuelve? Devuelve una matriz de todos los puntos que ha reconocido en la mano. De acuerdo. Así que para cada dedo tienes como cuatro o cinco puntos clave. Y hay una matriz y se ve así. Entonces 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 bueno. 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. Puedo tener solo el video y tener esos puntos en otro lugar. ¿De acuerdo? Así es lo que podemos hacer.

7. Construyendo un Cubo con Gestos de Mano

Short description:

Vamos a construir un cubo usando gestos de mano. El mejor gesto es un chasquido. Necesitamos identificar el patrón de chasquido verificando las posiciones de los dedos. Convertimos las coordenadas 2D a 3D para crear una escena. Crear una caja es fácil, simplemente la posicionamos en las coordenadas. Veámoslo en acción.

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

Pero ¿cuál puede ser el mejor gesto para crear algo? Si hay fans de Marvel aquí, se van a molestar, 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 MediaPipe, 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 separados. Si chasqueas ahora mismo, verás que el pulgar y el dedo medio están cerrados y luego la punta del pulgar está por encima de la punta del dedo medio. ¿De acuerdo? Eso es importante. Si escribimos un 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 media. Nuevamente, en código es súper fácil. Detectas esto, que el pulgar y el dedo medio están cerrados y luego verificas que están separados, pero debes verificar que el pulgar está por encima del dedo medio. ¿De acuerdo?

Y luego tienes que hacer algo un poco más complicado porque tienes esas coordenadas 2D, pero queremos crear de alguna manera 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 convertir 3D en 2D, así que para hacer eso, tomamos la proyección de la cámara, la invertimos, simplemente la normalizamos y no importa realmente. No importa cómo pasar de 2D a 3D, porque puedes hacer lo que hice yo, y simplemente ir paso a paso. ¿De acuerdo? Pasar de 2D a 3D no es divertido, pero tienes buenas personas en la web que ya hicieron esta matemática 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 posicionarla en las coordenadas que tenemos. Así que la posicionamos en X, Y y Z. Veámoslo en acción. Y esta vez, mejor que funcione. Así que veamos si identificará mi chasquido ahora. Espera. APLAUSOS Ahora, tengo que decir, la razón por la que no funciona sin problemas es por este tipo, que confunde a la cámara.

8. Creando una Caja Saltarina con GreenSock

Short description:

Vamos a hacer la creación de la caja más interesante utilizando la biblioteca GreenSock para animaciones. Podemos usar la función de interpolación de GreenSock para crear un efecto de caja saltarina. Al escalar la caja al 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 bueno. Así que hiciste esto. Lo cual es bueno. Pero probablemente hayas notado que es un poco plano, la creación de la caja.

Así que hagamos algo un poco más interesante. Hagámosla destacar con Gsup o GreenSock. Es una biblioteca para crear animaciones y puedes hacer cosas realmente sorprendentes con ella, como esto. Pero lo más interesante que queremos hacer con GreenSock es usar su función de interpolación. GreenSock puede proporcionarte una función de interpolación donde puedes decir, quiero que algún valor vaya elásticamente hacia otro valor o que rebote, o lo que quieras. Entonces, para hacer una caja saltarina, cuando la creamos, solo necesitamos escalarla al 110% y luego hacer que Gsup o GreenSock la reduzca elásticamente al 90%. Así parecerá como si se hubiera creado de la nada. Esta es la caja saltarina, recuerda eso.

9. Moviendo Cajas con un Gestor de Sacudida

Short description:

Ahora, exploremos cómo mover las cajas utilizando un gesto de sacudida. La anatomía de una sacudida implica cerrar el pulgar y los dedos índices y luego separarlos. Para identificar un objeto móvil, verificamos la distancia entre el pulgar y los dedos índices e iteramos a través de todos los elementos en la escena. Una vez que tenemos el candidato a sacudida, guardamos la ubicación del pulgar y detectamos cuando se libera la sacudida. Con el vector de dirección, podemos usar Gsup para animar el movimiento del objeto.

Y ahora queremos alguna forma de moverlo, mover las cajas alrededor. Entonces, nuevamente, queremos usar una sacudida. ¿Cuál es la anatomía de una sacudida? Solo hazlo y lo verás. Primero, se cierran el pulgar y los dedos índices, luego se separan el pulgar y los dedos índices. Eso es una sacudida.

Nuevamente, pseudocódigo, muy fácil. La distancia es pequeña. La distancia es grande. Números mágicos por todas partes, pero es solo prueba y error.

Otra cosa que debemos hacer con una sacudida que no necesitábamos hacer con un toque es identificar si algo va a ser móvil porque necesitamos que este objeto se mueva a algún lugar. Entonces, para hacer eso, nuevamente verificamos que el pulgar y el índice estén cerca y luego iteramos todos los elementos en la escena y verificamos para cada uno de ellos cuál es su distancia al candidato de sacudida que vamos a hacer. Nuevamente, obtenemos el vector de xy, eso es en 2D, 3D, pero es lo mismo en todas partes. No es tan difícil.

Y una vez que identificamos que este es el candidato a sacudida, 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 la sacudida. Y luego necesitamos identificar que se está liberando la sacudida, ¿verdad? Entonces, la distancia es grande. Y ahora obtenemos el vector, la dirección de la sacudida. Entonces, tenemos el candidato a sacudida. Tenemos la ubicación del pulgar. Y tenemos el vector, que es nuevamente, matemáticas euclidianas, muy fácil. Y usaremos 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. De acuerdo. Voy a intentarlo. Veamos si aparece ahora. ¿Lo está? No. Funciona mucho mejor en mi máquina.

10. Parpadeo de Manos 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 movemos rápidamente. Ese fue un buen ejemplo. Gracias.

Entonces, como puedes ver, en realidad parpadea debido a esto. Así que simplemente lo intentaré. Y tal vez. Espera. Oh, habrías estado tan impresionado ahora mismo. De acuerdo. Entonces has visto el efecto. Y ahora cuando lo movemos rápidamente. 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 hacerlo así. De acuerdo. Ahora intentamos y lo movemos rápidamente. Vamos. Impresiónate. De acuerdo. Ese fue un buen ejemplo. ¿De acuerdo? 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 continua de gestos. 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.

Probablemente te estés preguntando, ¿necesito hacer todo este cálculo yo mismo? MediaPipe tiene módulos o alguna lógica para detectar gestos. Puedes enseñarle a MediaPipe a detectar este gesto o aquel gesto. Pero como necesitábamos algo continuo, tuvimos que hacerlo nosotros mismos.

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

Así que 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 muestra la topografía de la Tierra. Así es cómo se comportarán las sombras. Tenemos una esfera blanca. Ponemos una textura y luego podemos tener esta textura, que es un poco plana. Ponemos una topografía. Y espero que notes que ahora las montañas tienen sombras. Puedes agregar brillo porque los océanos reflejan la luz de manera diferente a la tierra, ¿verdad? Así que puedo agregar brillo y luego tengo este resplandor. Y puedo agregar otra capa de nubes, que es agradable.

Ahora queremos crear las estrellas. Para crear las estrellas, necesitamos crear una esfera y estar dentro de ella. 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 colocar. Así que simplemente crearemos una matriz de puntos. Y luego los colocaremos en la esfera. Nuevamente, 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 ajuste. Creamos una luz puntual dentro del sol para iluminar todo. Utilizamos gestos de escalado y desplazamiento rápido para ingresar al sol. Introducimos un gesto de giro detectando los ángulos y la dirección de los dedos. El sol rota utilizando un bucle de animación.

Y luego tenemos el campo de estrellas. Ahora es interesante porque antes usamos el ajuste para crear las cajas. Queremos usar el ajuste 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 ajuste que solo detecte el ajuste. Y simplemente publica el evento de un ajuste. Y en otro lugar, las estrellas simplemente se suscriben al ajuste y crean las estrellas.

Bien, esto será realmente útil más adelante. Para crear el sol, es un poco más complicado. Ahora necesitamos algún tipo de máquina de estados, primero ajuste para las estrellas, segundo ajuste para el sol. Entonces, ¿cuál es la máquina de estados más compleja que puedes imaginar? No, solo usamos un switch case porque, nuevamente, proyecto secundario de fin de semana. Entonces, creamos las estrellas, luego pasamos al sol, luego fin del tiempo.

Para crear el sol, creamos una luz puntual que está dentro del sol e iluminará todo a su alrededor. Y para ingresar al sol, nuevamente, lo haremos estallar, ¿verdad? Escalamos al 110%, luego lo escalamos de vuelta al 90%. Bien, necesitamos desplazarlo hacia el centro, lo cual es muy fácil con el sol porque tenemos eventos, ¿recuerdas? Entonces, necesitamos suscribirnos al desplazamiento rápido y necesitamos mover el sol a 0000, el centro de la escena. Y el último gesto que quería introducir es hacerlo girar, hacer que el sol, como, se rote a sí mismo. Entonces, veamos la anatomía de un giro. Necesitas detectar el dedo recto, luego necesitas encontrar el elemento superpuesto, ¿verdad, que, nuevamente, es fácil? Y luego, necesitas detectar el dedo recto y diagonal. Entonces, debe ser recto, pero el ángulo no debe ser de 180 grados. Y luego necesitas activar el evento del giro para ese elemento. Y ¿cómo giramos? Necesitamos identificar si es la mano derecha o la mano izquierda para conocer la dirección del giro. Nuevamente, los eventos son geniales. Y luego tenemos el bucle de animación que simplemente dice, okay, el sol necesita girar con alguna velocidad. Entonces, en cada cuadro de animación, simplemente agregaré la velocidad a la rotación del sol. Se ve así. Es realmente, realmente simple.

13. Creando Estrellas, Sol, Tierra y Marte

Short description:

Simplemente lo colocas en un conjunto de rotación y luego el bucle de animación hace que gire. Intentemos crear las estrellas. Algo no está funcionando. Ahora intentemos crear nuestro sol. Crear la Tierra es súper fácil. También necesitamos agregar a Marte. Agregaremos otro gesto que rota toda la escena con nuestras manos. Veámoslo todo. Y ahora... Buenas energías. Vamos.

Simplemente lo colocas en un conjunto de rotación y luego el bucle de animación hace que gire. Y nuevamente, disculpas de antemano.

Bien, intentemos crear las estrellas. No. Espera. Algo no está funcionando. Oh, tal vez la cuerda lo empeora.

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 ponerla en órbita de alguna manera. Para ponerla en órbita, la haremos girar rápidamente, pero necesitamos hacerlo girar solo hasta Y igual a cero, ¿verdad? Entonces no necesitamos hacerlo girar hacia el centro, solo en el mismo plano que el sol. Y luego tenemos que tener algún tipo de bucle para hacer que gire alrededor del sol, entonces, nuevamente, en cada cuadro de animación simplemente agregaremos al ángulo de la Tierra.

Bueno, no, no lo veremos porque también necesitamos agregar a Marte, ¿verdad? Nos olvidamos de Marte. Para agregar a Marte, simplemente lo agregamos al switch case. Nuevamente, es súper fácil hacer eso. Y agregaremos otro gesto que rota toda la escena con nuestras manos. Entonces, para rotar todo, solo necesitamos detectar dedos rectos. Sé que quiero hacerlo así, como en Minority Report. Todo está recto y vertical. Y luego necesito detectar el movimiento de los dedos para cambiar la cámara. Ya sea girarla o retroceder y avanzar.

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

14. Creando Demo 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 chasquear. Girar. La Tierra. Chasquear. Vamos Marte. Elon cuenta contigo. Girar.

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. De acuerdo. Uno. Chasquea conmigo. Ayudará. Bueno. Vamos. Podría haber sido una demostración realmente genial. Bueno, de acuerdo. Primero el sol. Luego chasquear. Girar. Girar. La Tierra. Girar. Chasquear. Atrás, atrás, atrás, atrás, atrás. Espera. Espera, espera, espera. Vamos Marte. Vamos Marte. Elon cuenta contigo. Vamos Marte. Girar.

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 aparecer. Ahora podemos usar nuestra mano para rotar. Podemos usar la segunda mano para mover la cámara hacia adelante y hacia atrás. Esto es genial. Hay un tipo 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 mueva según 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. De acuerdo. Una última oportunidad, Marte. Vamos. Y perdí mi mano. De acuerdo, Marte no girará hoy. Pero tal vez podamos hacerlo aparecer. ¿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 hacia adelante y hacia atrás. ¿Verdad? Entonces, esta es nuestra escena. Sí. Fue bastante divertido crearla.

¿Y a dónde vamos? Gracias. Aplausos. ¿Y a dónde vamos desde aquí? Increíble. Sí. De acuerdo. Esto es genial. Hay muchas cosas que podemos hacer con esto. Hay un tipo llamado Oz Ramos que usa gestos con la mano para navegar por la web y controlar sitios web, lo cual es genial. Y podemos hacer cosas realmente geniales con el reconocimiento corporal, como crear un avatar que se mueva según tu cámara web. Si esto fue demasiado, porque hay muchas cosas para asimilar, podemos volver a Netflix y 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 asombroso. Eres increíble. Muchas gracias. Gracias. Gracias. Muchas gracias. Demos una ronda más de aplausos. Ahora, amablemente pido a nuestro equipo de AV que coloque las preguntas en el escenario. Recuerdo la pregunta principal del público: ¿cuáles son los límites de rendimiento? 3JS utiliza las GPUs para renderizar escenas de manera fluida. Encuentra a Liat en el área de chat híbrido o haz preguntas 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 asombroso. Eres increíble. Y mi código está allí. Funciona mucho mejor cuando no lo estoy demostrando en vivo. Muchas gracias. Gracias. Gracias. Muchas gracias. Hiciste una demostración en vivo muy buena. Demos una ronda más de aplausos. Sí.

Ahora, amablemente pido a nuestro equipo de AV que coloque las preguntas en el escenario. Creo que tenemos tiempo para tal vez una de ellas. ¿Tenemos? De acuerdo. Problemas técnicos, pero recuerdo la pregunta. Recuerdo la pregunta principal del público, que es cuáles son los límites de rendimiento. ¿Hay alguna posibilidad de renderizar algo realmente costoso en el navegador? ¿Cuál es tu experiencia con eso? Sí. Entonces, hay muchas consideraciones de rendimiento cuando intentas renderizar algo con javascript. Pero 3JS utiliza las GPUs. Así que si logras hacer que la GPU renderice la escena será muy fluida. En realidad, cuando construí la demostración no usé GPUs y fue un poco entrecortada, pero con GPUs es súper fluida. De acuerdo. Genial, genial, genial. Y aprovechen la oportunidad de encontrar a Liat en el área de chat híbrido y a las personas que nos ven de forma remota también tienen la oportunidad de hacer preguntas a Liat. 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 y Emoción del Público

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

6 min
Charlie Gerard's Career Advice: Be intentional about how you spend your time and effort
Featured Article
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
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!
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.
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.
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

JS GameDev Summit 2022JS GameDev Summit 2022
165 min
How to make amazing generative art with simple JavaScript code
Top Content
WorkshopFree
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.
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introduction to WebXR with Babylon.js
Workshop
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.
JSNation Live 2021JSNation Live 2021
81 min
Intro to AI for JavaScript Developers with Tensorflow.js
Workshop
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.
ML conf EU 2020ML conf EU 2020
160 min
Hands on with TensorFlow.js
Workshop
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.