De Blender a la Web - el Viaje de un Modelo 3D

Buenos días a todos. Quiero decir que tengo un resfriado, pero me hice la prueba y no es COVID, así que lo peor que vas a conseguir es un resfriado, que, quiero decir, toma lo que te dan, ¿verdad? Bueno, eso no fue gracioso y me disculpo. Quiero decir, creo que escuché como dos risas. Gracias. No sé quién fue. No puedo ver a ninguno de ustedes, lo cual es agradable. Bueno.

Entonces, sí. Como dijo Elie, mi nombre es Saru Wieda, que, Elie es una de las únicas personas que puede pronunciar mi nombre correctamente, lo cual aprecio. Usualmente solo algo como Vieda, algo así, que no sé. Pero sí. Entonces, voy a hacer mi charla. Sé que son las 10 a.m. y vamos a ver Blender, que es algo que muchos de ustedes no han visto. Y si lo han visto hace muchos años, les prometo que se ve mejor. Se veía realmente mal. Y por eso nadie lo usaba. Así que comencé a usar Blender a mediados de la pandemia o algo así, no sé, cuando todos comenzaron a hacer sus hobbies, básicamente.

Y entonces esto es una de las cosas que hago—¿Pueden ver mi ratón? Sí. Entonces esto es una de las cosas—Además, traje un ratón porque ahora soy esa persona. Entonces esto es una de las cosas que hice y lo que vamos a intentar hacer hoy aquí, juntos como una familia, todos juntos en una conferencia real, es—¡Guau!—es que vamos a intentar llevar a este pequeño chico, al que voy a considerar un chico, aparentemente, a la web y intentar ponerlo en un sitio web. Bueno, entonces, ¿quién soy yo? Mi nombre es Sara. Sara—como quieras llamarme, no me importa. Trabajo como desarrolladora front-end en una empresa llamada Remote, lo cual es muy confuso para decirle a la gente, cuando preguntan, ¿dónde trabajas? Y yo digo, trabajo en Remote. Y ellos dicen, sé que trabajas de forma remota, pero ¿dónde trabajas? Y simplemente sigue y sigue hasta que uno de nosotros se rinde, y es como, está bien, ya no me importa. Pero, sí. Entonces, Remote es una empresa que ayuda a las empresas a contratar trabajadores remotos con, como, lo normal, sabes, tiempo de vacaciones y no eres un contratista, básicamente, lo cual es bastante agradable. Sí. Entonces, estamos contratando. Diles que te envié yo. En realidad, no. Eso suena terrible. No les digas que te envié yo. Y me encanta hacer cosas en 3D. Comencé a usar Blender, como dije, en medio de la pandemia, y me enamoré de él. Entonces, todas estas cosas que viste, las hice con mis propias manos, y tengo una computadora Windows, si alguien va a preguntar, ¿puedo usar Blender en una Mac? Puedes. Pero es doloroso como el infierno. Como, hace sonidos que no sabías que una computadora podía hacer. Y crees que lo sabes por NPM, pero confía en mí, no lo sabes. Entonces, hay una charla... Guau. Ha pasado tanto tiempo desde que hice una charla, que estaba como, ¿cómo se llama esto? La charla se dividirá en partes. En la primera parte, vamos a ir a Blender y simplemente exportar al pequeño. Y luego, en la segunda parte, vamos a saltar a la web. Bueno. Entonces, si nunca has oído hablar de Blender, Blender es un software 3D gratuito y de código abierto. La razón por la que hay un asterisco en 3D es porque en realidad hace otras cosas. Como hace 2D. También hace edición de video.

El aspecto 2D no está mal, pero todo lo demás es como... Es mayormente conocido por su aspecto 3D. Y sí, es gratuito y de código abierto. También puedes escribir plugins y cosas procedimentales en Python, si sabes Python. Yo no. Así que, ahí lo tienes.

Vamos. Voy a abrir Blender y así es como se ve ahora. Si lo has usado antes, se veía peor. Mucho peor. ¿Alguien aquí ha abierto Blender alguna vez? ¿Antes de la versión 2.8? Vale. Así que nadie ha visto lo mal que estaba. ¿Así que no entiendes lo bien que se ve ahora? Estás como, esto ni siquiera se ve tan bien. No, no entiendes. Te ruego que busques en Google Blender 2.7 UI. Vale.

