Lo más destacado en Tresjs V4

Hola, Vue.js live. Hace un año, tuvimos el honor de presentar Threads.js al público en Vue.js live one. Si estuviste allí, probablemente me recuerdes, Dreset, como un estudiante de Slytherin, y probablemente también recuerdes que abrimos el proyecto al código abierto en vivo en el escenario.

Un año después, así es como se ve el ecosistema de Threads.js. Tenemos más de 1,700 estrellas en GitHub en todo el ecosistema, siendo el paquete principal el que tiene más estrellas, casi 1.5K, seguido de CentOS y el módulo Nuxt. Solo el paquete principal es utilizado por más de 250 desarrolladores y tenemos alrededor de 40 colaboradores.

Estas son las descargas mensuales de NPM y casi estamos llegando a las 9K, lo cual es genial para una biblioteca que solo tiene un año de antigüedad. Estas son algunas de las estadísticas de los sitios web y la documentación, que han tenido mucho tráfico en el último año. Dicho esto, veamos qué hay de nuevo en la versión 4 de Threads.js, que estará disponible pronto antes del verano.

Hola a todos. Mi nombre es Alvaro Sabu. Soy un ingeniero de DevRel en StudyBlock. También soy creador de contenido. Tengo mi canal de YouTube, Alvaro DevLabs, donde creo tutoriales y cursos sobre código abierto en general, Vue, y Nuxt. También soy el autor de Threads.js. Tengo mi portafolio que nunca termino, y siempre puedes saludarme en mis redes y Alvaro Sabu en Twitter y mensaje.

Antes de comenzar, asumo que el 30% de ustedes puede haber oído hablar de Threads.js. Un poco más si estuvieron aquí el año pasado, pero el otro 70%, lo que puedo decirles es que se sorprenderán al final de esta charla. ¿Qué es Threads.js? Threads.js es un renderizador personalizado de Vue que te permite crear escenas 3D de manera declarativa utilizando componentes y composables de Vue. Así que imagina que de la misma manera en que creas componentes y elementos de UI en tus aplicaciones, haces lo mismo para 3D. Threads.js es la palabra en español para árbol, porque esta biblioteca se basa en 3Ds y también porque la palabra en francés ya estaba tomada por otra biblioteca.

¿Cómo se empieza? Puedes elegir tu gestor de paquetes preferido. En mi caso, uso pnpm, y puedes hacer pnpm add en Threads.js core. Este es un paquete principal, e instala tree como una dependencia pura, o siempre puedes jugar con él en nuestro playground oficial, que es similar al playground de componentes de archivo único de Vue. Si haces clic aquí, verás un lugar donde puedes editar el código y ver los cambios de inmediato aquí, para que puedas experimentar con Threads.js.

Dicho esto, pasemos a las nuevas características que puedes esperar en Threads.js versión 4. Durante el último año, recopilamos muchos comentarios de la comunidad, muchos. Muchos usuarios se quejaban de algunos problemas de rendimiento. Muchos de ellos solicitaban renderizado bajo demanda. Tuvimos muchos problemas con el soporte de tipos, especialmente después de que lanzaron 156 desde 3DS. También experimentamos fugas de memoria en los cambios de ruta de vista, por lo que cada vez que el usuario cambiaba de una página a otra, la memoria de la GPU y la CPU no se borraban. Algunos materiales y geometrías se quedaban allí, ocupando espacio. Esto es malo, especialmente si estás creando experiencias 3D en dispositivos móviles.

A continuación, agregamos controladores de eventos a los primitivos, como eventos de puntero. Tomamos todos esos comentarios y comenzamos a trabajar en nuevas características para la versión 4. La primera es el renderizado bajo demanda. Luego refactorizamos el almacenamiento de eventos y agregamos una lógica de propagación. Agregamos controladores de eventos a los primitivos. Usando primitivos, ahora el objeto de propiedades es reactivo.

Agregamos una mejor eliminación de recursos para la gestión de memoria y muchas correcciones de errores y mejoras.

Tomemos la primera característica y expliquemos un poco qué significa. Hasta ahora, cada vez que renderizas una escena con 3DS, siempre se renderiza, sin importar lo que suceda en la escena. Entonces, incluso si la escena está quieta, se renderizará en cada fotograma por segundo. Con el renderizado bajo demanda, estamos agregando la posibilidad de que el usuario decida cuándo renderizar. Por lo tanto, uno de los posibles valores de la nueva propiedad render mode en el lienzo de Tress es bajo demanda. Esto invalidará automáticamente cada vez que detecte un cambio en la escena. Este cambio puede ser cambios en las propiedades de las instancias, por lo que cada vez que cambies la posición o el color de un material. Luego, cambios en el estado del contexto, por ejemplo, si tienes el lienzo de Tress y cambias el fondo o cambias el tamaño de la pantalla. Y cada vez que uses la directiva VIF para eliminar nodos en la escena.

