Cómo lograr renders de productos de alta calidad con Substance

render de una motocicleta en adobe substance

¡Hola! Mi nombre es Alexey Afanasyev, soy el líder de visualización de productos 3D en Visionaries 777, una compañía de software AR / VR / XR con sede en Hong Kong. Tengo experiencia en diseño industrial y una enorme pasión por las motocicletas, lo que me llevó a trabajar con el taller francés de motocicletas personalizadas, DAB Motors, en su último modelo, LM-S. Estoy interesado principalmente en el diseño de motocicletas y la visualización realista de productos, esa es mi búsqueda constante. Las soluciones de Adobe Substance han sido nuestra primera opción para lograr renders de producto con muy buena calidad. La mayor parte de lo que voy a contar aquí, quizás podría hacerse de manera diferente, pero tras varios experimentos, esta es la opción más eficiente.

En este artículo

  • Software que utilicé:
  • Requisitos del proyecto de renders de producto
  • Paso 2: High-Poly Modeling (renders en alta resolución)
  • Paso 3: optimiza el High-Poly
  • Paso 4: crea el Low-Poly
  • Paso 5: aplica materiales desde Substance Source
  • Paso 6: haz el texturizado High-Poly con Substance Painter
  • Paso 7: haz la transición natural desde el High a Low
  • Resultado Final: renders de alta resolución con Photoshop, Lightroom y Adobe Premiere
  • Resultado Final: Configurador Interactivo WebGL

Software que utilicé:

Requisitos del proyecto de renders de producto

Antes de entrar en detalles, les voy a contar los requisitos que exige un proyecto que incluye renders de producto, los cuales se dividen principalmente en dos partes. Nota: es importante trabajar en ambas a la vez para obtener los mejores resultados.

La primera parte eran renders (imágenes virtuales) y videos, que luego se utilizarían tanto en el sitio web oficial de DAB Motors, como en las plataformas de redes sociales con fines publicitarios. Para esto, creamos un modelo “high-poly” (de alta resolución), “un gemelo digital”. Luego usamos Substance Painter para texturizar completamente el modelo con texturas con una resolución 4K, con el fin de lograr alta calidad y realismo. Finalmente, hicimos estupendas imágenes tanto fijas como en movimiento.

La segunda parte, sería un configurador WebGL 3D en tiempo real, accesible desde su navegador web a través de cualquier dispositivo móvil o de escritorio, el cual se pondría en el sitio web de la empresa, permitiendo a los usuarios personalizar la motocicleta de sus sueños eligiendo el color de cada parte, así como la suspensión, los tipos de neumáticos, etc El paso final sería hacer un pedido online.

Dado que el trabajo estaba destinado al sitio web, debíamos crear un modelo low-poly. Necesitábamos que visualmente se viera lo más cercano posible a la versión high-poly. Tuvimos que trabajar mucho en el baking y el texturizado para optimizar la calidad visual y el rendimiento. Afortunadamente, usar Substance Source y Substance Painter nos permitió ahorrar mucho tiempo y obtener el mejor resultado.

Paso 1: escanea y obtén referentes

render del chasis de una motocicleta en adobe substance

Al comienzo del proyecto, nos dieron escaneos en 3D de la motocicleta y sus partes visibles que necesitábamos. Tener referencias reales de los objetos es el paso más importante para incrementar la calidad de cualquier cosa que vayas a hacer. Las referencias del objeto también son cruciales para el texturizado, ya que nuestro objetivo es crear un clon digital de un objeto real; los materiales deben ser casi idénticos a cómo se ven en la vida real.

Afortunadamente para nosotros, Simon Dabadie, CEO y fundador de DAB Motors fue de mucha ayuda con esto, nos suministró todos los ángulos necesarios en cada etapa del proyecto. Más allá de las fotografías, también nos contó qué partes están hechas de aluminio, acero, titanio, plástico, etc. Los diferentes metales tienen diferentes propiedades, incluida la apariencia y tacto, lo que facilita mucho la búsqueda de materiales en la biblioteca Substance Source.

Paso 2: High-Poly Modeling (renders en alta resolución)

Esta es la parte más crucial de este proyecto y la que más tiempo nos llevó. Para las personas que no están familiarizadas con la visualización de productos de 3D, me gustaría resaltar que, aunque tenemos un modelo escaneado de la motocicleta, estos son solo referencias visuales y de posición para construir tu producto.

Dependiendo de la calidad del escaneo, algunas veces sirven para iniciar el modelado sobre él, pero los escaneos pueden ser incorrectos y por lo tanto, es importante mirar las imágenes de referencia para hacer las cosas bien.

