Trae la Magia del 3D a Tus Aplicaciones Vue Con TresJS

Entonces, ¿y si te dijera que... Esto es tan genial. Nunca hice una charla en un observatorio. ¿Y si te dijera que esta escena aquí mismo o este juego, porque puedo jugar con él, está completamente hecho con componentes Vue? Así que esto se hace de manera decorativa, y tengo otro ejemplo. Este es un sonido de donde proviene. Está hecho por uno de los miembros de nuestro equipo central. Él creó este tipo de onda synth. También está hecho completamente con componentes Vue y composables. Así que de eso trata mi charla. Y voy a silenciar para que no tengas el sonido todo el tiempo. ¿De acuerdo?

Sí. Así que, hola a todos. Voy a presentar hoy... Mi biblioteca se llama Trace.js. Y la idea es llevar la magia del 3D a tus aplicaciones Vue.

Mi nombre es Alvaro Sabu. Soy un ingeniero DevRel... O, bueno... Tuve que actualizar esto. Soy un ingeniero de experiencia de desarrollador en el bloque de inicio. Soy de Barcelona, España. Pero originalmente de Venezuela. Creando contenido en Alvaro DevLabs. Y también mi portafolio que nunca termino está por ahí. Y mi Twitter y redes sociales. Así que eres bienvenido a saludar en cualquier momento.

Entonces, ¿qué es Trace.js? Trace.js es un renderizador personalizado de Vue sobre 3ds, que es la biblioteca central en JavaScript para renderizar experiencias WebGL. Así que puedes usarlo para construir una escena de manera declarativa, como lo harías con una interfaz de usuario, para crear diferentes cosas como componentes Vue y composables. Trace es una palabra española para 3ds. Y se pronuncia Tress. Y en referencia a la biblioteca. Entonces, ¿cómo empiezas con él? Tenemos varios sabores. Pero puedes instalarlo con el gestor de paquetes de tu elección. O siempre puedes jugar con él en nuestro playground de Vue JS. Así que puedes ir aquí y codificar directamente. Y verás el resultado aquí. Lo compartiré más tarde en mis redes sociales. ¿De acuerdo?

Así que... Vamos a crear nuestra primera escena 3ds. Así que esto es como la sintaxis de configuración de Vue con un script y una plantilla.

Así que esto es como la sintaxis de configuración de Vue con un script y una plantilla. Lo que vamos a hacer es importar el componente TraceCampos desde el núcleo. Y luego lo añadiremos con una prop llamada window size, para que ocupe todo el tamaño. ¿Es visible? ¿Sí? Bien. Así que lo importamos. Lo usamos en la plantilla. Y luego, como buena práctica, podemos usar otro componente en Vue, un subcomponente llamado... No sé. La experiencia, la escena. Solo porque el TraceCampos es un proveedor de contexto. Así que todo el contexto de nuestro 3D va a vivir dentro de él. Así que va a hacer las cosas más fáciles. ¿De acuerdo?

Entonces... Estoy olvidando que tengo las animaciones. Esto es súper elegante ahora. Primero necesitamos ver algo, ¿verdad? Algo renderizado en la escena. Así que añadimos una cámara de perspectiva. Con una posición en la escena. Y un punto de vista. Que es como... A dónde va a apuntar. Así que puedes empezar a notar que esto es un paralelo entre los objetos de 3ds y cómo se usan como componentes aquí. Luego podemos añadir algunos objetos a nuestra escena. Así que voy a añadir un box. ¿De acuerdo? Un box se construye con un trace mesh. Así que puedes hacer la analogía entre la geometría siendo el HTML del objeto 3D. Y luego el material va a ser como el CSS del objeto. Va a declarar qué color tiene. Si es reflectante, si no lo es. ¿De acuerdo? Todo eso se junta en algo que se llama mesh.

Y si tenemos la suerte de añadir una luz a la escena, porque si no, todo está oscuro, llegamos a algo como esto. ¿De acuerdo? Así que... ¡Hey! Ya tenemos nuestro primer renderizador 3D en la pantalla con estos componentes. Así que podemos decir, como, ¡woohoo! Felicítate. Ya hiciste tu primera escena 3D. ¿Pero puede mejorar? Por supuesto que sí.

