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

Rate this content
Bookmark

Crear experiencias 3D en la web puede parecer algo muy desafiante. Estoy aquí para eliminar esta idea de tu mente y mostrarte que el mundo 3D es para todos. Para eso, llevaremos un modelo del software 3D Blender a la web, lleno de animaciones, controles de accesibilidad y optimizado para su uso en la web. Únete a mí en este viaje mientras hacemos que la web sea más increíble.

27 min
22 Oct, 2021

Video Summary and Transcription

Esta charla trata sobre Blender, un software 3D gratuito y de código abierto, e integrar modelos 3D en sitios web. El orador discute cómo exportar modelos 3D a la web utilizando el formato gltf y comprimirlos utilizando gltf transform y la compresión draco. También cubre la integración del modelo 3D en un sitio web utilizando React y React 3 fiber, solucionando problemas de instalación y errores, y trabajando con refs y frames. La charla explora el renderizado, la iluminación, las matemáticas y la experimentación en 3D, así como la interacción y los efectos de renderizado. El orador también menciona su creación favorita en Blender.

Available in English

1. Introducción a Blender e Integración Web

Short description:

Hablaré sobre Blender, un software 3D gratuito y de código abierto. Comencé a usarlo durante la pandemia y me enamoré de él. Hoy exportaremos un modelo 3D desde Blender y luego lo integraremos en un sitio web. Trabajo como desarrollador front-end en Remote, una empresa que ayuda a contratar trabajadores remotos. Estamos contratando, pero por favor no menciones mi nombre. Blender se puede usar en una Mac, pero puede ser doloroso. La charla se dividirá en partes, comenzando con la exportación de un modelo 3D desde Blender y luego pasando a la integración web.

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 van a tener es un resfriado, lo cual, quiero decir, tomen lo que puedan, ¿verdad? Bueno, eso no fue gracioso y pido disculpas. 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, lo cual, Elie es una de las pocas personas que puede pronunciar mi nombre correctamente, lo cual aprecio. Por lo general, solo algo como Vieda, algo así, lo cual no sé. Pero sí. Así que voy a hacer mi charla. Sé que son las 10 a.m. y vamos a estar viendo 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 empecé a usar Blender en medio de la pandemia o algo así, no sé, cuando todos empezaron a hacer sus pasatiempos, básicamente.

Y esto es una de las cosas que hago. ¿Pueden ver mi mouse? Sí. Así que esto es una de las cosas. También traje un mouse porque ahora soy esa persona. Así que 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... ¡Wow!... es que vamos a intentar llevar a este pequeño chico, al que voy a asignarle el género de chico, aparentemente, a la web y tratar de ponerlo en un sitio web. Bueno, ¿quién soy yo? Mi nombre es Sara. Sara... como quieran llamarme, no me importa. Trabajo como desarrolladora front-end en una empresa llamada Remote, lo cual es muy confuso cuando se lo digo a la gente, cuando me preguntan dónde trabajo. Y yo digo, trabajo en Remote. Y ellos dicen, sé que trabajas de forma remota, pero ¿dónde trabajas? Y así sigue y sigue hasta que uno de nosotros se rinde y dice, bueno, está bien. Ya no me importa. Pero sí. Así que Remote es una empresa que ayuda a las empresas a contratar trabajadores remotos con, como, el tiempo de vacaciones normal y no eres un contratista, básicamente, lo cual es bastante agradable. Sí. Así que estamos contratando. Diles que te envié. En realidad, no lo hagas. Eso suena terrible. No les digas que te envié. Y me encanta hacer cosas en 3D. Empecé a usar Blender, como dije, en medio de la pandemia y me enamoré de él. Así que todas estas cosas que viste, las hice con mis propias manos y tengo una computadora con Windows, por si alguien va a preguntar, ¿puedo usar Blender en una Mac? Puedes. Pero es doloroso como el infierno. Hace sonidos que no sabías que una computadora podía hacer. Y crees que sabes por NPM, pero créeme, no lo sabes. Así que hay una charla... Wow. Ha pasado tanto tiempo desde que hice una charla, que estaba como, ¿cuál es el nombre de esto? La charla se dividirá en partes. En la primera parte, iremos a Blender y simplemente exportaremos al pequeño chico. Y luego en la segunda parte, saltaremos 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.

