El 3D en la Web estuvo representado por Flash, hasta la llegada de HTML5. Como sabemos, de la mano de CSS3 es posible crear características tridimensionales en los sitios web (lo que se conocde como 3D CSS). Las opciones que encontramos son realmente sorprendentes y marcan una importante evolución en lo que nos ofrece el estándar de hojas de estilos. Indudablemente, CSS ha crecido de una manera notable.

En este caso les hablaré de una característica que puede ser invocada desde el contexto del elemento Canvas de HTML5 y que es conocida como WebGL.

WebGL en la práctica

Incorporar características 3D en un sitio Web es una necesidad específica para algunos proyectos. A la hora de incorporar tecnologías como WebGL debemos conocer sus características y mecanismos de implementación.

La invocación a este estándar puede realizarse así (desde el JS que llama al elemento canvas con id myCanvas): document.getElementById("myCanvas").getContext("webgl") o de la siguiente forma: document.getElementById("myCanvas").canvas.getContext("experimental-webgl").

Ventajas y desventajas

¿Qué podremos hacer con WebGL? Mucho, tal vez muchísimo. Desde crear figuras en 3D, hasta dar iluminación y aplicar texturas, entre muchas otras posibilidades. Claro que nos podremos mover en un entorno 3D y aplicar eventos para poder tener interacción con teclado y/o mouse.

Si quieren ver ejemplos de como funciona y lo que nos permite hacer WebGL, les recomiendo que lean mi nota, publicada en RedUSERS, titulada: Web 3D: Internet se sube a las tres dimensiones.

¿Las desventajas? Se recomienda que el usuario cuente con software y hardware moderno. Esto incluye, especialmente, al navegador.

En el mundo Mobile, WebGL ya tiene compatibilidad con las últimas versiones de Android e iOS. Hay que tener muy en cuenta que es una característica que puede bajar impactar en el nivel de nuestra batería.

Consideraciones finales sobre WebGL

El universo de posibilidades que nos abre WebGL es inmenso y parece ser maravilloso, pero si pensamos en aplicarlo a nuestros proyectos debemos estar muy atentos a: compatibilidad, rendimiento y seguridad.

Para saber más sobre esta especificación: WebGL Specification.