Así que esta es mi pequeña taza y hay principalmente tres vistas aquí en Blender. Así que esta que tengo ahora es solo para que veas las mallas que son el pequeño cubo, una bola, lo que sea, y todo lo que tienes en la escena. Y luego hay dos vistas de renderizado. Y hay algo llamado E.V. y algo llamado Cycles.

E.V. es lo mismo, no lo mismo, pero el mismo IDS 3.js. Así que no es físicamente bueno. Esto imita la luz y cómo debería rebotar la luz, pero lo descubre por, no sé, AI y Python. Probablemente no sea AI. Son solo un montón de declaraciones if. Quiero decir, ¿qué es AI? Un montón de declaraciones if. Y así que esto es nuevo, lo que hace que sea completamente factible usarlo en una Mac porque no hace realmente todo eso. Así que si cambio a E.V. aquí y tarda un poco y voy a la cámara, así es como se ve en E.V. Así que puedes ver que si lo muevo, la luz hace esta sombra, cosa rara. Y eso es porque lo está calculando en tiempo real. Si piensas en motores de juegos como Unity o Unreal o algo así, hace lo mismo pero peor. Ahí lo tienes. No sé si alguien ha visto Unreal 5, pero es mucho peor que Unreal 5. Eso ni siquiera va a ir allí. Así que sí, E.V. E.V., este ciclo es el que hace que tu ordenador vaya. No sé si eso fue demasiado fuerte. Así que esto es Cycles, y vas a estar bien. Así que sí, esto es Cycles, y lo que hace Cycles es imaginar cada haz de luz en esta habitación, literalmente calcula dónde rebota y dónde se refracta y todo para cada uno de esas luces. Y cada luz tiene como mil puntos de luz, así que necesita una muy buena tarjeta gráfica. O cualquier tarjeta gráfica. Así que MacBook es un no-no. Así que sí, este es el más realista, pero no es el que vamos a usar. Así que sí. Volvamos a Eevee para que mi ordenador no muera. Y quería explicar principalmente esto. Y también quería mostrarte algo aquí, así que, imagina que quieres cambiar un color o algo así.

Entonces, hay esta pequeña pestaña aquí, y la tengo en naranja. Y hagámosla azul o algo así. Así que este archivo blend, si quieres jugar con él, es completamente gratuito. Esto es cero, lo que sea. Y puedes simplemente descargarlo, hacer lo que quieras. Por favor, no dibujes nada raro en él porque se ve tan feliz. Pero aparte de eso, sí.

Lo que sea. Así que una cosa muy importante es saber cómo, digamos que descargaste un modelo de la internet, como Sketchfab. La internet. Y quieres exportarlo a algún lugar. Así que lo primero es que cualquier malla puede tener varias mallas en ella. Así que esto tiene un círculo, del cual no tengo idea de qué es, y tiene otro círculo. Ahí lo tienes. Tiene sentido, porque nombré mis cosas, ¿verdad? Debería haberlo nombrado. Pero hay un botón. Si haces clic en el lado derecho. Lo siento. Cambio. Tengo problemas con la derecha de la izquierda. Y tengo una licencia. Así que piensa en eso por un momento. Y seleccionas la jerarquía. Esto significa que seleccionará todo en ella. Así que si hago clic en G para moverlo, puedes ver que mueve todo en él. Vale. Genial. Así que vamos a exportar. Así que archivo, y puedes hacer clic en exportar. Y para la web, deberías usar gltf. gltf es un formato que se utiliza principalmente para la web. Vale. Genial. Eso es todo. Así que ya estoy en la cosa. Así que Blender a la web, déjame ir a público. Así que hay principalmente tres tipos. Así que hay un binario, y hay un archivo gltf. La gente te dirá que uses el binario, porque es un poco más pequeño. Yo también lo haría. Pero el otro es simplemente puro JSON. Y esto es una masterclass, así que voy a usar el otro, porque amo el JSON. Así que gltf embed es un archivo JSON. Es un archivo JSON muy aterrador, terrible, pero es un archivo JSON. Y algo muy importante que siempre debes hacer clic, es aplicar modificadores. Y hay algo más. Do, do, do. Incluir objetos seleccionados. Porque de lo contrario, va a poner literalmente toda tu escena. Lo cual no es lo que queremos.

Así que voy a llamarlo el chico, y voy a activar la compresión. Vale. Exportar gltf. Veamos qué pasa. ¿Verdad? Vale. Así que tengo esto. Y vamos a abrir este archivo. Y puedes ver que es un archivo JSON muy aterrador. Así que esta parte es porque es una imagen. Como una textura. Y es solo... Ya sabes, nadie va a leer esto nunca, pero finjamos que todo tiene sentido, ¿verdad?

Vale. Así que lo primero que quiero hacer es minimizar esto aún más. Así que tengo... Tengo hojas de trucos. Y quiero usar la transformación gltf. Y esto añade una compresión draco a ello. Así que voy a ir a public, y chico, y luego llamarlo... Así que enviar a public. No, no. Ahí va. Chico, eso... Vale. Draco, lo que sea. El gltf. Y esto va a comprimirlo más. Vale. Digo abrir punto... Debería haber estado en public. Hizo la cosa. Vale. Así que... Bien. ¿Dónde está? Son 1.2 megabytes. Y este ahora mismo... ¿Dónde está eso? Son 406 kilobytes. Así que simplemente, como, comprime todo realmente grande. Realmente mucho.

Así que el primer paso de esto es que necesitamos transformar este gltf en JSX. Y podemos hacer eso usando una herramienta en línea. O puedes hacer eso usando la línea de comandos. Pero como tengo internet, voy a usar la herramienta en línea. Así que voy a soltarlo aquí. ¿Por qué abrí todo mi asunto de nuevo? Esto no fue una buena idea. Vale. Así que abrir... Es como, no... Todas mis películas pirateadas. No puedes piratear cosas en Alemania, por cierto. Vendrán a por ti.

Literalmente. Vendrán a tu casa. A mí aún no me ha pasado. Así que aquí está el pequeño. ¿Verdad? Y aquí tenemos un conjunto muy pequeño de code que no puedes leer. Pero te prometo que podrás leerlo en el J... Ya sabes a qué me refiero. El code s. Ahí vamos. Así que déjame copiar esto. Y lo primero que voy a hacer es pegarlo aquí. Así que este es el sitio, y tenemos esta pequeña taza de café, que no nos importa. Vamos a matarlo con fuego. Y vamos a poner al pequeño personaje funky aquí. Oh, ahora es una persona. Vaya. Está bien. Ha sido ascendido a persona. Eso es genial.

Hay tres cosas que necesitas instalar, que yo preinstalé. Que es... Así que necesitas agregar React... Ven aquí. Tres. React 3 fiber y React 3 dry. Así que fiber es el... Cómo... Es el... Dios, olvidé el nombre de la cosa de React. La cosa nativa de React. Que es el... Hace... Vale. React 3... Necesitas eso. Y luego tienes React 3 dry, que es un conjunto de ayudantes que te ayudan con muchas cosas. Porque son ayudantes. Son buenos en eso.

Vale. Así que tengo un modelo, y es un componente, y no puedo exportar un predeterminado, así que solo voy a... No sé por qué sigo haciendo codificación en vivo en las charlas. Me odio a mí mismo. Vale. Vale. Vale. Así que ahora, deberíamos obtener un error. Algún día. ¿Está compilando? Uh. Uh. Disco correspondiente. No. ¿Qué? No hagas codificación en vivo, niños. Nunca he visto ese error, y he visto muchos errores cuando se trata de 3JS. Como muchos de ellos. No sé lo que significa esto. No puede encontrar... No nombra en el disco. No recomienda... Vale. Vale. Así que probablemente esto es un problema con el hecho de que 3 probablemente se actualizó desde la última vez que lo usé y ahora está abierto en GitHub. Así que vamos a resolver esto juntos. Abrir archivo en remoto. Y vamos aquí, y vamos a la principal... ¿Ves? Fui lo suficientemente inteligente como para al menos empujar esto. Así que eso es algo bueno. Vale. Copiemos esto. Peguémoslo aquí.

Eso no fue un pegado. Lo siento. Este es un teclado alemán. Jesucristo. Pasaron muchas cosas allí que no sé lo que significaban. Pero sí, bienvenidos a los teclados alemanes. Vale. Así que déjame ejecutar Yarn de nuevo. Y todo lo que podemos hacer es realmente solo esperar lo mejor. Vale. No lo hicimos. Y está bien. Su ratón tiene botones que hacen cosas. ¿Funcionarás por el amor de Dios? Me está haciendo esto. Y pido disculpas por desperdiciar el tiempo de todos. Pero créeme, esto es mucho peor para mí de lo que es para ti. ¿Cómo está todo el mundo? ¿Alguna vez simplemente, haces algo que no has hecho en mucho tiempo? Y estás como, me pregunto por qué no he hecho eso en mucho tiempo? Y luego lo haces. ¿Verdad? ¿Y luego la vida es dolor? Y estás como, oh, ahora recuerdo. Como cuando no has, oh, gracias a Dios. En caso de duda, es Yarn. Quiero decir, npm, es lo mismo. No importa.

Bueno, entonces todavía no entiendes... Dios, necesito un momento. Bueno, entonces todavía no entiendes nada. Y eso es porque para renderizar cualquier cosa en react-3-fiber, necesitamos un lienzo. ¿Verdad? Así que vamos a importar el lienzo de react-3-fiber. Y esto es como, esto le está diciendo a React y a todo que, todo lo que está dentro de aquí no es DOM, es básicamente WebGL. ¿Verdad? Así que déjame cerrar este lienzo. Y ahora, como, debería mostrar una versión realmente triste de él. Que es como, es solo... Es como... Esto se supone que debe suceder, por cierto. Solo soy muy torpe.

Entonces, lo que está sucediendo ahora es que todo lo que sucede en 3D necesita luz. Entonces, si no hay luz... Como en la vida real, ¿verdad? Si no hay luz, te vas a golpear el pie con algo, y vas a pisar un Lego y vas a llorar. No es que esto me haya pasado a mí. Sí. ¿Y qué es lo que no tenemos? Gracias, gracias. Lo siento. Necesito interacción ahora mismo. Así que voy a abrir mis pequeñas cosas, y voy a añadir dos luces aquí. Una de ellas es una luz ambiental. Y una luz ambiental no tiene sombra. Pensar en una luz ambiental no tiene sentido en la vida real. Pero hay un punto de luz que se propaga uniformemente en todas partes y no hace sombra. Y el foco son estas cosas que están arruinando mis ojos ahora mismo. Así que eso proyecta una sombra. Así que ahora puedes ver que tenemos un poco de, como, no un poco, pero tenemos algunas luces, y tenemos un poco de sombra. Vale.

Eso se ve genial, ¿pero se ve lo suficientemente genial? No. Así que lo que queremos usar aquí es algo llamado escenario. Y un escenario es algo que React 3 Dray tiene para mostrar tu modelo 3D, ¿verdad? Así que voy a usar esto. Y lo voy a cerrar aquí. Y en realidad voy a importar esto de un componente que hice, que es sobre lo mismo, pero le añadí algunas propiedades. Y ya hice un componente PR, escenario. Ahí vamos. Así que lo que hace un escenario es que hace que todo se vea mejor instantáneamente, porque crea un pequeño, como... Ya sabes, como un escenario. Como, ya sabes, como... Las luces en tu cara. Literalmente esto, ¿verdad? Genial, genial, genial, genial. También hay un montón de entornos, que puedes comprobar... Si borro esto, creo que me va a mostrar las definiciones de tipo. No lo hace. Pero hay algo llamado, como, amanecer, por ejemplo. Y esto básicamente descarga imágenes de la web para poner un entorno en él. Los probé todos. El que mejor se veía era noche. Así que esto se ve bien, ¿verdad? Tenemos al pequeño nugget boy allí. ¿Pero qué tal si lo animamos? Lo sé.

Lo sé. Lo sé. Vale. Así que podemos hacer esto. Juntos como una familia. ¿Vale? Bien. Entonces, como puedes ver, este ref aquí está marcado como un ref usado, lo que significa que tenemos acceso a todo el grupo. Piensa en un grupo como un div o un G en SVG. Así que simplemente agrupa la cosa, ¿verdad? Y luego cuando lo mueves, mueve todo lo que está dentro de él. Por eso cuando estás en Blender, haces que las cosas sean padres de otras cosas, y entonces todo es todo. Ahí lo tienes. Buena charla, ¿verdad?

Vale. Así que una cosa que necesitamos hacer es importar algo llamado used frame. Y explicaré lo que hace. Y podría hacer un console.log, pero no lo voy a hacer porque mataría mi ordenador. Así que lo que hace used frame, no lo importó, ¿verdad? ¿Lo hizo? Vale. Genial. Lo que es used frame es que cuando estás esto no funciona como el DOM normal. Así que gracias a Dios, cada vez que lo miras por cada segundo, hay 60 frames. Quiero decir, dependiendo de tu ordenador, obviamente. Pero se supone que hay 60 frames. Así que esto se ejecuta en cada frame. No está pasando nada ahora mismo porque no está pasando nada ahora mismo, ¿verdad?

Así que vamos aquí. Y vamos a obtener la posición y la rotación del elemento. Y si está bien, déjame explicar la posición. Así que la posición x es esta. Y es esta. Y z es la que está frente a tu cara. Así que si quiero moverlo un poco hacia arriba, puedo añadir 0.1, o 0.01. Y va a flotar ligeramente hacia la nada, y eventualmente va a desaparecer. Así que en cada frame se mueve 0.1 hacia arriba. Y también hay funciones matemáticas, como math.sin y cosas así que hacen cosas como esta. Pero hice un par de funciones porque... Ahí vamos.

Vale, copié esto dos veces. Vale, déjame usar esto ahora, ya no necesito el ratón. Hizo su trabajo. Y voy a importar esta función wobble, y te mostraré lo que es. Déjame importarlo. Importar wobble desde atrás... No, no es atrás. Está aquí. Está aquí, con todas nuestras animaciones ctl. Ahí vamos. Esto es. Dios, la escena de la música de Berlín me ha roto. Esta es la música que canto ahora. Así que ahora se tambalea. Mira eso, gracias a quien haya hecho ese sonido. Así que ¿qué es math que está en, math que está en es esa cosa.

Fallé en esta parte de las matemáticas y pensé que nunca las necesitaría en mi vida. Y luego pensé, sabes qué, debería hacer 3D. Y él decía, así que ahora necesitas tangentes y pecados y yo estaba como joder. Así que si puedo explicarte esto, todo va a estar bien. Así que un math que está en es algo que hace algo como esto. Va de un número de -1 a 1. Y lo que necesitas pasar a través de él es algo que sigue moviéndose. Y en este caso estamos usando state dot elapsed time, state dot clock dot elapsed time, que dice cuánto tiempo ha pasado desde que realmente empezaste a renderizar esta escena. Así que simplemente hace esto. Y luego puedes multiplicarlo por algo o dividirlo por algo. 6,000 es solo un número aleatorio. No tiene ningún punto aquí. Puedo quitarlo y hacer algo más. Y luego lo multiplico por math dot pi. Podría multiplicarlo por diez. Y entonces simplemente sería más rápido. Pero entonces bajaría demasiado. Así que sí. El resto es solo experimentación.

Bueno, genial. Así que eso es genial, se tambalea. Eso es lindo. ¿No es lindo? Es la cosa más linda y funciona. Entonces lo estoy dividiendo por mucho. Pero no tienes que hacer eso.

Entonces quería hacer exactamente lo mismo en la rotación. Y ahora hace esto. Porque es como, gracias. Creo que esa era una persona diferente. Gracias. Creo que uno vino de aquí y el otro vino de allá. No lo sé. No puedo ver a ninguno de ustedes. Así que estás bien. Puedes hacer lo que quieras. Y quiero hacer algo más. Que es como, ¿qué pasaría si te mirara, verdad? Porque eso no es nada espeluznante. Imagina, como, estás tomando tu café y tu mamá dice, ¿qué estás haciendo? Vale. Así que déjame recargar. Entonces cuando te gusta, HMR. Lo siento. El inglés no es mi idioma principal. Voy a usar eso por el resto de mi vida. La posición se estropea. Así que ahora, usa el ratón para decir lo que es. Y te mira, ¿verdad? ¿En el X y el Y? Y lo que esto usa es que toma el estado del ratón. La posición del ratón en el X y la rotación, ¿verdad? Y lerp... Así que volvamos a las matemáticas de la escuela secundaria, donde fallé. Simplemente usa dos números e intenta ir entre ellos de una manera muy lenta y constante. Y esto viene de Three.js, que es bastante genial. Así que sí, eso es básicamente lo que queríamos hacer.

