COMPG - Javi Agenjo at UPF

COMPG

Última actualización: 7/04/2014

La asignatura trata sobre los algoritmos necesarios para pintar entornos 2D y 3D. Las prácticas se programan en C/C++ usando OpenGL como librería gráfica. Se tocan temas relacionados con algoritmos de pintado de lineas, clipping,transformaciones geometricas, camaras, curvas e iluminacion.

Para cualquier duda contactarme a mi mail de gmail o venid a mi despacho entre las 11:00 y las 20:00.

Material

La asignatura no requiere conocimientos previos de C/C++ pero es un punto a favor, si no teneis experiencia o hace mucho que no trabajais en C++ os recomiendo encarecidamente que la sección sobre consejos para programar en C++, os ahorrará muchos problemas durante la asignatura.

Práctica 1: Framebuffer

Leer atentamente el enunciado de las slides y el framework. Toda la info de la entrega está ahi.

Práctica 2: Raster de primitivas

Pintado de primitivas simples como lineas, circulos y triangulos rellenos.
Slides sobre raster.
Teneis que implementar el algoritmo de pintado de lineas, circulos y rellenado de triangulos.

  • Debeis implementar los siguientes métodos de la clase Image:
    • void drawLine(int x0, int y0, int x1, int y1, Color & c);
    • void drawCircle(int x, int y, int r, Color & c, bool fill);
    • void drawTriangle(int x0, int y0, int x1, int y1, int x2, int y2, Color & c, bool fill);
  • Para las lineas empezad por DDA, si al final funciona todo implementad el algoritmo de bresenham (es mucho mas rapido).
  • En bresenham aseguraos de que las lineas de bresenham funcionan en todos los octantes.
  • Permitid al usuario poder clickar en la pantalla e ir añadiendo nuevos puntos (tanto para lineas, como para circulos y triangulos), no es valido que los valores de los vertices de las primitivas ya vengan definidos por codigo.
  • Las primitivas tienen que poderse pintar sobre la imagen que ya hay pintada, de manera que el usuario pueda pintar un circulo, luego una linea, luego un triangulo, luego otro circulo, y se vea el resultado con todas ellas pintadas, como en cualquier aplicacion de dibujo (no vale ir borrando el framebuffer cada vez, intentad crear un framebuffer global donde vayais acumulando las primitivas).
  • Permitir al usuario elegir qué figura pintar usando el teclado (p.e: 1. DDA, 2. Bresenham, 3. Circulos, 4. Triangulos) y tratad que no haya que hacer combinaciones raras de teclado para completar las figuras, que baste con hacer dos clicks en la pantalla para definir una linea, dos para definir un circulo (primero centro, segundo borde del circulo) o tres para un triangulo.

La fecha de entrega es al comienzo de la próxima clase.

Práctica 3: Proyección 3D -> 2D y meshes

Como convertir de un espacio 3D a uno 2D
Slides sobre camara y proyección.

Teneis que implementar la proyección de 3D a 2D usando matrices y proyectar los vertices 3D a 2D para poder pintarlos usando vuestro algoritmo de bresenham.

Material

Requisitos

  • Implementar los metodos de la clase Camera siguiendo los slides:
    class Camera
    {
    	void updateViewMatrix( void );
    	void updateProjectionMatrix( void );
    };
  • Proyectar varios puntos usando la viewprojection_matrix usando la function projectVector de la clase Camera.
  • Convertir los puntos proyectados de espacio normalizado (-1…+1) al rango del framebuffer (0…window_width)
  • Pintad lineas en 3D proyectando el start y el end de cada linea y aplicando bresenham o DDA. Para ello teneis que unir los vertices de 3 en 3 (el 1 con el
    2 y el 3, el 4 con el 5 y el 6, el 7 con el 8 y el 9, …)
  • La posición de la camara (eye) se tiene que poder controlar con el teclado (sin afectar al center).
  • La posicion donde apunta la camara (center) se tiene que poder controlar con el teclado (sin afectar al eye).
  • Teclas para poder controlar el FOV de la camara.
  • Rellenar los triangulos de colores diferentes y probad de implementar un Z-Buffer (un framebuffer que contenga la profundidad de cada pixel normalizado entre near y far).

Practica 4:  Using the GPU

You must implement shaders to illuminate using Gouraud and Phong.

Material

Requisitos

  • Read the slides very carefuly, there are many new concepts to understand.
  • Check the simple shader provided, it is stored in the res/ folder.
  • Create a new shader for Gouraud (gouraud.vs and gouraud.fs) and put it in res/ folder.
  • Create a new shader for Phong (phong.vs and phong.fs) and put it in res/ folder.
  • Load the shaders from your application on startup (at the init, and store them in some global variables)
  • Be sure there are not shader compilation errors (check the console when the app is running), if there are errors the mesh will look white.
  • Create some instances of Light and Material, and pass the data to the shader using the functions in the shader class.
  • Allow the user to control some parameters of the materials or the light using the keyboard/mouse.
  • The initial settings are material ambient (1,1,1) and ambient light (0.1,0.1,0.1) and glosiness (alpha) 50. For the rest try different values.
  • Allow to control the camera.
  • Opcional: Have more than one light (check the slides, there is info about it)

La entrega será al comienzo de la siguiente clase.

Practica 5: Textures

Improve the Phong results from Pract4 using information per pixel, thanks to textures. You must use the color_spec.tga to improve diffuse and specular, and use normalmap to improve normals.

Material

Main points

  • You must load the textures from your application and pass them to your phong shader
  • You will find two textures: color_spec and normalmap
  • The color_spec texture contains in the RGB information about the diffuse component of the material, and at the Alpha channel (fourth channel) contains information about how much specular light reflects that point (not the glosiness!).
  • The normalmap texture contains precise normals for every pixel, much better than the ones we used per vertex, but remember, the normals are encoded using colors and colors go from [0..1], but normals go from [-1..+1], so we must convert the range of normals we read from the texture to the true range of normals applying a basic  scale and offset.
  • Remember that normals must be multiplied by the model matrix, so when the object rotate the normals rotate too, so after fetching the normals from the texture remember to pass them through the model matrix (but careful with the fourth component).
  • Make it support as many lights as wanted using blending (check the slides from pract4).
  • Send one project that contains pract4 and pract5 together, with keys to switch from gouraud, to phong, to phong with textures.

You have one week to do this