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

Tema 10Tema 10Gráficos PlanosGráficos Planos

Gonzalo Cascón BarberoGonzalo Cascón Barbero

Elena Jorge RicoElena Jorge Rico

IntroducciónIntroducción Mapas de bitsMapas de bits

ConceptoConcepto EjemploEjemplo Aplicaciones: Generación de caracteres y Aplicaciones: Generación de caracteres y

fuentesfuentes ImágenesImágenes

Lectura, escritura y copia de píxeles.Lectura, escritura y copia de píxeles.

IntroducciónIntroducción

Gráficos Planos =>Gráficos en 2DGráficos Planos =>Gráficos en 2D

En OpenGL son útiles para combinarlos con los de 3D para la En OpenGL son útiles para combinarlos con los de 3D para la aplicación de texturas a los objetos.aplicación de texturas a los objetos.

También son importantes para creación y visualización de:También son importantes para creación y visualización de: Mapas de bitsMapas de bits Mapas de píxelesMapas de píxeles Fuentes de textoFuentes de texto

Para imágenes más complicadas=>Existen bibliotecas de Para imágenes más complicadas=>Existen bibliotecas de funciones en OpenGL que permiten importar imágenes ya funciones en OpenGL que permiten importar imágenes ya creadas.creadas.

Mapas de bits: ConceptoMapas de bits: Concepto Se les suele llamar Bitmaps.Se les suele llamar Bitmaps. Son imágenes bicolor.Son imágenes bicolor. Usadas para dibujar iconos, cursores o símbolos.Usadas para dibujar iconos, cursores o símbolos. Un único bit de información por píxel:Un único bit de información por píxel:

‘‘0’ indica transparencia.0’ indica transparencia. ‘‘1’ indica que se debe mostrar el píxel con los 1’ indica que se debe mostrar el píxel con los

atributos de color fijados.atributos de color fijados. A los A los mapas de píxelesmapas de píxeles también se les suele también se les suele

llamar mapas de bits pero estos suelen tener más llamar mapas de bits pero estos suelen tener más de 2 colores y se emplean como imágenes de de 2 colores y se emplean como imágenes de fondo o texturas. fondo o texturas.

Mapas de bits: Ejemplo (I)Mapas de bits: Ejemplo (I)

Bitmap de 16x16 píxeles

Mapas de bits: Ejemplo (II)Mapas de bits: Ejemplo (II)

Bitmap como matriz de 0’s y 1’s

32 Bytes

Mapas de bits: Ejemplo (III)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, /* **************** */ 0xff, 0xff, /* **************** */ 0xff, 0xff, /* **************** */ 0xff, 0xff, /* **************** */ 0x73, 0xce, /* *** **** *** */ 0x73, 0xce, /* *** **** *** */ 0x3f, 0xfc, /* ************ */ 0x1f, 0xf8, /* ********** */ 0x0f, 0xf0, /* ******** */ 0x03, 0xc0, /* **** */ };

•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.

Mapas de bits: Ejemplo (III)Mapas de bits: Ejemplo (III) Void Void glClearColorglClearColor(GLclampf red, GLclampf green, GLclampf (GLclampf red, GLclampf green, GLclampf

blue, GLclampf alpha) => blue, GLclampf alpha) => para establecer color de para establecer color de fondofondo..

Void Void glColor{3/4}{b/d/f/i/s/ub/ui/usglColor{3/4}{b/d/f/i/s/ub/ui/us}(GL… red, GL… }(GL… red, GL… green, GL… blue, GL… alpha) => green, GL… blue, GL… alpha) => para establecer el color para establecer el color actual de dibujoactual de dibujo..

Void Void glRasterPos{2/3/4}{s/i/f/d}glRasterPos{2/3/4}{s/i/f/d}(GL… x, GL… y, GL… z, (GL… x, GL… y, GL… z, GL… w) =>GL… w) =>para establecer posición del raster y fijar para establecer posición del raster y fijar colorcolor..

VVoid oid glBitmap glBitmap (Glsizei ancho, Glsizei alto, Glfloat xorig, (Glsizei ancho, Glsizei alto, Glfloat xorig, Glfloat yorig, Glfloat xmov, Glfloat ymov, const Glubyte Glfloat yorig, Glfloat xmov, Glfloat ymov, const Glubyte *bitmap)*bitmap) => =>para dibujar el bitmap.para dibujar el bitmap.