Aquí hay una demostración de cómo funciona. Tenemos el lienzo de Tress y agregamos la propiedad bajo demanda. Si observas aquí, ahora puedes ver que solo se renderiza cuando hay un cambio en la cámara. Echemos un vistazo de nuevo. Ahora mismo, siempre se está renderizando. Agregamos la propiedad. Y luego puedes ver que se va a cero. Y solo cuando cambio la cámara, se renderiza la escena. Esto es increíblemente poderoso para el performance de tus escenas. Luego, también admitimos la invalidación manual. Entonces, si quieres evitar el renderizado bajo demanda, siempre puedes usar manual como valor de la propiedad. Y luego tienes un método del componible use Tress llamado invalidate. Entonces, cada vez que hagas un cambio, puedes invalidar manualmente el siguiente fotograma. Como observar la referencia de la caja cuando esté disponible y luego cambiar la posición y invalidar manualmente.

La siguiente característica en la lista es la refactorización completa del administrador de eventos a una tienda y también el trabajo realizado en la lógica de propagación. Hasta ahora, teníamos algunos eventos básicos de puntero, como el clic, el movimiento del puntero, la entrada del puntero y la salida del puntero. Esto estaba bien para aplicaciones básicas. Pero cuando quieres hacer cosas más geniales, necesitas mucho más que eso. Entonces, antes, agregamos el menú contextual, que es el clic derecho, el doble clic, el puntero abajo, el puntero arriba, el movimiento de la rueda y la falta de puntero. Pero lo que más me emociona es la nueva lógica de propagación de eventos.

Los primitivos son la versión de Tracks.js del componente isOnView, lo que significa que puedes crear programáticamente cualquiera de las instancias de Tracks.js. Por ejemplo, aquí estamos creando una malla que está compuesta por una geometría y un material, y luego pasamos esa malla a través del objeto prop de un primitivo. Esto agregará esa malla al gráfico de escena de nuestra aplicación. Esto es increíblemente poderoso porque para cosas que no se pueden convertir directamente en un componente como modelos, puedes usar aquí la abstracción de Tracks.js para cargar un modelo desde esta ruta, un modelo glTF, y luego cuando se completa la espera, tendrás una variable del modelo con todos los diferentes grupos de mallas que componen ese objeto. Y puedes pasarlo al primitivo de inmediato. El resultado final es algo como esto. Tenemos nuestro modelo agregado a la escena.

Ahora antes, esta propiedad del objeto no reaccionaba, lo que significa que no podías cambiar dinámicamente el modelo que se renderizaba en la escena. Pero ahora es posible. Si definimos una variable de referencia aquí como isCube y luego usamos una operación ternaria para, dependiendo del valor, renderizar el modelo de cubo o el modelo de aqua, terminaremos con algo como esto. Si marcamos la casilla de verificación, podemos cambiar dinámicamente el modelo que se renderiza. Luego tenemos el renderizado condicional para los primitivos. Hasta ahora, podías tomar cualquier componente de Tracks.js y simplemente aplicar una directiva be if para renderizar o no en la escena. Pero eso no era posible con los objetos, lo que significa que, por ejemplo, los modelos no eran posibles de desrenderizar o renderizar nuevamente. Entonces, si creamos una referencia con isVisible y la pasamos como un be if, ahora podemos alternar el renderizado de los propios modelos dentro de la escena. También hemos agregado controladores de eventos a ellos. Parte de la refactorización anterior de eventos de puntero fue agregar controladores de eventos a los primitivos. Entonces ahora es posible adjuntar una función al controlador de eventos en los modelos, por ejemplo.

A continuación, en la línea está la gestión de memoria. Esto fue realmente difícil de lograr. El problema es cuando estás lidiando con objetos 3D, los materiales, las geometrías y las texturas se guardan en la GPU. Entonces, si no los eliminas correctamente, lo que significa que cuando usamos un be if, por ejemplo, y eliminamos el nodo, si no eliminamos esos y también eliminamos la referencia para la memoria de la CPU, terminamos teniendo fugas de memoria, especialmente si estamos cambiando de ruta y los componentes no se están desmontando correctamente. Para lograr esto, agregamos la eliminación automática de recursos cada vez que el componente se desmonta. Entonces, utilizando la API de renderizado personalizado, logramos eliminar todos los objetos y todas las propiedades de los hijos como materiales, geometrías y otros para que se eliminen correctamente y también eliminar las referencias. También agregamos un método de utilidad de eliminación manual que puedes importar de 3ds para eliminar recursos manualmente, por ejemplo, para primitivos. Esta utilidad libera tanto la memoria de la CPU como la de la GPU. También hemos realizado algunas mejoras en las herramientas de desarrollo. Hace unos tres meses o un poco más, lanzamos soporte oficial para herramientas de construcción con un objeto de gráfico de escena que puedes inspeccionar y verificar todas tus instancias. Pero queríamos mejorarlo aún más. Y agregamos información del renderizador que ahora está disponible cuando inspeccionas la escena.