Así que ahora tenemos esto. Déjame hacerlo más grande para que podamos verlo. Y necesito encontrar esto para cerrarlo. Y ahí vamos. Así que ahora si abres esta página, hay uno pequeño aquí. Y como puedes ver, todas las sombras y todo, cambian con la posición, lo que significa que se está renderizando en tiempo real, lo cual es bastante genial. ¿Y esto fue sobre qué? 56 líneas de code. Así que es factible. Es solo algo a lo que no estamos acostumbrados, ¿verdad? Y todo a lo que no estamos acostumbrados es difícil. Lo sé, yo, Docker. Todavía no entiendo Docker. Sí, no hablemos de eso. Todavía no sé exactamente qué hace Kubernetes tampoco. Así que sí, eso es lo que tengo. Me quedan dos minutos. Así que puedes descargar el archivo blend, el proyecto, lo que quieras desde esa URL, que es no completa. Así que es GitHub.com, barra mi nombre, que tiene dos I's, no olvides la segunda I allí, eso es un error común. Blender para la web.

No te juzgaré si lo hiciste, es algo muy común, como ¿por qué incluso tiene dos I's. Es realmente tonto. Soy Nikita FTW en Twitter con dos K's porque me gusta confundir a todos, y recientemente hice un Instagram y lo llamé the evil nugget, y puedes seguirme allí para todo lo que hago en 3D si piensas que son lindos o geniales o lo que sea.

Y sí, sobreviví. Y a la pandemia y a esta charla. Así que siento que solo eso merece un aplauso. ¡Increíble! ¿Podemos entrar en mi oficina, por favor? Vale, genial. ¿Cuál? ¿Qué lado? Oh, el que tú quieras. Vale. Oh, puedo elegir. Siéntate, quédate un rato. Puedes hacer preguntas en Slido en Slido.do. El código es 2225. Pero creo que ya podríamos tener un par en la tubería. Sí.

Vale. Y para aquellos de nosotros con Macs, ¿existen granjas de renderizado o equivalentes a las que podemos descargar? Hay muchas – espera. Lo siento. Voy a volver a mi computadora, ¡porque hay una gratuita, de hecho! ¿Gratuita? Hay una granja de renderizado gratuita de Blender. Así que Blender granja de renderizado gratuita. Espero no recibir spam. Esto es realmente gratis. Mucha gente, básicamente lo que hacen es descargar una aplicación, que la tengo en mi Windows, que es una computadora de juegos muy potente que tiene todas las luces y cosas. Ilumina toda la maldita casa. Pero sí. Puedes usar esto. Es gratis. Si no quieres usar este, puedes buscar en Google Blender render farm o 3D render farm. Hay muchas de ellas. Sí. Hay muchas de ellas. No sé si quieres hacer esto tal vez no en vivo. ¿Podrías hacerlo girar lentamente? ¿Girar qué, así? Sí. Entonces podrías agregar el... Podrías haber dicho eso mientras estaba aquí. Veamos si puedo hacerlo. Quiero decir, ¿quién sabe? Quiero decir, ya me he avergonzado. Dijeron que está bien. Lo sé. Es muy británico. Di por favor. En Alemania, dirían, es tu trabajo. Hazlo girar. Tienes que hacerlo girar. Hazlo. Bueno, entonces rotación esa Y, que creo que es esta, y haz lo mismo. Entonces puedes hacer esto. No, eso no. Alemán. Entonces, ¿cómo está Alemania? Solo voy a copiarlo de aquí.

Así es. 0.01. Y gira. Mientras estás allí, ¿tienes, y sé que esta es una pregunta difícil, un nugget favorito? Un nugget favorito. ¿Algo favorito que hayas hecho? ¿Un personaje favorito? Oh, ¿algo favorito que haya hecho en Blender? Sí. No lo sé. Déjame, no, ¿quizás? ¿Los quieres a todos por igual? No, Dios no. He hecho muchas cosas malditas, chica. Algunas cosas que estás como, Dios, eso es peor que code. Eso es lindo. Gracias. Creo, creo que mi favorito es este. Aw. Del cual, no hay video, pero también hay un video de él despertándose. Y creo que esta fue la cosa favorita que he hecho. Increíble. Gracias, Sarah, por tu charla. Aplaudan a Sarah, todos.