Desde Blender hasta la Web: El Viaje de un Modelo 3D

Gracias. ¿Alguien quiere ser el primero? Vale, así que ni siquiera tengo 20 minutos. Tengo 16. Vale. Así que hoy hablaremos sobre Blender y 3D en la web. ¿Están todos emocionados por eso? Son unos nerds, solo digo. Vale, genial. Eso es todo. Este pequeño pastelito, lo hice en Blender, y lo pondremos en la web. Vale. Entonces, ¿quién es esta persona que les dice que pongan ese pastelito en la web?

Vale, empecemos. Nuevamente, mi nombre es Tara, soy originaria de Portugal. Vivo en Berlín, porque me gusta quejarme y los aeropuertos malos. Trabajo como desarrolladora front-end en remote. Sí, la empresa se llama remote, y sí, la empresa es remota. Me encanta hacer cosas en 3D. Empecé durante la pandemia, como todos empezamos algo al azar. Empecé con 3D. Empecé con 3D. Es genial. También hice esto en blender, así que sí, eso es todo. Esto se dividirá en dos partes. Primero, vamos a entrar en blender, y luego vamos a llevar eso a la web. No les enseñaré cómo usar blender, porque es doloroso, pero tendrán una idea visual de la interfaz de usuario. Entonces, ¿quién aquí sabe qué es blender? Es un software 3D. Es gratuito y de código abierto. También hace otras cosas, como 2D, edición devideo y cosas así. Es principalmente conocido por 3D. Algo de 2D, no lo usaría para edición devideo. ¡Vamos a hacerlo! ¿Quién aquí ha usado blender antes? Wow, vale. Así que realmente sabrán si digo algo incorrecto. ¿No? ¡Vamos a hacerlo! ¿Por qué no? Aquí está mi escena. Antes de empezar, permítanme comenzar aquí. Este es el pastelito que hice en blender. Es muy lindo. Todos mis talentos están ahí. Eso es todo. Esa es mi charla. Adiós.

Así es blender, ¿verdad? Si lo has usado antes, la versión 2.8 se veía mucho peor. Mucho peor. Como Photoshop CS1 peor. Ahora se ve mejor. Se ve mucho mejor, pero si quieres que se vea mejor, solo por favor busca blender 2.79. Porque eso es mucho mejor. Una cosa que quiero decir sobre blender rápidamente. Tiene dos motores de renderizado diferentes.

Uno se llama eevee. Probablemente hayas escuchado o usado Unity o Unreal Engine. Lo que sea. Esos son motores de renderizado en tiempo real. No calculan cada luz. Solo fingen saber qué es la luz. Fue introducido en la versión 2.8. Es bueno para computadoras de gama baja. Las MacBooks no tienen tarjetas gráficas reales. Solo están integradas en el dispositivo. No son reales. Son falsas. Esto es eevee. Si hago clic en algo, tarda un poco. Esto es eevee. Si me muevo, puedes ver que se ve real, pero no realmente. Entonces, para eevee, estas son cosas que se verifican durante, como, tan pronto como se hace, intenta descubrir qué demonios está sucediendo. También hay uno llamado cycles. Aquí es donde mi computadora hace ruidos extraños. Cycles es completamente diferente. La forma en que funciona cycles es que es un motor de trazado de rayos. No tienes que recordar ninguna de estas palabras. Pero la forma en que funciona, cada rayo de luz se calcula y se determina dónde golpea y a dónde va, y golpea la otra cosa y hace la cosa, y eso lleva mucho tiempo en una Mac, y la Mac no. No puedes encontrar nada que realmente cause bloqueos, llantos de bloqueo, ninguno de los sonidos que no sabías que existían. Aunque hayas instalado cosas con npm antes. Sí. No voy a decir que mi computadora se ha bloqueado durante Blender. Y antes de continuar, quiero decir que tengo una computadora Linux en casa. No uso esta computadora para Blender. Puedes hacerlo, pero es muy doloroso. Simplemente, no sé por qué. De acuerdo. Sí. Genial.

