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.

This talk has been presented at React Summit 2022, check out the latest edition of this React Conference.

FAQ

Blender es un software 3D gratuito y de código abierto que se utiliza para modelado, animación, simulación y renderizado de gráficos en 3D. También soporta funcionalidades para edición de video y creación de gráficos en 2D.

Tara comenzó a hacer cosas en 3D durante la pandemia como un proyecto al azar, utilizando Blender para crear sus modelos.

Eevee es uno de los motores de renderizado de Blender introducido en la versión 2.8. Es un motor de renderizado en tiempo real que no calcula cada luz de manera detallada, sino que simula la iluminación de forma aproximada, ideal para computadoras de gama baja.

Eevee es un motor de renderizado en tiempo real que simula la iluminación, ideal para visualizaciones rápidas y computadoras de menor capacidad. Cycles es un motor de trazado de rayos que calcula la trayectoria de cada rayo de luz, proporcionando resultados más precisos y realistas, pero es más demandante en términos de recursos.

React 3 Fiber es una biblioteca de React que permite renderizar gráficos 3D en la web utilizando WebGL. Se puede usar para integrar modelos 3D creados en Blender en aplicaciones web, manejando la renderización de mallas y materiales en un entorno de React.

Para exportar un modelo de Blender para la web, se utiliza el formato GLTF/GLB. Es importante seleccionar la opción 'Incluir objetos seleccionados', aplicar modificaciones y optar por la compresión para minimizar el tamaño del archivo.

Sara Vieira
Sara Vieira
26 min
17 Jun, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
La charla de hoy trata sobre Blender y 3D en la web, abordando temas como motores de renderizado, propiedades de materiales, exportación de modelos, uso de React Fiber, iluminación y sombras, gestión de estado y añadir efectos de temblor. El orador demuestra cómo crear un modelo 3D de un cupcake y personalizar su apariencia y comportamiento utilizando React y Blender. La charla también aborda temas como la selección de glaseado, cambios de color y la adición de controles de órbita para movimiento interactivo.

1. Introducción a Blender y 3D en la Web

Short description:

Hoy hablaremos sobre Blender y 3D en la web. Hice un pastelito en Blender y lo pondremos en la web. No les enseñaré cómo usar Blender, pero tendrán una idea visual de la interfaz de usuario. Blender es un software 3D que es gratuito y de código abierto. También hace otras cosas como edición 2D y de video. Blender 2.8 se veía peor, pero ahora se ve mejor. Tiene dos motores de renderizado diferentes.

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.

2. Motores de Renderizado y Material en Blender

Short description:

Uno se llama eevee. 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. Cycles es un motor de trazado de rayos. Es lento en una Mac. No uso esta computadora para Blender. Cambiemos el material. El material es un color. Puedes elegir el color base. Hagámoslo morado. La rugosidad es qué tan rugoso es un material. Es algo increíble. Puedes pensar en un espejo.

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.

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

TresJS, una forma declarativa de crear escenas 3D a partir de componentes Vue
Vue.js London 2023Vue.js London 2023
27 min
TresJS, una forma declarativa de crear escenas 3D a partir de componentes Vue
The speaker discovered 3D with 3GS and was inspired to create a 3D ecosystem for the Vue community using Troy.js. The process of setting up a 3D scene and objects in Tress was explained, along with creating and configuring 3D objects. The talk also covered animating objects with Tress and the 'Cientos' package, as well as the future of Tress.js and its compatibility with older versions of Three. The speaker expressed gratitude to sponsors and contributors and highlighted the potential for product customization with Tress.js.
De Blender a la Web - el Viaje de un Modelo 3D
React Advanced 2021React Advanced 2021
27 min
De Blender a la Web - el Viaje de un Modelo 3D
Top Content
This Talk is about Blender, a free and open-source 3D software, and integrating 3D models into websites. The speaker discusses exporting 3D models to the web using the gltf format and compressing them using gltf transform and draco compression. They also cover integrating the 3D model into a website using React and React 3 fiber, troubleshooting installation and error issues, and working with refs and frames. The Talk explores rendering, lighting, mathematics, and experimentation in 3D, as well as interaction and rendering effects. The speaker also mentions their favorite creation in Blender.
Construye un Sistema Solar 3D con Reconocimiento de Manos y Three.js
JSNation 2022JSNation 2022
36 min
Construye un Sistema Solar 3D con Reconocimiento de Manos y Three.js
Top Content
This Talk explores the use of TypeScript, 3JS, hand recognition, and TensorFlow.js to create 3D experiences on the web. It covers topics such as rendering 3D objects, adding lights and objects, hand tracking, and creating interactive gestures. The speaker demonstrates how to build a cube and a bouncy box, move objects with flick gestures, and create a solar system with stars and planets. The Talk also discusses the possibilities of using hand gestures for web navigation and controlling websites, as well as the performance limits of these technologies.
Escalando aplicaciones React-Three-Fiber más allá del Hola Mundo
React Summit 2023React Summit 2023
20 min
Escalando aplicaciones React-Three-Fiber más allá del Hola Mundo
WebGL has evolved from showcasing technology to being used in everyday applications like Google Maps and Figma. React and 3.js can be used together to build WebGL applications, allowing for reusable components and declarative development. Building complex 3D graphics applications requires efficient data structures, algorithms, and rendering techniques. The Flux CAD editor uses React, 3.js, and React ReFiber to handle complex engineering documents and optimize GPU utilization. Optimizing the render loop and GPU performance is crucial for improving WebGL application performance. Instance rendering can be used to optimize text rendering in WebGL applications, achieving efficient rendering of thousands of 3D characters.
Trae la Magia del 3D a Tus Aplicaciones Vue Con TresJS
JSNation US 2024JSNation US 2024
9 min
Trae la Magia del 3D a Tus Aplicaciones Vue Con TresJS
What if I told you that this scene or game is entirely done with Vue components? I'm presenting Trace.js, a library to bring 3D to Vue applications. In the setup syntax of Vue, we import the TraceCampos component and add it with a prop called window size. By adding a light to the scene, we can create our first 3D renderer. The post processing library for TresCS was launched, allowing developers to easily add effects like glow to their 3D scenes. TresCS allows you to build impressive scenes with minimal code. Let's quickly demo some galaxies using view components.

Workshops on related topic

Cómo crear arte generativo increíble con código JavaScript simple
JS GameDev Summit 2022JS GameDev Summit 2022
165 min
Cómo crear arte generativo increíble con código JavaScript simple
Top Content
WorkshopFree
Frank Force
Frank Force
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.
Introducción a WebXR con Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introducción a WebXR con Babylon.js
Workshop
Gustavo Cordido
Gustavo Cordido
En este masterclass, te presentaremos los conceptos básicos de la construcción de experiencias de Realidad Mixta con WebXR y Babylon.js.
Aprenderás lo siguiente:- Cómo agregar objetos de malla 3D y botones a una escena- Cómo utilizar texturas procedurales- Cómo agregar acciones a objetos- Cómo aprovechar la experiencia predeterminada de Realidad Cruzada (XR)- Cómo agregar física a una escena
Para el primer proyecto en este masterclass, crearás una experiencia interactiva de Realidad Mixta que mostrará estadísticas de jugadores de baloncesto a fanáticos y entrenadores. Para el segundo proyecto en este masterclass, crearás una aplicación WebXR activada por voz utilizando Babylon.js y Azure Speech-to-Text. Luego, desplegarás la aplicación web utilizando el alojamiento de sitios web estáticos proporcionado por Azure Blob Storage.