2. Aspecto 3D y Vistas de Blender

Short description:

Blender es conocido principalmente por su aspecto 3D y es gratuito y de código abierto. Ofrece la capacidad de escribir complementos y cosas procedurales en Python. La interfaz de usuario de Blender ha mejorado significativamente desde la versión 2.8. Hay tres vistas principales en Blender: una para mallas y dos vistas de renderizado: E.V. y Cycles. E.V. imita la luz y cómo debería rebotar, mientras que Cycles calcula el comportamiento de cada rayo de luz en la escena. Cycles requiere una tarjeta gráfica potente, lo que lo hace inadecuado para MacBooks.

El aspecto 2D no es malo, pero todo lo demás es como... Es conocido principalmente por su aspecto 3D. Y sí, es gratuito y de código abierto. También puedes escribir complementos y cosas procedurales 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 antes? ¿Antes de la versión 2.8? Ok. Así que nadie ha visto lo malo que era. Así que no entiendes lo bien que se ve ahora. Piensas, esto ni siquiera se ve tan bien. No, no entiendes. Te ruego que busques en línea la interfaz de Blender 2.7. Ok.

Esta es mi pequeña taza y aquí en Blender hay principalmente tres vistas. Esta que tengo ahora mismo es solo para ver 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 lo mismo que IDS 3.js. Así que no es físicamente bueno. Esto imita la luz y cómo la luz debería rebotar, pero lo resuelve mediante, no sé, IA y Python. Probablemente no sea IA. Son solo un montón de declaraciones if. Quiero decir, ¿qué es la IA? Un montón de declaraciones if. Y esta cosa es nueva, lo que hace que sea completamente utilizable en una Mac porque no hace todas esas cosas en realidad. 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 extraña. Y eso es porque se 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. Mejor no vamos allí. Así que sí, E.V. E.V., este ciclo es el que hace que tu computadora funcione. No sé si eso fue muy fuerte. Así que esto es Cycles, y estarás bien. Sí, esto es Cycles, y lo que hace Cycles es imaginar cada rayo de luz en esta habitación, calcula literalmente dónde rebota y dónde refracta y todo para cada uno de esos rayos de luz. Y cada luz tiene como mil puntos de luz, por lo que necesita una tarjeta gráfica realmente buena. O cualquier tarjeta gráfica. Así que MacBook no es adecuado. Sí, este es el más realista, pero no es el que vamos a usar. Así que sí. Volvamos a Eevee para que mi computadora no muera. Y también quería explicar esto principalmente. Y también quería mostrarte algo aquí, así que imagina que quieres cambiar un color o algo así.

3. Exportando Modelos 3D a la Web

Short description:

En Blender, puedes exportar un modelo 3D a la web utilizando el formato gltf. Hay tres tipos de archivos: binario, gltf y gltf embed. Se recomienda utilizar el formato binario para reducir el tamaño del archivo, pero en esta charla utilizaremos gltf embed, que es un archivo JSON. Al exportar, recuerda aplicar modificadores e incluir objetos seleccionados para evitar exportar toda la escena.

Aquí hay una pestaña pequeña y la tengo en naranja. Y vamos a hacerla azul o algo así. Este archivo blend, si quieres jugar con él, es completamente gratuito. Esto es cero, lo que sea. Y puedes descargarlo y 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. Una cosa muy importante es saber cómo, digamos que descargaste un modelo de internet, como Sketchfab. Internet. Y quieres exportarlo a algún lugar. Lo primero es que cualquier malla puede tener varias mallas en ella. Así que esto tiene un círculo, que no tengo idea de qué es, y tiene otro círculo. Ahí lo tienes. Tiene sentido, porque le puse nombre a mis cosas, ¿verdad? Debería haberle puesto nombre. Pero hay un botón. Si haces clic en el lado derecho. Lo siento. Me confundo. Tengo problemas con la derecha y la izquierda. Y tengo una licencia. Piensa en eso por un momento. Y seleccionas la jerarquía. Esto significa que seleccionará todo lo que está dentro. Así que si presiono G para moverlo, puedes ver que mueve todo lo que está dentro. De acuerdo. Genial. Así que vamos a exportar. Archivo, y puedes hacer clic en exportar. Y para la web, debes usar gltf. gltf es un formato que se utiliza principalmente para la web. De acuerdo. Genial. Eso es todo. Así que ya estoy en la cosa. Así que de Blender a la web, voy a ir a public. Así que principalmente hay tres tipos. Hay uno 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 solo JSON puro. Y esta es una charla, así que voy a usar el otro, porque amo JSON. Así que gltf embed es un archivo JSON. Es un archivo JSON muy aterrador y terrible, pero es un archivo JSON. Y algo muy importante que siempre debes hacer clic es aplicar modificadores. Y hay algo más. Haz, haz, haz. Incluir objetos seleccionados. Porque de lo contrario, va a poner literalmente toda tu escena. Lo cual no es lo que queremos.

