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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.