Conoce TresJS ▲ ■ ●, una forma declarativa de llevar la magia de ThreeJS utilizando componentes y composables de Vue en la vida cotidiana. Piénsalo como React-three-fiber o Lunchbox pero sin necesidad de un renderizador personalizado. Simplemente funciona.
¿Estás listo para agregar una nueva dimensión a tus aplicaciones Vue?
This talk has been presented at Vue.js London 2023, check out the latest edition of this JavaScript Conference.
FAQ
Troy.js es un renderizador personalizado que permite crear escenas 3D de forma declarativa utilizando tu framework favorito, como Vue, mediante componentes y composiciones. Se basa en la biblioteca 3GS y facilita la creación de escenas 3D sin necesidad de manejar la complejidad de WebGL directamente.
Troy.js fue desarrollado para estar actualizado con la última versión de 3GS, ser ligero y fácil de usar, mejorar la experiencia del desarrollador, soportar TypeScript y ser eficiente con la reactividad. Se buscaba una solución que se integrara bien con Vue y que pudiera mantenerse con poco esfuerzo.
Para empezar a usar Troy.js, puedes añadirlo a tu proyecto con el comando 'pnpm add 3GS core'. Esto instala la base necesaria para comenzar a crear escenas 3D en tu aplicación web, utilizando Vue como framework.
Para configurar una escena básica en Troy.js, necesitas importar el componente de lienzo de Troy desde el núcleo, agregarlo a la plantilla y asegurarte de que todos los elementos que deseas renderizar estén dentro de este lienzo. Luego, configuras objetos como la geometría, la luz, la cámara y el renderizado para dibujar todo en el elemento de lienzo.
Sí, Troy.js es compatible con versiones antiguas de Three.js siempre y cuando instales esa versión específica. Sin embargo, está diseñado para funcionar óptimamente con la última versión disponible de Three.js para aprovechar las nuevas características y mejoras.
Troy.js ofrece una integración nativa con Vue, permitiendo a los desarrolladores utilizar la reactividad de Vue y sus patrones de diseño para crear y manejar escenas 3D. Esto facilita el desarrollo de aplicaciones 3D en Vue, haciendo el proceso más accesible y manteniendo un rendimiento óptimo.
Sí, aunque Troy.js está enfocado en escenas 3D, también puede ser utilizado para crear gráficos 2D. Esto lo hace versátil para diferentes tipos de proyectos visuales dentro de aplicaciones web.
Troy.js es ideal para proyectos que requieren visualizaciones 3D interactivas, como configuradores de productos, visualizaciones de datos, juegos, y experiencias educativas o de entrenamiento. Su capacidad para integrarse con Vue lo hace especialmente útil para desarrolladores familiarizados con ese framework.
El orador descubrió el 3D con 3GS y se inspiró para crear un ecosistema 3D para la comunidad de Vue utilizando Troy.js. Se explicó el proceso de configuración de una escena 3D y objetos en Tress, junto con la creación y configuración de objetos 3D. La charla también cubrió la animación de objetos con Tress y el paquete 'Cientos', así como el futuro de Tress.js y su compatibilidad con versiones anteriores de Three. El orador expresó gratitud a los patrocinadores y colaboradores y destacó el potencial de personalización del producto con Tress.js.
1. Introducción a 3D con WebGL y Componentes de Vista
Short description:
Hola, Londres. ¿Cómo va todo? Soy de Venezuela, así que mi acento venezolano surgirá. Creo mucho contenido en Alvaro.Dev labs. Realmente quería aprender a crear videojuegos. Terminé siendo ingeniero de telecomunicaciones y luego desarrollador de front-end, donde estoy ahora mismo, estoy súper feliz. Pero dejé el 3D a un lado, pensé que era para personas realmente brillantes en génesis, como hacen esas cosas, hasta que descubrí 3GS, ¿vale?
Hola, Londres. ¿Cómo va todo? En primer lugar, me disculparé por mi mal inglés. Desafortunadamente, no tengo un acento encantador como Daniel Rowe o un acento británico, así que lo siento por asesinar su idioma. Haré lo mejor que pueda. De acuerdo, soy de Venezuela, así que mi acento venezolano surgirá. ¿Cuántos de ustedes han hecho 3D con WebGL o... bueno. Más de lo que esperaba, ¿qué les parecería si les dijera que esta escena aquí, que es una especie de escena de magia de pociones, está completamente hecha con Componentes de Vista y Compositores? De acuerdo. Al principio, el nombre de mi presentación hoy iba a ser Trace.Yes una forma declarativa de hacer 3D con Componentes Web. Pero he estado jugando Whole World Legacy como loco el último año y pensé para mí mismo, bueno, cambiemos eso. Un nombre aburrido, cambiemos eso. Y se me ocurrió, bueno, no, Chad GPT se le ocurrió esto. Trace.Yes y la Cámara de Vista desbloqueando los misterios del renderizado 3D. Así que con eso, me presento. Mi nombre es Alvaro Saborido. Soy un ingeniero de relaciones de desarrollo en StudyBlock. Soy de Barcelona, España, pero originalmente de Venezuela. Creo mucho contenido en Alvaro.Dev labs. Algunos enlaces si quieres seguirme, saludar, siempre bienvenido. De acuerdo. Sí, en realidad soy yo. No sé qué pasó. Pero ese es el niño que vive jugando videojuegos, porque sí, era un niño que amaba jugar videojuegos. Y para ser honesto, ese niño nunca creció. Aquí estoy jugando con mi gato, Geralt. Entonces, ¿cuál era mi motivación cuando era niño? Realmente quería aprender a crear videojuegos. Estaba fascinado por esa era dorada de los juegos de PS1 como Crash Bandicoot, Spider the Dragon, y quién olvidará ese buen juego de Hogwarts como Harry Potter con esos gráficos increíbles. Mira eso. HD de inmediato, ¿verdad? Así que algo a destacar aquí, quería estudiar eso, pero era muy caro en Minnesota ser desarrollador de juegos, así que terminé siendo ingeniero de telecomunicaciones y luego desarrollador de front-end donde estoy ahora mismo, estoy súper feliz. Pero dejé el 3D a un lado, pensé que era para personas realmente brillantes en génesis, como hacen esas cosas, hasta que descubrí 3GS, ¿vale? Entonces, 3GS es una biblioteca que aprovecha la parte de WebGL, la parte difícil, y la pone a disposición de los desarrolladores de JavaScript para que codifiquen y creen sus escenas.
2. Introducción a Troy.js y sus beneficios
Short description:
Encontré un increíble curso de Bruno Simon que me enseñó cómo crear mis propias escenas en 3D. Luego descubrí React 3Fiber, una biblioteca que te permite crear escenas con componentes de React. Pero como prefiero Vue, busqué una solución similar y encontré Troy.js, un renderizador personalizado que te permite crear 3GS de forma declarativa utilizando componentes de Vue. Troy.js es ligero, actualizado y proporciona una gran experiencia de desarrollo con soporte para TypeScript. Es eficiente y funciona bien con la reactividad gracias a bit.
Y descubrí este increíble curso de Bruno Simon, es el de la imagen, para aprender a hacerlo. Y seis meses después de eso estaba aprendiendo, y pude crear mis propias escenas. Luego descubrí React 3Fiber, y espera, antes de que digas por qué estás hablando de React en una conferencia de Vue, ¿verdad? Lo sé. Pero React 3Fiber es una increíble biblioteca creada por PoeMandress, que es un estudio increíble, y hicieron algo que me sorprendió. Básicamente pudieron crear una escena con sus componentes de React. Así que en lugar de usar JavaScript plano, pudieron usar eso. Pero aquí hay un truco, es que nunca usaré React. No, estoy bromeando. Uso React, pero prefiero Vue, ¿de acuerdo? ¡Nunca!
Así que estaba tratando de encontrar algo que funcionara para Vue, ¿de acuerdo? Así que encontré esta increíble biblioteca, sí, probablemente la que conoces porque fue la primera en intentar hacer un envoltorio. Así que era un envoltorio manual que intentaba replicar todos los diferentes componentes. Y luego encontré Lunchbox, que es la otra, que es un renderizador personalizado. Y quédate con esa frase, renderizador personalizado, ¿de acuerdo? Pero el problema era que Troy.js era realmente difícil de mantener. Porque era un envoltorio manual y, para ser honesto, 3GS siempre está desactualizado, cada semana hay una nueva versión. Es realmente difícil mantenerse al día con los cambios. Así es como nació Troy.js. ¿De acuerdo, qué es Troy.js? Básicamente es un renderizador personalizado que te permite crear 3GS de forma declarativa utilizando tu framework favorito. Usando componentes y composiciones de Vue. La palabra es la palabra en español para árbol. Así que es 3GS. Y está basado en la biblioteca 3GS y también porque la guerra francesa ya estaba tomada. Así que se me ocurrió eso. ¿Por qué Troy.js? Mira, ¿por qué no usar otro? Quería crear algo que estuviera actualizado con el último 3GS con pocos o ningún mantenedor porque mantener una biblioteca como esta requiere mucho tiempo y esfuerzo, ¿verdad? Es ligero para que puedas instalarlo y el rendimiento de tu aplicación web o página no se vea afectado. Que fuera explícito y fácil de usar. Eso es realmente importante para la experiencia del desarrollador. Por supuesto, enfoque en la experiencia del desarrollador. Necesitábamos algo que fuera agradable para hacer 3D. Soporte para TypeScript. Todos los que han trabajado con 3GS saben de qué estoy hablando. Y que pudiera ser eficiente incluso con la reactividad porque 3GS está impulsado por bit. Así que bit lo hace posible.
3. Configuración de una escena 3D y objetos en Tress
Short description:
Quería crear el ecosistema 3D para la comunidad de Vue. Para comenzar, puedes agregar el núcleo 3GS como una dependencia pura o probarlo en una cuadrícula de pilas. Importa el componente de lienzo Tress desde el núcleo y agrégalo a la plantilla. Configura una escena creando objetos, una cámara, una escena y un renderizado. Utiliza el enfoque de Tress importando el lienzo de Tress y una cámara de perspectiva de Tress. Agrega un objeto utilizando geometría de Torus y define un material para la apariencia deseada.
que todo vaya bien. Por último, pero no menos importante, quería crear el ecosistema 3D para la comunidad de Vue. Yo y muchos colegas queríamos crear escenas 3DS, pero no podíamos hacerlo porque no había nada similar para Vue. ¿De acuerdo? Entonces, ¿cómo podemos comenzar? pnpm add 3GS core, y como una dependencia pura puedes instalar 3, por lo que no forma parte del paquete, o puedes probarlo en una cuadrícula de pilas. ¿Y mira qué genial es esto? Estoy usando un deslizador hacia arriba, así que esto es como un markdown, ¿de acuerdo? Y he incrustado una de las escenas básicas justo aquí en Tress. Así que puedes ponerlo en tus diapositivas. Lo primero, cómo usarlo, ¿verdad? Así que necesitamos configurar un lienzo. 3GS trabaja con un elemento DOM, el elemento de lienzo para dibujar todo. Antes de poder crear una escena, necesitamos importar el componente de lienzo Tress desde el núcleo y agregarlo a la plantilla. Es muy importante que todo lo que queremos renderizar en nuestra escena esté dentro porque el lienzo de Tress creará un renderizado personalizado que funciona para las escenas 3D, como las instancias y objetos 3DS. Necesitamos para configurar una escena tres cosas. Necesitamos un objeto, y siempre digo tres cosas, en realidad son cuatro, lo siento. Así que tenemos los objetos como la geometría, la luz, el plano, simular en el suelo, necesitamos una cámara para poder verlo, necesitamos una escena para poner todo junto, y un renderizado para renderizar en el elemento de lienzo. ¿Cómo podemos configurar una escena? En la parte izquierda, sí, vamos a ver cómo hacerlo con 3DS, como 3DS vainilla. Normalmente se crea una escena utilizando el constructor 3scene. ¿Es visible, verdad? Sí. Puedes hacer una cámara creando una cámara de perspectiva de esta manera, y luego vas a pasar el lienzo al renderizador. Estás usando el renderizado WebGL, y por último, vas a usar el método render para pasar la escena y la cámara. Hagámoslo a la manera de Tress. Solo necesitas importar el lienzo de Tress. Maneja todo por ti, desde el redimensionamiento de la pantalla hasta la adaptación de la relación de aspecto, todo está cubierto, y luego solo necesitas importar una cámara de perspectiva de Tress. Todos los componentes tienen el mismo nombre que en 3GS, pero solo necesitas agregar un prefijo llamado Tress. Ahora agreguemos un objeto. Si estuvieras usando 3GS vainilla, probablemente crearías una geometría. Estoy usando geometría de Torus, pero básicamente es una rosquilla. No sé por qué no la llamaron geometría de rosquilla, es geometría de Torus. Y estos son algunos de los parámetros que vas a pasar. Luego necesitamos definir un material. Cuando la geometría es la estructura o todos los pequeños píxeles como vértices y demás. El material es cómo se verán los píxeles. De qué color serán.
4. Creación y configuración de objetos 3D en Tress
Short description:
Creas la malla combinando la geometría y el material. Luego lo agregas a la escena. Usa el componente TraceMesh y las ranuras de vista para pasar la geometría con argumentos. La propiedad args se utiliza para inicializar los argumentos, mientras que las props normales se utilizan para las propiedades. Las ranuras de vista permiten pasar parámetros dentro de la malla. Hagamos una Demostrum y revisemos la aplicación básica de trussES.
Vamos a tener. Como qué tan reflectantes van a ser. Luego creas la malla. Ellos van a crear la malla, es la combinación entre la geometría y el material y luego boom, tienes tu objeto. Lo agregas a la escena. Con 3GS, tienes que importar el componente TraceMesh y vamos a usar ranuras de vista aquí para pasar la geometría con algunos argumentos. Puedes ver que los argumentos son exactamente los mismos que estábamos pasando al constructor aquí. Puedes pasar cualquier parámetro para inicializar los constructores usando la propiedad arch. Luego podemos hacer un material básico de TraceMesh y pasar el color como una prop. Eso también es posible. Y boom, tenemos una rosquilla realmente fea. Pero lo logramos. Tenemos nuestra escena, ¿verdad? Genial. Me encanta ese meme. Ok, ¿cómo funciona en el underground? Estamos tomando el último árbol. Estamos tomando la última versión de tree, y estamos tomando todas las diferentes instancias, todas las diferentes propiedades, métodos, todo, y estamos aplicando un poco de magia, que es el renderizado personalizado K8. Y esto convierte todo en componentes de vista que puedes usar. Así que hablemos de los argumentos, porque tocamos ese punto con frecuencia, ¿verdad? Puedes inicializar cualquier argumento como lo harías en un tree.js como este, la cámara de perspectiva, estás pasando el campo de visión, la relación de aspecto y qué tan lejos y cerca está, estos valores aquí. Y la forma de hacer eso en tree.js y tree.js será con la propiedad args. Luego tienes props normales, que son similares a las propiedades, ¿ok? Así que puedes pasarlos como esto, y esto será similar a inicializar el constructor vacío sin ningún parámetro y luego simplemente cambiarlo punto, punto, punto, punto, y tendrás lo mismo. Mencioné las ranuras de vista porque puedes pasar parámetros dentro de la malla para crear algo similar a esto. Así que cada vez que estés pasando componentes dentro de otro componente, se hará una referencia como si fuera un atributo en el inicial o en el padre. Así que, sí, hagamos una Demostrum. Sí, lo sé, el hechizo salió mal y es mi primera codificación en vivo, así que sean amables conmigo, por favor. Por supuesto. Lo sé, esto es en realidad la página. Déjame revisar, ¿dónde está? Aquí. Bien. Ok. Así que, viste que estaba negro como la noche, ¿verdad? Porque necesitamos una cámara para poder verlo. Así que aquí tienes la más
5. Uso de trussCanvas y Agregando Objetos
Short description:
Has importado trussCanvas y has pasado un color claro. Luego, has agregado una cámara de perspectiva truss sin ningún parámetro. A continuación, has agregado un cubo utilizando TressBoxGeometry y un material normal. Por último, has importado el componible use render loop para acceder al bucle de renderizado proporcionado por Tress Canvas.
Aplicación básica de trussES. Has importado trussCanvas y estoy pasando un color claro, que básicamente será el color de fondo. Vale. Así que, aquí voy a hacer truss cámara de perspectiva. No voy a pasar ningún parámetro. ¿Vale? Voy a guardar. Y luego ¿dónde estás? Déjame ponerlo de inmediato. No hago esto tan a menudo. Disculpa por eso. Ahora podemos ver el color que hemos definido. Así que vamos por buen camino, ¿verdad? Ahora, hagamos algo más. Agreguemos un cubo. Entonces, la forma en que podemos usar un cubo es pasando tress mesh. Y dentro de él, usemos TressBoxGeometry. Ese. Y esto es reciente. Porque en la versión 1, no teníamos TypeScript. Así que esto era un recuerdo antes. agreguemos un material normal. Y ahora tenemos un bonito cubo, ¿verdad? Gracias. Me alegra que haya funcionado. Vamos a hacer otra cosa que es realmente genial. Así que también mencioné los componibles, ¿verdad? Vamos a importar un componible. Que se llama use render loop. En los juegos y en 3D en general, se renderiza cuadro por cuadro porque si haces una animación, vas a renderizar varias imágenes de manera oportuna para que se vean suavemente. 60 cuadros por segundo. Eso es. Así que Tress Canvas ya lo hace por ti. Crea ese renderizado
6. Animando Objetos con Tress y Reactividad
Short description:
Vamos a usar el componible para animar nuestro cubo. La reactividad en Tress se basa en proxies, lo cual puede causar una disminución en la velocidad de fotogramas. Para superar esto, utilizaremos referencias de plantilla, específicamente una referencia superficial, para obtener eficientemente la instancia del componente. Esto permitirá una animación más suave.
loop. Y puedes acceder a él utilizando el componible use render loop. Entonces, vamos a usar el componible para animar nuestro cubo. Y aquí viene algo realmente importante sobre la reactividad y el uso de Tress. Entonces, sabes que la reactividad del visor se basa en proxies, ¿verdad? Entonces, podrías pensar en este momento, bueno, si quiero animarlo, haré algo como rotación, luego no sé, una referencia o reactiva. ¿De acuerdo? Es solo un ejemplo. Y lo pasaré a la malla como una propiedad, ¿verdad? Entonces, haremos algo como posición y luego así. Esto funcionará. ¿De acuerdo? Pero como esto es reactivo, tus fotogramas por segundo disminuirán. Porque la reactividad de la vista se basa en proxies. No son tan rápidos como los objetos simples. Entonces, la forma recomendada de hacer esto es en realidad deshacernos de esta rotación aquí. ¿De acuerdo? Y vamos a usar referencias de plantilla. ¿Alguien está familiarizado con las referencias de plantilla? En Vue? ¿De acuerdo? Entonces, básicamente una referencia de plantilla es una forma de obtener la instancia de la plantilla para ese componente. ¿De acuerdo? Entonces, aquí voy a crear una referencia de cubo. Vamos. Y verás que estoy usando una referencia superficial. Increíble para la reactividad. Porque la referencia superficial te permitirá ser más
7. Animando Objetos y el Paquete 'Cientos'
Short description:
Vamos a rotarlo. Entonces, esperemos que esto funcione. ¡Yay! ¡Funcionó! Ok. Nunca volveré a hacer esto. Mi idea era crear un ecosistema de aplicaciones, paquetes y más. Tenemos otro paquete llamado 'Cientos' que incluye toda la estructura, shaders y geometrías. Es más fácil de usar y no está incluido en el paquete principal debido a su tamaño.
eficiente. Oh, cinco minutos. Ok. Lo haré mucho más rápido. Entonces, vamos a ver... Lo vamos a pasar aquí. Perdón. Haz esto. Ref de la caja. No así. Y vamos a ver probablemente watch effect. No. Ni siquiera. Vamos a ir aquí y decir si el valor de la ref de la caja. Si está disponible y no es ahora. Ok. Probablemente mover esto hacia arriba. Vamos a rotarlo. Entonces, esperemos que esto funcione. ¡Yay! ¡Funcionó! Ok. Nunca volveré a hacer esto de nuevo. Permíteme refrescar esto e ir a... ¿dónde está? Aquí. Ok. Muy rápido. Entonces, mi idea era que esto fuera un ecosistema de aplicaciones, paquetes, etc. Tenemos otro que no usé en la demo. Lo olvidé. Es el paquete. Y es la palabra para cientos en español. Y básicamente, es toda la estructura, todos los shaders, todas las diferentes geometrías. Más fácil de usar. Puedes tenerlo en un Cientos. ¿Por qué no en el paquete principal?
8. Introducción al Ecosistema 3ds y Código Abierto
Short description:
El paquete principal es básico, pero para una mejor experiencia de desarrollo, puedes usar Cientos. 3ds está destinado a ser un ecosistema y tenemos un plan de desarrollo futuro. Estamos tratando de traducir la documentación, crear controles de presentación y más. Los recursos incluyen documentación, Stack Blade Discord y tutoriales en mi canal de YouTube. Quiero destacar el increíble esfuerzo de todos los colaboradores. Este proyecto está a punto de ser de código abierto y cuento con la ayuda de increíbles colaboradores. Cambiemos la visibilidad en GitHub y hagámoslo de código abierto.
Debido a su tamaño, el paquete principal es básico. Puedes hacer todo con eso. Pero si quieres tener una mejor experiencia de desarrollo, puedes usar Cientos. ¿De acuerdo? Y también, sé que es un chiste malo, pero 300 es como 300. De acuerdo. Suficiente. Lo siento por eso. Entonces, aquí tengo algunas de las estructuras. Como texto, 3D, puedes crear texto en 3D. Puedes usar animaciones. Puedes cargar modelos como el que puse al principio usando este componente componible aquí. Entonces, todo lo que extiende el paquete principal, ¿de acuerdo? Oh, permíteme refrescar ahora. Entonces, una de las estructuras, por ejemplo, es el componente float o Levioso. Eso te permite hacer flotar lo que sea que pongas dentro. Entonces, si pones una pluma, vas a tener Levioso, como Hermione. 3ds está destinado a ser un ecosistema, por lo que el paquete principal y Cientos son mantenidos por nosotros. Tenemos en el plan de desarrollo el procesamiento posterior que ya está en proceso. Y quién sabe, tal vez tu paquete pueda formar parte del ecosistema en el futuro. Esto es un plan de desarrollo. Quiero destacar el trabajo del equipo de Nuxt Lab porque esto es Volta y lo estoy usando con mi equipo para poder establecer un plan de desarrollo y tener claridad sobre las prioridades, etc. Entonces puedes ver que estamos tratando de traducir la documentación, crear controles de presentación, HTML, sombras de contacto y algunas cosas interesantes. Algunos recursos aquí, mis diapositivas estarán disponibles tan pronto como las arregle porque no sé, tengo un problema con el sitio web de las diapositivas, pero aquí están las documentaciones, Stack Blade Discord y algunos tutoriales en mi canal de YouTube. Quiero destacar el increíble esfuerzo de todos los colaboradores porque esto está a punto de ser de código abierto y cuento con la ayuda de increíbles colaboradores que me han ayudado como Jaime Torrella, Tino, Will, Konstantin, Brandy, Maddie y en el futuro tal vez tú. Muchas personas me han preguntado por qué aún no es de código abierto. Cambiemos eso básicamente. Voy a ir a GitHub. ¿Dónde estás? Y cambiemos la visibilidad a público. Sí, tengo efectos de lectura. Vamos. ¿En serio? Esto fue
9. Lanzamiento y Agradecimiento
Short description:
Hoy estamos lanzando la versión dos y el paquete Cientos. Estoy agradecido por el apoyo de mis patrocinadores y colaboradores, y animo a otros a contribuir también. Un agradecimiento especial a Cody Bennett, Patrick, Daniel Rowe y Shaq por su ayuda. Las demostraciones fueron increíbles y resolviste el problema de 2FA como un profesional.
Este era mi momento. Vamos. Brillante. Sí. Por favor. Ahí lo tienes. Está publicado. A partir de ahora, la versión dos, la vamos a lanzar hoy, esta versión candidata, pero también vamos a lanzar hoy el paquete Cientos. Y el resto de los paquetes ya están ahí. De acuerdo. Y si me encuentro de nuevo, no sé cuánto tengo, pero quiero decir algo más. No. De acuerdo. Así que dedico tiempo, voy allí, abro tickets, lo estrello, contribuyo, estoy esperando por eso. Realmente me encanta cómo la gente ya lo está utilizando. Así que muéstrame tus cosas. Estaré encantado de ponerlo en el playground. Gracias a mis patrocinadores, Sunny Devs, Smart Bakes, EZ Teams, Kisu, Masterjury y Storyblock. Ese fue mi patrocinador antes de unirme a la compañía. Ahora mismo, estoy estableciendo el patrocinador para Tress ES para poder patrocinar también a mi equipo. Esa será la idea. Si puedes contribuir, genial. Y un agradecimiento especial a Cody Bennett de PMAndrez que me ayudó con la API de renderizado personalizado. Y gracias a Patrick por su presentación y ayuda. Sí. Y a Daniel Rowe por toda la ayuda y también a Shaq del equipo de PMAndrez. Así que muchas gracias. Muchas gracias. Fue maravilloso. Tan mágico también, me encantaron todas las demostraciones. Además, nunca había visto que el 2FA arruinara el ánimo de alguien así, pero lo manejaste como un profesional.
10. Compatibilidad con Versiones Antiguas y Casos de Uso
Short description:
¿Se puede usar Tress.js con una versión antigua de Three? Sí, si instalas esa versión antigua de Three. ¿Qué tipo de proyectos o casos de uso existen para Tress.js? Se puede utilizar para proyectos que no sean en 3D o basados en AR. Alguien hizo una prueba de concepto para su empresa utilizando Tress.js y creó una animación increíble con un zapato.
De acuerdo. Tenemos muchas preguntas llegando. También estamos trabajando para asegurarnos de que todos se sientan más cómodos también. Pero primero, la pregunta. Esto es increíble. En primer lugar, ¿se puede usar Tress.js con una versión antigua de Three, como por ejemplo una antigua de hace un mes o con otros componentes y argumentos vinculados a la última versión? Así que se puede usar con Vue 3. Aún no lo he hecho posible con Vue 2. Tiempo. Pero dado que ya ha salido, el soporte oficial eventualmente se eliminará. Así que me estoy centrando en Vue 3. Pero la última parte de la pregunta, ¿cuál era? Objetos. O los componentes y argumentos están vinculados a la última versión de Vue. Perdón. Mi error. De acuerdo. Son las versiones de Three. Sí. Sí. Así que cuando instalas al principio, agregas el núcleo de Tress.js e instalas Tress.js, esa será la última versión de Three y funcionará de inmediato. Porque está mapeando todo lo que está ahí. Así que si lanzan mañana un nuevo, no sé, shader o una nueva propiedad, estará disponible de inmediato. ¿Y funcionaría con versiones antiguas de Three? Si instalas esa versión antigua de Three, sí. De acuerdo. Perfecto. Increíble. Y alguien, me encanta esta pregunta, ¿qué tipo de proyectos o casos de uso existen para Tress.js? O parafraseando, ¿cómo puedo convencer a mi jefe de usar esto en algo que no sea en 3D o basado en AR? Esta persona realmente quiere poner sus manos en esto. Wow, eso es increíble. Me encanta escuchar eso. Honestamente, ayer alguien me escribió que estaban haciendo una prueba de concepto para su empresa utilizando Tress.js y crearon esta increíble animación
11. Personalización de Productos y el Futuro de Trust.js
Short description:
Era un zapato como Nike. Estaban haciendo cosas increíbles como cambiar la cámara. La personalización de productos permite a los usuarios personalizar su producto. Recientemente, hice una prueba de concepto con Storyblock, un configurador de coches. Contar historias en 3D es inmersivo y cautivador. Trust.js se puede utilizar tanto para gráficos 3D como 2D. El futuro de Trust.js parece prometedor con la introducción de WebGPU en la última versión de Chrome.
con un zapato. Así que era un producto como vender un producto. Era un zapato como Nike. Y estaban haciendo cosas increíbles como cambiar la cámara. Hay personalización de productos. Por ejemplo, le das a tus clientes, a tus usuarios la oportunidad de personalizar su producto. Así que están comprando unos zapatos que pueden personalizar a su gusto, como los colores, los materiales, todas esas cosas. Recientemente hice una prueba de concepto con Storyblock. Eso probablemente será mi próximo tema de charlas. Un configurador de coches. La industria del automóvil normalmente permite al usuario poner diferentes materiales como la pintura o el color del aro. Es algo que se puede hacer con 3D, y es una forma interactiva de estar con tu audiencia. Contar historias. Para agencias, para marcas, no sabes cuánto le gusta a la gente entrar en una página y sumergirse en la experiencia, y puedes contar tu producto de una manera 3D. Esos serán los primeros. Pero si tienes algo en mente, envíame un mensaje en Alvaro Savo, y hablemos. Estoy más que feliz de ayudar. Increíble. Increíble. Y nos mostraste algunos gráficos 3D. ¿También se puede usar Trust.js para gráficos 2D? Sí. Fácil. Fácil pregunta. Muy bien. Otra pregunta sobre el futuro de Trust.js. Ahora que Chrome ha introducido WebGPU como parte de su última versión, ¿hacia dónde ves el futuro de estas bibliotecas? Estoy realmente emocionado por eso porque muchas cosas están cambiando en el ecosistema 3D. Estoy hablando con muchos motores web que están haciendo pruebas de concepto con eso. Voy a agregar una prueba de concepto con lo mismo que 3DS para intentar que funcione. Pero ahí es donde está el futuro, y espero que sea fácil hacer la transición. Genial. Pensé en guardar esta pregunta hasta el final, pero es mi pregunta favorita de todas.
12. Calidad y Persistencia al Estilo Slytherin
Short description:
¿Cuál es tu cualidad más parecida a Slytherin? La audiencia lo votó. Fue la pregunta número uno. Persistencia. Persistencia.
¿Cuál es tu cualidad más parecida a Slytherin? La audiencia lo votó. Fue la pregunta número uno. ¿Okay? ¿Cómo se dice eso en inglés? ¿Cabeza dura? Hasta que lo haga, no... Perdón, mi inglés... No, no te preocupes. No me rindo. Bien. Persistencia. Persistencia. Increíble, increíble. Demos un gran aplauso. Muchas gracias.
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
Vue 3 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.
Vue3 fue lanzado a mediados de 2020. Además de muchas mejoras y optimizaciones, la principal característica que trae Vue3 es la API de Composición, una nueva forma de escribir y reutilizar código reactivo. Aprendamos más sobre cómo usar la API de Composición de manera eficiente.
Además de las características principales de Vue3, explicaremos ejemplos de cómo usar bibliotecas populares con Vue3.
Tabla de contenidos: - Introducción a Vue3 - API de Composición - Bibliotecas principales - Ecosistema Vue3
Requisitos previos: IDE de elección (Inellij o VSC) instalado Nodejs + NPM
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.
Si encontrar errores en tu proyecto frontend es como buscar una aguja en un pajar de código, entonces el monitoreo de errores de Sentry puede ser tu detector de metales. Aprende los conceptos básicos del monitoreo de errores con Sentry. Ya sea que estés ejecutando un proyecto de React, Angular, Vue, o simplemente JavaScript “vainilla”, mira cómo Sentry puede ayudarte a encontrar el quién, qué, cuándo y dónde detrás de los errores en tu proyecto frontend. Nivel de la masterclass: Intermedio
Construiremos un proyecto Nuxt juntos desde cero usando Nitro, el nuevo motor de renderizado de Nuxt, y Nuxt Bridge. Exploraremos algunas de las formas en que puedes usar y desplegar Nitro, mientras construimos una aplicación juntos con algunas de las restricciones del mundo real que enfrentarías al desplegar una aplicación para tu empresa. En el camino, dispara tus preguntas hacia mí y haré lo mejor para responderlas.
¡Nos encantan las aplicaciones web fáciles de crear y desplegar! Entonces, veamos qué puede hacer una pila tecnológica muy actual como Nuxt 3, Motion UI y Azure Static Web Apps. Podría ser perfectamente un trío de oro en el desarrollo web moderno. O podría ser una hoguera de errores y problemas. De cualquier manera, será una aventura de aprendizaje para todos nosotros. Nuxt 3 se lanzó hace apenas unos meses y no podemos esperar más para explorar sus nuevas características, como su compatibilidad con Vue 3 y el Motor Nitro. Agregamos un poco de estilo a nuestra aplicación con la biblioteca Sass Motion UI, porque el diseño estático está pasado de moda y las animaciones vuelven a estar de moda.Nuestra fuerza impulsora de la pila será Azure. Las aplicaciones web estáticas de Azure son nuevas, casi listas para producción y una forma ingeniosa y rápida para que los desarrolladores desplieguen sus sitios web. Así que, por supuesto, debemos probar esto.Con algunas Azure Functions esparcidas por encima, exploraremos lo que puede hacer el desarrollo web en 2022.
- Introducción a 3D- Introducción a WebGL- ThreeJS- Por qué TresJS- Instalación o configuración de Stackblitz- Conceptos básicos- Configuración del lienzo- Escena- Cámara- Agregar un objeto- Geometrías- Argumentos- Props- Slots- El bucle- Composable UseRenderLoop- Callbacks antes y después de la renderización- Animaciones básicas- Materiales- Material básico- Material normal- Material Toon- Material Lambert- Material estándar y físico- Metalness, roughness- Luces- Luz ambiental- Luz direccional- Luces puntuales- Sombras- Texturas- Cargar texturas con useTextures- Consejos y trucos- Misceláneo- Controles de órbita- Cargar modelos con Cientos- Depuración de tu escena- Rendimiento
Comments