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

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

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!

This talk has been presented at JSNation 2022, check out the latest edition of this JavaScript Conference.

FAQ

Three.js es una biblioteca de JavaScript que facilita la creación de gráficos 3D en la web. Se utiliza para desarrollar visualizaciones interactivas, juegos, y experiencias de usuario mejoradas en aplicaciones web y sitios mediante el renderizado de gráficos 3D.

TensorFlow.js permite ejecutar modelos de machine learning directamente en el navegador, facilitando la integración de capacidades de inteligencia artificial en aplicaciones web sin necesidad de una comunicación constante con el servidor.

Un astronauta analógico es una persona que participa en misiones simuladas en la Tierra que imitan las condiciones de vida en el espacio. Estas misiones suelen realizarse en aislamiento en lugares como desiertos para probar equipos y protocolos espaciales.

La interfaz de reconocimiento de manos permite interactuar con aplicaciones web mediante gestos. Esto incluye navegar por interfaces, controlar elementos gráficos en 3D, y crear interacciones más naturales y accesibles sin necesidad de dispositivos periféricos tradicionales.

Los gestos manuales pueden integrarse en una página web utilizando bibliotecas como MediaPipe, que analiza el video de una cámara en tiempo real para identificar la posición y el movimiento de las manos, permitiendo así manipular elementos gráficos o interactuar con la interfaz.

Crear 'mundos 3D' con gestos de mano implica usar la captura de movimientos de las manos para generar y manipular objetos tridimensionales en una interfacción web, permitiendo un control intuitivo y directo sobre los elementos 3D sin dispositivos físicos.

TypeScript es un lenguaje de programación tipado desarrollado por Microsoft que se construye sobre JavaScript. Se utiliza para mejorar la capacidad de escalamiento y mantenimiento del código, proporcionando herramientas más robustas para la captura de errores durante la fase de escritura del código.

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.

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

Embracing WebGPU and WebXR With Three.js
JSNation 2024JSNation 2024
27 min
Embracing WebGPU and WebXR With Three.js
Top Content
The 3JS project has evolved into a community-driven effort with numerous contributors over the past 14 years. It started with 3D engine work in Flash and transitioned to using SVGs for rendering in HTML5 before adopting WebGL. The project showcases various projects and frameworks, including a no-code tool powered by 3.js. The team is working on a new render using WebGPU and developing a new shader language called TSL. The hope is that WebGPU will eventually replace WebGL, offering better control and performance.
TensorFlow.js 101: Aprendizaje automático en el navegador y más allá
ML conf EU 2020ML conf EU 2020
41 min
TensorFlow.js 101: Aprendizaje automático en el navegador y más allá
TensorFlow.js enables machine learning in the browser and beyond, with features like face mesh, body segmentation, and pose estimation. It offers JavaScript prototyping and transfer learning capabilities, as well as the ability to recognize custom objects using the Image Project feature. TensorFlow.js can be used with Cloud AutoML for training custom vision models and provides performance benefits in both JavaScript and Python development. It offers interactivity, reach, scale, and performance, and encourages community engagement and collaboration between the JavaScript and machine learning communities.
TresJS, una forma declarativa de crear escenas 3D a partir de componentes Vue
Vue.js London 2023Vue.js London 2023
27 min
TresJS, una forma declarativa de crear escenas 3D a partir de componentes Vue
The speaker discovered 3D with 3GS and was inspired to create a 3D ecosystem for the Vue community using Troy.js. The process of setting up a 3D scene and objects in Tress was explained, along with creating and configuring 3D objects. The talk also covered animating objects with Tress and the 'Cientos' package, as well as the future of Tress.js and its compatibility with older versions of Three. The speaker expressed gratitude to sponsors and contributors and highlighted the potential for product customization with Tress.js.
De Blender a la Web - el Viaje de un Modelo 3D
React Advanced 2021React Advanced 2021
27 min
De Blender a la Web - el Viaje de un Modelo 3D
Top Content
This Talk is about Blender, a free and open-source 3D software, and integrating 3D models into websites. The speaker discusses exporting 3D models to the web using the gltf format and compressing them using gltf transform and draco compression. They also cover integrating the 3D model into a website using React and React 3 fiber, troubleshooting installation and error issues, and working with refs and frames. The Talk explores rendering, lighting, mathematics, and experimentation in 3D, as well as interaction and rendering effects. The speaker also mentions their favorite creation in Blender.
Haciendo juegos web “de tamaño bocado” con GameSnacks
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Haciendo juegos web “de tamaño bocado” con GameSnacks
Top Content
Welcome to making bite-sized games with GameSnacks, a platform that focuses on optimizing game sizes for easy accessibility on the web. Techniques such as lazy loading, script placement, and code and art optimization can greatly improve game performance. Choosing the right file formats, reducing game size, and using game engines or custom tools are important considerations. Prioritizing file size, testing internet connections, and using testing tools for accurate simulation can help attract more users and improve game retention and reach.