Entonces, cada vez que hagas clic en la escena, tendrás en el lado derecho varias pestañas y una de ellas será la de información, que tiene datos como el uso de memoria, cuántos objetos se están renderizando, cuántas llamadas se han realizado, cuántos triángulos, puntos y líneas hay. Esto es realmente útil cuando quieres verificar la cantidad de polígonos de tu escena, especialmente al tratar con modelos. Luego agregamos otra pestaña que es una lista de todos los programas de sombreado o materiales que se están renderizando en ese momento y están disponibles para inspeccionar. Tendrás una lista, por ejemplo, de los materiales utilizados en la escena con un material de malla, un material de profundidad de malla, entre otros. También agregamos la funcionalidad de búsqueda. Entonces, cada vez que busques aquí en la parte superior, podrás filtrar el gráfico de escena.

Aunque esto cubrirá todas las nuevas características para V4, el equipo principal ha estado trabajando en muchas mejoras en el ínterin. Una de ellas es la esperada documentación traducida. Así que nos enorgullece decir que en los últimos meses, hemos estado trabajando en varias traducciones con la comunidad. Y en la actualidad está disponible en inglés, español, chino, alemán, francés y holandés. Así que realmente quiero agradecer a toda la comunidad por el esfuerzo de traducir toda la documentación del paquete principal a diferentes idiomas. Esperemos que esto abra Tres-ES a más audiencias y nuevas comunidades allá afuera.

También creamos un nuevo libro de cocina. Esta idea surgió de la documentación de Astro y pensamos en cómo podríamos proporcionar a la comunidad los mejores ejemplos, enfocándonos en lo básico y cómo usar Tres-ES. Así que pensamos en esta idea de un libro de cocina con diferentes recetas sobre cómo comenzar con. Así que si vas a la documentación y buscas el libro de cocina, verás diferentes recetas con cosas como animaciones básicas, cómo usar grupos, cómo usar diapositivas, cómo cargar el modelo, etc.

Entonces, ¿qué sigue? Así es como se ha actualizado la hoja de ruta a lo largo del año. Así es como se ve en este momento. Estamos en los pasos finales para lanzar la versión alfa de la versión cuatro del núcleo, y planeamos terminar un lanzamiento estable al menos a fines del primer trimestre. La documentación traducida se ha traducido hasta ahora. También apuntamos a otros idiomas. Así que vamos a cubrir esto en los dos primeros trimestres. Y en el segundo trimestre, planeamos actualizar Cientus a la v4 y también el resto del ecosistema con muchos cambios nuevos en Cientus. También estamos planeando el lanzamiento final de la versión uno de post-procesamiento, que es otro paquete del ecosistema para agregar efectos de post-procesamiento a tu escena. A mediados del segundo trimestre, planeamos comenzar a trabajar en un paquete de XR VR para poder usarlo con gafas de VR. Y en algún momento entre el tercer y cuarto trimestre, planeamos lanzar nuestro propio paquete de física usando un envoltorio en una etapa temprana. Aunque esto no es todo en lo que estamos trabajando, estos son los aspectos más destacados de lo que puedes esperar en este 2024 en TresCS.

Por último, pero no menos importante, quiero agradecer a todos los colaboradores que hacen posible TresCS. Tanto el equipo principal como todos los increíbles miembros de la comunidad que han estado contribuyendo en el último año, muchas gracias. También gracias a nuestros patrocinadores, tanto personales como organizacionales. Y si quieres patrocinar TresCS, por favor ve a GitHub sponsors y cómpranos un café. Muchas gracias y nos vemos en el próximo. Ciao ciao.

Hola Alvaro. ¡Hola, cómo estás? Muy bien y tú? Bueno, vamos a ver, porque los resultados de la encuesta son realmente interesantes. Podemos ver que Fixix está ganando, pero luego GameUtils también está avanzando.

Pero parece que está relacionado. Entonces, ¿qué opinas de los resultados? ¿Es lo que esperabas? Yo más o menos lo esperaba y quería hacer esta encuesta porque quería conocer más de la community cuál es la característica más interesante que quieren ver. Y mucha gente ha pedido física y cosas para crear juegos, lo cual me emociona mucho porque me encantan los juegos. Así que eso hace mi vida feliz.

