Morton 7 de julio de 2013 a las 13.24
   Imprimir artículo
elWebmaster.com

Como aprovechar la composici贸n por GPU en CSS3


css3wide1Los navegadores modernos pueden manejar la ubicua unidad de procesamiento de gr谩ficos (GPU) tanto en dispositivos m贸viles como en escritorio, para acelerar el rendereado de la p谩gina. Esto es apropiado para algunas herramientas de CSS como animaci贸n, transici贸n, opacidad, entre otras. Queremos asegurarnos de alcanzar los ideales sesenta cuadros por segundo.

Un buen ejemplo es esta demo >>, que combina informaci贸n 3D con animaci贸n por fotogramas clave.

Este ejemplo es un perfecto caso del navegador realizando composici贸n por GPU. El navegador captura cada lado del cubo y lo vuelca como texturas residiendo en el GPU (podemos pensar en una textura en un 谩rea rectangular conteniendo el valor de los p铆xeles). Cada lado obtiene su propia textura. El proceso de capturar los p铆xeles y enviarlos como texturas s贸lo necesita llevarse a cabo una vez, por ejemplo en el instante antes de que la animaci贸n comience.

No hay necesidad de rendereo complejo, pudiendo dibujar esas texturas en una perspectiva 3-D. El navegador computar谩 la matrix 3D necesaria para transformar las texturas existentes, logrando que se proyecten hacia la direcci贸n correcta. As铆, dado que el proceso se repite una serie inifinitesimal de veces, dar谩 la impresi贸n de que el cubo est谩 rotando.

Para minimizar la cantidad de texturas subidas, s贸lo se pueden animar o realizar las siguientes propiedades: opacidad, transformar, y filtro. Todo lo dem谩s, activar铆a una actualizaci贸n de capa.

Asegurarte que el tr谩fico entre el CPU y el GPU no se congestione es la clave para obtener un balance 贸ptimo.

Fuente original del art铆culo: DZone
Traducci贸n realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder