Presenta los aspectos básicos de la introducción a la graficación por computadora

1. INTRODUCCIÓN A LA
GRAFICACIÓN POR
COMPUTADORA
Enero 2019
José Luis Gutiérrez García

2. CONCEPTUALIZACIÓN
• Los gráficos por computadora son la rama de la ciencia de la computación que
aplica tecnología informática a la producción y manipulación de representaciones
visuales. Con una amplia variedad de temas, incluyendo la presentación de
textos, la generación de gráficos y diagramas, el desarrollo de interfaces gráficas
de usuario, la manipulación de fotografías, la producción de video juegos y la
creación de películas animadas.

3. TABLA CRONOLÓGICA
• 1946 - ENIAC. Primera computadora de propósito general.

4. TABLA CRONOLÓGICA
• 1950 – CRT, tubo de rayos catódicos y lápiz óptico.

5. TABLA CRONOLÓGICA
• 1952 – OXO, uno de los primeros videojuegos.

6. TABLA CRONOLÓGICA
• 1961 – Spacewar.

7. TABLA CRONOLÓGICA
• 1963 – Sketchpad por Ivan Sutherland.

8. TABLA CRONOLÓGICA
• 1966 – The Sword of Damocles, primer sistema de realidad
virtual, así como desarrollo formal de las Interfaces Gráficas
de Usuario.

9. TABLA CRONOLÓGICA
• 1970 – Grupo de trabajo especializado en gráficos por computadora.Jim Clark,
posterior fundador de Silicon Graphics.

10. TABLA CRONOLÓGICA
• 1971 – Microprocesador.
• 1972 – Atari y videojuego Pong.

11. TABLA CRONOLÓGICA
• 1981 – Loren Carpenter ingresa a LucasFilm, y se crea la herramienta REYES (Render
Everything You Ever Saw).
• 1986 – Pixar, y la herramienta RenderMan.

12. TABLA CRONOLÓGICA
• 1992 – OpenGL.
• 1993 – Doom por ID Software.

13. TABLA CRONOLÓGICA
• 1995 – Toy Story. Play Station y Direct 3D.

14. TABLA CRONOLÓGICA
• 1997 – Primer acelerador gráfico, 3Dfx Voodoo 3D.

15. TABLA CRONOLÓGICA
• 1999 – Aparición del primer GPU (Graphics Processing Unit).Videojuego Final
Fantasy VIII.

16. TABLA CRONOLÓGICA
• 2001 – Película Final Fantasy:The Spirits Within.

17. TABLA CRONOLÓGICA
• 2003 – Shaders.“Física” en aplicaciones.

18. TABLA CRONOLÓGICA
• 2005 – GPUs en paralelo.

19. TABLA CRONOLÓGICA
• 2006 – GPGPU, General Purpose Graphic Processing Unit.

20. TABLA CRONOLÓGICA
• 2009 – Integración GPU y CPU.

21. TABLA CRONOLÓGICA
• 2010 – Interfaces de usuario “naturales”.

22. TABLA CRONOLÓGICA
• 2011 – Cloud processing.

23. TABLA CRONOLÓGICA
• 2012 – Realidad Aumentada.
• 2014 – Physically Based Rendering.

24. TABLA CRONOLÓGICA
• 2015. Dispositivos para Realidad Virtual

25. HISTORIA Y EVOLUCIÓN
https://www.youtube.com/watch?v=b29zPBz7VjM

26. LO QUE VIENE…
https://www.youtube.com/watch?v=MLvQMG8ypCw

27. ÁREAS DE APLICACIÓN
• Lo que te puedas imaginar, podrá ser realizado con gráficas por computadora.
• Obviamente Hollywood lo sabe muy bien. Cada año, nos asombramos por los nuevos
efectos especiales de las películas. Más y más de estas imágenes existen solamente
dentro de la memoria de una computadora. Parece que no tienen fin. Pero no solo se
está hablando de mega producciones de grandes presupuestos. Hay videos de
música, televisión, noticias, etc... La computación gráfica es ahora una parte
importante de la industria del entretenimiento.

28. ÁREAS DE APLICACIÓN
• Entretenimiento
• Películas, Efectos especiales, Juegos, etc.

29. ÁREAS DE APLICACIÓN

30. ÁREAS DE APLICACIÓN
• Ciencia e Ingeniería
• CAD/CAM,Visualización, Generación de imágenes médicas

31. ÁREAS DE APLICACIÓN

32. ÁREAS DE APLICACIÓN
• Entrenamiento y simulación

33. ÁREAS DE APLICACIÓN

34. ÁREAS DE APLICACIÓN
• Arte

35. ÁREAS DE APLICACIÓN
• Arquitectura, Música, Interfaces de usuario, Realidades Aumentada y Virtual,
Educación, etc.

36. ÁREAS DE APLICACIÓN

37. CASO DE ÉXITO
https://www.youtube.com/watch?v=tNnuLH2Zyo8

