Course-Graphics

Multimedia y computacion grafica

Pagina Principal Mauricio Emilio Gomez Sanabria

Contenido del curso teorico

Información de ultimo momento de esta materia 2007 primer semestre

PROGRAMA ANALÍTICO INGENIERIA DE SISTEMAS

I. IDENTIFICACIÓN DE LA ASIGNATURA

NOMBRE DE LA ASIGNATURA: Multimedia y Computación Grafica

NUMERO DE CRÉDITOS: 3

INTENSIDAD HORARIA: 4 Horas

II. OBJETIVO GENERAL DE LA ASIGNATURA.

El decremento de los costos del hardware y el dramático aumento del poder computacional de las máquinas actuales han hecho posible el desarrollo de aplicaciones gráficas los cuales incluyen aspectos de multimedia antes inimaginables. Estas nuevas tecnologías han facilitado significativamente a los usuarios comunes acceder y utilizar un gran número de recursos disponibles en la Web y a las compañías desarrollar estrategias para implementar el comercio electrónico. Estos usuarios esperan que las aplicaciones comerciales ofrezcan unas interfaces amigables y entretenidas que incluyan aspectos multimediales para mantener su interés. Estos cambios culturales, tecnológicos y comerciales hacen indispensable que los desarrolladores de nuevas aplicaciones conozcan los principios, técnicas y herramientas multimediales para su éxito profesional en el área de desarrollo del software.

III. COMPETENCIAS RELACIONADAS CON LA ASIGNATURA

Los estudiantes al finalizar la materia podrán realizar las siguientes tareas:

Ofrecer críticas constructivas sobre interfaces gráficas y de multimedia basadas en el entendimiento de los principios del diseño de interfaces gráficas.

Aplicar los principios fundamentales para desarrollar sistemas gráficos 3D y de multimedia, donde adicionalmente se aplicaran conceptos de tipo algorítmico para la solución de problemas mediante aplicaciones graficas.

Utilizar las herramientas disponibles para desarrollar sistemas gráficos y de multimedia.

IV. RELACIÓN DE NÚCLEOS TEMÁTICOS

Semana 0. Introducción al curso. Demostracion de las investigaciones realiazadas hasta la fecha.

Semana 1. Introducción a la Programación grafica tridimensional en tiempo real Conceptos Basicos

Historia de la computacion grafica, vocabulario basico.

Semana 2. Algoritmos Raster, trazado de lineas, Algoritmo de Bresenham.

Semana 3. Programación grafica tridimensional en tiempo real primera parte - OpenGL.

Modelado convencional, Conceptos Basicos 2D/3D y Transformaciones 2D/3D.

Semana 4. Programación grafica tridimensional en tiempo real Segunda parte - OpenGL.

Ejercicios de glPushMatrix y glPopMatrix

Semana 5. Transformaciones y Visualizacion, desde coordenadas del mundo a pantalla.

Semana 6. Iluminacion.

Semana 7. Texturas

Semana 8. Teoria del color

Semana 9. Fractales, Pisos, Terrenos.

Semana 10. Sombras.

Semana 11. Piel.

Semana 12. Oclusion Ambiental.

Semana 13. Cinematica - Shaders.

Semana 14. Tecnicas de Nivel de Detalle.

Semana 1: Conceptos Basicos en multimedia y Computacion Grafica

http://www.sromero.org/articulos/gfx/graf1.html (Sin embargo en mi disco duro guardo una copia completa de esta pagina por si desaparece).

Para tener un acercamiento al mundo de los video juegos les recomiendo ver el contenido de un curso en el siguiente link.

http://rudomin.cem.itesm.mx/~rudomin/Isaac%20Rudomin_files/cursos_files/clasevideo/index.html

A manera de resumen y obteniendo la mayor parte de esta informacion de diversos lugares en internet incluyendo el anterior resumo:

Hardware:

Modos alfanuméricos: (modos de texto), la pantalla está dividida en una serie de celdillas donde sólo cabe un carácter 80x25

