Guía práctica: optimización de modelos tridimensionales para su uso en aplicaciones WEB

La importancia del proceso de optimización

En el ámbito del diseño y la animación tridimensional (3D), la creación de modelos de alta resolución, conocidos como high poly porque están formados por una gran cantidad de polígonos y vértices, corresponde a una práctica común para garantizar mayor detalle y precisión. Sin embargo, cuando estos modelos detallados se utilizan en aplicaciones web, su complejidad y tamaño pueden convertirse en un obstáculo significativo, por la cual, la reducción de estos modelos conforma un proceso esencial, para optimizar su uso eficiente en entornos web. 

La optimización de modelos 3D para la web es primordial por varias razones. Primero, los modelos de alta resolución contienen un gran número de polígonos, resultando en archivos de gran tamaño o peso, lo que puede afectar negativamente los tiempos de carga de una aplicación web, incrementando la latencia y deteriorando la experiencia del usuario.

Además, los navegadores web tienen limitaciones en cuanto a la cantidad de datos que pueden procesar eficientemente, por tanto, estos modelos sin optimizar pueden sobrecargar los recursos del navegador, provocando caídas en el rendimiento, especialmente en dispositivos con hardware limitado, como los dispositivos móviles. El proceso de reducción de la complejidad de estos modelos permite mantener una calidad visual aceptable, mientras se asegura un rendimiento fluido y consistente, en una variedad de dispositivos y plataformas.

Otra ventaja significativa de la reducción de los modelos high poly es la mejora en la accesibilidad y la escalabilidad. Ya que los modelos optimizados se pueden cargar más rápidamente, facilitando la creación de aplicaciones web interactivas, como visualizadores de productos, experiencias de realidad aumentada (AR, por sus siglas en inglés), realidad virtual (VR, por sus siglas en inglés), y juegos en línea. Esto no solo mejora la experiencia del usuario, sino también amplía el alcance de las aplicaciones, haciéndolas accesibles a un público más amplio.

Guía paso a paso del proceso de reducción de polígonos de un modelo 3D

En esta guía práctica, se utilizarán 2 herramientas para realizar el proceso de reducción de modelos 3D: MeshMixer y Blender. Por un lado, MeshMixer permitirá una reducción eficiente mediante su herramienta de disminución de polígonos, facilitando ajustes precisos para mantener la calidad del modelo. Por otro, Blender utilizará el modificador deniminado ‘Decimate’, el cual ofrece un control detallado sobre la cantidad de polígonos por reducir, garantizando que los modelos sean óptimos para su uso en aplicaciones web y otras plataformas con limitación de recursos. Con ambas herramientas se asegurará una optimización adecuada, sin comprometer la integridad visual de los modelos. 

a) Primera fase: optimización con MeshMixer

1. Descargar, instalar y ejecutar MeshMixer 

• Ir a la página oficial de MeshMixer y descargar el software. 
• Seguir las instrucciones de instalación del MeshMixer. 
• Ejecutar MeshMixer, ya sea desde el escritorio o el menú de aplicaciones. 

2. Importar el Modelo 3D 

• Hacer clic en el botón Import (importar, en español), en la esquina superior izquierda. 

• Seleccionar el archivo del modelo 3D, que se desea reducir. 

3. Seleccionar la herramienta de reducción 

• En la barra de herramientas de la izquierda, hacer clic en Select (seleccionar). 
• Utilizar el puntero para seleccionar todo el modelo 3D o la parte específica que se desea reducir. Para seleccionar todo el modelo, presionar las teclas Ctrl+A (control a, en Windows) o Cmd+A (comando a, en Mac). 

4. Aplicar la reducción de polígonos 

• Con el modelo o parte de este seleccionado, hacer clic en el menú Edit (editar), en la parte superior. 
• Seleccionar Reduce (reducir), en el menú desplegable. 

5. Ajustar la configuración de reducción 

• Aparecerá una ventana de opciones de reducción. 
• Ajustar el deslizador de Porcentaje, para controlar cuánto se desea reducir la cantidad de polígonos. Al mover el deslizador hacia la derecha, aumentará la reducción, por ejemplo, al 80%.
• Se pueden elegir diferentes modos de reducción, como Shape Preserving (preservar forma) o Uniform (uniforme), dependiendo de las necesidades específicas. 
• Observar la previsualización, para asegurar que la calidad del modelo se mantiene dentro del rango aceptable. 

6. Aplicar y revisar 

• Hacer clic en Accept (aceptar), para aplicar la reducción. 
• Revisar el modelo 3D, para asegurar que la reducción de polígonos no haya comprometido demasiado la calidad del modelo. 

7. Guardar el modelo reducido 

• Una vez satisfecho con la reducción, hacer clic en File (archivo), en la esquina superior izquierda. 
• Seleccionar Export (exportar), para guardar el modelo 3D reducido. 
• Elegir el formato de archivo adecuado (como «.stl» formato de transmisión de datos estándar en la creación rápida de prototipos, «.obj» archivos de imágenes tridimensionales, etc.) y guardar el archivo de forma local. 

