11/02/2016

WebGL: gráficos complejos en nuestro sitio web

WebGL: gráficos complejos en nuestro sitio web

Pese a que Adobe Flash parece próximo a desaparecer, hay una aplicación donde sigue siendo la tecnología más utilizada: el desarrollo de videojuegos, animaciones y gráficos complejos para la Web. Sin embargo, en un futuro no muy lejano, este puesto podría ser ocupado por WebGL, una API de JavaScript para mostrar gráficos 3D y 2D interactivos en cualquier browser compatible sin necesidad de usar plugins.

Si bien esta tecnología todavía tiene un largo camino por recorrer, sus actuales aplicaciones son prometedoras. Veamos algunos ejemplos:

  • The Biodigital Human. Plataforma gratuita que nos permite explorar detalladamente un modelo del cuerpo humano en 3D. Ideal para estudiantes de medicina, entrenadores personales y médicos que quieran enriquecer las explicaciones que les brindan a sus pacientes.
  • WebGL Bookcase. Biblioteca tridimensional de títulos publicados en Google Books.
  • WebGL Aquarium. Acuario en 3D con muchas características configurables para el usuario.
  • Cycleblob. Videojuego basado en la película Tron, con escenarios tridimensionales.

WebGL nació en 2011 como una derivación de OpenGL, una API con funciones similares. La diferencia es que WebGL está diseñado para funcionar en páginas web; exactamente, a través del elemento <canvas> de HTML5. Esto implica que, a diferencia de lo que ocurre con Flash, los gráficos creados con WebGL se integren perfectamente con el Document Object Model (DOM), pudiendo interactuar con los demás elementos HTML de la página.

WebGL utiliza aceleración por hardware para optimizar la presentación de los gráficos. Esto significa que recurre a la placa de video del usuario para mejorar el rendimiento. Así, el desempeño de WebGL depende en buena medida de las características de la tarjeta gráfica del usuario. Si el usuario cuenta con una placa de video incompatible, la aceleración puede realizarse por software, aunque el resultado no será tan satisfactorio. La compatibilidad con navegadores modernos es muy buena, aunque en ciertos casos el usuario necesitará actualizar los drivers de video de su dispositivo.

Por su contacto directo con el hardware del usuario, WebGL es una API de bajo nivel. Esto implica que el programador debe preocuparse por controlar una serie de aspectos complejos sobre procesamiento computacional de gráficos, que en otras bibliotecas ya pueden estar resueltos automáticamente. Por tal motivo, WebGL no es una API fácil de aprender, aunque existen tutoriales gratuitos en la Web.

Enlaces externos

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce