JavaScript WebGL API

Introducción a WebGL

WebGL (Web Graphics Library, específicamente la versión 1.0) aprovecha el poder de OpenGL ES 2.0 en entornos web, permitiendo a los desarrolladores renderizar gráficos 3D detallados en cualquier navegador web compatible sin necesidad de plugins. Todos los ejemplos de este capítulo utilizan la API WebGL 1.0. Esta capacidad es esencial para crear juegos inmersivos, aplicaciones 3D interactivas y visualizaciones complejas directamente en el navegador. Para proyectos modernos, considera WebGL 2.0, que se basa en OpenGL ES 3.0 y ofrece mejor rendimiento y más funcionalidades.

Este capítulo cubre lo que necesitas para comenzar a dibujar con WebGL: solicitar un contexto de renderizado, escribir y compilar shaders, subir datos de vértices a buffers y emitir llamadas de dibujo. Al final comprenderás el pipeline completo detrás de un único triángulo renderizado y sabrás hacia dónde ir a continuación para iluminación, texturas y animación.

WebGL vs. el Canvas 2D

WebGL renderiza a través del mismo elemento <canvas> utilizado por la API Canvas 2D, pero ambos son muy diferentes. El contexto 2D (getContext('2d')) te proporciona una superficie de dibujo de alto nivel — fillRect, arc, drawImage. WebGL te da un pipeline de bajo nivel acelerado por GPU: describes la geometría como arrays de números y escribes pequeños programas (shaders) que se ejecutan en la GPU para decidir dónde aterriza cada vértice y qué color recibe cada píxel. Ese esfuerzo adicional compra aceleración de hardware, verdadero 3D y el rendimiento necesario para miles de objetos por fotograma.

Solicitas ambos contextos de la misma manera, por lo que es una buena práctica detectar las características:

const canvas = document.querySelector('#webglCanvas');
// 'webgl2' is preferred where available; fall back to 'webgl' (1.0).
const gl = canvas.getContext('webgl2') || canvas.getContext('webgl');

if (!gl) {
  console.error('WebGL is not supported by this browser.');
}

Configurando tu Primer Contexto WebGL

Para comenzar con WebGL, es fundamental configurar un contexto de renderizado vinculado a un elemento canvas en tu HTML. Para proyectos modernos, también puedes solicitar un contexto WebGL 2 usando canvas.getContext('webgl2') para mejorar el rendimiento y las funcionalidades:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Simple WebGL Example</title>
    <style>
        canvas {
            width: 400px;
            height: 400px;
            border: 1px solid black; /* Adds a border around the canvas */
        }
    </style>
</head>
<body>
    <canvas id="webglCanvas"></canvas>
    <script>
        // This script will run once the DOM content is fully loaded.
        document.addEventListener("DOMContentLoaded", function() {
            // Get the canvas element.
            const canvas = document.getElementById('webglCanvas');
            // Initialize the WebGL 1.0 context.
            const gl = canvas.getContext('webgl');

            // Check if WebGL is available.
            if (!gl) {
                console.error('WebGL is not supported by your browser.');
                return;
            }

            // Set the clear color to blue with full opacity.
            gl.clearColor(0.0, 0.0, 1.0, 1.0); // RGBA: Blue color

            // Clear the color buffer with the specified clear color.
            gl.clear(gl.COLOR_BUFFER_BIT);
        });
    </script>
</body>
</html>

Pruébalo tú mismo »

Desglose del Código

Configuración HTML: La parte HTML establece un elemento canvas donde WebGL renderizará su salida. Se agrega un borde para identificar visualmente el área del canvas en la página web.
Estilos CSS: Se aplica un estilo simple para asegurar que el canvas tenga un tamaño específico y un borde para mayor visibilidad.
JavaScript para WebGL:
- Escuchador de eventos: El código JavaScript está envuelto en un escuchador de eventos que espera a que el contenido del DOM esté completamente cargado antes de ejecutarse.
- Inicialización del contexto WebGL: Obtiene el contexto WebGL 1.0 del canvas. Si WebGL no es compatible, el contexto será null.
- Verificación de disponibilidad de WebGL: Si el contexto es null, se registra un error en la consola indicando falta de soporte.
- Configuración del color de limpieza: gl.clearColor(0.0, 0.0, 1.0, 1.0) establece el color (azul, completamente opaco) que llenará el canvas cuando se limpie el buffer de color. Ten en cuenta que esto solo almacena el color — todavía no se dibuja nada.
- Limpieza del buffer de color: gl.clear(gl.COLOR_BUFFER_BIT) realmente pinta el canvas con el color de limpieza establecido anteriormente, produciendo un cuadrado azul sólido.

Este ejemplo es fundamental pero proporciona un buen punto de partida para comprender cómo funcionan las configuraciones de WebGL. Puedes mejorarlo añadiendo más funcionalidades de WebGL como shaders, buffers y comandos de dibujo para crear salidas gráficas.

Renderizando un Triángulo Simple

