Primeros pasos con WebGL

WebGL permite que el contenido web utilice una API basada en OpenGL ES 2.0 para llevar a cabo la representaci贸n 2D y 3D en un elemento canvas HTML en los navegadores que lo soporten sin el uso de plug-ins. WebGL consiste en c贸digo de control escrito en JavaScript y c贸digo de efectos especiales (c贸digo shader) que se ejecuta en la unidad de procesamiento gr谩fico de una computadora (GPU). Los elementos WebGL se pueden mezclar con otros elementos HTML y componerse con otras partes de la p谩gina o el fondo de la misma.

Este art铆culo le dar谩 a conocer los conceptos b谩sicos de WebGL. Se asume que ya tiene una comprensi贸n de las matem谩ticas implicadas en gr谩ficos 3D, y este art铆culo no pretende tratar de ense帽ar OpenGL en s铆.

Preparando el renderizado en 3D

Lo primero que necesitas para poder usar WebGL para renderizar en 3D es un HTML canvas. El fragmento HTML a continuaci贸n establece un canvas y configura un controlador de eventos onload que se utilizar谩n para inicializar nuestro contexto WebGL.

<body onload="start()">
  <canvas id="glcanvas" width="640" height="480">
   Tu navegador parece no soportar el elemento HTML5 <code>&lt;canvas&gt;</code>.
  </canvas>
</body>

Preparando el contexto de WebGL

La funci贸n start(), en nuestro c贸digo JavaScript, es llamada despu茅s de que el documento fue cargado. Su misi贸n es establecer el contexto WebGL y empezar a renderizar contenido.

var gl; // Un variable global para el contexto WebGL

function start() {
  var canvas = document.getElementById("glcanvas");

  gl = initWebGL(canvas);      // Inicializar el contexto GL

  // Solo continuar si WebGL esta disponible y trabajando

  if (gl) {
    gl.clearColor(0.0, 0.0, 0.0, 1.0);                      // Establecer el color base en negro, totalmente opaco
    gl.enable(gl.DEPTH_TEST);                               // Habilitar prueba de profundidad
    gl.depthFunc(gl.LEQUAL);                                // Objetos cercanos opacan objetos lejanos
    gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);      // Limpiar el buffer de color asi como el de profundidad
  }
}

La primer cosa que hacemos aqui es obtener una referencia al canvas, ocult谩ndolo en una variable llamada canvas. Obviamente si no necesitas referenciar repetidamente, deber铆as evitar guardar este valor globalmente, y solo guardarlo en una variable local o miembro de un objeto.

Una vez tenemos el canvas, llamamos a la funci贸n llamada initWebGL(); esta es una funci贸n que definiremos momentaneamente; su trabajo es inicializar el contexto WebGL.

Si el contexto es exitosamente inicializado, gl sera una referencia a este. En este caso, establecemos el color base a negro, despu茅s limpiamos el contexto a ese color. Despu茅s, el contexto es configurado estableciendo parametros. En este caso, estamos habilitando la prueba de profundidad y especificando que los objetos cercanos opacaran a los objetos lejanos.

Para los propositos de esta introducci贸n al c贸digo, eso sera todo lo que haremos. Empezaremos a ver como crear algo despu茅s.

Crear el contexto de WebGL

La funci贸n initWebGL()se ve como esto:

function initWebGL(canvas) {
  gl = null;

  try {
    // Tratar de tomar el contexto estandar. Si falla, retornar al experimental.
    gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
  }
  catch(e) {}

  // Si no tenemos ningun contexto GL, date por vencido ahora
  if (!gl) {
    alert("Imposible inicializar WebGL. Tu navegador puede no soportarlo.");
    gl = null;
  }

  return gl;
}

Para obtener el contexto WebGL de un canvas, pedimo el contexto llamado "webgl" del canvas. Si este falla, intentamos con el nombre "experimental-webgl". Si este igualmente, falla, mostramos una alerta permitiendo al usuario conocer que parece no tener soporte WebGL. Eso es todo al respecto. En este punto, gl es nulo (no hay ningun contexto WebGL disponible) o es una referencia al contexto WebGL en donde renderizaremos.

Nota: El nombre de contexto "experimental-webgl" es nombre temporal para usar durante el desarrollo de las especificaciones; el nombre "webgl" sera usado una vez se termine el desarrollo.

En este punto, tienes suficiente c贸digo para que el contexto WebGL, inicialice exitosamente, y deberias terminar con una gran cuadro negro y vacio, listo y esperando a recibir contenido .

Prueba este ejemplo si estas usando un navegador compatible con WebGL.

Cambiando el tama帽o del contexto WebGL

Un nuevo contexto WebGL establecera el tama帽o de su ventana a la altura y anchura del elemento canvas, sin CSS, al instante el contexto fue obtenido. Editando el estilo del elemento canvas cambiara su tama帽o mostrado pero no cambiara la resoluci贸n de renderizado. Editando los atributos de anchura y altura de un elemento canvas despu茅s de crear el contexto tampoco cambiara el numero de pixeles a ser renderizados. Para cambiar la resoluci贸n en la cual WebGL renderiza, como cuando el usuario cambia el tama帽o de ventana de un canvas de documento completo o quieres proveer ajustes graficos ajustables dentro de la aplicaci贸n, necesitaras llamar a la funci贸n del contexto WebGL llamada viewport() para hacer efectivo el cambio.

Para modificar la resoluci贸n renderizada de un contexto WebGL con las variables gl y canvas como fue usado en el ejemplo de arriba:

gl.viewport(0, 0, canvas.width, canvas.height);

Un lienzo experimentara escalado cuando es renderizado en una resoluci贸n diferente a la establecida en el estilo CSS . Cambiar el tama帽o con CSS es muy util para salvar recursos renderizando a una baja resoluci贸n y permitiendo que el navegador aumente la escala; bajar la escala es posible, lo que producira un efecto de Super Sample AntiAliasing (SSAA) (con resultados sencillos y un costo alto de rendimiento). Es mejor usar el MSAA (Multi Sample AntiAliasing) e implementar un filtrado de texturas en el navegador del usuario, si es que esta disponible y es apropiado, en lugar de hacerlo por medio de la fuerza bruta, esperando que el algoritmo de reducci贸n de la imagen del navegador produzca un resultado limpio.

Tambi茅n podr铆a interesarte

  • Una introducci贸n a WebGL - Escrito por Luz Caballero, publicado en dev.opera.com. Este articulo cita que es WebGL, explica como funciona WebGL (incluyendo el concepto del proceso de renderizado), e introduce algunas librerias WebGL
  • Una introducci贸n al OpenGL moderno - Una serie de articulos escritos por Joe Groff. Joe da una limpia introducci贸n sobre OpenGL desde su historia al importante concepto del proceso de graficos y provee algunos ejemplos sobre como OpenGL trabaja. Si no tienes ninguna idea sobre OpenGL, este es un buen lugar para comenzar.