No, pero eso es genial porque te estás aliando con la community entonces. Veamos una de las preguntas que está muy de moda en el Q&A. Podemos ver cómo podemos garantizar un buen performance? Sí. Una pregunta realmente buena. Esa es una pregunta realmente buena. La mayor parte del trabajo que hicimos antes fue garantizar un mejor performance en términos de consumo de memoria, tratando de liberar objetos y texturas de una mejor manera, tratando de liberar la memoria para la GPU y la CPU. Pero en general, desde la perspectiva del usuario final, piensa en usar cuando estés trabajando con animations o bucles de renderizado, trata de evitar el uso de reactividad, que se basa en proxies, y no será tan eficiente como un objeto simple. Por eso normalmente sugerimos que tomes la referencia del template y tomes la instancia del componente de vista y la uses para animation en su lugar. Vamos a trabajar en más cosas para performance, por supuesto, y para garantizar un buen equilibrio en dispositivos móviles y demás. Pero sí, gracias por la pregunta. No, creo que la community está esperando más mejoras en este aspecto, pero tú también te estás ocupando de eso.

Y hay otra pregunta, realmente interesante. ¿Hay algún curso bueno que puedas recomendar para aprender 3D? Sí. ¿Hay algo que necesites patrocinar tú mismo? En realidad, sí. Acabo de lanzar un curso con Egghead.io. Trata sobre cómo crear configuradores de productos en 3D. Podrás crear tu propio producto y permitir que el usuario final personalice los materiales y la apariencia de ese producto. Probablemente compartiré el enlace del curso en mis redes sociales después de esto. Siéntete libre de unirte porque me divertí mucho haciendo ese curso. Y puedes esperar más cursos en el futuro sobre 3DS.

Genial. Me alegra escuchar eso. Así que en la plataforma de Egghead, tienes eso. Y luego tenemos otro. ¿Qué pasó con Tres Leches, la biblioteca de UI? ¿Va a avanzar o dejaste de trabajar en ella? Sí, Tres Leches va a avanzar. Te prometo que es algo que necesitaba para debug y controlar los diferentes aspectos de una aplicación. Ahora, con el trabajo de DevTools que hicimos con los DevTools oficiales, es fácil controlar y ver qué está sucediendo en la escena. Pero dejamos eso de lado porque no estábamos satisfechos con la API. Aún no está en una versión estable ni nada por el estilo. Y lo que haremos después de la v4 y v4 de Cientos es reconsiderar la API basándonos en los comentarios de la comunidad. Muchas personas en la comunidad expresaron sus preocupaciones sobre el uso y no estaban muy contentos o cómodos con cómo lo usamos. Así que trabajaremos en eso y proporcionaremos una mejor solución.

De acuerdo, genial. Pero parece que tienes todo cubierto con tus propios pensamientos. Así que es genial que estés trabajando en todas las preguntas que tenemos. Y sí, creo que terminemos con otra. ¿Hay alguna forma de tomar el control del bucle de renderizado? No en la actualidad. Estábamos trabajando en una función que no llegó a la v4 porque implicaba un cambio importante en cómo se utiliza el bucle de renderizado. Y probablemente rompería todas las aplicaciones y entornos de prueba que tenemos en este momento. Así que teníamos un poco de miedo de hacer eso. Y estamos explorando hacer POCs para ver cómo podemos proporcionarlo mejor a la comunidad.

Entonces no es un cambio disruptivo. Tal vez una API opcional. Vamos a pensarlo. Pero sí, es una de las primeras características en las que vamos a trabajar después de la v4.

Hmm. Vale, bueno saberlo. Suena muy técnico. Creo que tenemos tiempo para otra pregunta. ¿Por qué no? ¿Habrá un programa para las nuevas Vue DevTools?

Sí. Así que inicialmente jugamos con las nuevas Vue DevTools. Y la experiencia del desarrollador iba a ser similar a las Trace NUX DevTools. Pero desde que hablé con los autores, están trabajando en una API y un kit unificados. Así que estoy esperando algo más estable para unirme y decir, hey, vamos a lanzar algunas nuevas DevTools para Vue y Trace.

Oh, genial. Genial. Dios mío, tienes casi todo planeado. Eso es realmente bueno para Trace. Creo que la comunidad ya está muy activa y está mejorando tu biblioteca. Sin embargo, necesitamos más personas. Si quieres contribuir, siéntete libre, porque necesitamos más manos para lograrlo todo. Necesitamos más manos. Así que incluso tú, Alba, o cualquier persona en la audiencia que quiera unirse, únete a Discord y estaremos encantados de incorporarte a Trace.

Sí, por supuesto. Las personas interesadas en contribuir a esta biblioteca están abiertas a más colaboradores. Y también tienen Swaggy. Puedes ver que tienen una pegatina. Esta pegatina es de la conferencia Vue.js Amsterdam, y me dieron una en persona, así que eso es genial. Y puedes tener una si vienes a cualquier conferencia en persona, en realidad. Así es. Gracias por mencionarlo, y muchas gracias por invitarme.