Rendimiento de WebGL en Safari y Apple Vision Pro
Safari —especialmente en iOS— siempre se ha considerado el pináculo del desafío de rendimiento para los desarrolladores que construyen en la web 3D. La implementación de WebGL basada en Metal, junto con las características de rendimiento únicas de WebKit, lo hacen particularmente interesante para abordar.
En este artículo, te damos algunas ideas sobre cómo podrías mejorar el rendimiento de tus aplicaciones WebGL en Safari.
Apple Vision Pro
Recientemente, con el lanzamiento de Apple Vision Pro, el rendimiento de WebGL en Safari ha ganado aún más importancia, ya que la versión de Safari en Apple Vision ha heredado todas las características de rendimiento de Safari en MacOS e iOS.
Pronto publicaremos un artículo completo sobre WebXR con Apple Vision Pro, suscríbete a nuestro boletín para recibir notificaciones.
Wonderland Engine en Apple Vision Pro
Si ya estás usando Wonderland Engine, tenemos buenas noticias: todas las optimizaciones que hicimos para nuestro lanzamiento 0.9.0 se trasladan a Apple Vision Pro.
Los desarrolladores con acceso a Apple Vision Pro están informando de un gran rendimiento en sus aplicaciones basadas en Wonderland Engine:
Optimización para Safari
Si estás en otro framework, asegúrate de echarle un vistazo a nuestro blog sobre Perfilado de Rendimiento de WebGL. Ese post contiene consejos sobre cómo encontrar los cuellos de botella de tu aplicación para descubrir qué optimizar.
Además, a continuación se presentan algunas notas sobre lo que podrías encontrar en Safari mientras realizas el perfilado. Estos no son universales, perfila tu aplicación para averiguar cuáles de estos te causan problemas.
Cuellos de Botella
Aquí hay algunos problemas característicos que podrías encontrar al trabajar con WebGL en Safari:
Buffers Uniformes
Debido a cómo la API gráfica de Apple Metal difiere de WebGL, Safari necesita emular un buffer uniforme al estilo de WebGL en segundo plano. Esta emulación conlleva cierta dificultad para predecir el rendimiento de los UBOs: algunos usos estarán bien, mientras que otros podrían tener un retraso de 150ms al intentar cargar datos en el momento incorrecto.
Este fragmento de código
de la implementación Metal de Angle (que es utilizado por WebKit para implementar
la API WebGL2) apunta a la implementación del equivalente GLES de
bufferSubData.
Nos ayuda a apreciar hasta qué punto los desarrolladores de navegadores se esfuerzan
para proporcionarnos una API gráfica consistente.
También muestra hasta qué punto el equipo de Wonderland Engine va para que
entiendas el rendimiento del navegador y optimices para ti.
Hubo mucho descontento por la demora de Safari en lanzar el soporte para WebGL2. Contrario a las especulaciones de que nunca lo apoyarían, lanzaron el soporte para WebGL2 en septiembre de 2021 con Safari 15. Leer el código de WebKit y Angle genera cierta empatía sobre por qué podría no haber sido una tarea fácil de completar.
Acceso al Estado de WebGL
La función getParameter de WebGL tiene algunas sorpresas de rendimiento para
ti. Lo que parece ser una función inofensiva puede costar mucho del presupuesto de rendimiento.
Error de WebGL
Si bien verificar errores con getError es generalmente una buena idea,
evítalo fuera de tu callback de cuadro, ya que puede ser más costoso de lo que debería ser.
Memoria y Límites
WebGL en Safari reportará límites para tamaños de textura, capas, tamaños de buffers uniformes y más. Una buena herramienta para verificar estos límites es webglreport.com.
Aunque Safari te permitirá asignar hasta estos límites en teoría, podrías encontrar que esto puede hacer que tu página se bloquee.
Para utilizar los recursos de memoria en iOS de manera más eficiente, Wonderland Engine proporciona una función que llamamos Texture Streaming, para intercambiar dinámicamente piezas de texturas dentro y fuera de la memoria según lo que se necesite en el cuadro actual. Está habilitado por defecto.
Palabras Finales
Seguiremos con un artículo detallado sobre WebXR en Apple Vision Pro en breve. Suscríbete a nuestro boletín para recibir una notificación cuando lo publiquemos.
Hasta entonces, esperamos que pruebes Wonderland Engine! Especialmente si vienes de Unity, Wonderland Engine es fácil de aprender.
Asegúrate de unirte a nuestro servidor de Discord ya que estaremos encantados de orientarte hacia los recursos adecuados para comenzar.