El proceso de modelado es bastante simple. La mayor parte de este se hizo en Blender usando técnicas clásicas de Sub-d. Necesitamos empujar y tirar de los vértices a lo largo del escaneo, para que nuestro modeling se adapte a él. Es fácil, pero toma mucho tiempo. El modelado más difícil son las partes que el escaneado no ha podido hacer bien porque estaban unas muy juntas a otras.

render motocicleta seccionado por colores

Modelo final del High-poly usando el nivel 1 de Sub-d (3.8millones de triángulos)

Toda el área del manillar no fue escaneada en absoluto, así que para esta parte solo podíamos confiar en las fotos de referencia. En ocasiones usamos la técnica de proyección desde la cámara para alinear diferentes fotos con las cámaras 3D, lo cual ayudaba a tener una mejor idea de la forma de las piezas, acelerando así el modelado y reduciendo las suposiciones. Además, hay algunas partes que están soldadas entre sí en el mundo real, incluyendo, por ejemplo, las intersecciones de los tubos de metal en el cuadro, el tubo de escape; para hacer bien esas soldaduras, exportamos el modelo high-poly desde Blender a Zbrush y las «soldamos» manualmente con un pincel.

render del chasis de una motocicleta en adobe substance

Esculpido de la soldadura con ZBrush

Resultados antes y después de aplicar las normales bakeadas a la soldadura, desde el nivel 4 de subdivisión hasta el nivel 1

Tratar de lograr esto con un add-on que lo hiciera automáticamente, es complicado y no se vería tan bien. Cuando haces las soldaduras a mano, inevitablemente cometes errores y serán distintas unas a otras, lo que proporciona un agradable y realista toque humano; estas sutiles imperfecciones las hacemos inconscientemente como humanos. En CG todo suele ser perfecto y preciso y la clave del realismo es alejarse de esa perfección.

Resultado final de la soldadura en todas las piezas necesarias.

Paso 3: optimiza el High-Poly

Tengo algo que decir sobre la optimización de su modelo para texturizar y renderizar. Una motocicleta es un objeto muy complicado cuando se trata de modelar, ya que posee muchas superficies y muchas formas cilíndricas que dan como resultado grandes cantidades de polígonos dentro del modelo High-poly. Los recursos informáticos no son ilimitados e incluso si tienes el ordenador más potente del mundo, si no se encuentra optimizado, en algún momento te encontrarás con algunos problemas que podrían haberse evitado.

El problema que tenía era muy claro y simple: buscaba una malla para la motocicleta que se viera bien, incluso al acercarse a ella. La forma más simple de lograrlo es aumentar los niveles de subdivisión. El total de polígonos en el nivel subdivisión 1 para toda la moto estaría entre 3 a 4 millones. Digamos que solo estoy contento con el nivel 4 de la subdivisión. La motocicleta entera pasaría a tener al menos 20 millones de polígonos, con esta cantidad de polígonos, el viewport se vuelve mucho más lento y el renderizado tarda mucho más. Así que pierdes tiempo cada vez que manipulas el modelo.

Comparación de calidad entre la subdivisión del nivel 1 y 2

La solución a esto fue bakear la información del objeto en nivel 4 de subdivisión en la malla del nivel 1. Esto le da una máxima calidad visual, así como una moderada cantidad de polígonos, una rápida respuesta del viewport, tiempos de render más corto y mucho más. No hay más pérdidas de tiempo inútiles, lo cual es importante.

Antes y después de aplicar los datos del nivel de subdivisión 4 sobre el nivel de subdivisión 1.

Paso 4: crea el Low-Poly

Cuando se trata de generar un modelo para la configuración en WebGL, hay que entender un hecho simple: cuanto más alto sea el número de polígonos y el tamaño de las texturas, más lentos serán los tiempos de carga para el usuario final. En Visionaries 777 usamos PlayCanvas para nuestros proyectos WebGL; creando y optimizando un modelo para la web tratando de equilibrar que se vea bien y cargue rápidamente. Los diseñadores y artistas tienden a darle demasiada importancia a que todo se vea muy bien.

Es fácilmente entendible: «he pasado tanto tiempo en esto, puliendo cada pequeño detalle buscando que se vea lo mejor posible, así que, la gente puede esperar». Pero la realidad es que a las personas no les interesa lo que piensas. Si la aplicación no se carga lo suficientemente rápido, simplemente la ignorarán, y todo ese increíble trabajo que has hecho nunca se verá. Así que piénsatelo dos veces antes de añadir 10 texturas 4K a tu modelo; ¿crees que realmente lo necesitas? Lo más probable es que no.

