Tema 10 Gráficos Planos

1. Tema 10Gráficos Planos Gonzalo Cascón Barbero Elena Jorge Rico

2. Introducción • Mapas de bits • Concepto • Ejemplo • Aplicaciones: Generación de caracteres y fuentes • Imágenes • Lectura, escritura y copia de píxeles.

3. Introducción • Gráficos Planos =>Gráficos en 2D • En OpenGL son útiles para combinarlos con los de 3D para la aplicación de texturas a los objetos. • También son importantes para creación y visualización de: • Mapas de bits • Mapas de píxeles • Fuentes de texto • Para imágenes más complicadas=>Existen bibliotecas de funciones en OpenGL que permiten importar imágenes ya creadas.

4. Mapas de bits: Concepto • Se les suele llamar Bitmaps. • Son imágenes bicolor. • Usadas para dibujar iconos, cursores o símbolos. • Un único bit de información por píxel: • ‘0’ indica transparencia. • ‘1’ indica que se debe mostrar el píxel con los atributos de color fijados. • A los mapas de píxeles también se les suele llamar mapas de bits pero estos suelen tener más de 2 colores y se emplean como imágenes de fondo o texturas.

5. Mapas de bits: Ejemplo (I) Bitmap de 16x16 píxeles

6. Mapas de bits: Ejemplo (II) Bitmap como matriz de 0’s y 1’s 32 Bytes

7. /* Cara sonriente de 16x16 */ static GLubyte smiley[] = { 0x03, 0xc0, /* **** */ 0x0f, 0xf0, /* ******** */ 0x1e, 0x78, /* **** **** */ 0x39, 0x9c, /* *** ** *** */ 0x77, 0xee, /* *** ****** *** */ 0x6f, 0xf6, /* ** ******** ** */ 0xff, 0xff, /* **************** */ 0xff, 0xff, /* **************** */ 0xff, 0xff, /* **************** */ 0xff, 0xff, /* **************** */ 0x73, 0xce, /* *** **** *** */ 0x73, 0xce, /* *** **** *** */ 0x3f, 0xfc, /* ************ */ 0x1f, 0xf8, /* ********** */ 0x0f, 0xf0, /* ******** */ 0x03, 0xc0, /* **** */ }; Mapas de bits: Ejemplo (III) • Para crear un bitmap utilizamos un array de tipo Glubyte. • Los mapas de bits se definen invertidos. • El bit más significativo del primer byte del array Glubyte corresponde al píxel de la esquina inferior izquierda del bitmap.

8. Mapas de bits: Ejemplo (III) • Void glClearColor(GLclampf red, GLclampf green, GLclampf blue, GLclampf alpha) => para establecer color de fondo. • Void glColor{3/4}{b/d/f/i/s/ub/ui/us}(GL… red, GL… green, GL… blue, GL… alpha) => para establecer el color actual de dibujo. • Void glRasterPos{2/3/4}{s/i/f/d}(GL… x, GL… y, GL… z, GL… w) =>para establecer posición del raster y fijar color. • Void glBitmap (Glsizei ancho, Glsizei alto, Glfloat xorig, Glfloat yorig, Glfloat xmov, Glfloat ymov, const Glubyte *bitmap) =>para dibujar el bitmap.

