WebGL trae el 3D a la Web. Ventajas y desventajas.

WebGLEl 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.

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").

¿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? En principio hay dos temas que atender: esta característica requiere un navegador moderno y compatible (yo recomiendo Google Chrome o alternativas basadas en Webkit) y también un hardware potente, con la recomendación de una placa de video robusta para no sentir el impacto.

En el mundo Mobile, WebGL está entrando, pero hay que tener muy en cuenta que es una característica que puede bajar considerablemente el nivel de nuestra batería.

Vale decir que también existen algunos asuntos de seguridad que se están revisando en el estándar para mejorar su implementación.

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


Acerca de

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Diseño y Programación Web y Mobile. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios digitales. Dicto capacitaciones y consultorías sobre lenguajes y herramientas de desarrollo Web

6 Comentarios en “WebGL trae el 3D a la Web. Ventajas y desventajas.
  1. Erick dice:

    Si esta poderosa herramienta es solo para algunos navegadores, yo no lo llamaria un estandar orientado a la Web

    • Damián De Luca dice:

      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

  2. Sebastian orellana dice:

    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

  3. 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

2 Pings/Trackbacks para "WebGL trae el 3D a la Web. Ventajas y desventajas."
  1. […] Todo lo hace aprovechando las ventajas que introduce HTML5 en Canvas y la innovación que provee WebGL para la nueva Web […]

  2. […] Canvas puede trabajar con contexto de dos dimensiones (2D) o de tres dimensiones (mediante la implementación de WebGL). […]

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*


Cursos y capacitaciones para empresas y profesionales

  • HTML & CSS (maquetado web).
  • CSS3 & Responsive Web Design (diseño web adaptado a móviles y tablets).
  • Flexbox & Grids (técnicas modernas de CSS).
  • LESS & SASS (CSS preprocessors).
  • Responsive E-mail (diseño de emails multidispositivo).
  • Bootstrap (el framework de diseño más utilizado).
  • HTML5 (Nivel inicial y Avanzado + APIs).
  • PhoneGap/Cordova (Aplicaciones para Android e iOS basadas en lenguajes Web).
  • JavaScript (Nivel inicial y avanzado con ECMAScript 6).
  • jQuery (una de las librerías más famosas de JavaScript).
  • Angular (framework para construir aplicaciones Web con JavaScript).
  • PHP & MySQL (programación del lado servidor y bases de datos).

Encontrame en las redes sociales. Contactame.