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.
Más sobre Diseño y desarrollo Web
Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.
Si esta poderosa herramienta es solo para algunos navegadores, yo no lo llamaria un estandar orientado a la Web
Hola Erik, gracias por tu comentario, pero no coincido.
Es un estándar nuevo que está en definición. Lo cual no quiere decir que no sea para todos los navegadores, todo lo contrario. El tema es que aún todos los navegadores no cuentan con compatibilidad para utilizar esta tecnología. Mi recomendación es Chrome, porque es uno de los que mejor soporte brinda. Pero en Firefox, Safari y Opera (en sus nuevas versiones) también existe un soporte parcial para esta característica. Por el lado de IE, se espera que la versión 10 pueda incorporar compatibilidad.
Los nuevos estándares están siendo definidos, por lo cual es importante seguir su evolución a la hora de utilizarlos. Están pensados para hacer una Web mejor y más potente.
Saludos
muy buena info… una pregunta, tu sabes como implementar sobre una figura en 3D los metodos para que se muevan con las teclas del teclado, ejemplo mover hacia la derecha -> mover hacia la izquierda <- , arriba y abajo. gracias de antemano
Aquí tienes un interesante ejemplo utilizando algunas librerías: http://learningthreejs.com/blog/2011/09/12/lets-Make-a-3D-game-keyboard/
Saludos
Hola ¿te importaría dejarme saber que hosting estás utilizando?
He cargado tu blog en 3 completamente diferentes navegadores y debo decir
que este blog se carga mucho más rápido más rápido que
la mayoría. ¿Puedes sugerir recomiendan una buena alojamiento web proveedor a
razonable precio? Felicitaciones, se lo agradezco!
Más allá del hosting utilizado hay muchas técnicas para hacer que un sitio funcione más rápido, optimizando las consultas a la base y también aplicando plugins de caché.
La optimización de recursos (especialmente de imágenes también es clave).
Saludos y gracias