9. void display(void){ glClear(GL_COLOR_BUFFER_BIT); //Color de fondo blanco glClearColor(1.0,1.0,1.0,1.0); //Smiley verde glColor3f (0.0, 1.0, 0.0); glRasterPos2i (50, 100); glBitmap(16,16,0,0,0,0,smiley); //Smiley rojo glColor3f (1.0, 0.0, 0.0); glRasterPos2i (100, 100); glBitmap(16,16,0,0,0,0,smiley); //Smiley azul glColor3f (0.0, 0.0, 1.0); glRasterPos2i (150, 100); glBitmap(16,16,0,0,0,0,smiley); glFlush(); } Mapas de bits: Ejemplo (IV)

10. Aplicaciones: Generación de caracteres y fuentes • Dibujar bitmaps de mayor tamaño y complejidad mediante este método sería una tarea tediosa. • Para trabajar con imágenes más complejas OpenGL tiene bibliotecas de funciones que permiten importar imágenes ya creadas. • La creación de bitmaps ha quedado relegada a la creación de caracteres y fuentes.

11. Generación de caracteres Bitmap de 16x16 que contiene un carácter A de 10 píxeles de ancho y 14 píxeles de alto.

12. Generación de fuentes (I) • Una fuente consiste en un conjunto de caracteres, donde cada carácter tiene un número identificativo (usualmente el código ASCII) y un método de dibujo. • Para la definición de fuentes completas resulta de gran utilidad el uso de las Listas de Pantalla oDisplay List (DL). • Mediante el uso de las DL podemos definir un procedimiento de dibujo para cada letra, de modo que cuando queramos escribir una frase únicamente con saber el código de cada carácter podamos acceder al procedimiento que lo dibuja. • Cuando una DL es creada sus comandos son precompilados y, si es posible, llevados a memoria, aumentando la velocidad de ejecución y mejorando el rendimiento de nuestro programa.

13. Generación de fuentes (II) • Funciones para trabajar con DLs: • GLuint glGenLists(GLsizei range) =>para generar un conjunto de DLs • glNewList(GLuint list, GLenum mode) =>para definir una nueva DLs • glEndList(void void) =>para indicar el fin de la definición de una DL. • glCallList(GLuint list) =>para invocar una DL. • glDeleteLists(GLuint list, GLsizei range) =>para borrar un conjunto de DLs.

14. GLuint desplazamiento; • void fuenteDeEjemplo(void){ • GLuint i, j; • glPixelStorei(GL_UNPACK_ALIGNMENT, 1); • desplazamiento = glGenLists (128); • /*El desplazamiento es el valor ASCII de la letra*/ • for (i = 0,j = 'A'; i < 26; i++,j++) { • glNewList(desplazamiento + j, GL_COMPILE); • glBitmap(8, 13, 0.0, 2.0, 10.0, 0.0, alfabeto[i]); • glEndList(); • } • glNewList(desplazamiento + ' ', GL_COMPILE); • glBitmap(8, 13, 0.0, 2.0, 10.0, 0.0, espacio); • glEndList(); • } Generación de fuentes (III) Definición de grupo de DLs para dibujar la fuente Uso de la función anterior • void imprimirCadena(char *s){ • glPushAttrib (GL_LIST_BIT); • glListBase(desplazamiento); • glCallLists(strlen(s), GL_UNSIGNED_BYTE, (GLubyte *) s); • glPopAttrib (); • }

15. Generación de fuentes (IV) void display(void){ GLfloat black[3] = { 0.0, 0.0, 0.0 }; GLfloat red[3] = { 1.0, 0.0, 0.0 }; glClear(GL_COLOR_BUFFER_BIT); glColor3fv(red); glRasterPos2i(20, 60); imprimirCadena("ESTO ES UN EJEMPLO DE FUENTE"); glColor3fv(black); glRasterPos2i(20, 40); imprimirCadena("ABCDEFGHIJKLMNOPQRSTUVWXYZ"); glFlush (); }

16. Imágenes (I) • Una imagen no se limita a un bit por píxel, sino que es capaz de almacenar mayor información por píxel. Así por ejemplo, una imagen puede contener un color entero (R, G, B, A) en un único píxel. • Diversas fuentes: • Fotografías digitalizadas con escáner. • Imágenes generadas en pantalla por un programa gráfico utilizando hardware gráfico y recuperada píxel a píxel. • Un programa software que generó la imagen en memoria píxel a píxel

17. Imágenes (II) • void glReadPixels(GLint x, GLint y, GLsizei width, GLsizei height, GLenum format, GLenum type, GLvoid *pixels) => para leer píxeles del framebuffer a memoria. • void glDrawPixels(GLsizei width, GLsizei height, GLenum format, GLenum type, const GLvoid *pixels) => para escribir píxeles desde memoria al framebuffer. • void glCopyPixels(GLint x, GLint y, GLsizei width, GLsizei height, GLenum buffer)=> para copiar píxeles dentro del framebuffer. • void glPixelZoom(GLfloat xfactor, GLfloat yfactor) => para hacer zoom de un píxel o rectángulo de píxeles.

18. Imágenes (III) Ejemplo

19. El Pipeline de imágenes de OpenGL • Lectura y dibujo de píxeles • Formatos de imagen • El formato BMP • Manejo de ficheros BMP en OpenGL • Lectura • Escritura • Impresión

20. 5 El Pipeline de OpenGL • Renderización: proceso de cálculo complejo desarrollado por un ordenador destinado a generar una imagen 2D a partir de una escena 3D.

21. 5 El Pipeline de OpenGL • Vertex data: describe los objetos de nuestra escena • Pixel data: describe las propiedades de la escena que se aplican sobre la imagen • Display List: conjunto de operaciones que se guardan para ser ejecutadas en cualquier momento.

22. 5 El Pipeline de OpenGL • Evaluators: permiten especificar una superficie solo usando sus puntos de control • Pre-vertex operations: convierten los vértices en primitivas (rotaciones, translaciones, etc., por cada vértice) • Primitive assembly: se hace clipping de lo que queda fuera del plano de proyección

23. 5 El Pipeline de OpenGL • Pixel operations: los píxeles son desempaquetados • Texture assembly: se preparan las texturas • Rasterization: son convertidos en fragmentos • Pre-fragment operations: se preparan los elementos de texturas para ser aplicados a cada píxel

24. 6 Lectura y dibujo de rectángulos de píxeles Proceso de Dibujo : Dibujo de píxeles en el Framebuffer • Si los píxeles no son índices • Conversión de componentes a punto flotante • Multiplicar por la escala apropiada (GL_*_SCALE) y se suma la distorsión. • En caso de mapeo, se realiza, pasando a estar en el rango 0.0 – 1.0 • Conversión a coma fija • Índices • Conversión a punto fijo • Se desplaza los índices el valor indicado y se suma el OffSet • En caso de utilizarse el modo RGBA se pasan todos los valores a ese modo.

25. 6 Lectura y dibujo de rectángulos de píxeles Proceso de Lectura: Del Framebuffer a memoria • Si los píxeles no son índices: • Se realiza el mapeo en el rango 0.0 – 1.0 • Se aplican las escalas y distorsiones a cada componente • Se realiza un mapeo de RGBA a índice, en caso necesario • Se empaqueta en memoria el resultado • Índices • Se realizan los desplazamientos de índices • Se enmascara de acuerdo al modo de almacenamiento: 8-bits, 16-bits, 32-bits • Se empaqueta en memoria el resultado

26. 7 Formatos de imagen • Distintos formatos de imagen: bmp, jpg, gif… • Algoritmos distintos de compresión • Calidad del color (representación RGB): • 2 colores (1 bit por píxel) • 16 colores (4 bits por píxel): paleta de colores para encontrar correspondencia de color • 256 colores (16 bits por píxel) : paleta de colores para encontrar correspondencia de color • 16 millones de colores (24 bits por píxel): color real • Estructura • Cabecera de archivo (tipo, tamaño, color…) • Información • Paleta de colores (si es necesario)

27. 7 Formatos de imagen (BMP) • BitMaP • Estructura: • Cabecera de archivo (BITMAPFILEHEADER). • Cabecera de información (BITMAPINFOHEADER). • Paleta (RGBQUAD). • Datos (BYTE).

28. 7 Formatos de imagen (BMP) • Cabecera de Archivo: typedef struct tagBITMAPFILEHEADER { UINT bfType; DWORD bfSize; UINT bfReserved1; UINT bfReserved2; DWORD bfOffBits; } BITMAPFILEHEADER;

29. 7 Formatos de imagen (BMP) • Cabecera de Información. Dentro de otra estructura. typedef struct tagBITMAPINFO { BITMAPINFOHEADER bmiHeader; RGBQUAD bmiColors[ 1 ]; } BITMAPINFO; typedef struct tagBITMAPINFOHEADER { DWORD biSize; DWORD biWidth; DWORD biHeight; WORD biPlanes; WORD biBitCount; DWORD biCompression; DWORD biSizeImage; DWORD biXpelsPerMeter; DWORD biYPelsPerMeter; DWORD biClrUsed; DWORD biClrImportant; } BITMAPINFOHEADER;

30. 7 Formatos de imagen (BMP) • Paleta de color: Array que depende de los bits por píxel typedef struct tagRGBQUAD { BYTE rgbBlue; BYTE rgbGreen; BYTE rgbRed; BYTE rgbReserved;} RGBQUAD; • Datos: array de bytes que representan los píxeles de un mapa de bits.

31. 8 Manejo de ficheros BMP en OpenGL • Lectura de un fichero • Abrir fichero para lectura binaria fopen(archivo, "rb") • Leer las cabeceras fread(&cabecera, sizeof(BITMAPFILEHEADER), 1, f) • Obtener el tamaño de la información y reservar espacio tamanoInfo = cabecera.bfOffBits - sizeof(BITMAPFILEHEADER); *info = (BITMAPINFO *)malloc(tamanoInfo);

32. 8 Manejo de ficheros BMP en OpenGL • Guardar imagen en disco • Leer la imagen • Leer los píxeles del buffer de pantalla. • Dar valores a la cabecera. • Escribir en un fichero los datos y la cabecera. • Pasar la imagen a formato BMP • Guardarla en disco

33. 8 Manejo de ficheros BMP en OpenGL • Imprimir imagen • Leer la imagen (igual que antes) • Mostrar la lista de impresoras memset(&pd, 0, sizeof(pd)); pd.lStructSize = sizeof(pd); pd.hwndOwner = padre; pd.Flags = PD_RETURNDC; pd.hInstance = NULL; if (!PrintDlg(&pd)) return (0); • Colocar en la cola de impresión