Entonces, la última cosa que quiero mostrarte aquí en Blender es que queremos cambiar el material. El material es un color. Y vamos a venir aquí. Y vamos a venir aquí. Y aquí tienes un color base. Y simplemente puedes elegirlo. Hagámoslo morado o algo así. Hermoso. ¿No es hermoso? Y quiero mostrarte otras dos cosas que son importantes si descargas algo de Internet, o si decides hacerlo tú mismo si quieres llorar. Claro. La rugosidad es qué tan rugoso es un material. Lo sé. Es jodidamente asombroso. Lo sé. Es algo increíble.

Entonces, si vengo aquí y deslizo esto hacia abajo, puedes ver que es básicamente un espejo. Quiero decir, un espejo rosa realmente extraño, pero un espejo. Metálico, estoy bastante seguro de que sabes qué hace el metálico. Entonces, si subo todo el camino, ahora es un espejo metálico rosa. Blender. Arte, todos ustedes.

De acuerdo. Genial. Entonces, lo último que quiero mostrarte antes de pasar a los códigos es cómo exportar algo. Entonces, puedes pensar en, como, tengo un grupo de cupcakes aquí arriba, y luego tengo un par de cosas adentro. Genial. Entonces, vienes aquí y haces, como, seleccionar jerarquía, y lo que hace esto es básicamente seleccionar, solo piensa en ello como divs, y selecciona todos los divs que están dentro de él. Todo es un div. Genial. Entonces, ahora vienes aquí, Archivo, Exportar. Archivo. Ahí lo tienes. Exportar. Ahí lo tienes. Y para la web, usaré GLTF GLB. Genial. Genial, genial. Y haces clic entonces. Y luego diez minutos. De acuerdo. Genial. Y estamos aquí.

Y quiero hacer un par de cosas. Entonces, hay un par de formatos. Siempre usaré GLTF. Creo que es ligeramente más grande, pero es JSON, y amamos JSON. Y voy a usar JSON. Siempre hacer clic en Incluir objetos seleccionados, y, como, poner todo. Y eso no es lo que queremos. También es importante hacer clic en Aplicar modificadores, y también es importante hacer clic en Compresión, porque de lo contrario obtendrás algo enorme. Y no queremos eso. Eso es lento. No nos gusta eso. De acuerdo. Entonces, ahora lo exportas, y no sé si viste esa pequeña cosa blanca, pero Blender no tiene realmente un estado de carga. El estado de carga es esa pequeña cosa blanca, como, no hay carga. Entonces, cuando la cosa blanca se va, es falso. Está hecho. Pero, como, tenemos un modelo. Entonces, si vengo aquí en Visual Studio Code, normalmente no uso temas blancos, por cierto.

Quiero dejar eso muy claro. Es un JSON. Es un JSON muy aterrador. Pero es un JSON. Genial. Entonces, ¿cómo convertimos esto en componentes React? De acuerdo. Hagámoslo. Entonces, puedo ir a glTF. No sé cómo pronunciar su nombre. Solo eso. Podemos ir allí. Entonces, vamos a abrir esto. Revelar en Finder. Y puedes arrastrarlo. Y esto te dará una versión de componente React. Ahí lo tienes.

Gracias. Gracias. Hice este sitio web. Gracias. Dice en la parte inferior. De acuerdo. Genial. Eso es todo. Estamos terminados. Solo bromeo. Estoy muy nervioso. De acuerdo. Entonces, copiemos esto. ¿De acuerdo? Si puedo. Y vayamos aquí. Ven aquí a los pasteles de tarta. Y creemos un modelo. Entonces, puedo simplemente poner esto aquí. Y esto se exporta por defecto. Así que simplemente eliminemos esto. Y absolutamente nada sucede. Hermoso. Eso es exactamente lo que queremos. Cierremos esto. Y tratemos de simplemente montar esto. Idiota. De acuerdo. Entonces, modelo. Y no obtienes absolutamente nada. Esto es porque React 3... Esto se suponía que debía suceder, por cierto. Solo quiero asegurarme de que todos lo sepan. Y solo lloraré y me acostaré en el suelo. Entonces, la cosa es que React 3 Fiber en realidad no renderiza diferencias.

