A menudo sucede que las técnicas de optimización que funcionan bien para gráficos de escritorio o móviles normales no siempre dan el efecto deseado en el caso de WebGL. En este artículo, recopilé (o más bien traduje al ruso y describí en forma de texto nuestra
presentación con Verge3Day) aquellos métodos de productividad que funcionaron bien para crear aplicaciones web interactivas.
Geometría / Mallas
La geometría correcta es la clave para el rendimiento de cualquier aplicación 3D. Para obtener un sombreado uniforme y una representación rápida, debe mantener la malla poligonal lo más uniforme posible. Al comienzo del trabajo, debe determinar el nivel de detalle de su escena y atenerse a ella al modelar.
Al modelar pliegues, es mejor usar grupos de sombreado en lugar de agregar más polígonos.
Cuando trabaje con un modelo cilíndrico, intente reducir el número de polígonos más cerca del centro.
No sobrecargue el modelo con piezas adicionales que el usuario todavía no verá. Como se muestra en la figura a continuación, el borde resaltado en naranja determina el nivel de detalle para todo el modelo, por lo que puede usarlo como guía.
Mapas normales
Una forma común de optimizar el rendimiento de WebGL es reducir la cantidad de polígonos creando mapas normales.
Sin embargo, los mapas normales pueden crear artefactos visibles debido a la precisión limitada de la imagen de 8 bits. Las posibles soluciones a este problema se muestran en la imagen a continuación, pero son bastante difíciles de implementar: el uso de una imagen con mayor precisión conducirá a un aumento en el tamaño del archivo descargado, mientras que el segundo enfoque es bastante laborioso y no garantiza un resultado limpio. El tercer enfoque a veces funciona en el caso de superficies rugosas. En este caso, recomendamos agregar ruido a sus materiales para reducir posibles artefactos.
Con base en nuestra experiencia, llegamos a la conclusión de que la mejor solución para objetos brillantes es usar geometría de complejidad media con grupos de vértices suaves, sin usar ningún mapa normal.
Finalmente, aquí hay algunos casos en los que puede usar un mapa normal, en lugar de una malla muy detallada:
- Su objeto consta de muchas superficies diferentes.
- Tiene una superficie rugosa que no da defectos visibles.
- Sus objetos son tan distantes o pequeños que el usuario no puede notar ningún artefacto.
Texturizado
Aquí hay un conjunto típico de texturas utilizadas en el modelo moderno de iluminación PBR (y no solo).
Como puede ver, la mayoría de ellos son en blanco y negro. Por lo tanto, puede combinar texturas en blanco y negro en los canales RGBA de una imagen (hasta 4 tarjetas en total por imagen).
Si solo tiene una textura en blanco y negro, puede combinarla con cualquier textura RGB existente empaquetándola en un canal alfa. Finalmente, si no tiene una imagen para combinar, puede convertir su imagen en blanco y negro a formato jpeg con 95% de compresión y escala de grises habilitada.
Otra forma de reducir el tamaño de la textura es optimizar el escaneo UV. Cuanto más compacto sea el escaneo, más eficiente será la imagen que utilizará el espacio de textura. Esto le permite tener imágenes más livianas sin pérdida de calidad.
Colores de vértice
El uso de colores de vértice en lugar de imágenes es una forma efectiva de acelerar la carga y aumentar el rendimiento general de sus aplicaciones WebGL. El único inconveniente es que debe agregar algunos bordes adicionales a su modelo para separar los colores de los mismos vértices.
También puede usar colores de vértice para determinar la rugosidad, la metalicidad o las superficies especulares, o cualquier otro parámetro. A continuación puede ver un ejemplo de dicho material, que utiliza solo los colores de los vértices.
Numero de sombreadores
Es muy importante que haya menos materiales / sombreadores diferentes en su escenario. La compilación de sombreadores en WebGL lleva a una carga larga, que es especialmente notable en Windows. Además, si tiene menos sombreadores, el motor pasará menos tiempo cambiando entre ellos durante el renderizado, mejorando así el rendimiento.
Si tiene materiales similares que difieren solo en texturas, puede usar solo un material y cargar / cambiar sus texturas en tiempo de ejecución. Para hacer esto, puede usar JavaScript o tomar el editor de lógica visual disponible en algunos marcos de WebGL. Esto no solo optimiza la cantidad de sombreadores, sino que también reduce la cantidad de imágenes cargadas cuando se inicia la aplicación.
Aquí hay un ejemplo de tal optimización. Las cuatro variedades de un neumático están representadas por un material y se configuran reemplazando las texturas.
Para reducir la cantidad de sombreadores, puede combinar 2 o más materiales simples en uno más complejo. Este método es especialmente efectivo si planea cambiar entre estos materiales (por ejemplo, crear una aplicación de configuración), y no solo cambiar, sino animar de manera suave y hermosa la transición de un material a otro.
Dibujar llamadas
Además, hay otro aspecto importante: el número de llamadas Draw (también son llamadas draw y llamadas draw). Esto corresponde aproximadamente al número de objetos individuales, si solo se asigna un material a cada objeto, mientras que los objetos con varios materiales requieren aún más llamadas para visualizarlos.
Por lo tanto, debe esforzarse por fusionar las cuadrículas siempre que sea posible y utilizar materiales menos exclusivos para reducir la cantidad de llamadas de extracción y mejorar el rendimiento.
Si tiene un objeto animado, aún puede conectar sus partes y usar los huesos para animar, lo que a veces es aún más conveniente al animar objetos individuales.
Iluminación HDR
Esto ayuda a mejorar significativamente el rendimiento si solo ilumina su escena con una imagen HDR, sin utilizar ninguna fuente de luz. Un archivo HDR puede pesar menos de 1 MB.
Sombras
Use sombras dinámicas solo cuando ayuden a presentar su objeto de la mejor manera posible. La imagen a continuación muestra las sombras dinámicas de nuestra demostración de
Robot industrial . Dado que el modelo mismo gira en esta aplicación, y no en la cámara, las sombras no pueden ocultar ninguna parte del objeto del usuario y enfatizan perfectamente la forma del robot. Por otro lado, las mismas sombras en la demostración de
Scooter oscurecerán muchos detalles del modelo.
Concluimos de esto: si su objeto no se mueve en la aplicación, puede hornear mapas de oclusión de sombra y ambiente y asignarlos al plano debajo del objeto. Tal solución será más productiva y se verá mejor que cuando se usan sombras dinámicas.
Eso es todo Si tiene algún otro consejo que pueda ayudar con el rendimiento de WebGL, escriba los comentarios.