4. Comprimiendo y Transformando gltf

Short description:

Voy a llamarlo el chico y activar la compresión. Exportar gltf y abrir el archivo JSON aterrador. Vamos a fingir que todo tiene sentido. Minificarlo aún más usando gltf transform y compresión draco. Comprime todo muy grande. Ahora, necesitamos transformar el gltf en JSX usando una herramienta en línea. No se puede piratear cosas en Alemania.

Así que lo voy a llamar el chico, y voy a activar la compresión. De acuerdo. Exportar gltf. Veamos qué sucede. ¿Correcto? De acuerdo. Así que tengo esto. Y vamos a abrir este archivo. Y puedes ver que es un archivo JSON muy aterrador. Esta parte es porque es una imagen. Como una textura. Y es solo... Sabes, nadie nunca va a leer esto, pero vamos a fingir que todo tiene sentido, ¿verdad?

De acuerdo. Lo primero que quiero hacer es minimizar esto aún más. Así que tengo... Tengo hojas. Y quiero usar gltf transform. Y esto agrega una compresión draco. Así que voy a ir a public, y chico, y luego llamarlo... Así que enviar a public. No, no. Ahí lo tienes. Chico, eso... De acuerdo. Draco, lo que sea. El gltf. Y esto lo va a comprimir más. De acuerdo. Digo abrir punto... Debería haber estado en public. Hizo la cosa. De acuerdo. Entonces... ¿Correcto? ¿Dónde está? Son 1.2 megabytes. Y este ahora mismo... ¿Dónde está eso? Son 406 kilobytes. Así que simplemente comprime todo muy grande. Realmente mucho.

El primer paso de esto es que necesitamos transformar este gltf en JSX. Y podemos hacerlo usando una herramienta en línea. O puedes hacerlo usando la línea de comandos. Pero como tengo internet, voy a usar la herramienta en línea. Así que lo voy a soltar aquí. ¿Por qué abrí toda mi cosa de nuevo? Esto no fue una buena idea. De acuerdo. Así que abrir... Es como, no... Son todas mis películas pirateadas. No puedes piratear cosas en Alemania, por cierto. Vendrán por ti.

5. Integrando Modelo 3D en un Sitio Web

Short description:

Aquí está el pequeñín. Tenemos un conjunto de código muy pequeño que no puedes leer. Pero te prometo que podrás leerlo en el J... El código s. Este es el sitio, y tenemos esta pequeña taza de café, a la que no nos importa. Vamos a eliminarla con fuego. Y vamos a poner aquí al pequeño personaje peculiar. Oh, ahora es una persona. Wow. Está actualizado a persona. Eso es genial.

Literalmente. Irán a tu casa. A mí aún no me ha pasado. Así que aquí está el pequeñín. ¿Correcto? Y aquí tenemos un conjunto de código muy pequeño que no puedes leer. Pero te prometo que podrás leerlo en el J... ¿Sabes a qué me refiero? El código s. Ahí vamos. Así que voy a 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é, a la que no nos importa. Vamos a eliminarla con fuego. Y vamos a poner aquí al pequeño personaje peculiar. Oh, ahora es una persona. Wow. De acuerdo. Está actualizado a persona. Eso es genial.

6. Instalación y Solución de Problemas de Errores

Short description:

Hay tres cosas que necesitas instalar: React, React 3 fiber y React 3 dry. React 3 fiber es para React Native, mientras que React 3 dry proporciona ayudantes útiles. Tengo un componente de modelo que no puedo exportar como predeterminado, así que solucionaré un error relacionado con 3JS. Parece ser un problema con una actualización en 3JS, y trataré de solucionarlo accediendo al archivo en un repositorio remoto.

Hay tres cosas que necesitas instalar, que ya he preinstalado. 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... Oh, Dios, olvidé el nombre para la cosa de React. La cosa de React native. Que es la... Hace... De acuerdo. 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 así.

De acuerdo. Así que tengo un modelo, y es un componente, y no puedo exportarlo como predeterminado, así que simplemente voy a... No sé por qué sigo haciendo codificación en vivo en charlas. Me odio a mí mismo. De acuerdo. De acuerdo. De acuerdo. Ahora, deberíamos obtener un error. Algún día. ¿Se 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é qué significa esto. No se encuentra... No se recomienda en el disco. De acuerdo. De acuerdo. Entonces esto probablemente sea un problema con el hecho de que 3 probablemente se actualizó desde la última vez que lo usé, y ahora solo está abierto en GitHub. Así que descubrámoslo juntos. Abrir archivo en remoto. Y vamos aquí, y vamos a la principal... ¿Ves? Fui lo suficientemente inteligente como para al menos subir esto. Así que eso es algo bueno. De acuerdo. Copiemos esto. Peguémoslo aquí.

7. Solución de Problemas y Problemas de Teclado

Short description:

Eso no fue un pegado. Lo siento. Este es un teclado alemán. Jesucristo. Muchas cosas sucedieron allí que no sé qué significaban. Pero sí, bienvenidos a los teclados alemanes. De acuerdo. Permítanme ejecutar Yarn nuevamente. Y todo lo que podemos hacer es esperar lo mejor. De acuerdo. No lo hicimos. Y está bien. Su ratón tiene botones que hacen cosas. ¿Trabajarás por el amor de Dios? Me está haciendo esto. Y pido disculpas por hacer perder el tiempo a todos. Pero créanme, esto es mucho peor para mí que para ustedes. ¿Cómo les va a todos?

Eso no fue un pegado. Lo siento. Este es un teclado alemán. Jesucristo. Muchas cosas sucedieron allí que no sé qué significaban. Pero sí, bienvenidos a los teclados alemanes. De acuerdo. Permítanme ejecutar Yarn nuevamente. Y todo lo que podemos hacer es esperar lo mejor. De acuerdo. No lo hicimos. Y está bien. Su ratón tiene botones que hacen cosas. ¿Trabajarás por el amor de Dios? Me está haciendo esto. Y pido disculpas por hacer perder el tiempo a todos. Pero créanme, esto es mucho peor para mí que para ustedes. ¿Cómo les va a todos? ¿Alguna vez te ha pasado que haces algo que no has hecho en mucho tiempo? ¿Y te preguntas por qué no lo has hecho en mucho tiempo? Y luego lo haces. ¿Verdad? Y luego la vida es dolor. Y dices, 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.

8. Renderizado e Iluminación en react-3-fiber

Short description:

Para renderizar cualquier cosa en react-3-fiber, necesitamos un lienzo. Agregamos luces para crear sombras y hacer que la escena sea más realista. El uso de un componente de escenario mejora la apariencia general. Se pueden aplicar diferentes entornos, como 'amanecer' o 'noche'. Vamos a explorar las posibilidades de animación.

De acuerdo, aún no entiendes... Dios, necesito un momento allí. De acuerdo, aún no entiendes nada. Y eso se debe a que para renderizar cualquier cosa en react-3-fiber, necesitamos un lienzo. ¿Correcto? Entonces importemos el lienzo desde react-3-fiber. Y esto es como, esto le está diciendo a React y a todo lo que está dentro de aquí no es DOM, es como WebGL, básicamente. ¿Correcto? Así que cierro este lienzo. Y ahora, como, debería mostrar una versión realmente triste de él. Lo cual es como... Es como... Así que esto se supone que debe suceder, por cierto. Soy muy incómodo.

