Muchas veces en las aplicaciones web notamos como algunas animaciones tardan en ejecutarse o no lo hacen de la forma adecuada. En este articulo os mostraré como una animación puede acelerarse a través de la GPU de nuestro equipo incluso aplicándole efectos que son lentos en su ejecución.
Para realizar la prueba contamos con una animación en la que podemos ver los efectos que se producen al utilizar la aceleración a través de GPU, lo puedes comprobar aquí.
Para mostraros esta aceleración empezaremos permitiendo a todo el Plugin de Silverlight3 que acelere la animación a través de GPU. Para ellos hemos de agregar un parámetro a la etiqueta <object> del archivo HTML que tiene nuestra aplicación Silverlight3.
<object data=«data:application/x-silverlight,» type=«application/x-silverlight-3»
width=«100%» height=«100%»>
<param name=«enableGPUAcceleration» value=«true» />
En Windows la aceleración GPU funciona tanto para pantalla completa como para pantalla reducida. En Mac OSX solo funciona para pantalla completa.Los usuarios de Windows deben de tener una tarjeta gráfica compatible con DirectX 9, además de sus correspondientes controladores.Los usuarios de Mac necesitarán una tarjeta compatible con OpenGl2.
Ahora la acción que nos concierne la aplicaremos sobre un elemento XAML de Silverlight3,en este caso un CANVAS.Este será a su vez contenedor de los diferentes controles que se incluiran más tarde (Imágenes, animaciones,pinceles,etc.), heredando dicha capacidad los controles contenidos dentro del Canvas.
<Canvas CacheMode=»BitmapCache» />
Ahora os preguntareis pero ¿la aceleración no es a través de GPU en vez de Bitmap? Para entender esto como podeis ver no hemos utilizado implicitamente «UseGPU» o «AccelerateThisALotUsingGPU», porque en Silverlight 3 La aceleración de GPU no es ni más ni menos que una aceleración de un Bitmap en la caches de la GPU.
El siguiente paso es otorgar mayor velocidad a la hora de presentar nuestros pixeles, para ello incluiremos el siguiente código en la etiqueta <object> del HTML:
<param name=»enableFramerateCounter» value=»True» />
Cabe destacar que no todas las tarjetas de video tienen la misma cantidad de memoria, con lo que cuando esta se acaba Silverlight3 ejecuta sus acciones a través del Software, ralentizando los procesos de la aplicación.
Para solucionar este problema es aconsejable que actives la visualización de caché. Este añadido permitirá ver qué elementos son acelerados mediante GPU y cuáles no. Solo debemos incluir el siguiente código el HTML de la página que se va alojar o en el código Behing en tiempo de ejecución:
<param name=»enableCacheVisualization» value=»true» />
El camino que hemos de seguir es hacia el escalado de nuestra animación. Para lograr este objetivo debo de añadir la propiedad RenderAtScale del objeto BitmapCache:
var bmc = new BitmapCache();
bmc.RenderAtScale = 4;
lion1.CacheMode = bmc;//siendo lion1 nuestra animación
El último paso es configurar RenderAtScale en el XAML:
<Canvas>
<Canvas.CacheMode>
<BitmapCache RenderAtScale=»4″ />
</Canvas.CacheMode>
</Canvas>
El código anteriormente introducido, nos permite escalar los vectores de Silverlight a 4X, esto conlleva un aumento de la memoria 16 veces más de lo que anteriormente tenía, con lo que la animación se ralentizará si no se dispone de una buena tarjeta de video.
En conclusión la utilización de la aceleración por GPU es una buena ayuda para acelerar nuestras animaciones. Esta acción tienes sus ventajas y desventajas y es bueno saber que se ha de aplicar a animaciones que su contenido cambia rara vez, debido a que el cambio de Bitmap se realiza en la caché de la GPU.
Si desea obtener más información sobre este tema puede consultar el blog de András Velvárt