Renderiza mallas y materiales y cosas así. Lo cual React es, como, no tengo idea de qué demonios estás hablando. Entonces, solo te da la pantalla negra de la muerte. Y es como, no sé. Si abro la consola, habrá un error diciendo que no tengo idea de qué estás hablando.

Entonces, todo lo que está en una cosa de React 3 Fiber. Digo `cosa` mucho. Entonces, cada componente que montas que está en React 3 Fiber debe estar dentro de un lienzo. De acuerdo. Creo que todavía dije `cosa`. Lo cual encuentro bastante increíble. Entonces, importemos un lienzo. Que proviene de React 3 Fiber. Y cerremos este lienzo. Y ahora... Con un poco de suerte... Creo... Tengo que hacerlo más pequeño. Es súper enorme. Y luego... Palabras. Hermoso. ¿Puedes verlo? Puedo hacer zoom. ¿Cómo haces zoom en una Mac? Ahí lo tienes. Mira eso. ¿Todos están orgullosos de mí? Mi mamá está orgullosa de mí.

Entonces, cómo funciona el 3D, es completamente diferente al 2D. Lo sé. Nuevamente, alucinante. Pero la forma en que funciona el 3D, si no tienes luces, básicamente no tienes nada. Entonces, si apago todas las luces aquí, en el mundo real, no tendría idea de dónde estoy. ¿Verdad? Y esto funciona de la misma manera. Entonces pongamos algunas luces. Hagamos un espectáculo. ¿Por qué hice un acento extraño? Entonces tenemos una luz ambiental. Eso es todo. Y ahora tenemos algo realmente triste. ¿Verdad? Entonces hay varios tipos de luces. Permíteme abrir mis trucos aquí. Ahí vamos. Hermoso. Esta es una luz ambiental y una luz focal. Entonces, para explicar la diferencia, oh, Dios mío. Ahí vamos. De acuerdo. Genial. Solo imagina que se ve bien ahora. La diferencia entre la luz ambiental es que es una bola de luz que simplemente distribuye la luz de manera uniforme. Sin proyectar sombras. Entonces no es algo que pueda existir.

Pero una luz focal es literalmente lo que me está cegando en este momento. Así que sabemos qué es una luz focal. Genial. Como puedes ver, ahora tenemos, como, algunas sombras. Aunque no están en la posición correcta, lo puedo arreglar. Si quieres cambiar la posición, puedes venir aquí y hacer XYZ. Espera. ¿X? No. Sí. Así que es un segundo. XY y Z son los que te golpean en la cara. De acuerdo. Así que X cero, Y cero. No, no, no, no. Y menos 1 y el otro cero. Y se va ligeramente hacia abajo. Tiene sentido, ¿verdad? Descubrí cómo funciona esto. Genial. Genial, genial, genial.

Pero queremos que se vea realmente bonito y tenga un aspecto realista. Pero podemos hacer esto, ¿verdad? Podemos usar algo de react Fiber que se llama Stage. Entonces, un Stage, básicamente es un pequeño escenario. Y colocas un pequeño modelo allí y el modelo está feliz y tiene iluminación y todas esas cosas.

Bien. Así que vamos aquí e importemos Stage. Y hagamos esto. Y hagamos esto. No lo hice. ¿Hice algo mal? Sí, ahí vamos. Puedo eliminar esto porque el Stage colocará automáticamente todo en el centro. ¿O tal vez no? Recarguemos la página y descubrámoslo. Lo hace. Ves, no estaba equivocado.

