Gonzalo Cascón Barbero Elena Jorge Rico

Presentación del tema: "Gonzalo Cascón Barbero Elena Jorge Rico"— Transcripción de la presentación:

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

2 Introducción Mapas de bits Imágenes 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 Mapas de bits: Ejemplo (III)
/* Cara sonriente de 16x16 */ static GLubyte smiley[] = { 0x03, 0xc0, /* **** */ 0x0f, 0xf0, /* ******** */ 0x1e, 0x78, /* **** **** */ 0x39, 0x9c, /* *** ** *** */ 0x77, 0xee, /* *** ****** *** */ 0x6f, 0xf6, /* ** ******** ** */ 0xff, 0xff, /* **************** */ 0x73, 0xce, /* *** **** *** */ 0x3f, 0xfc, /* ************ */ 0x1f, 0xf8, /* ********** */ }; 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 Mapas de bits: Ejemplo (IV)
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); glFlush(); }

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 o Display 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 Generación de fuentes (III)
Definición de grupo de DLs para dibujar la fuente 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); 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

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