Aquí recomendamos algunas técnicas de optimización que han demostrado ser adecuadas para crear experiencias interactivas basadas en la Web. Este capítulo se basa principalmente en el discurso de Soft8Soft en la conferencia Verge3Day Europe 2019.
Recomendado: utilice el editor NSDT para crear rápidamente escenas 3D programables
1. Geometría/Cuadrícula
La geometría es la base de las aplicaciones 3D porque constituye la forma principal del modelo. Para reflejos más suaves y una renderización más rápida, debes mantener la malla lo más regular posible. Al principio, debes decidir qué nivel de detalle quieres en tu escena y ceñirte a este mientras modelas.
Al modelar pliegues, es mejor usar grupos de suavizado en lugar de agregar más polígonos:
Cuando trabaje con modelos cilíndricos, esfuércese por reducir la cantidad de polígonos en su centro.
No permita que su modelo tenga detalles adicionales que el usuario no verá de todos modos. Como se muestra en la imagen a continuación, los bordes resaltados en naranja definen el nivel de detalle en todo el modelo, por lo que puede usarlo como referencia.
2. Mapa normal
Una forma común de optimizar el rendimiento de WebGL es reducir el número de polígonos horneando mapas normales de un modelo con alto contenido de poliéster a un modelo con bajo contenido de polietileno.
Sin embargo, debido a la precisión limitada de las imágenes de 8 bits, los mapas normales pueden producir artefactos visibles. A continuación se muestran algunas posibles soluciones: usar una imagen de mayor precisión (16 bits) producirá un archivo más grande, mientras que el segundo método, usar un grupo de suavizado con un mapa normal, requiere bastante tiempo y no garantiza un resultado limpio. El tercer método puede funcionar en algunos casos: si su superficie es bastante rugosa, considere agregar algo de ruido al material para reducir estos artefactos.
En nuestra experiencia hemos descubierto que la mejor solución para objetos brillantes es utilizar una geometría poligonal intermedia con un grupo de suavizado y sin mapas normales.
Finalmente, puede haber situaciones en las que desee utilizar mapas normales en lugar de mallas muy detalladas:
- Los objetos se componen de muchas superficies diferentes.
- La superficie es rugosa y no producirá piezas de trabajo de precisión.
- Los objetos están más lejos o son más pequeños para que el usuario no note ningún artefacto.
3. Texturizado
Este es un conjunto típico de texturas utilizadas en tuberías PBR (y en general).
Como puedes ver, la mayoría están en blanco y negro. Por lo tanto, puedes combinar texturas en blanco y negro en los canales RGBA de una sola imagen, con hasta 4 mapas por imagen.
Si solo tienes una textura en blanco y negro, puedes combinarla con cualquier textura RGB existente empaquetándola en un canal alfa. Finalmente, si no tiene imágenes para fusionar, puede convertir las imágenes en blanco y negro al formato jpeg con un 95% de compresión y habilitar el modo de escala de grises.
Otra forma de reducir el tamaño de la textura es optimizar el espacio UV. Cuanto más compacto sea el desenvolvimiento UV, más eficientemente la imagen utiliza el espacio de textura. Por tanto, se pueden obtener imágenes más pequeñas sin pérdida de calidad.
4. Color del vértice
Usar colores de vértice en lugar de imágenes es una forma eficaz de acelerar la carga y mejorar el rendimiento general de su aplicación WebGL. Aunque tiene el costo de bordes adicionales que debes agregar al modelo para separar los diferentes colores de los vértices.
También puede utilizar colores de vértice para definir rugosidad, metalicidad o superficies especulares o cualquier otro parámetro. A continuación se puede ver un ejemplo de dicho material, donde solo se utilizan colores de vértice.
5. Número de sombreadores
Esto es muy beneficioso para reducir los diferentes materiales/sombras en la escena. El procesamiento de sombreadores en WebGL puede provocar tiempos de carga más prolongados, especialmente en Windows. Además, con menos sombreadores, el motor pasa menos tiempo cambiando entre ellos mientras renderiza, lo que mejora el rendimiento.
Si tiene materiales similares que solo difieren en la textura, puede usar solo un material y cargar/intercambiar su textura en tiempo de ejecución. Puedes hacer esto usando un rompecabezas de textura de reemplazo o usando JavaScript. Esto no solo optimizará la cantidad de sombreadores, sino que también reducirá la cantidad de imágenes cargadas cuando se inicia la aplicación.
Este es un ejemplo de dicha optimización. Todos estos neumáticos están representados por un solo material y se configuran intercambiando sus texturas.
Para reducir la cantidad de sombreadores, se pueden combinar 2 o más materiales simples en un material más grande. Esta técnica es particularmente efectiva si planea cambiar entre estos materiales (por ejemplo, si está creando una aplicación de configuración), ya que se ejecuta más rápido y también permite transiciones animadas.
6. Llamada de sorteo
Además, hay otro aspecto importante: el número de llamadas de empate. Este número se puede obtener en la sección Geometry Buffer de la salida del rompecabezas de información de rendimiento de impresión. Esto es aproximadamente equivalente a la cantidad de objetos separados si a cada objeto se le asigna solo un material, mientras que los objetos multimaterial requieren más llamadas de dibujo para renderizarlos.
Por lo tanto, debe incorporar mallas siempre que sea posible y utilizar menos materiales únicos para reducir la cantidad de llamadas de extracción y mejorar el rendimiento.
Puede utilizar esta herramienta en línea para optimizar materiales por lotes:
https://gltf.nsdt.cloud
Si tiene un objeto animado, aún puede conectar sus partes y animarlas usando huesos, lo que a veces es más conveniente al animar objetos separados.
7. Iluminación de alto rango dinámico
Si iluminas la escena con solo una imagen HDR sin utilizar ninguna fuente de luz, ayudarás a mejorar significativamente el rendimiento. Los archivos HDR pueden tener un tamaño inferior a 1 Mb.
8. Sombra
Utilice sombras dinámicas sólo si ayudan a representar bien el objeto. En la imagen siguiente, el sombreado dinámico utilizado en una demostración de un robot industrial enfatiza la forma del modelo del robot. El modelo en sí se puede rotar, por lo que la sombra no puede ocultar ninguna parte del objeto al usuario. Por otro lado, las sombras en la demostración del scooter desdibujan muchos detalles.
Si sus objetos no se mueven en su aplicación, puede crear mapas de sombra y oclusión ambiental y aplicarlos al plano debajo del objeto.
9. Formato del modelo
El formato de modelo 3D más adecuado para aplicaciones WebGL es GLTF, así que no olvide guardar su modelo 3D como GLTF o GLB binario, o use NSDT 3DConvert para convertir modelos en otros formatos a GLTF o GLB :
Enlace original: 9 consejos para optimizar el rendimiento de WebGL: BimAnt