Consigue Top Models 3D para tu web

Charla Consigue Top Models 3D para tu web, en la WordCamp Pontevedra 2019

En septiembre de 2019, me animé a participar en la WordCamp Pontevedra, con una charla breve de 10 minutos.

Esto que en un principio puede parecer que es una facilidad para animar a aquellos que no se sienten cómodos hablando en público, o si tienes miedo de no estar a la altura. En realidad, se vuelve contra ti.

Tienes que saber sintetizar y condensar muy bien toda la información, para que en tan sólo 10 minutos, puedas transmitir todo lo que quieres.

Eliminar todo aquello que sea relleno y florituras. No profundizar demasiado en nada, y pasar casi por encima de todo.

De forma que el público salga de la charla con la sensación de haber aprendido algo.

Por encima, me tocaba a una hora después de comer, tras todo una mañana de charlas, que pensé que debía hacer algo animado y diferente si quería captar la atención del público. Ya que me imaginaba que a la mayoría, el 3D le sonaría a chino. Y que seguramente, tan sólo estaban allí, por simple curiosidad.

Por eso, me inspiré en el título de la ponencia para celebrar un certamen de belleza, pero con modelos 3D. Algo divertido y dinámico que sirviese para entender diferentes conceptos.

Si queréis ver el resultado, podéis ver a continuación, la grabación de la charla. Y si os apetece tener más detalles sobre el tema, podéis seguir leyendo más abajo.

Charla/Performance en la WordCamp Pontevedra 2019

Conceptos básicos

Empezamos con unos conceptos básicos de 3D para poder entender las diferentes características de nuestros modelos, y las pruebas a las que los vamos a someter.

¿Qué es un modelo 3D?

Existen numerosas definiciones, y ninguna que me convenza del todo. Para mí, es un tipo de archivo que contiene información sobre la forma y el aspecto de un objeto o escena, que interpreta un software o visor de modelos 3D, para poder visualizarlo y representarlo en un entorno virtual.

¿Cómo se obtienen los modelos 3D?

Fuentes de obtención de modelos 3D.
Fuentes de obtención de modelos 3D.

Si tienes conocimientos y un software de modelado 3D, puedes crearlos tú mismo.

Sino, existen diferentes repositorios online de los que puedes descargarte modelos 3D y otros materiales para emplear en tus escenas 3D.

Hay repositorios de pago y otros gratis. Los modelos pueden tener diferentes licencias de uso, por lo que antes de emplearlos, deberías informarte sobre ello.

En estos repositorios puedes encontrar archivos nativos de distintos softwares de modelado 3D, o formatos estándar que se pueden importar en diferentes softwares.

Y por último, podemos obtener modelos/réplicas 3D de objetos reales mediante un escaneado o por fotogrametría.

La diferencia es que con el escaneado necesitas un láser/escáner. Y la fotogrametría genera el modelo 3D a partir de fotografías del objeto que interpreta un software específico para digitalizar su superficie.

Si queréis saber más sobre fotogrametría podéis echarle un ojo al post de Fotogrametría LowCost.

¿Qué tipo de modelo 3D necesito para integrar en una web?

Según el tipo de datos que definen el objeto o el software que empleamos para crearlo, tenemos diferentes tipos o formatos de modelos 3D.

Dependiendo del uso que queramos dar a nuestros modelos, deberán cumplir una serie de formatos o características.

De modo que un modelo creado para generar diferentes vistas de él, no tiene porque servir para utilizar en una animación 3D o para imprimir en 3D.

El tipo de modelo 3D más habitual para integrar en web, es un conjunto de una malla poligonal, que define la superficie, y una textura, que determina su apariencia.

Formato modelos 3D para integrar en web.
Formato modelos 3D para integrar en web.

Las mallas poligonales serían como la piel de nuestro objeto, y están formadas por la unión de diferentes polígonos definidos por caras, aristas y vértices.

Un vértice es un punto en el espacio con unas coordenadas x,y,z que lo posicionan en el espacio.

Una arista es la recta que une dos vértices. Y una cara es la superficie definida, al menos, por la unión de tres vértices o tres aristas.

La cantidad de elementos que definan nuestra malla va a condicionar el detalle o definición, pero también, el peso y los datos que tendrán que gestionar e interpretar tanto los softwares como los visores de modelos 3D.

A mayor número, mayor definición, pero también mayor peso.

Elementos que componen una malla poligonal.

Estos archivos pueden tener las siguientes extensiones: .obj, .dae, .stl, .ply, .fbx, etc.

Una textura no deja de ser más que un archivo de imagen que indica la apariencia de nuestro modelo 3D. Igual que la ropa que nos podemos para estar guapos.

Por eso, puede valer cualquier formato de imagen de los que conocemos: .png, .jpg, .tiff, .exif, .webP, etc.

Para transferir esa información a nuestro modelo, debemos realizar un mapeado UV, que consiste en desplegar la malla sobre un plano 2D. Igual que cuando despegamos una caja y tenemos una plantilla plana.

Despliegue UV de un cubo
Despliegue UV de un cubo.

De este modo, cada cara del modelo ocupa su espacio sobre una imagen 2D. A través de esta imagen podemos indicar qué pixels afectan a cada cara de nuestro modelo. Y transferir, de ese modo, diferente información para su correcta visualización.

Ejemplo de mapeado UV de un modelo 3D sobre su textura.
Ejemplo de mapeado UV de un modelo 3D sobre su textura.

Para dar más realismo al aspecto de nuestros modelos, dependiendo del software o visor de modelos 3D, se emplean diferentes métodos para recrear el comportamiento de la luz en la vida real.

Desde pequeños educamos a nuestro cerebro para distinguir materiales, formas y texturas según el comportamiento de la luz al incidir en las diferentes superficies. Gracias a brillos, sombras y reflejos, podemos comprender lo que estamos viendo sin necesidad de tocarlo.

Los materiales PBR (Phisically Based Rendering) simulan e interpretan los diferentes comportamientos de la luz al incidir en una superficie según el material del que esté hecha o su relieve.

Esquema de simulaciones en las que se basan los materiales PBR.

Esta información se recoge en diferentes mapas de texturas que indican al software o visor como tiene que comportarse la luz al incidir en la superficie o en determinadas zonas de nuestro modelo dentro del espacio virtual.

Además del mapa de albedo/diffuse que nos indica los diferentes colores o tonalidades que conforman el aspecto de nuestro modelo. Existen numerosos mapas de texturas que aportan otro tipo de información.

Algunos de los mapas de textura que existen y la información que definen.
Algunos de los mapas de textura que existen y la información que definen.

Una vez aclarados estos conceptos, ¡podemos empezar con nuestro Certamen!

Certamen Top Models 3D

Someteremos a nuestros candidatos a diferentes pruebas para valorar las siguientes características:

  • Mayor detalle y definición.
  • Mayor sensación de realidad.
  • Menor peso y tamaño de archivo.
  • Menor tiempo de carga.
  • Mayor accesibilidad a todo tipo de dispositivos.

Que podríamos resumir, en el que el ganador será el que presente mejor relación entre calidad visual frente a peso.

Vamos a conocer a nuestros candidatos:

Características y datos del modelo 3D, Alpha.
Características y datos del modelo 3D, Alpha.

El modelo Alpha es un modelo que proviene de un software de fotogrametría, en este caso, Meshroom, que genera tanto la malla poligonal como la textura.

Este tipo de softwares suelen generar unas mallas muy densas, con mucho detalle y demasiado peso. De hecho, para poder apreciar la malla, debemos hacer zoom para ser capaces de distinguir los pequeños triángulos que la conforman.

La textura que acompaña a la malla es una imagen con mucho detalle y bastante peso. Fruto de combinar todas las imágenes de las que obtuvimos la réplica.

Características y datos del modelo 3D, Beta.
Características y datos del modelo 3D, Beta.

El modelo Beta, es un modelo obtenido de pasar el modelo Alpha por un software de retopología automática, en este caso, Instant Meshes.

Este software ordena y simplifica la malla haciendo que perdamos detalles muy superficiales a nivel poros, arañazos, etc, pero que sigamos teniendo bastante detalle en cuanto a formas o decoración del objeto original.

Podéis observar como tanto el número de elementos que lo componen como el peso, se reducen considerablemente con respecto al modelo Alpha.

En cuanto a la textura, he adaptado la textura del modelo Alpha a la nueva malla mediante un proceso de bakeado que realizan ciertos softwares de modelado 3D. En este caso, lo realicé con Blender.

En este proceso se pueden indicar las características de la nueva textura. Sin embargo, en vez de optimizarla y bajarle el peso, he decidido conservar las características originales para observar cómo se comporta la misma textura con diferente grado de definición de la malla.

Características y datos del modelo 3D, Gamma.
Características y datos del modelo 3D, Gamma.

Y por último, el modelo Gamma. Este modelo procede de una retopología manual realizada con Blender, bastante extrema. En la que he dejado el volumen más básico del objeto, sin los relieves de la decoración.

Lo normal, sería hacer una retopología intermedia entre la automática y esta, pero me interesaba forzar una diferencia mayor entre ambos candidatos.

La diferencia entre hacerlo de forma manual o automática, es el mayor control que tienes sobre la malla resultante.

Si no tienes conocimientos de retopología, recomiendo hacerla de manera automática. Y si sabes de modelado 3D y quieres una malla con una retopología a tu gusto, hacerlo de modo manual.

Para compensar la malla tan pobre de este modelo, le generé una serie de mapas de texturas que realzasen su aspecto.

Estos mapas de texturas los creé con Blender mediante el proceso de bakeado, pero a veces suelo utilizar un Add-on de Gimp que se llama Insane bump y genera él sólo los mapas.