Así que ahora mismo estamos usando el plano directamente en el medio de la escena. Pero podemos añadir algunos argumentos para el constructor. Así que los argumentos dependerán del componente que estés usando. En este caso, voy a modificar cómo se ve la geometría del box. Así que estoy añadiendo algunas propiedades al ancho, la altura y la profundidad, digamos. O puedo cambiar la rotación de todo el cubo cambiando la propiedad aquí y usando algo de matemáticas para cambiarlo. Así es como se verá después de hacer esos cambios. Así que aumentamos el tamaño del cubo y también lo rotamos un poco.

Hagámoslo brillar. ¿De acuerdo? Y aquí es cuando tengo algo que anunciar. Y acabamos de lanzar hoy la biblioteca de post procesamiento para TresCS. Así que recuerdas al principio de la charla, te estaba mostrando un juego genial con luces brillantes y demás. La biblioteca de post procesamiento está diseñada para facilitar y centrarse en la experiencia del desarrollador. Así que puedes añadirlo como post procesamiento de TresCS. Y es tan fácil como añadir para el material, necesitas habilitar el emisivo. Así que es una propiedad que te permite decir, de acuerdo, quiero tener esta intensidad. Y también el color del brillo. ¿De acuerdo? Y luego puedes importar algo llamado bloom y el compositor de efectos. Así que el compositor de efectos será como el contexto del efecto. Así que puedes pasar varios pases. Y cada pase será un efecto diferente. Así que puedes construir diferentes efectos de post procesamiento. ¿Por qué se llama post procesamiento? Porque no se renderiza en tiempo real, solo toma lo que renderizas y luego añade post procesamiento, como harías con películas o videojuegos. Es el mismo concepto.

Así que estamos usando el efecto bloom con una intensidad, luminancia, umbral, yadda yadda. Realmente técnico, pero es lo que te permite detectar cuándo brillar. ¡Y voilà! ¡Tenemos un cubo brillante! ¡Increíble! ¡Woohoo! Así que es cuando podemos empezar a bailar y darnos cuenta, está bien, podemos hacer cosas bastante geniales con 3D en la web.

Y lo genial es que también es pre-rendimiento. Así que como solo tengo siete minutos hoy, solo quería mostrarte un pequeño vistazo de lo que puedes construir con TresCS. Y puedes notar la pequeña cantidad de código que se requiere para hacer que algo funcione. Así que los próximos pasos serán... Puse algunos QR, así que espero que estén funcionando. Puedes consultar la documentación. Tenemos muchas cosas buenas para ir, hacer que mi primera escena funcione. Tenemos un libro de recetas, donde toda la comunidad está añadiendo recetas sobre, por ejemplo, cómo hacer animaciones, cómo cargar modelos que no cargas de videojuegos o como gratis en internet. Y tenemos una lista de reproducción de YouTube que honestamente tuve que crear más contenido el próximo año. Esa es mi esperanza. Donde mostramos lo básico de cómo empezar.

No sería una buena charla para mí si no agradezco a nuestros patrocinadores. Así que estas son todas las personas que nos permiten seguir trabajando y proporcionar a los diferentes colaboradores algún apoyo monetario. Eso es realmente importante. También tenemos empresas que nos están apoyando patrocinando. Un gran agradecimiento a StackBlitz por la colaboración en la BitConf. Y sí, eso es todo. Muchas gracias. Todavía tengo 30 segundos. ¿Así que quieres ver otra demostración? ¿Sí? Está bien. Vamos muy rápido. Aquí y volver. Ya que estamos en un planetario, vamos, rápido, ¿qué tal algunas galaxias? Sí. Así que podemos cambiar el color. ¿Es visible? Más o menos, ¿verdad? No lo veo desde aquí. Sí, puedes cambiar el color, como cuántas aleatoriedades tienes, el tamaño de esto. Y todo esto también está hecho con componentes de view. Muchas gracias. Gracias. Gracias.