El proceso de generación de Low-poly fue bastante simple y fácil. Como ya teníamos un high-poly hecho con el método de subdivisión, podíamos reutilizar la geometría existente con solo eliminar algunas aristas (edge loops), ajustando algunos vértices aquí/allá y la malla estaría lista para funcionar. Por supuesto, algunas partes tienen que volver a realizarse, pero tener una geometría limpia debajo acelera el proceso de manera significativa.

Antes y después de la optimización

Low-poly sin normal maps

Como ya he mencionado, para obtener resultados realistas con un modelo de Low- Poly, tuvimos que hacer un buen bakeado para alcanzar un buen equilibrio entre la calidad visual y rendimiento. Tener un modelo limpio en high-poly es todo lo que se necesita para lograr un buen bakeado del normal map. Después de hacer unas buenas UVs, hay que hacer un simple baking de las partes de High-poly sobre las de Low-poly

Sin embargo, hay excepciones que requieren una mayor reflexión para el bakeado. Tratar de hacer normal maps que se puedan repetir (tileables) ahorra muchos megabytes; un ejemplo de ello son las texturas de los neumáticos. Hablando de neumáticos: solo podíamos usar un canal UV por tipo de textura, lo cual era una gran limitación; usar una textura pequeña muy repetida se notaría demasiado, mientras que intentar unwrapear todo el neumático requeriría una textura muy grande para poder mantener la mayoría de los detalles.

Si no se desea una gran variación en el material, entonces el uso de materiales tileables frecuentemente está bien, pero si se quiere evitar las repeticiones, hay que ser inteligente en cuanto a la resolución y el tileado.

diseño de llantas para motocicleta

Antes y después de aplicar los normal maps sobre el neumático.

Por decirlo de forma simple, no puedes tener un bakeado de baja resolución y buena calidad con normal maps tileables (por ejemplo: detalles de metal fundido). Como con todo lo demás, tuve que encontrar el balance correcto entre la resolución y la calidad.

render de una motocicleta con diferentes colores

Modelo final del Low-poly (solo 227.000 triángulos)

Modelo final Low-poly sin y con la aplicación de normal maps.

Paso 5: aplica materiales desde Substance Source

Una vez que el modelado de High-Poly esté finalizando, es el momento de empezar a experimentar con los diferentes materiales de Substance Source, ya que allí se tiene todo lo que se necesita para texturizar un producto. Es extremadamente fácil de usar cuando conoces el material que estás buscando. Por ejemplo, el pistón principal de la horquilla delantera está hecho de acero, sólo tienes que escribirlo en la búsqueda y obtendrás los materiales básicos. Estos son ampliamente editables, simplemente deslizando puedes controlar varias propiedades del aspecto y el tacto.

Esta es una fotografía real del disco de la motocicleta, debajo podemos ver los materiales seleccionados desde la librería de Substance Source.

Perspectiva final del material del disco, aplicado en el modelo High poly en Substance Painter

Perspectiva final del material del disco, aplicado en el modelo High-poly en Substance Painter.

Substance Source tiene la mayoría de los materiales y texturas que se necesitan. Si hay una textura o acabado que no se puede encontrar allí (lo cual es poco probable), se puede generar entonces combinando presets de materiales existentes: copiando ciertas características (capas) de un material para luego pegarlo sobre uno recién creado.

Paso 6: haz el texturizado High-Poly con Substance Painter

Después de conseguir el material básico correcto, debemos añadir los efectos de desgaste y dañados. Veo muchos proyectos en los que la gente tiende a añadir mucho desgaste, debe existir equilibrio y sutileza en todo. Es muy tentador con Substance Painter exagerar la suciedad así como los daños y efectos ocasionados por la exposición a la intemperie; hacer que un objeto esté limpio pero ligeramente rayado es lo que lo hará mucho más realista. Por supuesto, hay casos en los que se desea un daño superficial extremo, pero para este proyecto, como la moto necesita parecer nueva, solo fue necesario añadir algunos detalles sutilmente

Perspectiva final de la motocicleta con todos los materiales y texturas hechas con Substance Painter

Perspectiva final de la motocicleta con todos los materiales y texturas hechas con Substance Painter

Los productos de Substance son extremadamente útiles ya que permiten que los materiales se reutilicen fácilmente. Puedes reutilizar, por ejemplo, capas como la suciedad o el polvo, de manera muy sencilla, ya que son solo máscaras hechas por generadores. Usualmente hago un grupo que contenga todos los efectos de la intemperie necesarios en el proyecto para luego copiar/pegar este grupo en las partes que lo necesiten. Esto ahorra mucho tiempo y es muy fácil de ajustar.

Paso 7: haz la transición natural desde el High a Low

Una de las características más útiles es la posibilidad de guardar tu propio grupo de capas como Smart materials para su uso futuro.

