Primeros pasos con WebGL

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

Este artculo le dar a conocer los conceptos bsicos de WebGL. Se asume que ya tiene una comprensin de las matemticas implicadas en grficos 3D, y este artculo no pretende tratar de ensear 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 continuacin establece un canvas y configura un controlador de eventos onload que se utilizarn para inicializar nuestro contexto WebGL.

html

<body >
  <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 funcin start(), en nuestro cdigo JavaScript, es llamada despus de que el documento fue cargado. Su misin es establecer el contexto WebGL y empezar a renderizar contenido.

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

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

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

  // Solo continuar si WebGL est disponible y funcionando

  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 as como el de profundidad
  }
}

La primera cosa que hacemos aqu es obtener una referencia al canvas, guardndolo en una variable llamada canvas. Obviamente, si no necesitas hacer referencia a este repetidamente, deberas 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 funcin initWebGL(); esta es una funcin que definiremos momentneamente y cuyo trabajo es inicializar el contexto WebGL.

Si el contexto es inicializado exitosamente, gl ser una referencia a este. En este caso, establecemos el color base a negro, despus limpiamos el contexto a ese color. A continuacin, el contexto es configurado estableciendo parmetros. En este caso, estamos habilitando la prueba de profundidad y especificando que los objetos cercanos opacarn a los objetos lejanos.

Para los propsitos de esta introduccin al cdigo, eso ser todo lo que haremos. Veremos cmo crear algo ms adelante.

Crear el contexto de WebGL

La funcin initWebGL() se ve as:

function initWebGL(canvas) {
  gl = null;

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

  // Si no tenemos ningn 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, pedimos el contexto llamado "webgl" al canvas. Si este falla, intentamos con el nombre "experimental-webgl". Si este tambin falla, mostramos una alerta informando al usuario que su navegador parece no tener soporte para WebGL. Eso es todo al respecto. En este punto, gl es nulo (no hay ningn contexto WebGL disponible) o es una referencia al contexto WebGL en donde renderizaremos.

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

En este punto, tienes suficiente cdigo para que el contexto WebGL se inicialice exitosamente, y deberas terminar con un gran cuadro negro y vaco, listo y esperando a recibir contenido.

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

Cambiando el tamao del contexto WebGL

Un nuevo contexto WebGL establecer el tamao de su ventana a la altura y anchura del elemento canvas, sin CSS, en el instante en que el contexto fue obtenido. Editar el estilo del elemento canvas cambiar su tamao mostrado pero no cambiar la resolucin de renderizado. Editar los atributos de anchura y altura de un elemento canvas despus de crear el contexto tampoco cambiar el nmero de pxeles a ser renderizados. Para cambiar la resolucin en la cual WebGL renderiza, como cuando el usuario cambia el tamao de ventana de un canvas de documento completo o quieres proveer ajustes grficos configurables dentro de la aplicacin, necesitars llamar a la funcin del contexto WebGL llamada viewport() para hacer efectivo el cambio.

Para modificar la resolucin 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 experimentar escalado cuando es renderizado en una resolucin diferente a la establecida en el estilo CSS. Cambiar el tamao con CSS es muy til para ahorrar recursos renderizando a una baja resolucin y permitiendo que el navegador aumente la escala; bajar la escala es posible, lo que producir 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 est disponible y es apropiado, en lugar de hacerlo por medio de la fuerza bruta, esperando que el algoritmo de reduccin de la imagen del navegador produzca un resultado limpio.

Tambin podra interesarte

WebGL Fundamentals - Una serie de tutoriales y artculos sobre WebGL desde sus conceptos bsicos.
Una introduccin al OpenGL moderno - Una serie de artculos escritos por Joe Groff. Joe ofrece una clara introduccin a OpenGL, desde su historia hasta el importante concepto del proceso de grficos, y proporciona algunos ejemplos sobre cmo funciona OpenGL. Si no tienes ninguna idea sobre OpenGL, este es un buen lugar para comenzar.

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2 jun 2026 by MDN contributors.

View this page on GitHub Report a problem with this content