Uno de los primeros pasos en el aprendizaje de WebGL es renderizar formas simples. WebGL usa un sistema de coordenadas de dispositivo normalizadas (NDC): el área visible va de -1 a 1 tanto en el eje X como en el Y, con (0, 0) en el centro del canvas. Cada forma que dibujes debe describirse en estas coordenadas (o transformarse en ellas por un shader).

Dibujar incluso un solo triángulo requiere el pipeline completo de WebGL:

Escribir un vertex shader que posicione cada esquina.
Escribir un fragment shader que coloree cada píxel.
Compilarlos y enlazarlos en un programa shader.
Subir las coordenadas de las esquinas a un buffer.
Conectar el buffer al atributo del shader y emitir una llamada de dibujo.

El siguiente ejemplo recorre los cinco pasos:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebGL Triangle Example</title>
    <style>
        canvas {
            width: 400px;
            height: 400px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="webglCanvas"></canvas>
    <script>
        // Function to create a shader, upload GLSL source code, and compile the shader
        function loadShader(gl, type, source) {
            const shader = gl.createShader(type);
            gl.shaderSource(shader, source);
            gl.compileShader(shader);

            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
                console.error('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
                gl.deleteShader(shader);
                return null;
            }

            return shader;
        }

        // Function to initialize the shader program
        function initShaderProgram(gl, vsSource, fsSource) {
            const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
            const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
            const shaderProgram = gl.createProgram();
            gl.attachShader(shaderProgram, vertexShader);
            gl.attachShader(shaderProgram, fragmentShader);
            gl.linkProgram(shaderProgram);

            if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
                console.error('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
                return null;
            }

            return shaderProgram;
        }

        // Function to initialize WebGL
        function initWebGL() {
            const canvas = document.getElementById('webglCanvas');
            // Note: Use 'webgl2' for modern projects
            const gl = canvas.getContext('webgl');

            if (!gl) {
                console.error('WebGL is not supported by your browser.');
                return;
            }

            // Set internal canvas resolution to match CSS dimensions
            canvas.width = 400;
            canvas.height = 400;

            // Vertex shader program
            const vsSource = `
                attribute vec4 aVertexPosition;
                void main(void) {
                    gl_Position = aVertexPosition;
                }
            `;

            // Fragment shader program
            const fsSource = `
                void main(void) {
                    gl_FragColor = vec4(1.0, 0.5, 0.0, 1.0); // Orange color
                }
            `;

            const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
            const programInfo = {
                program: shaderProgram,
                attribLocations: {
                    vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition')
                }
            };

            // Validate attribute location to prevent silent shader failures
            if (programInfo.attribLocations.vertexPosition === -1) {
                console.error('Failed to get the location of aVertexPosition');
                return;
            }

            // Create a buffer for the triangle's positions.
            const positionBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

            // Set the positions for the triangle.
            const positions = [
                0.0,  1.0,  // Vertex 1
                -1.0, -1.0, // Vertex 2
                1.0, -1.0  // Vertex 3
            ];
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

            // Draw the scene
            function drawScene() {
                // Note: High-DPI scaling is omitted for simplicity.
                gl.viewport(0, 0, canvas.width, canvas.height); 
                gl.clearColor(0.0, 0.0, 0.0, 1.0);  // Clear to black, fully opaque
                gl.clear(gl.COLOR_BUFFER_BIT);

                // Tell WebGL to use our program when drawing
                gl.useProgram(programInfo.program);

                // Attach the position buffer.
                gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
                gl.vertexAttribPointer(
                    programInfo.attribLocations.vertexPosition,
                    2,   // Number of components per vertex attribute
                    gl.FLOAT, false, 0, 0);
                gl.enableVertexAttribArray(
                    programInfo.attribLocations.vertexPosition);

                // Execute WebGL program
                gl.drawArrays(gl.TRIANGLES, 0, 3);

                requestAnimationFrame(drawScene);
            }

            drawScene();
        }

        // Call the initWebGL function after the document has loaded to ensure the canvas is ready.
        document.addEventListener("DOMContentLoaded", initWebGL);
    </script>
</body>
</html>

Pruébalo tú mismo »

Explicación del Código

Vertex Shader (vsSource): Lee el atributo aVertexPosition y lo asigna al gl_Position incorporado, que determina dónde aterriza cada vértice en pantalla.
Fragment Shader (fsSource): Establece gl_FragColor para que cada píxel dentro del triángulo se renderice en color naranja (vec4(1.0, 0.5, 0.0, 1.0) es RGBA naranja).
Compilación del Shader (loadShader): Compila un único shader a partir del código fuente GLSL e informa los errores de compilación mediante getShaderInfoLog.
Inicialización del Programa Shader (initShaderProgram): Enlaza los shaders de vértices y fragmentos compilados en un programa ejecutable que corre en la GPU.
Bucle de Animación: drawScene() emite la llamada de dibujo, luego requestAnimationFrame(drawScene) programa el siguiente fotograma, manteniendo el renderizado sincronizado con la frecuencia de actualización de la pantalla. Para una cobertura más profunda de la programación de fotogramas, consulta animaciones JavaScript.

Por Qué una Llamada de Dibujo Necesita Tanta Configuración

Si vienes de la API Canvas 2D, todo este andamiaje puede parecer pesado para un solo triángulo. La razón es que WebGL es con estado y explícito: nada se dibuja hasta que tengas (1) un programa enlazado, (2) datos en un buffer, (3) ese buffer conectado a un atributo del shader con vertexAttribPointer, y (4) enableVertexAttribArray activado. Olvida cualquier paso y obtienes un canvas en blanco sin ningún error — que es la frustración más común con WebGL. La verificación attribLocations.vertexPosition === -1 en el ejemplo protege contra nombres de atributos mal escritos de forma silenciosa.

Trabajando con Uniforms

Los atributos varían por vértice; los uniforms permanecen constantes para toda una llamada de dibujo y son la forma estándar de pasar valores cambiantes — tiempo, color, matrices de transformación — desde JavaScript a un shader. Así es como animas o recoloras una escena sin volver a subir la geometría en cada fotograma.

Un ejemplo mínimo de recolorado: declara un uniform en el fragment shader, busca su ubicación una vez y luego actualízalo en cada fotograma.

// In the fragment shader source:
//   precision mediump float;
//   uniform vec4 uColor;
//   void main(void) { gl_FragColor = uColor; }

const colorLocation = gl.getUniformLocation(shaderProgram, 'uColor');

function render(timeMs) {
  const t = timeMs * 0.001;            // seconds
  const r = (Math.sin(t) + 1) / 2;     // oscillate 0..1
  gl.useProgram(shaderProgram);
  gl.uniform4f(colorLocation, r, 0.5, 1.0 - r, 1.0); // RGBA
  gl.drawArrays(gl.TRIANGLES, 0, 3);
  requestAnimationFrame(render);
}
requestAnimationFrame(render);

Dado que la geometría nunca cambia, solo se actualiza el uniform uColor por fotograma — mucho más económico que reconstruir buffers.

Técnicas Avanzadas en WebGL

A medida que avanzas, WebGL ofrece una funcionalidad extensa como iluminación, texturas y gestión de geometría:

Las texturas te permiten mapear imágenes sobre superficies con gl.texImage2D y un uniform sampler2D en el fragment shader.
Los buffers de índices (gl.ELEMENT_ARRAY_BUFFER + gl.drawElements) reutilizan vértices compartidos, reduciendo la memoria y el costo de dibujo para mallas complejas.
Las matrices de transformación (modelo/vista/proyección) pasan de coordenadas 2D planas a una perspectiva 3D real; bibliotecas como glMatrix se encargan de las matemáticas.
El depth testing (gl.enable(gl.DEPTH_TEST)) asegura que los objetos más cercanos oculten correctamente a los más lejanos.

Para implementaciones concretas, consulta las muestras oficiales de Khronos WebGL o una biblioteca 3D establecida como Three.js, que envuelve la API cruda en una abstracción mucho más amigable.

Mejores Prácticas para el Desarrollo con WebGL

Validar la creación del contexto: Siempre verifica que getContext devolvió un valor no null y proporciona un fallback elegante para navegadores sin soporte de GPU.
Optimización del rendimiento: Minimiza los cambios de estado (useProgram, bindBuffer), agrupa las llamadas de dibujo y usa dibujo indexado para vértices compartidos.
Gestionar los recursos de GPU: Elimina buffers, texturas y programas que ya no necesites con gl.deleteBuffer, gl.deleteTexture y gl.deleteProgram para evitar fugas de memoria.
Pruebas entre navegadores: Asegúrate de que tus aplicaciones WebGL funcionen de manera consistente en diferentes navegadores y dispositivos, y maneja el evento infrecuente webglcontextlost.
Interacción del usuario: Controla los uniforms desde eventos de entrada para hacer las escenas dinámicas — consulta eventos JavaScript para manejar la entrada del usuario.

Conclusión

WebGL es una herramienta poderosa para los desarrolladores web que buscan integrar gráficos 3D en tiempo real en sus aplicaciones. Con una planificación cuidadosa e implementación creativa, puedes construir experiencias visuales impresionantes que se ejecutan sin problemas en los navegadores web. Al dominar WebGL mediante tutoriales completos y práctica constante, desbloquearás un nuevo reino de posibilidades para el desarrollo web.

Práctica

¿Qué capacidades ofrece WebGL a los desarrolladores web?

WebGL permite renderizar gráficos 3D interactivos en cualquier navegador web compatible sin necesidad de plugins.Proporciona soporte nativo para gráficos vectoriales 2D.Las aplicaciones WebGL pueden ejecutar animaciones complejas y simulaciones de física.Admite el procesamiento de audio directamente dentro de la API WebGL.WebGL usa JavaScript para manipular elementos canvas de HTML5 para el renderizado 3D.