38. ACTIVIDAD
En equipo, desarrollar un vídeo demostrativo sobre la aplicación de la graficación por computadora en
cualquier área de la actividad humana. Considerar la rúbrica proporcionada para tal efecto.

39. MODELOS DE COLOR
Un modelo de color representa un
conjunto de colores primarios a partir
de los que, mezclándolos, se puede
conseguir cualquier color, cubriendo
así todo el espectro de color.

40. MODELO RGB
Este modelo es aditivo, y es
el mas usado ya que es el
que se utiliza en los
Monitores, el modelo RGB
define como colores
primarios el rojo, verde
y azul. La combinación de los
tres genera blanco y la
ausencia de los tres genera
negro. Las diferentes mezclas
entre ellos representarían
toda la gama de color. Los
grises se conseguirían con
intensidades medias, pero la
misma en los tres colores.
El modelo RBG se utiliza para
crear color mediante haces
de luz en monitores de PCs o
pantallas de TV. De modo
que un Pixel estará formado
por tres células (roja, verde y
azul), correspondiendo cada
una a un diodo LED, que
serán los encargados de
emitir luz a distintas
intensidades.

41. MODELO CMYK
Es un modelo sustractivo y se utiliza en impresión
a partir de tres colores básicos: C – Cian, M –
Magenta yY – Amarillo. La K representa el negro.
El añadir el color negro cuando lo podríamos
conseguir mezclando los tres anteriores, es
por conseguir una mayor pureza de negro y
también tema económico (la tinta negra suele ser
la mas gastada en las impresoras).

42. MODELO HSV Y HSL
HSB es sinónimo de Tono, Saturación, Brillo. Utiliza tres características
fundamentales de los colores en su definición:
• El matiz es el color real y su valor oscila entre 0° y 360°. Cada grado
representa un color distinto.
• La saturación representa la pureza del color, su valor oscila entre 0% y 100%,
0 seria gris y 100 seria color puro.
• Con el brillo se puede medir la cantidad de blanco que contiene un
color. En HSV será por Valor y en HSL será por Luminosidad, y estos valores
de brillo van del 0% al 100%. Cuanto más cerca de 0, más brillante será el
color, cuanto más cerca de 100, más oscuro.

43. ACTIVIDAD
En equipo, desarrollar una aplicación que permita la demostración de los modelos de colores expuestos
anteriormente. Considerar la rúbrica proporcionada para tal efecto.

44. REPRESENTACIÓN Y TRAZO DE LÍNEAS Y
POLÍGONOS
• LÍNEA
• Una línea es una sucesión continua de puntos (trazado), como por ejemplo un trazo o un guion. Las
líneas suelen utilizarse en la composición artística, se denomina en cambio «raya» a trazos rectos
sueltos, que no forman una figura o forma en particular.
• SEGMENTO
• Para mostrar la línea en un monitor digital, el sistema gráfico debe primero proyectar las coordenadas
de los extremos para obtener coordenadas de pantalla de valor entero y determinar las posiciones de
píxel más próximas a lo largo de la línea que conecta los dos extremos. Entonces, se cargará en el búfer
de imagen el color correspondiente a la línea en las coordenadas de píxel apropiadas, Al leer los datos
del búfer de imagen, el controlador de vídeo dibujará los píxeles en pantalla.

45. REPRESENTACIÓN Y TRAZO DE LÍNEAS Y
POLÍGONOS
• POLÍGONO
• Polígono es la superficie plana encerrada dentro de un contorno formado por segmentos
rectos unidos en sus extremos.
• Cada uno de los segmentos se denomina lado.
• El punto de unión de cada par de segmentos se denomina ángulo.
• El numero de lados, ( y por tanto de ángulos) ha de ser mayor o igual a tres.
• Los elementos que los componen son:
• Lados: Son los segmentos que lo limitan.
• Vértices: Son los puntos donde concurren dos lados.
• Ángulos interiores de un polígono: Son los determinados por dos lados consecutivos.
• Diagonal

46. REPRESENTACIÓN Y TRAZO DE LÍNEAS Y
POLÍGONOS
• OpenGL tiene únicamente unas pocas primitivas geométricas: puntos, líneas,
polígonos. Todas ellas se describen en términos de sus respectivos vértices. Un
vértice está caracterizado por 2 o 3 números en coma flotante, las coordenadas
cartesianas del vértice, (x, y) en 2D y (x, y, z) en 3D.
• Las definiciones de primitivas poligonales en OpenGL se encierran entre las
llamadas a las funciones:
• glBegin(GLEnum tipo_primitiva) y
• glEnd(void).
• Entre dichas funciones deberemos especificar la lista de vértices que componen
nuestro polígono. La función para pasar las coordenadas de cada vértice es:
• glVertex3fv(GLFloat *coor)
• donde ‘coor’ es un vector que contiene las tres coordenadas del vértice.

47. REPRESENTACIÓN Y TRAZO DE LÍNEAS Y
POLÍGONOS
Los valores normales para el tipo de primitiva son las constantes:
Valor de la Cte GL Tipo de Primitiva Poligonal
• GL_POINTS Puntos aislados
• GL_LINES Líneas de dos vértices
• GL_LINE_STRIP Línea de cualquier numero de vértices
• GL_LINE_LOOP Línea Cerrada.
• GL_POLYGON Polígono de Cualquier tipo
• GL_TRIANGLES Polígonos de tres lados
• GL_TRIANGLE_STRIP Tira de Triangulos
• GL_QUADS Polígonos de cuatro vertices
• GL_QUAD_STRIP Tira de Cuadrilateros.
• GL_TRIANGLE_FAN Abanico de triangulos.

48. ACTIVIDAD
Desarrollar programas gráficos con OpenGL que empleen las primitivas gráficas mencionadas. Considerar
la rúbrica proporcionada para tal efecto.

49. FORMATOS GRÁFICOS DE
ALMACENAMIENTO
El almacenamiento de los datos que componen una imagen digital en un archivo
binario puede realizarse utilizando diferentes formatos gráficos, cada uno de los
cuales ofrece diferentes posibilidades con respecto a la resolución de la imagen,
la gama de colores, la compatibilidad, la rapidez de carga, etc.
La finalidad última de un formato gráfico es almacenar una imagen buscando un
equilibrio adecuado entre calidad,peso final del fichero y compatibilidad entre
plataformas.Para ello, cada formato se basa en una o más técnicas diferentes, que
pueden incluir codificación especial, métodos de compresión, etc.

50. FORMATOS GRÁFICOS DE
ALMACENAMIENTO
Existen dos categorías principales de imágenes: las imágenes de mapa de bits y
las imágenes vectoriales.
• Las imágenes de mapa de bits (también denominadas imágenes raster) son imágenes
pixeladas, es decir que están formadas por un conjunto de puntos (píxeles) contenidos en
una tabla. Cada uno de estos puntos tiene un valor o más que describe su color.
• Las imágenes vectoriales son representaciones de entidades geométricas tales como
círculos, rectángulos o segmentos. Están representadas por fórmulas matemáticas (un
rectángulo está definido por dos puntos; un círculo, por un centro y un radio; una curva,
por varios puntos y una ecuación). El procesador "traducirá" estas formas en información
que la tarjeta gráfica pueda interpretar.

51. FORMATOS GRÁFICOS DE
ALMACENAMIENTO
• Formatos de Mapas de Bits
BMP: (contracción de bitmap) Creado por Microsoft, es el formato nativo para gráficos bitmap en Windows. No utiliza
compresión, por lo tanto almacena la información de la imagen de manera ineficiente pero exacta.
GIF: (Graphics Interchange Format) Formato bitmap propietario, creado por Unisys, muy popular y adecuado para el
almacenamiento de imágenes con pocos colores, como logotipos, títulos o fotos sencillas. Otra ventaja del formato GIF
es que puede almacenar varias imágenes en un solo archivo.
JPEG: (Joint Photographic Experts Group) Formato creado por el comité del mismo nombre que permite la
compresión de imágenes fotográficas a una gran profundidad de colores. Como extensión del nombre de archivo se
usa, indistintamente, JPG o JPEG (a veces JPE).
PNG: (Portable Network Graphics) Formato de archivo abierto. Ofrece transparencia variable (alpha channels),
corrección de gamma (control de brillo entre diferentes plataformas) y un grado ligeramente mayor de compresión
que el GIF.

52. FORMATOS GRÁFICOS DE
ALMACENAMIENTO
• Formatos de Gráficos Vectoriales
• CDR: es un ejemplo claro de formato orientado al diseño. Este sistema, que coincide con la extensión de sus ficheros,
pertenece a la empresa Corel y está desarrollado para una aplicación específica: CorelDraw.
• DRW: desarrollado por Micrografx y orientado al diseño. Fue creado para una su uso con el programa Micrografx
Designer.
• DWF (drawing web format): se trata de un formato de 32 bits para imágenes en dos dimensiones. Permite a sus usuarios
realizar zooms de forma dinámica, sin necesidad de esperar a cargar completamente la imagen del servidor. El software
de desarrollo de esta tecnología incluye librerías de enlace dinámico y el plug-in Whip! para facilitar la introducción de
imágenes en páginas html.
• EPS: de la empresa Adobe Systems. Muy popular. Todo el mundo ha necesitado alguna vez imprimir imágenes
"encapsulated Postscript".
• PPT: usado en el programa de presentaciones PowerPoint de Microsoft (otras aplicaciones del mismo tipo, como es el
caso de Freelance Graphics o Harvard Graphics, utilizan también formatos propietarios).
• DXF (drawing interchange format): desarrollado para el programa de diseño asistido por ordenador más famoso del
mercado, AutoCAD. Es uno de los formatos para gráficos vectoriales más versátiles que existen, ya que además de
almacenar el gráfico, que puede ser tridimensional, puede incluir información variada sobre el mismo.

53. ACTIVIDAD
Desarrollar programas gráficos con OpenGL que permitan la manipulación de imágenes. Considerar la
rúbrica proporcionada para tal efecto.

54. BIBLIOGRAFÍA