Lo que está sucediendo ahora mismo 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 golpearás el pie con algo y pisarás un Lego y llorarás. No es que esto me haya pasado a mí. Sí. ¿Y qué no tenemos? Gracias, gracias. Lo siento. Necesito interacción en este momento. Así que voy a abrir mis cositas y voy a agregar 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 extiende uniformemente por todas partes y no hace sombra. Y el foco de luz es lo que está arruinando mis ojos en este momento. Así que eso proyecta una sombra. Así que ahora puedes ver que tenemos un poco de, no un poco, pero tenemos algunas luces y tenemos un poco de sombra. De acuerdo.

Eso se ve genial, pero ¿se ve lo suficientemente genial? No. Entonces 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 importarlo desde un componente que hice, que es sobre lo mismo, pero le agregué algunas props. Y ya hice un componente PR, escenario. Ahí vamos. Entonces lo que hace un escenario es que hace que todo se vea mejor al instante, porque crea un pequeño, como... Sabes, como un escenario. Como, sabes, como... Las luces en tu cara. Como literalmente esto, ¿verdad? Genial, genial, genial, genial. También hay varios entornos, que puedes verificar... Si borro esto, creo que me mostrará las definiciones de tipo. No lo hace. Pero hay algo llamado, por ejemplo, amanecer. Y esto básicamente descarga imágenes de la web para poner un entorno. Los probé todos. El que se veía mejor era noche. Así que esto se ve bien, ¿verdad? Tenemos al pequeño nugget allí. Pero ¿qué tal si lo animamos? Ya sé.

9. Trabajando con Refs y Frames

Short description:

Como puedes ver, el ref aquí está marcado como un ref utilizado, dándonos acceso a todo el grupo. Piensa en un grupo como un div o una G en SVG. Cuando mueves el grupo, todo lo que está dentro se mueve. Importar el frame utilizado nos permite trabajar con frames en este entorno no DOM. Podemos obtener la posición y rotación del elemento y manipularlo. También hay funciones matemáticas como math.sin que se pueden utilizar. Por último, importamos la función wobble para agregar un efecto de temblor.

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

De acuerdo. Entonces, una cosa que necesitamos hacer es importar algo llamado used frame. Y explicaré qué hace. Y podría hacer console.log, pero no lo haré porque va a matar mi computadora. Entonces, lo que hace used frame, ¿no lo importó? ¿No lo importó? De acuerdo. Genial. Lo que hace used frame es que esto no funciona como el DOM normal. Así que gracias a Dios, cada vez que lo miras durante un segundo, hay 60 frames. Quiero decir, dependiendo de tu computadora, obviamente. Pero se supone que hay 60 frames. Así que esto se ejecuta en cada frame. Simplemente no está sucediendo nada en este momento porque no está sucediendo nada en este momento, ¿verdad?

Así que vamos a venir aquí. Y vamos a obtener la posición y rotación del elemento. Y si el... bueno, déjame explicar la posición. Entonces, la posición x es esto. Y es esto. Y z es el que está arriba en tu cara. Así que si quiero moverlo un poco hacia arriba, puedo agregar 0.1 o 0.01. Y se va a elevar ligeramente hacia la nada, y eventualmente 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.

De acuerdo. Copié esto dos veces. De acuerdo, ahora solo voy a usar esto, no necesito el mouse más. Hizo su trabajo. Y voy a importar esta función de temblor, y te mostraré qué es. Permíteme importarla. Importar temblor desde atrás... No, no es atrás. Está aquí. Está aquí, con todas nuestras animations ctl. Ahí vamos. Esto es. Dios, la escena musical de Berlín me ha destrozado. Esta es la música que canto ahora. Así que ahora tiembla. Mira eso, gracias a quien hizo ese sonido. Entonces, ¿qué es math that's in, math that's in es eso.

10. Matemáticas en 3D y Experimentación

Short description:

Fallé en esta parte de matemáticas y pensé que nunca la necesitaría en mi vida. Y luego pensé, sabes qué, debería hacer 3D. Entonces, una función matemática es algo que va desde un número de menos 1 a 1. Y lo que necesitas pasar a través de ella es algo que siga moviéndose. En este caso, estamos usando state.elapsedTime, que indica cuánto tiempo ha pasado desde que comenzaste 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 sentido aquí. Puedo eliminarlo y hacer algo más. Y luego lo multiplico por math.pi. Podría multiplicarlo por diez. Y luego será más rápido. Pero luego bajará demasiado. Así que sí. El resto es solo experimentación.