Mapas de bits: Ejemplo (IV)Mapas de bits: Ejemplo (IV)void display(void){

glClear(GL_COLOR_BUFFER_BIT);

//Color de fondo blancoglClearColor(1.0,1.0,1.0,1.0);

//Smiley verdeglColor3f (0.0, 1.0, 0.0); glRasterPos2i (50, 100);

glBitmap(16,16,0,0,0,0,smiley);

//Smiley rojoglColor3f (1.0, 0.0, 0.0);glRasterPos2i (100, 100);glBitmap(16,16,0,0,0,0,smiley);

//Smiley azulglColor3f (0.0, 0.0, 1.0);glRasterPos2i (150, 100);glBitmap(16,16,0,0,0,0,smiley);glFlush();

}

Aplicaciones: Generación de caracteres y Aplicaciones: Generación de caracteres y fuentesfuentes

Dibujar bitmaps de mayor tamaño y complejidad Dibujar bitmaps de mayor tamaño y complejidad mediante este método sería una tarea tediosa.mediante este método sería una tarea tediosa.

Para trabajar con imágenes más complejas Para trabajar con imágenes más complejas OpenGL tiene bibliotecas de funciones que OpenGL tiene bibliotecas de funciones que permiten importar imágenes ya creadas.permiten importar imágenes ya creadas.

La creación de bitmaps ha quedado relegada a la La creación de bitmaps ha quedado relegada a la creación de caracteres y fuentes.creación de caracteres y fuentes.

Generación de caracteresGeneración de caracteres

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

Generación de fuentes (I)Generación de fuentes (I)

Una fuente consiste en un Una fuente consiste en un conjunto de caracteresconjunto de caracteres, donde cada carácter , donde cada carácter tiene un tiene un número identificativonúmero identificativo (usualmente el código ASCII) y un (usualmente el código ASCII) y un método de dibujométodo de dibujo..

Para la definición de fuentes completas resulta de gran utilidad el uso de Para la definición de fuentes completas resulta de gran utilidad el uso de las las Listas de Pantalla oListas de Pantalla o Display List (DL)Display List (DL)..

Mediante el uso de las DL podemos definir Mediante el uso de las DL podemos definir un procedimiento de dibujo un procedimiento de dibujo para cada letrapara cada letra, de modo que cuando queramos escribir una frase , de modo que cuando queramos escribir una frase únicamente con saber el únicamente con saber el códigocódigo de cada carácter podamos acceder al de cada carácter podamos acceder al procedimiento que lo dibuja.procedimiento que lo dibuja.

Cuando una DL es creada sus comandos son precompilados y, si es Cuando una DL es creada sus comandos son precompilados y, si es posible, llevados a memoria, aumentando la posible, llevados a memoria, aumentando la velocidad de ejecuciónvelocidad de ejecución y y mejorando el mejorando el rendimientorendimiento de nuestro programa. de nuestro programa.

Generación de fuentes (II)Generación de fuentes (II)

Funciones para trabajar con DLs:Funciones para trabajar con DLs:

GLuint GLuint glGenListsglGenLists(GLsizei range)(GLsizei range) => =>para generar un para generar un conjunto de DLsconjunto de DLs

glNewListglNewList(GLuint list, GLenum mode)(GLuint list, GLenum mode) => =>para definir para definir una nueva DLsuna nueva DLs

glEndListglEndList(void (void voidvoid) =>) =>para indicar el fin de la para indicar el fin de la definición de una DL.definición de una DL.

glCallListglCallList(GLuint list(GLuint list) =>) =>para invocar una DL.para invocar una DL.

glDeleteListsglDeleteLists(GLuint list, GLsizei range(GLuint list, GLsizei range) =>) =>para para borrar un conjunto de DLs.borrar un conjunto de DLs.

Generación de fuentes (III)Generación de fuentes (III)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();

}

void imprimirCadena(char *s){ glPushAttrib (GL_LIST_BIT); glListBase(desplazamiento); glCallLists(strlen(s), GL_UNSIGNED_BYTE, (GLubyte *) s);

glPopAttrib (); }

