7. Texturas en WebGL

Objetivos

Incluir texturas en vez de colores en figuras más complejas de pintar como un cilindro, un cono y una esfera. La escena debe poder orbitarse.

Añadir texturas a una figura base

Se siguieron los los pasos de [1] para incluir la textura en un sólido tridimensional. Los principales cambios respecto a una figura con colores fueron:

Editar el vertex shader: en vez del atributo de color, se tiene un atributo vec2 que se atribuye a las coordenadas de la textura correspondiente a cada vertice. Los dos decimales flotantes, corresponden a las coordenadas de la imagen de la textura entre 0 y 1. De esta forma va determinando qué parte de la textura es asociada a cada vértice que está en la misma posición del búffer.

Añadir un sampler2D al fragment shader que transformará las coordenadas de la textura al pixel de la figura. El fragment shader ya no saca el valor del color sino el resultado del sampler de acuerdo a los texeles (las coordenadas de cada pixel dentro de la textura)

Añadir el sampler y las coordenadas de la textura al programa de la GPU )?=, asi como sus respectivos cambios al momento de conectar cada buffer

Cargar textura

Para cargar la textura a partir de la imagen se usa el metodo tomado de [1].

Acto seguido se añaden estas lineas antes de empezar a pintar las primitivas.

Al finalizar el proceso de [1] el resultado fue efectivamente el cubo con una textura en cada cara.

Pintar las figuras

Cada figura tenía un aspecto circular en alguna de sus dimensiones. Debito a esto se pinto principalmente como un polígono, aumentando su cantidad de lados hasta asimilarse más a un circulo.

Función para calcular vértices del cono

En ese orden de ideas los arreglos de los vertices, texturas e índices dependían de la cantidad de lados que quisiera tener la figura. Tambien hay que tener en cuenta que es necesario repetir el primer vértice para que la figura quede completamente cerrada.

Pintar el cilindro

Se pintaron varios TRIANGLE_STRIP intercalando entre la base y el tope, mientras se completa el perimetro del cilindro.

Pintar el cono

Con un punto orgen y una base circular, se pinto con las primitivas TRIGANLE_FAN tomando el primer vertice como la punta del cono. El resto de los vertices y coordenadas de la textura se pintaron así:

Pintar la esfera

Debido a su complejidad se siguienron las instrucciones en este video.² Como es con solo TRIANGLES, la enumeracion de los indices fue un poco mas compleja, tambien explicada en el video.

Texturas propias de cada imagen

Se sacaron diversas imagenes de la web para sacar las texturas. Para cambiar la textura solo fue necesario cambiar la URL del origen de la textura en el metodo loadTexture( ). Para pintar más de una figura se siguieron las instrucciones explicadas en esta entrada. Lo único distinto a tener en cuenta es que las texturas deben ser creadas antes de renderizar y ser pasadas como parámetro al método drawScene( ). Esto ya que al ser creadas frame por frame, tras de que no es necesario, suele afectar notablemente el desempeño.

Rotación

Se decidió primero rotar el mundo y realizar una traslaciones para cada ubicación en donde estuviera cada figura. Así pareciera que la cámara es la que está rotando alrededor de las figuras.

See the Pen Tarea 7 Textures by David Mayorga (@damayor) on CodePen.

El código del resultado se puede ver aquí. El seguimiento del trabajo realizado se encuentra en este sprint .

Bibliografia:

1. Developer Mozilla - Using textures in WebGL
2. Parker D. - How to draw a 3d sphere in WebGL - ProgrammingTIL #135 WebGL tutorial video screencast 0078