Tutoral de WebGL

Este tutorial describe cómo usar el elemento <canvas> para dibujar gráficos WebGL, comenzando con lo básico. Los ejemplos proporcionados deberían darle algunas ideas claras de lo que puede hacer con WebGL y le proporcionarán fragmentos de código que pueden ayudarlo a comenzar a crear su propio contenido.

WebGL permite que el contenido web use una API basada en OpenGL ES 2.0 para realizar la representación 3D en un HTML <canvas> en navegadores que lo admitan sin el uso de complementos. Los programas WebGL consisten en un código de control escrito en JavaScript y un código de efectos especiales (código sombra) que se ejecuta en la Unidad de procesamiento de gráficos (GPU) de una computadora. Los elementos WebGL se pueden mezclar con otros elementos HTML y combinar con otras partes de la página o el fondo de la página.

Antes de comenzar

Usar el elemento <canvas> no es muy difícil, pero se necesita una comprensión básica de HTML y JavaScript. El elemento <canvas> y WebGL no son compatibles con algunos navegadores antiguos, pero sí lo son con las versiones recientes de todos los principales navegadores. Para dibujar gráficos en el lienzo, usamos un objeto de contexto de JavaScript, que crea gráficos sobre la marcha.

En este tutorial

Primeros pasos con WebGL: Cómo configurar un contexto WebGL.
Agregar contenido 2D a un contexto WebGL: Cómo renderizar formas planas simples usando WebGL.
Uso de shaders para aplicar color en WebGL: Demuestra cómo agregar color a las formas usando shaders.
Animar objetos con WebGL: Muestra cómo rotar y trasladar objetos para crear animaciones simples.
Creación de objetos 3D usando WebGL: Muestra cómo crear y animar un objeto 3D (en este caso, un cubo).
Usar texturas en WebGL: Demuestra cómo asignar texturas a las caras de un objeto.
Iluminación en WebGL: Cómo simular efectos de iluminación en su contexto WebGL.
Animación de texturas en WebGL: Muestra cómo animar texturas; en este caso, mapeando un video Ogg en las caras de un cubo giratorio.