Fallé en esta parte de matemáticas y pensé que nunca la necesitaría en mi vida. Y luego pensé, sabes qué, debería hacer 3D. Y él estaba como, ahora necesitas tangentes y senos y yo estaba como, mierda. Así que si puedo explicarte esto, todo estará bien. Entonces, una función matemática es algo que hace algo como esto. Va desde un número de menos 1 a 1. Y lo que necesitas pasar a través de ella es algo que siga moviéndose. En este caso, estamos usando state.elapsedTime, state.clock.elapsedTime, que indica cuánto tiempo ha pasado desde que comenzaste 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 sentido aquí. Puedo eliminarlo y hacer algo más. Y luego lo multiplico por math.pi. Podría multiplicarlo por diez. Y luego será más rápido. Pero luego bajará demasiado. Así que sí. El resto es solo experimentación.

11. Interacción y Renderizado

Short description:

Así que se tambalea. Rota. Sigue la posición y rotación de tu ratón usando lerp de Three.js. Renderizado en tiempo real con sombras cambiantes. Solo 56 líneas de código. Descarga el proyecto desde GitHub.com/mi-nombre. Blender en la web.

De acuerdo, genial. Así que eso está genial, se tambalea. Es lindo. ¿No es lindo? Es lo más lindo 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 eso fue otra persona. Gracias. Creo que uno vino de aquí y el otro vino de allá. No sé. No puedo ver a ninguno de ustedes. Así que están bien. Pueden hacer lo que quieran. Y quiero hacer algo más. Que sería, ¿qué tal si me mirara a mí? Porque eso no es nada espeluznante. Imagina, como, estás tomando tu café y tu mamá te dice, ¿qué estás haciendo? De acuerdo. Permíteme recargar. Así que 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 arruina. Así que ahora, usa el ratón para saber qué es. Y me mira a mí, ¿verdad? En el eje X y el eje Y. Y esto usa el estado del ratón. La posición del ratón en el eje 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 en un movimiento muy lento 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. Permíteme 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 código. Así que se puede hacer. Es solo algo a lo que no estamos acostumbrados, ¿verdad? Y todo 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 incompleta. Así que es GitHub.com, barra mi nombre, que tiene dos I's, no olvides la segunda I ahí, ese es un error común. Blender en la web.

12. Introducción y Granjas de Renderizado

Short description:

Soy Nikita FTW en Twitter con dos K's porque me gusta confundir a todos. Puedes seguirme en Instagram en el evil nugget. Sobreviví a la pandemia y a esta charla. ¿Podemos entrar a mi oficina? Para aquellos con Macs, hay una granja de renderizado gratuita de Blender. También puedes encontrar otras opciones buscando en Google granja de renderizado de Blender o granja de renderizado 3D. Hagámoslo girar lentamente. De acuerdo, así que rotación en Y... Alemán. ¿Cómo está Alemania?

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é el evil nugget, y puedes seguirme allí para ver todas las cosas que hago en 3D si crees que son lindas 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 a mi oficina, por favor? De acuerdo, genial. ¿Cuál? ¿Qué lado? Oh, el que prefieras. De acuerdo. 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 tenemos algunas en proceso. Sí.

De acuerdo. Y para aquellos de nosotros con Macs, ¿hay granjas de renderizado o equivalentes a las que podamos transferir ? Hay muchas... espera. Lo siento. Solo voy a volver a mi computadora, ¡porque en realidad hay una gratuita! ¿Gratuita? Hay una granja de renderizado gratuita de Blender. Así que granja de renderizado gratuita de Blender. Espero que no me llegue spam. Esto es realmente gratis. Mucha gente, básicamente lo que hace es descargar una aplicación, que yo también 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 granja de renderizado de Blender o granja de renderizado 3D. Hay muchas de ellas. Sí. Hay muchas de ellas. No sé si quieras hacer esto en vivo. ¿Podrías hacer que gire lentamente? ¿Girar qué, así? Sí. Entonces podrías agregar el... Podrías haberlo dicho mientras estaba aquí. Veamos si puedo hacerlo. Quiero decir, quién sabe. Quiero decir, ya me he avergonzado. Dijeron que está bien. Es muy británico. Di por favor. En Alemania dirían, es tu trabajo. Haz que gire. Tienes que hacer que gire. Hazlo. De acuerdo, así que rotación en Y, que creo que es esta, y haz lo mismo. Así que puedes hacer esto. No, eso no. Alemán. ¿Cómo está Alemania? Solo voy a copiarlo de aquí.

13. Creación Favorita en Blender

Short description:

Así es como es. 0.01. Y gira. ¿Tienes algo favorito que hayas creado en Blender? He creado muchas cosas malditas. Mi favorita es esta, de la cual no hay un video, pero hay un video de él despertando. Gracias, Sarah, por tu charla.

Así es como es. 0.01. Y gira. Mientras estás aquí, ¿tienes, y sé que esta es una pregunta difícil, un nugget favorito? Un nugget favorito. ¿Algo favorito que hayas creado? ¿Un personaje favorito? Oh, ¿algo favorito que haya creado en Blender? Sí. No sé. Déjame, no sé, tal vez. ¿Los amas a todos por igual? No, Dios mío, no. He creado muchas cosas malditas, chica. Algunas cosas que dices, Dios, eso es peor que código. Eso es lindo. Gracias. Creo, creo que mi favorita es esta. Aw. De la cual no hay video, pero también hay un video de él despertando. Y creo que esta fue la cosa favorita que he creado. Increíble. Gracias, Sarah, por tu charla. Aplausos para Sarah, todos.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

JSNation 2022JSNation 2022
36 min
Build a 3D Solar System with Hand Recognition and Three.js
Top Content
We live in exciting times. Frameworks like TensorFlowJS allow us to harness the power of AI models in the browser, while others like Three.js allow us to easily create 3D worlds. In this talk we will see how we can combine both, to build a full solar system, in our browser, using nothing but hand gestures!
React Summit 2023React Summit 2023
20 min
Scaling React-Three-Fiber Applications beyond the Hello World
A lot of recent talks at other conferences have talked about how to start using React and THREE.js to create 3D experiences on the web. In my career I've built several complex applications using those technologies, including a big Figma-like 3D editor, and I've learnt a lot of patterns and tricks on how to make it actually fast and scalable. Unfortunately, though, nobody is also talking about those tricks an what it really takes to build an rendering engine similar to the one that Figma uses.
My goal with this talk is to give people an overview of the challenges that may arise when you try scaling your application, and what are some lesser known tricks to overcome them: instancing, memory usage reduction techniques, SDF-based text rendering, GPGPU and tree data structures. Everything of course done with Javascript, React and THREE.js.
React Summit 2022React Summit 2022
26 min
From Blender to the Web - the Journey of a 3D Model
Creating 3D experiences in the web can be something that sounds very daunting. I’m here to remove this idea from your mind and show you that the 3D world is for everyone. For that we will get a model from the 3D software Blender into the web packed with animations, accessibility controls and optimised for web use so join me in this journey as we make the web more awesome.

Workshops on related topic

JS GameDev Summit 2022JS GameDev Summit 2022
165 min
How to make amazing generative art with simple JavaScript code
Top Content
WorkshopFree
Instead of manually drawing each image like traditional art, generative artists write programs that are capable of producing a variety of results. In this workshop you will learn how to create incredible generative art using only a web browser and text editor. Starting with basic concepts and building towards advanced theory, we will cover everything you need to know.
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introduction to WebXR with Babylon.js
Workshop
In this workshop, we'll introduce you to the core concepts of building Mixed Reality experiences with WebXR and Balon.js.
You'll learn the following:- How to add 3D mesh objects and buttons to a scene- How to use procedural textures- How to add actions to objects- How to take advantage of the default Cross Reality (XR) experience- How to add physics to a scene
For the first project in this workshop, you'll create an interactive Mixed Reality experience that'll display basketball player stats to fans and coaches. For the second project in this workshop, you'll create a voice activated WebXR app using Balon.js and Azure Speech-to-Text. You'll then deploy the web app using Static Website Hosting provided Azure Blob Storage.