Tutoriales WebGL Puro

Escrito por el 25 febrero, 2013 | 7 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.

Comentarios (7)

  • Muyyyyyy bueno 😀 las ganas que tengo de aprender esto, gracias por publicarlo ya estoy arrancando con el tuto 1 y voy a seguir con el resto, gracias!!!

  • Excelente. me ha sido de mucha ayuda..gracias!!!!!!!!!!

  • Soy auto didacta… quiero conocer un poco mas de lo que proponen…
    muy agradecido por dejar esta ventana para aprender de sus conocimientos..
    un abrazoo..
    att.Nelson

  • Que bueno! gracias por estos tutoriales… es el momento de pasarse a WebGL 😛 ya tenia practica haciendo cosillas para canvas pero en 2D… y se nota que le cuesta con mapas complejos.. viendo ejemplos de WebGL se ve que todo tira mucho mas fluido no tiene color.

    Gracias!

  • Al igual que Nelson soy autodidacta y siempre es agradable encontrar lugares en la web en los que alguien se toma el trabajo de compartir lo que sabe. Muchas gracias!!!

  • Buenas! Primero que nada excelente tutorial, bien explicado todo !
    Me quede con curiosidad respecto a como hacer reflejos de toda uuna escena, por ejemplo si hay una escena compuesta por dos objeto, me guustaria entender como hacer que ambos objetos se reflecten entre si, conocen de algunaa pagina que lo explique?? Gracias!

  • Muyyyyyy bueno las ganas que tengo de aprender esto, gracias por publicarlo ya estoy arrancando con el tuto 1 y voy a seguir con el resto, gracias!!!

¿Tienes algo que decir?

Gestionado con Wordpress y Stripes Theme Entradas (RSS) | Comentarios (RSS)