Bien. Pero se ve un poco triste, ¿verdad? Es genial y triste al mismo tiempo. No tengo un ejemplo de algo que sea genial y triste al mismo tiempo. Pero entiendes lo que quiero decir. Así que agreguemos sombras de contacto y para eso, puedo hacer sombra de contacto y puedo pasarle una posición. Posición. Y, ¡guau, qué demonios acaba de pasar? Hay tantas cosas que no deberían estar ahí. Cero menos uno y cero de nuevo. Ahora hay un poco, ¿puedes ver eso? Gracias. Literalmente hubo una persona que dijo sí. Fue Ellie. Gracias, Ellie. Ella dijo sí. ¿Puedes ver eso? Gracias, Jesucristo. Sé que es tarde, pero necesito que me despiertes también. Gracias. Gracias, hombre extraño. Te aprecio. Pero eso no se ve muy realista, ¿verdad? Así que también agreguemos opacidad. No sé, un número aleatorio, .6. Eso no fue .6. Bueno, tenía literalmente un trabajo y era escribir lo mismo que dije y aún así no lo hice. .5. Ahí vamos. También puedes pasar desenfoque, un montón de cosas, pero necesito seguir adelante y necesitamos animar cosas, así que hagámoslo.

Bien. Tenemos este modelo y queremos hacer que se balancee. Queremos que haga, como, un poco, eso no tiene ningún sentido, pero sabes a lo que me refiero. Y una cosa que podemos usar para eso es algo llamado use frame. ¿Quién aquí es bueno en matemáticas? En serio, ¿nadie? Me siento genuinamente menos solo en este momento. Reprobé matemáticas en la escuela secundaria porque no soy el más brillante de la caja de herramientas. Creo que esa es la frase. Pero si puedo explicarlo. Esto es como cuando obtuve mi licencia de conducir.

Pensé, si puedo obtener mi licencia de conducir y no puedo distinguir la derecha de la izquierda, tú puedes hacerlo. A propósito, todavía tengo una licencia de conducir. Simplemente no vayas a Berlín. Es más seguro no ir a Berlín en general.

De acuerdo. Entonces podemos usar algo llamado use frame y lo que hace use frame es algo que se ejecuta en cada fotograma. Increíble. Y hay, gracias, hay alrededor de 60 fotogramas por segundo dependiendo de tu computadora. Así que diría como 40 o algo así aquí. Así que importemos use frame. Eso proviene de React 3.5-ver. Y luego esto obtiene un estado en minúsculas. Obtiene el estado gritándole. De acuerdo. Ahí vamos. Y podría imprimir esto en la consola pero probablemente arruinaría mi computadora y eso sería muy deprimente. Eso sería un ejemplo de algo genial y triste. ¿Verdad? Si realmente arruinara esta charla.

De acuerdo. ¿A nadie le pareció gracioso? Está bien. Todos están muy concentrados en lo que estoy diciendo en este momento. Están como quiero aprender esto. Eso no es cierto. Reloj. Entonces hay algo en el estado llamado el reloj y el reloj toma - toma - no toma nada. Ve cuánto tiempo ha pasado. Entonces puedes usar el tiempo transcurrido del reloj para decir, okay, ha pasado tanto tiempo desde que esta persona ha recargado esta página.

De acuerdo. Y necesitamos una función que haga esto. Y esa es math.sin. ¿Sin? La que no es una cosa católica. Seno. El seno de JavaScript. Así que math.sign o sin, como quieras llamarlo, no me importa. Alguien vino una vez después de mi charla y dijo que fue una broma muy divertida sobre math.sin. Y yo dije que no se dice así. Oh, entonces más sabes. Inglés. Gran idioma. Math.sin, literalmente hace esto. ¿Correcto? Y eso es lo que queremos. Queríamos hacer esto. ¿Eso fue como un sermón o algo así? De acuerdo. Genial.

Queríamos hacer esto y temblar un poco. Así que hagámoslo. Obtengamos la posición y la rotación de este elemento que podemos obtener a través del grupo aquí que está adjunto al grupo allá. Y puedes pensar en un grupo como un div. Todo es un div. Eso es todo. Esa es mi charla. Todo es un div. Puedo obtener posición y rotación igual a grupo.current. Ahí lo tienes. Muy, muy estándar de React. Ahí vamos. Nada se rompió. Soy un genio. Sigamos. De acuerdo. Y ahora hagámoslo temblar. Entonces posición.Y es igual a math. Eso está en. Y necesito pasar algo, un número que seguirá incrementando hasta el fin de los tiempos que en este caso es state.Clock.Elapse... State.Clock.Elapse time. Es más fácil escribirlo. Ahora si recargo esta página, puedes ver que hace eso, ¿verdad? Hace un poco de... Gracias. Gracias.