Workshops on related topic

Cómo crear arte generativo increíble con código JavaScript simple
JS GameDev Summit 2022JS GameDev Summit 2022
165 min
Cómo crear arte generativo increíble con código JavaScript simple
Top Content
Workshop
Frank Force
Frank Force
En lugar de dibujar manualmente cada imagen como en el arte tradicional, los artistas generativos escriben programas que son capaces de producir una variedad de resultados. En esta masterclass aprenderás cómo crear arte generativo increíble usando solo un navegador web y un editor de texto. Comenzando con conceptos básicos y avanzando hacia la teoría avanzada, cubriremos todo lo que necesitas saber.
Introducción a WebXR con Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introducción a WebXR con Babylon.js
Workshop
Gustavo Cordido
Gustavo Cordido
En este masterclass, te presentaremos los conceptos básicos de la construcción de experiencias de Realidad Mixta con WebXR y Babylon.js.
Aprenderás lo siguiente:- Cómo agregar objetos de malla 3D y botones a una escena- Cómo utilizar texturas procedurales- Cómo agregar acciones a objetos- Cómo aprovechar la experiencia predeterminada de Realidad Cruzada (XR)- Cómo agregar física a una escena
Para el primer proyecto en este masterclass, crearás una experiencia interactiva de Realidad Mixta que mostrará estadísticas de jugadores de baloncesto a fanáticos y entrenadores. Para el segundo proyecto en este masterclass, crearás una aplicación WebXR activada por voz utilizando Babylon.js y Azure Speech-to-Text. Luego, desplegarás la aplicación web utilizando el alojamiento de sitios web estáticos proporcionado por Azure Blob Storage.
Introducción a la IA para Desarrolladores de JavaScript con Tensorflow.js
JSNation Live 2021JSNation Live 2021
81 min
Introducción a la IA para Desarrolladores de JavaScript con Tensorflow.js
Workshop
Chris Achard
Chris Achard
¿Has querido explorar la IA, pero no has querido aprender Python para hacerlo? ¡Tensorflow.js te permite usar IA y aprendizaje profundo en javascript, sin necesidad de Python!
Veremos las diferentes tareas que la IA puede ayudar a resolver y cómo usar Tensorflow.js para resolverlas. No necesitas saber nada de IA para empezar, comenzaremos desde lo básico, pero aún así podremos ver algunas demos interesantes, porque Tensorflow.js tiene muchas funcionalidades y modelos preconstruidos que puedes usar en el servidor o en el navegador.
Después de este masterclass, deberías ser capaz de configurar y ejecutar modelos preconstruidos de Tensorflow.js, o comenzar a escribir y entrenar tus propios modelos con tus propios datos.
Prácticas con TensorFlow.js
ML conf EU 2020ML conf EU 2020
160 min
Prácticas con TensorFlow.js
Workshop
Jason Mayes
Jason Mayes
Ven y descubre nuestro masterclass que te guiará a través de 3 recorridos comunes al usar TensorFlow.js. Comenzaremos demostrando cómo usar uno de nuestros modelos predefinidos, clases de JS muy fáciles de usar para trabajar rápidamente con ML. Luego veremos cómo volver a entrenar uno de estos modelos en minutos utilizando el aprendizaje por transferencia en el navegador a través de Teachable Machine y cómo se puede usar en tu propio sitio web personalizado. Finalmente, terminaremos con un hola mundo escribiendo tu propio código de modelo desde cero para hacer una regresión lineal simple y predecir los precios ficticios de las casas en función de sus metros cuadrados.