Pixel: abreviación del término inglés PEL -picture element representa la unidad mínima capaz de ser representada por el monitor en esa resolución.

Resolucióncantidad de pixels que caben en la pantalla tanto a lo ancho (640 en este caso) como a lo alto (480), Queda claro pués que a mayor resolución, como el tamaño del monitor es siempre el mismo, los puntos serán más pequeños y conseguiremos una mayor calidad gráfica

Coordenadas de pantalla: una posición específica (por ejemplo: un punto), consisten en dos números que indican una posición respecto a las coordenadas <0,0> (parte superior izquierda de la pantalla).

Modos gráficos: Cada modo gráfico se caracteriza por su resolución y su número de colores 800x600x256 SVGA

Paleta: conjunto de colores que posee un modo gráfico (2, 16, 256, 32.000 ó 16 millones

evolucion:

1981 MDA, Monochrome Display Adapter 40x25, 80x25

1981 CGA, Color Graphics Array 320x200x4 o 640x200x2

MCGA MultiColor Graphics Array CGA y 640x480 con 2 colores mas

1984 EGA Enhaced Graphics Adapter adaptador de gráficos mejorado supuso en 1984 la adición de modos de video de 16 colores

VGA 640x480 a 16 colores y funcionando con cualquier tipo de monitor (analógicos, multifrecuencia, estándar, etc...

SVGA Super VGA programación mediante el estandar VESA

24 bits por pixel o 24bpp 256*256*256 colores=16.777.216 3 bytes

Igual pero con 4 bytes = dword ignorando el bit mas significativo necesita mas memoria pero un incremento notable en velocidad ya que resulta más rápido escribir 4 dword que 1 byte, 1 word, o (especialmente) 3 bytes. El formato de estos 4 bytes es NADA:R:G:B

Algoritmo de linea DDA (Digital Differential Analizer)

Shader: un shader es "todo lo que no es geometria", mas o menos, las luces, los materiales, las texturas, las camaras, son shaders de distinto tipo, pero tambien puede haber shaders que te generen geometria, o efectos, que te devuelvan distancias, o que deformen la geometria.

En el modelado 3D el shader es un algoritmo que especifica como una superficie responde ante la luz en definitiva es una funcion que aplicada a una geometria o a una transformacion, modifica la apariencia.

Un mapa y un material son shaders, solo que el material calcula la salida de color dependiendo de factores como las luces y el punto de vista entre otros , mientras que el mapa solo lo calcula dependiendo de las coordenadas uv del objeto, o de la posicion en el espacio del punto a renderizar, ya sea un mapa 3d o un mapa 2d por proyecccion.

Todo esto de la realidad virtual comenzó a finales de los 70´s como material para una clase de aviación en el departamento de defensa de los Estados Unidos, para hacer simulaciones de vuelo, practicando y no arriesgando vidas.

Después de esto en 1982 Scott Fisher considerado uno de los "Padres Fundadores" de la realidad virtual y en 1985él creo el VISIOCASO más avanzado en la Nasa Ames Center, Por todas partes empiezan a surgir equipos de desarrollo trabajando en lo que era la tecnología de la realidad virtual, y se empiezan a ver los primeros resultados comerciales

1980: La Compañía StereoGraphics hace las gafas de visión estéreo.

1982: Thomas Zimmerman patenta un Electroguante que invento mientras investigaba sobre como controlar con la mano un instrumento musical virtual.

1987: La compañía Inglesa Dimensión Internacional desarrolla un Software de construcción de mundos tridimensionales sobre P.C.

1988: Scott Foster inventa un dispositivo para la generación de sonido tridimensional.

1989: ATARI saca al mercado la primera maquina de galería de vídeo juegos con tecnología 3D. En ese mismo año Autodesk presenta su primer sistema de realidad virtual para P.C.

A partir de aquí entramos de lleno a la carrera comercial lossistemas de realidad virtual comienzan a popularizarse y muchos productos empiezan a invadir el mercado, en forma paralela se crea un cierto movimiento cultural conocido como el Cyberpunk. La estética y la temática del cyberpunk han llegado en los últimos años a la televisión y al cine, quizás los mejores ejemplos son "El hombre del jardín" y "Blade Runer"

Redibujando la pantalla

VideoRAM en modo DOS int 13h arreglo de 320*200 de 64000 pixeles donde cada 320 se representa una linea y en modo de 8 bits por pixel.

Software:

Ver la excelente introduccion de la catedra 2 en http://www.dcc.uchile.cl/~cc52b/

Semana 2:

Para este tema lo mejor es tomar como punto de referencia las excelentes catedras 3 y 4 de http://www.dcc.uchile.cl/~cc52b/ y de igual forma en http://cannes.itam.mx/Alfredo/Espaniol/Cursos/Grafica/Grafica.htm leer el documento de linea.pdf correspondiente a la semana 16 sobre implementacion. Cabe anotar que en la materia planteada para este curso va un poco mas rapido y menos detallado que los cursos de la Profesora Chilena Maria-Cecilia Rivara o que del doctor Mexicano Dr. Alfredo Weitzenfeld por el hecho de enfocar las dos materias al 3D y la Realidad Virtual con el animo de contruir en el menor tiempo posible un juego interactivo tridimensional.

Los links recomendados para este tema son:

http://cannes.itam.mx/Alfredo/Espaniol/Cursos/Grafica/Grafica.htm

http://www.dcc.uchile.cl/~cc52b/

http://www.cgw.com/ME2/Default.asp

Semana 3:

No se diga mas, el tema para esta clase es

Rotaciones, translaciones, escalaciones, Push matrix y pop matrix en opengl y para eso les recomiendo:

http://www.salle.url.edu/~oscarg/resources/openGLTutorialSpanish.pdf#search=%22programacion%20grafica%20tridimensional%22

Semana 4:

Seguimos con el mismo documento, haciendo ejercicios, en el dia de hoy se generara un sistema solar y un robot, o por lo menos la parte superior.

Tambien este tema se puede complementar de

http://www.dcc.uchile.cl/%7Ecc52b/Apuntes/Clase08-Transformaciones3D.pdf

Semana 5:

Basado en el Libro de Lee Adams, se explicara como se pasa de coordenadas del objeto y coordenadas universales(o coordenadas del mundo) a coordenadas de la camara, luego a coordenadas del plano de imagen para llegar finalmente a coordenadas de pantalla.

"Las coordenadas del objeto son valores xyz que describen la forma fundamental de un objeto en 3D. Las coordenadas universales o coordenadas del mundo son valores xyz que describirían el objeto si se colocara en una determinada posición y rotación en un entorno simulado en 3D. Estas coordenadas se llaman coordenadas del mundo ya que el entorno en 3D se llama frecuentemente mundo 3D"

"Las coordenadas de la cámara son valores xyz que describen cómo debería aparecer un objeto en 3D para un observador en una posición específica en un entonrno en 3D. La posición de la mámara se llama punto de vista."

"Las coordenadas del plano de imagen refieren los valores xy que se producirían si se colocara una imagen plana bidimendsional entre la cámara y el objeto en 3D. Se puede visualizar la imagen plana como un pequeño cristal que se coloca entre usted y el objeto en 3D que se está inspeccionando."

"Las coordenadas de la pantalla son las coordenadas xy del área de trabajo de la ventaja principal de la aplicación. Las coordenadas de pantalla, también llamadas coordenadas de visualización, son el resultado de escalar las coordenadas del plano de la imagen para que se ajusten al puerto de visualización rectangular de la pantalla. En programación 3D en windows, ese puerto de visualización rectangular es normalmente la ventana principal de la aplicación. El cáculo de cada conjunto de coordenadas en un ciclo de transformación en 3D implica el uso de fórmulas, con senos y cosenos, derivadas de una matriz matemática." Como ampliación de estas definiciones no esta por demas decir que las coordenadas de pantalla son numeros enteros ya que son la representación de pixeles en pantalla.

Tambien se explicara en esta Semana 5 lo referente a tipos de proyecciones utilizadas en OpenGL, como lo son la proyección ortográfica, y la proyección perspectiva, y finalmente se explicara como utilizar estas funciones en OpenGL.

Proyección Ortográfica: Refierase al numeral 4.2 de http://www.salle.url.edu/%7Eoscarg/resources/openGLTutorialSpanish.pdf#search=%22programacion%20grafica%20tridimensional%22%20

Proyección Perspectiva: Refierase al numeral 4.3 de http://www.salle.url.edu/%7Eoscarg/resources/openGLTutorialSpanish.pdf#search=%22programacion%20grafica%20tridimensional%22%20

Tambien este tema se puede complementar de:

http://www.dcc.uchile.cl/%7Ecc52b/Apuntes/Clase09-Proyeccion3D.pdf

Semana 6:

Luz, Iluminación: en este link puede bajar un tutor grafico para entender las nociones basicas de espectrometria 2.5Megas

En esta semana se estudia la naturaleza de la luz, el espectro electromagnetico,

Cuadro resumen tomado de: http://www.unicrom.com/Tel_espectroelectromagnetico.asp

Las ondas de radiofrecuencia

Sus frecuencias van de 0 a 10⁹ Hz, se usan en los sistemas de radio y televisión y se generan mediante circuitos oscilantes.

Las ondas de radiofrecuencia y las microondas son especialmente útiles por que en esta pequeña región del espectro las señales producidas pueden penetrar las nubes, la niebla y las paredes. Estas son las frecuencias que se usan para las comunicaciones vía satélite y entre teléfonos móviles. Organizaciones internacionales y los gobiernos elaboran normas para decidir que intervalos de frecuencias se usan para distintas actividades: entretenimiento, servicios públicos, defensa, etc.

En la figura, se representa la región de radiofrecuencia en dos escalas: logarítmica y lineal. La región denominada AM comprende el intervalo de 530 kHz a 1600 kHz, y la región denominada FM de 88 MHz a 108 MHz. La región FM permite a las emisoras proporcionar una excelente calidad de sonido debido a la naturaleza de la modulación en frecuencia.

Las microondas

se usan en el radar y otros sistemas de comunicación, así como en el análisis de detalles muy finos de la estructura atómica y molecular. Se generan mediante dispositivos electrónicos.

La radiación infrarroja

Se subdivide en tres regiones, infrarrojo lejano, medio y cercano. Los cuerpos calientes producen radiación infrarroja y tienen muchas aplicaciones en la industria, medicina, astronomía, etc.

La luz visible

Es una región muy estrecha pero la más importante, ya que nuestra retina es sensible a las radiaciones de estas frecuencias. A su vez, se subdivide en seis intervalos que definen los colores básicos (rojo, naranja, amarillo, verde, azul y violeta).

Radiación ultravioleta

Los átomos y moléculas sometidos a descargas eléctricas producen este tipo de radiación. No debemos de olvidar que la radiación ultravioleta es la componente principal de la radiación solar.

La energía de los fotones de la radiación ultravioleta es del orden de la energía de activación de muchas reacciones químicas lo que explica muchos de sus efectos.

El oxígeno se disocia en la ozonosfera por la acción de la radiación ultravioleta. Una molécula de oxígeno absorbe radiación de longitudes de onda en el intervalo entre 1600 Å y 2400 Å (o fotones de energía comprendida entre 7.8 eV y 5.2 eV) y se disocia en dos átomos de oxígeno.

O₂+fotón→O+O

El oxígeno atómico producido se combina con el oxígeno molecular para formar ozono, O₃, que a su vez se disocia fotoquímicamente por absorción de la radiación ultravioleta de longitud de onda comprendida entre 2400 Å y 3600 Å (o fotones de energía entre 5.2 eV y 3.4 eV).

O₃+fotón→O+O₂

Estas dos reacciones absorben prácticamente toda radiación ultravioleta que viene del Sol por lo que solamente llega una pequeña fracción a la superficie de la Tierra. Si desapareciese de la capa de ozono, la radiación ultravioleta destruiría muchos organismos a causa de las reacciones fotoquímicas.

La radiación ultravioleta y rayos X producidos por el Sol interactúa con los átomos y moléculas presentes en la alta atmósfera produciendo gran cantidad de iones y electrones libres (alrededor de 10¹¹ por m³). La región de la atmósfera situada a unos 80 km de altura se denomina por este motivo ionosfera.

Algunas de las reacciones que ocurren más frecuentemente son:

• NO+fotón→NO⁺+e (5.3 eV)
• N₂+fotón→N₂⁺+e (7.4 eV)
• O₂+fotón→O₂⁺+e (5.1 eV)
• He+fotón→He⁺+e (24.6 eV)

Entre paréntesis se indica la energía de ionización. Como resultado de esta ionización tienen lugar muchas reacciones secundarias.

Rayos X

Si se aceleran electrones y luego, se hacen chocar con una placa metálica, la radiación de frenado produce rayos X. Los rayos X se han utilizado en medicina desde el mismo momento en que los descubrió Röntgen debido a que los huesos absorben mucho más radiación que los tejidos blandos. Debido a la gran energía de los fotones de los rayos X son muy peligrosos para los organismos vivos.

Rayos gamma

se producen en los procesos nucleares, por ejemplo, cuando se desintegran las sustancias radioactivas. Es también un componente de la radiación cósmica y tienen especial interés en astrofísica. La enorme energía de los fotones gamma los hace especialmente útiles para destruir células cancerosas. Pero son también peligrosos para los tejidos sanos por lo que la manipulación de rayos gamma requiere de un buen blindaje de protección.

Tomado de http://www.sc.ehu.es/sbweb/fisica/cuantica/negro/espectro/espectro.htm

Detalle sobre el espectro de luz visible:

La luz, al igual que el sonido, es una combinación de "tonos" de diferente frecuencia. Se puede decir que los tonos es al sonido lo que los colores es la luz. La luz es entonces una combinación de colores (cada color de diferente frecuencia y longitud de onda).

La luz blanca es una mezcla de rayos de luz combinados. Cada uno de estos rayos tiene su propia longitud de onda, y es la variación de esta longitud de onda la que permite obtener todos los colores posibles.

Se pueden ver los colores del arco iris, que es la luz blanca que viene del sol y es separada por las gotas de lluvia a modo de prisma.

A veces cuando se comparan dos fuentes de luz blanca, se nota que no son exactamente iguales. Esta diferencia se explica en que cada fuente de luz tiene una combinación diferente de tonos de color. Algunas luces blancas son más amarillentas o azuladas que otras y esto se debe a que en la combinación de colores predomina más uno de ellos.

La longitud de onda se expresa de la siguiente manera: λ = c / f

donde:

- λ = longitud de onda de la luz

- c = velocidad de la luz en el espacio (300,000 Km./seg)

- f = frecuencia

La luz se puede dividir en tres categorías:

Notas:

1μm = 10-6 metros (m)

1A° = 10-10 metros (m)

1μm = 10,000 A°

El ojo humano tiene una capacidad limitada y no es capaz de ver luz de longitudes de onda mayores a la de la luz ultravioleta (UV), ni menores a la de la luz infrarroja.

Tomado de: http://www.unicrom.com/Tut_estruct_luz.asp

Entrando mas en el detalle concerniente a la programación grafica tocaremos los conceptos referentes a reflexión y refracción de la luz, para lo cual las definiciones de la wikipedia son excelentes:

Refracción

La refracción es el cambio de dirección que experimenta una onda al pasar de un medio a otro. Sólo se produce si la onda incide oblicuamente sobre la superficie de separación de los dos medios y si éstos tienen índices de refracción distintos. La refracción se origina en el cambio de velocidad que experimenta la onda. El índice de refracción es precisamente la relación entre la velocidad de la onda en un medio de referencia (el vacío para las ondas electromagnéticas) y su velocidad en el medio de que se trate.

Un ejemplo de este fenómeno se ve cuando se sumerge un lápiz en un vaso con agua: el lápiz parece quebrado.

También se produce cuando la luz atraviesa capas de aire a distinta temperatura, de la que depende el índice de refracción. Los espejismos son producidos un caso extremo de refracción, denominado reflexión total.

Reflexión:

En Óptica se refiere al fenómeno por el cual un rayo de luz que incide sobre una superficie es reflejado. El ángulo con la normal a esa superficie que forman los rayos incidente y reflejado son iguales. Se produce también un fenómeno de absorción diferencial en la superficie, por el cual la energía y espectro del rayo reflejado no coinciden con la del incidente.

Difracción

En física, la difracción es un fenómeno característico de las ondas que consiste en la dispersión y curvado aparente de las ondas cuando encuentran un obstáculo. La difracción ocurre en todo tipo de ondas, desde ondas sonoras, ondas en la superficie de un fluido y ondas electromagnéticas como la luz y las ondas de radio. También sucede cuando un grupo de ondas de tamaño finito se propaga; por ejemplo, por culpa de la difracción, un haz angosto de ondas de luz de un láser deben finalmente diverger en un rayo más amplio a una distancia suficiente del emisor.

Quedan pendientes algunos conceptos de espectrometria de absorción atómica y de emisión atómica.

Ahora que conocemos la naturaleza de la luz podemos entrar en el campo de la programación grafica:

Rendering: conjunto de técnicas creadas con el fin de colorear los objetos, reproducir el comportamiento de la luz del mundo real y obtener un mayor realismo. Principalmente interviene dos variables, la fuente de luz y las propiedades ópticas de los objetos.

Cada fuente de luz está definida por el color la intensidad y la localización/dirección, tambien pueden ser de tipo puntual y orientada

Las propiedades ópticas del objeto establecen, color, y reflexión que puede ser difusa: en todas las direcciones o especular: en una dirección

la refracción (opacidad/transparencia) puede ser difusa: en todas direcciones y especular: en una dirección, a esto tambien hay que sumarle la textura.

Un objeto es visible gracias a la luz que refleja, y el color del objeto dependerá del largo de onda que es reflejada.

Existen fuentes direccionales y puntuales: Las fuentes direccionales estan ubicadas en el infinito, emiten la luz de manera uniforme y estan definidas por:

– Una dirección (sx, sy, sz)

– Un color (RGB)

– Una intensidad

Las fuentes puntuales estan ubicadas en un punto del espacio, y emiten luz de manera uniforme y en todas direcciones. Estan definidas por:

– Una posición en el espacio (sx, sy, sz)

– Un color (RGB)

– Una intensidad

Tipo de luz Spot

• Spot: fuente que simula la emisión de haz luminoso de forma cónica

• Esta definida por

– Una posición s = (sx, sy, sz)

– Una dirección d = (dx, dy, dz)

– Un color (RGB)

– Una ángulo de abertura (f)

– Una intensidad

Tomado de: http://www.dcc.uchile.cl/%7Ecc52b/ Ver capitulo 11.

Bibliografia WEB:

http://es.wikipedia.org/wiki/Espectro_electromagn%C3%A9tico

http://es.wikipedia.org/wiki/Onda_electromagn%C3%A9tica

http://es.wikipedia.org/wiki/Radiaci%C3%B3n_electromagn%C3%A9tica

http://cannes.itam.mx/Alfredo/Espaniol/Cursos/Grafica/Sombreado.pdf

En este tema se habla sobre el espectro electromagnetico , espectrometria de emisión y espectrometria de absorcion, reflexion, refracción, modelo de luz (como onda y como particula)

Semana 7:

http://pgrafica.webideas4all.com/textura.html