Uso de la función anterior

Definición de grupo de DLs para dibujar la fuente

Generación de fuentes (IV)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 ();

}

Imágenes (I)Imágenes (I)

Una imagen no se limita a un bit por píxel, sino que es 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 capaz de almacenar mayor información por píxel. Así por ejemplo, una imagen puede contener un color entero (R, ejemplo, una imagen puede contener un color entero (R, G, B, A) en un único píxel. G, B, A) en un único píxel.

Diversas fuentes: Diversas fuentes: Fotografías digitalizadas con escáner. Fotografías digitalizadas con escáner. Imágenes generadas en pantalla por un programa Imágenes generadas en pantalla por un programa

gráfico utilizando hardware gráfico y recuperada píxel gráfico utilizando hardware gráfico y recuperada píxel a píxel. a píxel.

Un programa software que generó la imagen en Un programa software que generó la imagen en memoria píxel a píxel memoria píxel a píxel

Imágenes (II)Imágenes (II)

void void glReadPixelsglReadPixels(GLint x, GLint y, GLsizei width, GLsizei (GLint x, GLint y, GLsizei width, GLsizei height, GLenum format, GLenum type, GLvoid *pixels)height, GLenum format, GLenum type, GLvoid *pixels) => => para leer píxeles del framebuffer a memoriapara leer píxeles del framebuffer a memoria..

void void glDrawPixelsglDrawPixels(GLsizei width, GLsizei height, GLenum (GLsizei width, GLsizei height, GLenum format, GLenum type, const GLvoid *pixels)format, GLenum type, const GLvoid *pixels) => => para para escribir píxeles desde memoria al framebufferescribir píxeles desde memoria al framebuffer..

void void glCopyPixelsglCopyPixels(GLint x, GLint y, GLsizei width, GLsizei (GLint x, GLint y, GLsizei width, GLsizei height, GLenum buffer)=> height, GLenum buffer)=> para copiar píxeles dentro para copiar píxeles dentro del framebufferdel framebuffer..

void void glPixelZoomglPixelZoom(GLfloat xfactor, GLfloat yfactor) => (GLfloat xfactor, GLfloat yfactor) => para hacer zoom de un píxel o rectángulo de píxeles.para hacer zoom de un píxel o rectángulo de píxeles.

Imágenes (III) Imágenes (III)

Ejemplo

El Pipeline de imágenes de OpenGLEl Pipeline de imágenes de OpenGL Lectura y dibujo de píxelesLectura y dibujo de píxeles Formatos de imagenFormatos de imagen

El formato BMPEl formato BMP Manejo de ficheros BMP en OpenGLManejo de ficheros BMP en OpenGL

LecturaLectura EscrituraEscritura ImpresiónImpresión

5 El Pipeline de OpenGL5 El Pipeline de OpenGL

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

http://es.wikipedia.org/wiki/Imagen:Glasses_800_edit.png


Vertex data: describe los Vertex data: describe los objetos de nuestra escena objetos de nuestra escena

Pixel data: describe las Pixel data: describe las propiedades de la escena propiedades de la escena que se aplican sobre la que se aplican sobre la imagen imagen

Display List: conjunto de Display List: conjunto de operaciones que se operaciones que se guardan para ser guardan para ser ejecutadas en cualquier ejecutadas en cualquier momento.momento.


Evaluators: permiten Evaluators: permiten especificar una superficie solo especificar una superficie solo usando sus puntos de controlusando sus puntos de control

Pre-vertex operations: Pre-vertex operations: convierten los vértices en convierten los vértices en primitivas (rotaciones, primitivas (rotaciones, translaciones, etc., por cada translaciones, etc., por cada vértice)vértice)

Primitive assembly: se hace Primitive assembly: se hace clipping de lo que queda clipping de lo que queda fuera del plano de proyección fuera del plano de proyección


Pixel operations: los píxeles Pixel operations: los píxeles son desempaquetadosson desempaquetados

Texture assembly: se preparan Texture assembly: se preparan las texturaslas texturas

Rasterization: son convertidos Rasterization: son convertidos

en fragmentosen fragmentos