8. Verificación final 

• Abrir el archivo guardado en un visor de modelos 3D o software de impresión 3D, para verificar que cumple con las expectativas y los requerimientos.

Consejos adicionales 

• Prueba incremental: Si no se está seguro de cuánta reducción aplicar, se recomienda realizar el proceso de forma gradual. Luego, guardar versiones intermedias para comparar. 
• Verificar la geometría: Asegurarse de que la reducción no haya creado errores geométricos, como agujeros o intersecciones no deseadas. 
• Calidad versus tamaño: Encontrar un equilibrio entre la calidad visual y el tamaño del archivo, con el objetivo de que el modelo sea adecuado para su uso en la web. 

Ahora se procede a continuar con la segunda fase complementaria de optimización, utilizando el software Blender. 

b) Segunda fase: reducción final del modelo 3D con Blender, utilizando el modificador ‘Decimate’ 

1. Descargar, instalar y ejecutar Blender 

• Ir a la página oficial de Blender y descargar el software. 
• Seguir las instrucciones de instalación del Blender. 
• Ejecutar Blender. 

2. Importar el modelo 3D 

• Abrir Blender, y en la interfaz principal, ir a File (archivo) –> Import, para seleccionar el formato de archivo del modelo 3D (por ejemplo, .obj, .stl, etc.). 
• Elegir el archivo del modelo 3D y abrirlo. 

3. Seleccionar el modelo 3D 

• Hacer clic derecho sobre el modelo, en la vista 3D para seleccionarlo, en modo objeto. 

4. Aplicar el modificador ‘Decimate’ 

• Con el modelo seleccionado, ir al panel de propiedades, en la parte derecha de la pantalla. 
• Pulsar el icono de la llave inglesa, para abrir la pestaña de modificadores. 
• Hacer clic en Add Modifier (agregar modificador) y seleccionar Decimate de la lista desplegable. 

5. Ajustar la reducción y aplicar el modificador

• En el modificador ‘Decimate’, se encuentra la opción Ratio (relación), este control ajusta la cantidad de reducción de polígonos. 
• Deslizar el Ratio hacia la izquierda para reducir el número de polígonos, por ejemplo, en un valor de 0.5, reducirá el número de polígonos a la mitad y, en otro de 0.3, a una tercera parte del modelo original.
• Observar la previsualización del modelo en tiempo real, para asegurarse de que la calidad se mantiene en el rango aceptable. 
• Una vez se está satisfecho con la reducción, hacer clic en el botón Apply (aplicar) en el modificador ‘Decimate’, para asignar los cambios permanentemente al modelo. 

6. Guardar el modelo reducido 

• Ir a File (archivo) –> Export (exportar) y seleccione el formato de archivo deseado (como «.obj», «.stl», «.gbl», etc.). Se recomienda utilizar el formato con la extensión «.glb», representación en formato de archivo binario de modelos 3D..
• Guardar localmente el modelo 3D reducido, eligiendo la ubicación y el nombre del archivo. 

Así se finaliza la segunda y última fase para reducir eficazmente los modelos 3D en Blender, utilizando el modificador ‘Decimate’, para obtener resultados de optimización eficientes y aptos para ser implementados en una aplicación web.

Consejos adicionales 

• Prueba incremental: realizar la reducción en pequeños pasos y guardar versiones intermedias, para comparar la calidad y el tamaño del archivo. 
• Verificar la topología: después de aplicar el modificador, revisar la topología del modelo para asegurarse de que no haya problemas geométricos, como agujeros o intersecciones no deseadas. 
• Considerar otros modificadores: En algunos casos, combinar el modificador ‘Decimate’ con otros modificadores o herramientas de edición, puede proporcionar mejores resultados. 

Ejemplo de visualización de modelos 3D optimizados dentro de una aplicación web:

Demostración web de modelos 3D optimizados:

En conclusión, la reducción de modelos de alta resolución (high poly) para su uso en la web, constituye una práctica fundamental que mejorará la experiencia del usuario, en este tipo de aplicaciones. Al disminuir la complejidad y el tamaño de los modelos 3D, se mejora el rendimiento, se reducen los tiempos de carga y se optimiza la usabilidad. Este proceso permite a los desarrolladores y diseñadores crear aplicaciones web, que se implementen, ya sea entornos tridimensionales o visores de modelados, más eficientes, interactivas y agradables, aprovechando al máximo las capacidades del hardware y del navegador.

Cite este texto:

Herrera Sánchez D. (2024) Guía práctica: optimización de modelos tridimensionales para su uso en aplicaciones WEB. Sonar Multimedia [blog]. https://multimedia.uned.ac.cr/pem/wp/sonar-multimedia/?p=568