Como teníamos dos modelos, el de High-poly para los renders y el de Low-poly para la configuración en la web, hubiese sido una pérdida de tiempo texturizar cada uno de ellos desde cero. Usando las capacidades de los Smart Materials mencionados anteriormente, somos capaces de usarlos para múltiples proyectos.

Es especialmente útil

  1. Cuando se aumenta la complejidad de un material.
  2. Por si se desea mantener el mismo aspecto entre múltiples proyectos.

Incluso puedes guardarlos para futuros proyectos y no necesitarás perder el tiempo haciéndolos de nuevo. Debido a la naturaleza no destructiva de dichos materiales, podemos incluso reutilizar capas que contienen logotipos (por ejemplo, marcas en los laterales de los neumáticos). A veces puede ser necesario ajustar ligeramente el mapeado, solo se tardan unos segundos y se vuelve muy intuitivo una vez esté familiarizada con todas las poderosas herramientas de Substance.

Otra gran característica de Substance es la capacidad de combinar múltiples texturas en una sola usando diferentes canales de color; es extremadamente relevante para las optimizaciones web; en nuestro caso usamos GMAO.

Combinado de texturas en diferentes canales como GMAO.

Resultado Final: renders de alta resolución con Photoshop, Lightroom y Adobe Premiere

Abajo puedes ver los renders finales de la motocicleta en alta resolución. Blender se usó para renderizar tanto imágenes como videos. Para este tipo de tomas, renderizamos tres capas por separado: el suelo con sombra, la moto sin fondo y la iluminación volumétrica de la parte superior. Luego combinamos estas tres capas en Photoshop, para ajustes menores, y luego enLightroom para las correcciones finales de color.

Utilizamos el mismo proceso para el video, pero en lugar de usar Photoshop y Lightroom, usamos Adobe Premiere. Renderizar el video tarda mucho más, si se trabaja en una máquina más lenta hay que ser muy cuidadoso con los ajustes de calidad del rendering.

Resultado Final: Configurador Interactivo WebGL

Cuando la configuración está finalmente alojada en el sitio web oficial, permite a los usuarios personalizar la motocicleta de sus sueños directamente dentro de su navegador web en cualquier móvil, tableta o dispositivo de escritorio. Los usuarios pueden elegir entre una amplia gama de colores para cada pieza, así como la suspensión, los tipos de neumáticos, ABS, etc. Las configuraciones posibles son infinitas. Una vez que la personalización está terminada, los usuarios recibirán el precio total y detallado de la configuración elegida, con la posibilidad de hacer un pedido en línea. DAB Motors será entonces notificado de su pedido y procederá a hacer su moto personalizada una realidad!

¡Pruébalo aquí!

Para resumir todo, trabajar con los productos de Substance es muy sencillo e intuitivo pero, lo que es más importante, es que nos permite hacer rápida y eficientemente múltiples opciones en el diseño de las texturas. Dado que los materiales y los preajustes no se destruyen, es muy fácil ajustarlos en cualquier momento de un proyecto. La capacidad de guardar los Smart materials para su uso futuro también es un gran ahorro de tiempo. Esta capacidad hizo que este complejo proyecto fuera más fácil de manejar y nos permitió crear una estructura de producción eficaz para nuestros dos casos de uso que eran muy diferentes con requisitos muy distintos. Estamos contentos con los resultados que se obtuvieron y lo recomendaremos a todos los que quieran hacer trabajos de texturizado fáciles y divertidos.

Simon Dabadie, propietario y diseñador jefe de Dab Motors:

La personalización y las nuevas tecnologías son la esencia de Dab Motors y siempre quiero hacer más por mis clientes en términos de experiencia. Quiero que personalicen su LM-S con la facilidad de un videojuego y luego nos encargaremos de construir la motocicleta de sus sueños. Básicamente, esta es la NikeiD de las motos personalizadas. La LM-S se diseña y ensambla en el País Vasco de una forma totalmente nueva que nunca se ha utilizado en esta industria. Gracias al configurador 3D en línea desarrollado por Visionaries 777, el modelo 3D realista creado por Alexey, y las texturas altamente realistas creadas con Substance, ahora somos capaces de establecer una nueva relación producto/cliente y pasamos de la era de la producción en masa a la de la personalización en masa.

Es la fábrica de motocicletas del futuro, estas ya no se almacenan sino que se fabrican directamente por encargo. Se adaptan a los gustos y necesidades de nuestros clientes. ¡Muchas gracias y felicitaciones al equipo VZ777

También te puede interesar:

Aprende a crear personajes increíbles en 3D

Crea realidad aumentada con Adobe Aero

Tutorial 3D: semi-surrealista