Aunque casi todos los navegadores modernos soportan ya la aceleración por hardware, la calidad de sus implementaciones varía mucho de unos a otros. La aceleración por hardware va más allá de utilizar unos recursos de programación concretos. La forma en que aplica cada navegador el concepto de aceleración por hardware, tiene un impacto directo sobre el rendimiento y la experiencia del usuario con las aplicaciones web.

Para poner de manifiesto las diferencias en calidad y rendimiento de las distintas estrategias de aceleración por hardware, vamos a ver con detalle la demo de prueba llamada Paintball, que se ha publicado con la versión Preliminar de Plataforma 1 de IE 10. Paintball utiliza el canvas de HTML5 para simular el disparo de bolas de pintura contra una pared. Paintball nos demuestra la velocidad con la que se restituyen las imágenes para componer toda una escena. Muchos otros ejemplos de rendimiento con el canvas de HTML5 que podemos encontrar en la web, simplemente miden la velocidad con la que una misma imagen se dibuja en pantalla.

Paintball dibuja toda la escena a la mayor velocidad posible. Cuando termina, nos muestra dos números: el primero es el tiempo que se ha tardado en dibujar toda la escena, en segundos. El segundo es el número de bolas de pintura disparadas por minuto. En este test, cuantas más bolas disparadas en el menor tiempo posible, mejor es el resultado.

Cómo funciona el Paintball

Nosotros queríamos que Paintball fuera una aplicación web de uso general para pintar cualquier frase con cualquier color utilizando bolas de pintura. Para ello, el juego genera de forma dinámica salpicaduras con la pintura en tiempo de ejecución, a partir de ciertos valores RGB especificados. La manipulación de imágenes en tiempo de ejecución por programa es un escenario de uso muy frecuente en las nuevas aplicaciones web basadas en HTML5.

Paintball empieza dibujando un rectángulo sólido que es el color de la base de pintura.

Paintball emplea una hoja con la serie de sprites con los que construye los frames de la animación de las salpicaduras:

El mismo juego decide el tamaño de la salpicadura resultante y dibuja un frame tomado de la hoja de sprites, utilizando el modo de composición llamado destination-in. Esto hace que los píxels que se dibujan se compongan en forma de máscara con los contenidos actuales del canvas.

Al generarse los gráficos en el lado del cliente, los desarrolladores web no necesitan crear y descargar tantas imágenes. Es una solución muy buena para cambiar por programa el color de una imagen.

Las bolas de pintura se crean en un canvas que no se ve en pantalla y después se dibujan en el canvas principal, que sí se ve. Utilizando este canvas secundario fuera del campo visual para componer los efectos mejoramos bastante el rendimiento en todos los navegadores, ya que utilizamos operaciones de composición solo cuando la animación está en curso. Cuando la animación ha llegado ya a su último frame (la mancha de pintura está totalmente desplegada), podemos utilizar una vista cacheada del canvas secundario para dibujar toda la escena completa.

Diferencias cualitativas

Paintball utiliza el mismo markup HTML5 en todos los navegadores y es conforme con la especificación Canvas de HTML5. Aunque todos los navegadores actuales soportan ya estas APIs, las diferencias de calidad saltan a la vista de inmediato. Aquí tenemos una comparación de estas diferencias:

Lo que podemos ver se resume así:

• Chrome 12 no dibuja correctamente las salpicaduras de pintura porque Chrome no implementa los modos de composición de Canvas HTML5 de acuerdo con la especificación HTML5.
• Firefox 4 restituye la escena correctamente.
• Internet Explorer 9 e Internet Explorer 10 restituyen también la escena correctamente.
• Safari 5 emplea los mismos artefactos de restitución de las manchas de pintura que Chrome, pero además Safari no soporta aún las fuentes WOFF.

Con estas diferencias se pone de relieve el tipo de problemas que se encuentran los desarrolladores a la hora de crear sitios web que se vean y funcionen de manera consistente en todos los navegadores. Los desarrolladores quieren utilizar el mismo código y conseguir resultados comunes e interoperables. Aunque estos errores parecen poca cosa (y probablemente no costaría mucho resolverlos), son un exponente de los problemas de calidad que aparecen entre distintos navegadores y que hacen que los desarrolladores acaben optando por los complementos o tengan que reducir sus aspiraciones a la hora de crear sus sitios web.

Diferencias de rendimiento

Las diferencias de rendimiento entre las distintas aplicaciones son más llamativas incluso. En el caso de nuestro test, hemos utilizado la misma configuración de nivel medio que ya hemos venido utilizando durante este último año. En esta tabla se resume la velocidad con la que estos navegadores modernos, todos ellos con un diverso grado de aceleración por hardware, componen la escena, sobre el mismo sistema operativo Windows 7:

¿Qué sucede a nivel de hardware?

Vamos a echar una mirada con más detalle a las trazas de rendimiento para ver en qué consisten las diferencias entre los distintos navegadores a la hora de utilizar la CPU y la GPU para animar un simple disparo de una pelota de pintura y generar la mancha en la pantalla. Los resultados que se ven a continuación los hemos obtenido con el Windows Performance Toolkit.

En el caso de Chrome 12 vemos que necesita 3.7 segundos para disparar una bola de pintura. Podemos comprobar que cuando aparece la bola empieza a verse en pantalla con forma de pelota, se producen muchísimas actualizaciones con un consumo moderado de GPU y CPU. Chrome es capaz de mantener una animación casi en tiempo real. Una vez empieza el efecto de salpicadura (explicado antes), vemos que se produce un pico de actividad de CPU y GPU que dura varios segundos. Durante este tiempo no hay actualizaciones de pantalla, por lo que la demo parece que se queda colgada. Finalmente, el navegador cachea la escena y termina dibujándose en pantalla.

Firefox 4 maneja esta escena bastante bien, en 0,550 segundos. Su utilización de CPU y GPU es muy estable a lo largo de toda la animación aunque la actividad de la CPU aumenta a medida que se produce el renderizado de la mancha. Las actualizaciones de la pantalla tienen lugar de manera predecible, se muestran 19 frames durante la restitución de la escena completa.

IE 10 desarrolla la escena con una gran suavidad, en el menor tiempo de todos los medidos (0,475 segundos) y con el mayor número de frames. Como se ve en el gráfico siguiente, el uso de CPU y GPU es mejor que en Firefox y las actualizaciones de pantalla se producen a un ritmo superior y a intervalos más regulares.

El rendimiento en Safari 5 podemos decir que, desde el punto de vista de utilización de CPU y GPU es mediocre. Aunque la utilización de GPU es baja y las actualizaciones de pantalla tienen lugar a intervalos regulares, parece como si no ocurriera nada en pantalla. Esto es porque Safari le está indicando a la GPU que pinte la misma imagen una y otra vez. Safari solo dibuja unas pocas imágenes en la pantalla y luego pega un salto hasta el último frame sin que se produzca ninguna animación. Parece como si Safari se hubiera colgado, y no ofrece respuesta en ese tiempo.

Estos gráficos muestran una misma mancha de pintura, una pequeña parte de todo el trabajo que se desarrolla para llevar a cabo la demo completa de Paintball. Aunque casi todos los navegadores actuales pueden manejar una sola bola de pintura con cierta solvencia, la mayoría de ellos tienen un problema a la hora de escalar a varias decenas de bolas simultáneas. Por ejemplo, Firefox muestra muy bien una sola mancha (casi tan rápido como IE10, pero cuando se le somete a una carga elevada en la experiencia completa de la demo, el rendimiento en Firefox cae a aproximadamente un 20% del logrado por Internet Explorer 10.

Aquí se ve el tiempo total de CPU, tiempo de GPU y actualizaciones visuales realizadas por los distintos navegadores.

Resumen

Los navegadores con aceleración completa por hardware y con implementaciones de HTML5 totalmente interoperables ofrecen una mejor experiencia, tanto para los desarrolladores como para los usuarios finales.

Esperamos que este análisis de las intimidades de Paintball ayude a entender mejor las diferencias observables en calidad y rendimiento entre los distintos navegadores, y sobre todo en relación con el Canvas de HTML5 y sus modos de composición. ¡Es una ocasión excelente para desarrollar experiencias Web con gráficos avanzados!