Gracias. Gracias. Hasta ahora nada ha fallado. Sigamos adelante, ¿verdad? Aprovechemos esta ola de logros.

De acuerdo. Genial. Hagamos lo mismo para la rotación. Creo que eso sería genial. Voy a multiplicar esto por 1.5. Ahí vamos. Mira ese chico grande. Ahora es un chico. Y un cupcake es un hombre, así que el pequeño chico frosty ahora es un hombre. Eso explica por qué. Hay que amar los idiomas latinos.

De acuerdo. Hagamos la rotación. Rotación de eso. Hagamos X. Y hagamos exactamente lo mismo. Así que mapea eso y estado. Necesitas corregirme. Todos ustedes. Ese tiempo transcurrido. Y eso no se ve muy bien. No aplaudan por eso. Es como golpearte en la cara. Y divídelo por cuatro. O algo así. Y necesito recargar la página porque el estado ese tiempo transcurrido. Básicamente se reinicia. Necesitas reiniciarlo. Eso sigue siendo demasiado. Dividámoslo por diez. De lo contrario, me quedaré aquí todo el tiempo. Y terminaremos con 7.87, es el número perfecto para dividir este cupcake. Ahí vamos. Y hagamos lo mismo para Z. Solo por diversión. Por eso. Y ahí vamos. Ahora se mueve un poco. Así que puedes ver que es un elemento 3D real y no solo una imagen. Lo cual me pone muy triste cuando veo algo en 3D. Estoy como, sí, bien. Bien. De acuerdo. Eso está hecho. Pero ¿sabes qué más sería genial? Si pudiéramos cambiar esto. Si pudiera hacer clic en vainilla y el frosting cambiaría.

¿Sabes qué más sería genial? Si pudieras ver todos ellos. Ahí vamos. Así que tengo algo de gestión del estado aquí, lo cual vas a pensar que es muy complicado y lo es. Pero el hecho es que si lo paso como props, todos los componentes se volverán a renderizar y todas las animaciones se reiniciarán. Así que no queremos eso. Por lo tanto, queremos hacer el estado fuera de él. Tengo esta cosa llamada use frosting. Así que hagamos const. No recuerdo. Solo lo voy a llamar lol y llamarlo use frosting. Soy un adulto. Y diálogo de consola. Lol. De acuerdo, genial. Así que ahora vamos a inspeccionar eso. Y si vengo aquí a la consola, el teléfono de alguien piensa que le estoy hablando. Espera. De acuerdo, Google. Cállate. Obtienes un objeto. Y este es el frosting seleccionado que tienes. Así que si tiro de esto hacia abajo, mi teléfono, lo siento. Estaba hablando con él. Y hago clic aquí y puedes ver que ahora tenemos una cantidad diferente de frosting. Oh, Dios mío. Ese fue mi teléfono. De acuerdo. Así que ahora tienes esto, tienes frosting y tienes set frosting. Genial. Así que eso es todo, ¿verdad? Así que queremos frosting desde aquí.

Puedo abrir esto. Y esto es una pequeña cosa. Y tenemos el color del frosting y tenemos el id4 que es ninguno. Así que primero que nada hagamos id4. Desde aquí quiero obtener el frosting. Gracias, señor. Y aquí tenemos esta cosa que es el frosting y los sprinkles. Así que solo queremos mostrar esto si el id del frosting es diferente a cuatro, ¿verdad? Porque cuatro es ninguno. ¿Todavía me siguen? Necesito hacer más preguntas al estilo Angena. ¿Todos siguen aquí? ¿Siguen entendiendo esto? Gracias. Gracias. Gracias. Dios bendiga a Angena. De acuerdo. Así que hagamos frosting. Oh, Dios mío. Frosting. Ese id es diferente a cuatro. Y mostramos estas dos cosas. Y si haces clic en ninguno, desaparecerá.