Os dejaría el enlace, pero creo que no funciona con las versiones de Gimp más recientes. Otra opción, sería descargar los mapas de texturas de algún repositorio,de texturas.

Las texturas obtenidas en Blender, podía haberlas sacado ya optimizadas, pero opté por hacerlo en Gimp, de modo que conservo las originales por si quiero utilizarlas en algún momento.

Los mapas de texturas hacen el mismo efecto que cuando nos ponemos ciertas prendas que realzan u ocultan ciertas partes de nuestra figura. Nuestro cuerpo es el mismo, pero según lo que nos pongamos, parecemos más altos, más delgados, de cintura estrecha, etc.

Pues una vez, que ya conocemos a nuestros tres candidatos, ¡comencemos con las pruebas!

Prueba 1: calidad visual

Imagen renderizada de los tres candidatos a Top Model 3D.
Imagen renderizada de los tres candidatos a Top Model 3D.

Para esta prueba, hemos generado una imagen renderizada de nuestros modelos, igual que si hiciésemos una sesión fotográfica.

Para ello, el software de modelado 3D interpreta la malla poligonal, la textura y cómo se comporta la iluminación de la escena sobre ellas.

Para gustos colores, pero claramente, el candidato Alpha tiene un aspecto más realista. Casi como si quisiese salir de la imagen o de la pantalla.

El candidato Beta, tiene un aspecto más que aceptable.

Y el candidato Gamma tiende a que nuestro cerebro, lo identifique como un modelo 3D en vez de un objeto real.

Prueba 2: subir el modelo

Para integrar un modelo 3D en tu web, necesitas un hosting propio o contratado en el que alojarlo, o puedes alojarlo en el hosting de otro y enlazarlo.

Igual que haces con vídeos o imágenes que subes a otras plataformas.

Skectchfab sería como el Youtube de los modelos 3D. Es una buena opción a la hora de integrar modelos porque dejas que ellos se encarguen de que se visualice en condiciones.

Además, subir los modelos, es muy sencillo e intuitivo.

Sin embargo, la opción gratis tiene un límite de almacenamiento.

Interfaz de Sketchfab para subir cada uno de los candidatos.
Interfaz de Sketchfab para subir cada uno de los candidatos.

En este caso, el candidato Alpha excede el peso permitido, y no podemos subirlo.

El candidato Beta podemos subirlo sin problemas, añadir la textura albedo/diffuse, y todavía podríamos añadir otro mapa de texturas diferente, de igual peso.

Y el candidato Gamma podemos subirlo y acompañarlos de todos los mapas de texturas que queramos.

Prueba 3: Tiempos de carga.

Para esta prueba, opté por Blend4web. Es un Add-on de Blender, con el que puedes configurar modelos interactivos, realizar paseos virtuales o crear configuradores de productos desde el interfaz de Blender sin necesidad de saber programar.

Después, puedes exportar el trabajo como .html o .json.

Además, como puedes trabajar en local, por lo que aproveché para hacer la prueba de tiempos de carga al no depender de la conexión.

Visor de modelos 3D de Blend4web con los tiempos de carga de los tres candidatos.
Visor de modelos 3D de Blend4web con los tiempos de carga de los tres candidatos.

En esta prueba se puede apreciar claramente la diferencia de carga en relación con el peso.

Los tiempos del candidato Alpha son elevadísmos en comparación con los del candidato Beta o Gamma. Tardando Beta el doble que Gamma.

Prueba 4: Carga en dispositivos.

Esta prueba no deja de ser más que otra prueba en relación al peso.

Por probar más formas de integrar modelos 3D en webs, busqué un pluggin de WordPress para realizar esta prueba, Canvasio.

Visión de la pantalla de un móvil mientras cargan los tres candidatos.
Visión de la pantalla de un móvil mientras cargan los tres candidatos.

El modelo Alpha pesa demasiado, y excede los tiempos normales de carga.

Prueba de carga del modelo Beta.
Prueba de carga del modelo Beta.

El modelo Beta, tarda un instante en cargarse.

Prueba de carga del modelo Gamma.

Y el Gamma, está cargado en cuanto abres la web.

Tanto Beta como Gamma una vez cargados, se manejan sin problema.

Sin embargo, Canvasio, no funciona con materiales PBR, por lo que no he podido emplear los mapas de textura del modelo Gamma, y se ve demasiado plano/artificial.

Debo decir, que sí que te permite cargar otro tipo de mapas de texturas, pero me interesaba que vieseis la diferencia.

Conclusión.

El Top Model 3D ganador es aquel que se adapta mejor a las necesidades de tu proyecto.

En unas ocasiones, necesitarás una mejor calidad visual, y en otras, que sea más rápido.

Pero ahora ya sabéis formas de optimizar tanto la malla como la textura. Y cómo estos elementos afectan a la visualización de vuestros modelos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *