tema 10 gr ficos planos n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Tema 10 Gráficos Planos PowerPoint Presentation
Download Presentation
Tema 10 Gráficos Planos

Loading in 2 Seconds...

play fullscreen
1 / 33

Tema 10 Gráficos Planos - PowerPoint PPT Presentation


  • 154 Views
  • Uploaded on

Tema 10 Gráficos Planos. Gonzalo Cascón Barbero Elena Jorge Rico. Introducción Mapas de bits Concepto Ejemplo Aplicaciones: Generación de caracteres y fuentes Imágenes Lectura, escritura y copia de píxeles. Introducción. Gráficos Planos =>Gráficos en 2D

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Tema 10 Gráficos Planos' - arlen


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
tema 10 gr ficos planos

Tema 10Gráficos Planos

Gonzalo Cascón Barbero

Elena Jorge Rico

slide2
Introducción
  • Mapas de bits
    • Concepto
    • Ejemplo
    • Aplicaciones: Generación de caracteres y fuentes
  • Imágenes
    • Lectura, escritura y copia de píxeles.
introducci n
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.
mapas de bits concepto
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.
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

/* 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.
mapas de bits ejemplo iii1
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.
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);

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

glFlush();

}

Mapas de bits: Ejemplo (IV)
aplicaciones generaci n de caracteres y fuentes
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.
generaci n de caracteres
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.

generaci n de fuentes i
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.
generaci n de fuentes ii
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.
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();
  • }
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 ();
  • }
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 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
im genes ii
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.
slide19
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
5 el pipeline de opengl
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.
5 el pipeline de opengl1
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.
5 el pipeline de opengl2
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
5 el pipeline de opengl3
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
6 lectura y dibujo de rect ngulos de p xeles
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.
6 lectura y dibujo de rect ngulos de p xeles1
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
7 formatos de imagen
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)
7 formatos de imagen bmp
7 Formatos de imagen (BMP)
  • BitMaP
  • Estructura:
    • Cabecera de archivo (BITMAPFILEHEADER).
    • Cabecera de información (BITMAPINFOHEADER).
    • Paleta (RGBQUAD).
    • Datos (BYTE).
7 formatos de imagen bmp1
7 Formatos de imagen (BMP)
  • Cabecera de Archivo:

typedef struct tagBITMAPFILEHEADER {

UINT bfType;

DWORD bfSize;

UINT bfReserved1;

UINT bfReserved2;

DWORD bfOffBits;

} BITMAPFILEHEADER;

7 formatos de imagen bmp2
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;

7 formatos de imagen bmp3
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.
8 manejo de ficheros bmp en opengl
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);

8 manejo de ficheros bmp en opengl1
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
8 manejo de ficheros bmp en opengl2
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