Y si haces clic en ninguno, desaparecerá. De acuerdo. Última cosa, pero no menos importante, cambiemos el color de la cosa. Podemos hacer esto usando los atributos de color que tenemos dentro del frosting para cada uno de ellos. Y también podemos hacerlo usando un material de malla tierna. Podemos hacerlo usando el material de malla tierna que proviene de 3JS. Oh, Dios mío. Eso proviene de 3JS. Así que gracias. Dulce, dulce hombre.

De acuerdo. Así que hagamos const frosting real fast equals new mesh tender material, que es algo que proviene de 3JS de nuevo. Y simplemente nunca sé cómo escribir standard. Así que tenemos eso. Y podemos ver eso en el frosting aquí mismo tenemos este material. Así que podemos venir aquí, ¿verdad, y extenderlo? Así que podemos hacer esto. Y este frosting, de acuerdo, frosting matte. Tenemos frosting matte. Ahí vamos. Y luego puedo venir aquí y literalmente pegarlo aquí y todo debería funcionar exactamente igual. Así que si voy a chocolate, todavía funciona exactamente igual. No hice nada. Por favor, no aplaudas. Eso va a ser raro. Así que lo que podemos hacer ahora es alternar el color. Así que si digo color y digo rojo, ahora es rojo. Lo que significa que puedo usar el frosting seleccionado, ese color, para cambiar el color. Así que ahora si recargo esta página y cambio el color aquí, ahora es vainilla.

La última cosa que quiero mostrarte es cómo agregar controles de órbita. De acuerdo. No tengo tiempo. Así que lo voy a hacer sin decir nada. ¿Es esto lo suficientemente incómodo? Y ahora puedes moverlo. Eso es genial. Sí, he terminado. He terminado. He terminado. No me grites. Se permitieron una o dos preguntas. Sí, gracias. De acuerdo, se permitieron una o dos preguntas. De acuerdo. Entra en mi oficina. Oh, Dios mío. Aquí mismo, cariño mío. Oh, Dios mío. Aquí. De acuerdo, lo siento. Oh, Dios mío.

Sí, hay algo en el piso. Sí. Hay algo en el piso. Claro. Eso fue increíble. Gracias. Y ahora quiero un cupcake, así que gracias por eso. De nada. Hay algunos cupcakes de Vodafone si quieres. Oh, tal vez lo haga. Sí. ¿Puedo cambiar el color? No. No lo creo. No, es rojo. No tan genial. Cuando dijiste que no podías pensar en nada que fuera genial y triste, pensé en mí. Quiero decir, eso era lo mío, pero no quería hablar de mental health en esta charla. Lo sé. Bueno, he llegado allí. Así que ahora estamos aquí. Muy bien. Una o dos preguntas. ¿Qué sugieres a alguien que quiere aprender Blender? Siento como si estuviera conduciendo un avión cuando lo abro con todos esos botones. Hay muchos botones y también hay muchos botones. Así que hay un curso en internet que son dos gratuitos. Uno trata sobre hacer una rosquilla. Y entra en muchos detalles. Solo escribe Blender donut y te enseña todas las últimas cosas. No rosquilla en Blender. Eso es diferente. Eso es diferente. Sí. Pero sí, sugeriría ese. Blender Donut en YouTube. Y un chico agradable lo enseña. ¿Y crees que la instanciación es la mejor solución para renderizar miles de objetos? ¿Se puede hacer algo más para mejorar el performance? Sí, hay algunas formas de básicamente clonar objetos en React 3D Fiber. Realmente no profundicé en eso ahora mismo, pero tienen muchas demos que muestran cómo tener miles de objetos. Y también reutiliza lo que tienes. Así que echaría un vistazo a sus demos que muestran cómo tener miles de objetos en una cosa. Genial. Si tienes más preguntas para Sarah, puedes encontrarla en línea o en su stand. ¿Tienes un stand? Creo que tengo un stand. Creo que tienes un stand. Una vez más, muchas gracias, Sarah.