Pre-fragment operations: se Pre-fragment operations: se preparan los elementos de preparan los elementos de texturas para ser aplicados a texturas para ser aplicados a

cada píxelcada píxel

6 Lectura y dibujo de 6 Lectura y dibujo de rectángulos de píxelesrectángulos de píxeles

Proceso de Dibujo : Dibujo de Proceso de Dibujo : Dibujo de píxeles en el Framebufferpíxeles en el Framebuffer

Si los píxeles no son índicesSi los píxeles no son índices Conversión de componentes a punto Conversión de componentes a punto

flotanteflotante Multiplicar por la escala apropiada Multiplicar por la escala apropiada

(GL_*_SCALE) y se suma la distorsión.(GL_*_SCALE) y se suma la distorsión. En caso de mapeo, se realiza, pasando En caso de mapeo, se realiza, pasando

a estar en el rango 0.0 – 1.0a estar en el rango 0.0 – 1.0 Conversión a coma fijaConversión a coma fija

ÍndicesÍndices Conversión a punto fijoConversión a punto fijo Se desplaza los índices el valor Se desplaza los índices el valor

indicado y se suma el OffSetindicado y se suma el OffSet

En caso de utilizarse el modo RGBA se En caso de utilizarse el modo RGBA se pasan todos los valores a ese modopasan todos los valores a ese modo..

6 Lectura y dibujo de 6 Lectura y dibujo de rectángulos de píxelesrectángulos de píxeles

Proceso de Lectura: Del Proceso de Lectura: Del Framebuffer a memoriaFramebuffer a memoria

Si los píxeles no son índices:Si los píxeles no son índices: Se realiza el mapeo en el rango Se realiza el mapeo en el rango

0.0 – 1.00.0 – 1.0 Se aplican las escalas y Se aplican las escalas y

distorsiones a cada componentedistorsiones a cada componente Se realiza un mapeo de RGBA a Se realiza un mapeo de RGBA a

índice, en caso necesarioíndice, en caso necesario Se empaqueta en memoria el Se empaqueta en memoria el

resultadoresultado

ÍndicesÍndices Se realizan los desplazamientos Se realizan los desplazamientos

de índicesde índices Se enmascara de acuerdo al modo Se enmascara de acuerdo al modo

de almacenamiento: 8-bits, 16-de almacenamiento: 8-bits, 16-bits, 32-bitsbits, 32-bits

Se empaqueta en memoria el Se empaqueta en memoria el resultadoresultado

7 Formatos de imagen7 Formatos de imagen

Distintos formatos de imagen: bmp, jpg, gif…Distintos formatos de imagen: bmp, jpg, gif… Algoritmos distintos de compresiónAlgoritmos distintos de compresión Calidad del color (representación RGB):Calidad del color (representación RGB):

2 colores (1 bit por píxel)2 colores (1 bit por píxel) 16 colores (4 bits por píxel): 16 colores (4 bits por píxel): paleta de colores para encontrar paleta de colores para encontrar

correspondencia de colorcorrespondencia de color 256 colores (16 bits por píxel) : 256 colores (16 bits por píxel) : paleta de colores para encontrar paleta de colores para encontrar

correspondencia de colorcorrespondencia de color 16 millones de colores (24 bits por píxel): color real16 millones de colores (24 bits por píxel): color real

EstructuraEstructura Cabecera de archivo (tipo, tamaño, color…)Cabecera de archivo (tipo, tamaño, color…) InformaciónInformación Paleta de colores (si es necesario)Paleta de colores (si es necesario)

7 Formatos de imagen 7 Formatos de imagen (BMP)(BMP)

BBititMMaaPP Estructura:Estructura:

Cabecera de archivo Cabecera de archivo ((BITMAPFILEHEADERBITMAPFILEHEADER).).

Cabecera de información Cabecera de información ((BITMAPINFOHEADERBITMAPINFOHEADER).).

Paleta (Paleta (RGBQUADRGBQUAD).). Datos (Datos (BYTEBYTE).).


Cabecera de Archivo:Cabecera de Archivo:

typedef struct tagBITMAPFILEHEADER {typedef struct tagBITMAPFILEHEADER {UINT bfType;UINT bfType;DWORD bfSize;DWORD bfSize;UINT bfReserved1;UINT bfReserved1;UINT bfReserved2;UINT bfReserved2;DWORD bfOffBits;DWORD bfOffBits;

} BITMAPFILEHEADER;} BITMAPFILEHEADER;

7 Formatos de imagen 7 Formatos de imagen (BMP)(BMP) Cabecera de Información. Dentro de otra estructura.Cabecera de Información. Dentro de otra estructura.

typedef struct tagBITMAPINFO {typedef struct tagBITMAPINFO {BITMAPINFOHEADER bmiHeader;BITMAPINFOHEADER bmiHeader;RGBQUAD bmiColors[ 1 ];RGBQUAD bmiColors[ 1 ];

} BITMAPINFO;} BITMAPINFO;

typedef struct tagBITMAPINFOHEADER {typedef struct tagBITMAPINFOHEADER {DWORD biSize;DWORD biSize;DWORD biWidth;DWORD biWidth;DWORD biHeight;DWORD biHeight;WORD biPlanes;WORD biPlanes;WORD biBitCount;WORD biBitCount;DWORD biCompression;DWORD biCompression;DWORD biSizeImage;DWORD biSizeImage;DWORD biXpelsPerMeter;DWORD biXpelsPerMeter;DWORD biYPelsPerMeter;DWORD biYPelsPerMeter;DWORD biClrUsed;DWORD biClrUsed;DWORD biClrImportant;DWORD biClrImportant;

} BITMAPINFOHEADER;} BITMAPINFOHEADER;


Paleta de color: Array que depende de los Paleta de color: Array que depende de los bits por píxelbits por píxel

typedef struct tagRGBQUAD {typedef struct tagRGBQUAD {BYTE rgbBlue;BYTE rgbBlue;BYTE rgbGreen;BYTE rgbGreen;BYTE rgbRed;BYTE rgbRed;BYTE rgbReserved;BYTE rgbReserved;

} RGBQUAD;} RGBQUAD;

Datos: array de bytes que representan los Datos: array de bytes que representan los píxeles de un mapa de bits.píxeles de un mapa de bits.

8 Manejo de ficheros BMP en 8 Manejo de ficheros BMP en OpenGLOpenGL

Lectura de un ficheroLectura de un fichero Abrir fichero para lectura binariaAbrir fichero para lectura binaria

fopen(archivo, "rb")fopen(archivo, "rb") Leer las cabecerasLeer las cabeceras

fread(&cabecera, sizeof(BITMAPFILEHEADER), 1, f)fread(&cabecera, sizeof(BITMAPFILEHEADER), 1, f) Obtener el tamaño de la información y Obtener el tamaño de la información y

reservar espacioreservar espaciotamanoInfo = cabecera.bfOffBits - sizeof(BITMAPFILEHEADER);tamanoInfo = cabecera.bfOffBits - sizeof(BITMAPFILEHEADER);*info = (BITMAPINFO *)malloc(tamanoInfo); *info = (BITMAPINFO *)malloc(tamanoInfo);


Guardar imagen en discoGuardar imagen en disco Leer la imagenLeer la imagen

Leer los píxeles del buffer de pantalla.Leer los píxeles del buffer de pantalla. Dar valores a la cabecera.Dar valores a la cabecera. Escribir en un fichero los datos y la cabecera.Escribir en un fichero los datos y la cabecera.

Pasar la imagen a formato BMPPasar la imagen a formato BMP Guardarla en discoGuardarla en disco


Imprimir imagenImprimir imagen Leer la imagen (igual que antes)Leer la imagen (igual que antes) Mostrar la lista de impresorasMostrar la lista de impresoras

memset(&pd, 0, sizeof(pd));memset(&pd, 0, sizeof(pd));

pd.lStructSize = sizeof(pd);pd.lStructSize = sizeof(pd);pd.hwndOwner = padre;pd.hwndOwner = padre;pd.Flags = PD_RETURNDC;pd.Flags = PD_RETURNDC;pd.hInstance = NULL;pd.hInstance = NULL;

if (!PrintDlg(&pd))if (!PrintDlg(&pd))

return (0);return (0);

Colocar en la cola de impresiónColocar en la cola de impresión

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

Documents

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