Rendimiento de WebGL en Safari y Apple Vision Pro
Safari —especialmente en iOS— siempre se ha considerado el mayor desafío de rendimiento para los desarrolladores que trabajan 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 de manejar.
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
Con el reciente 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 utilizando Wonderland Engine, tenemos buenas noticias: todas las optimizaciones que hicimos para nuestra versión 0.9.0 se aplican a Apple Vision Pro.
Los desarrolladores con acceso a Apple Vision Pro están informando de un excelente rendimiento en sus aplicaciones basadas en Wonderland Engine:
Optimización para Safari
Si usas otro framework, asegúrate de revisar nuestro blog sobre Perfilado de Rendimiento de WebGL. Ese artículo contiene consejos sobre cómo identificar los cuellos de botella de tu aplicación para saber qué optimizar.
Adicionalmente, a continuación se presentan algunas notas sobre lo que podrías encontrar en Safari al realizar el perfilado. Estos no son universales, perfila tu aplicación para averiguar cuáles de estos podrían causarte problemas.
Cuellos de Botella
Aquí hay algunos problemas característicos que podrías encontrar al trabajar con WebGL en Safari:
Buffers Uniformes
Debido a las diferencias entre la API gráfica de Apple Metal y WebGL, Safari necesita emular un buffer uniforme similar al de WebGL en su funcionamiento interno. Esta emulación presenta ciertas dificultades para predecir el rendimiento de los UBOs: algunos usos estarán bien, mientras que otros podrían experimentar un retraso de 150 ms al intentar cargar datos en el momento inadecuado.
Este fragmento de código de la implementación Metal de Angle (que es utilizada 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 por proporcionarnos una API gráfica consistente. También demuestra el esfuerzo del equipo de Wonderland Engine para que comprendas el rendimiento del navegador y optimices tu aplicación.
Hubo mucha frustración por lo que tardó Safari en liberar soporte para WebGL2. Contrario a las especulaciones de que quizá nunca lo apoyarían, lanzaron soporte para WebGL2 en septiembre de 2021 con Safari 15. Leer el código de WebKit y Angle genera empatía sobre por qué no pudo haber sido una tarea fácil.
Acceso al Estado de WebGL
La función getParameter de WebGL presenta algunas sorpresas en términos de rendimiento. Lo que parece una función inofensiva puede consumir mucho del presupuesto de rendimiento.
Error de WebGL
Aunque 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.
Memoria y Límites
WebGL en Safari informará sobre límites en tamaños de texturas, capas, tamaños de buffers uniformes y más. Una buena herramienta para verificar estos límites es webglreport.com.
Aunque teoréticamente Safari te permitirá asignar hasta estos límites, podrías encontrar que esto puede hacer que tu página se bloquee.
Para usar los recursos de memoria en iOS de manera más eficiente, Wonderland Engine ofrece una función llamada Texture Streaming, para intercambiar dinámicamente piezas de texturas dentro y fuera de la memoria basado en lo que se necesita actualmente en el cuadro. Está habilitada por defecto.
Palabras Finales
Pronto publicaremos un artículo detallado sobre WebXR en Apple Vision Pro. 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.