Tutoriales webGL
Escrito por jgrc el 24 octubre, 2011 | 3 comentarios
Estoy traduciendo una serie de tutoriales, sacados de Learning webGL, como medio de aprender webGL yo mismo. Conforme vaya completando las lecciones, las iré colgando en esta página para tenerlas bien organizaditas.
![]() |
Tutorial 1: Un triángulo y un cuadrado. En esta lección hablaré un poco sobre cómo trabaja webGL, con un ejemplo sencillo de pintar un triángulo y un cuadrado estáticos en pantalla. |
![]() |
Tutorial 2: Añadiendo color. Es hora de aprender a usar colores en nuestros objetos, partiendo del código de la lección anterior. |
| Tutorial 3: Un poquito de movimiento. Hagamos que se muevan un poco los objetos en el espacio, partiendo del código de la lección anterior. | |
| Tutorial 4: Algunos objetos de auténtico 3D. Es el momento de introducirnos en el mundo 3D, creando una pirámide y un cubo rotatorios, partiendo del código de la lección anterior. | |
| Tutorial 5: Una introducción a las texturas. Enseñamos a cómo ponerle una piel a los objetos 3D de tu escena proporcionándote una forma rápida de darles un aspecto más interesante. | |
| Tutorial 6: Eventos de teclado y filtro de textura. Éste es un tutorial un poco más avanzado sobre el uso de filtros de textura, donde además damos algunos pasos sobre la detección de los eventos de teclado. | |
| Tutorial 7: Iluminación direccional y ambiental básica. Aprenderemos la teoría que hay detrás de la iluminación de mundos 3D, y en concreto, simularemos dos de los tipos más simples de luz. | |
| Tutorial 8: El buffer de profundidad, transparencias y blending. Mostraremos una de las formas de simular transparencia en los materiales, junto con un poco de teoría del funcionamiento del buffer de profundidad. | |
| Tutorial 9: Mejorando la estructura del código. Aprenderemos a usar algunas técnicas simples de la programación orientada a objetos en javascript para manejar fácilmente las animaciones independientes de muchos objetos en pantalla a la vez. | |
| Tutorial 10: Cómo cargar un mundo 3D, y el tipo de cámara más básico. Veremos un truco para simular el uso de cámaras que se mueven por la escena, y cómo cargar un mapa desde un fichero externo, para programar nuestro propio nano-Doom. | |
| Tutorial 11: Esferas, matrices de rotación y eventos de ratón. Ahora mostraremos cómo dibujar esferas, y el código necesario para girarlas dentro de la escena según los eventos del ratón. | |
| Tutorial 12: Punto de iluminación. Mostramos cómo implementar puntos de luz dentro de tu escena 3D. | |
| Tutorial 13: Iluminación por fragmento y múltiples programas. Describimos una nueva forma de iluminación más realista a costa de incrementar el tiempo de procesamiento de la tarjeta gráfica. Para ello, aprenderemos usar varios programas shaders en una misma aplicación. | |
| Tutorial 14: Reflejos especulares y cargar un modelo con JSON. Mejoramos la iluminación añadiendo reflejos especulares, y también enseñamos cómo cargar modelos de objetos 3D con JSON. | |
| Tutorial 15: Mapas especulares. Mostramos cómo usar mapas especulares para dar a tus escenas un mayor realismo, al indicar píxel a píxel qué zonas de tus superficies 3D deben reflejar la luz especular, mediante el uso de una textura adicional. | |
| Tutorial 16: Texturas renderizadas. Mostramos cómo renderizar una escena 3D completa dentro de una textura, lo que supone una base fundamental para aplicar otras técnicas más complicadas pero muy útiles. |

