Curso de Graficación

UNIDAD 4. ILUMINACIÓN Y SOMBREADO

SOMBREADO.
Es una región de oscuridad donde la luz es obstaculizada. Una sombra ocupa todo el espacio detrás de un objeto opaco con una fuente de luz frente a él. La sección eficaz de una sombra es una silueta bidimensional una proyección invertida del objeto que aspira la luz.
Existen grados intermedios de sombra y luz entre las superficies completamente iluminadas y la completa oscuridad: la penumbra.
Imagen relacionada

ILUMINACIÓN.

La iluminancia o nivel de iluminación se define como el flujo luminoso que incide sobre una superficie. Su unidad de medida es el Lux.





4.1 Relleno De Polígonos.


Polígono es una figura básica dentro de las representaciones y tratamiento de imágenes bidimensionales y su utilización es muy interesante para modelar objetos del mundo real. 

En un sentido amplio, se define como una región del espacio delimitada por un conjunto de líneas (aristas) y cuyo interior puede estar rellenado por un color o patrón dado.

CASOS DE RELLENO SEGÚN SU COMPLEJIDAD.


El caso mas sencillo de relleno es el triángulo.

Luego sigue el relleno de polígonos convexos de N-lados.

Relleno de polígonos cóncavos.




MÉTODO DE RELLENO DE POLÍGONOS CON COLOR.

  • SCAN-LINE
  • INUNDACIÓN
  • FUERZA BRUTA
  • PATRÓN




SCAN-LINE.



Fila a fila van trazando lineas de color entre aristas.

para scan-line que cruce el polígono se busca en la intersección entre las líneas de barrido y las aristas del polígono.

Dichas intersecciones se ordenan y se rellenan a pares.






LINEA DE BARRIDO.

Es valido para polígonos cóncavos como convexos. Incluso para si el objeto tiene huecos interiores. 

Funcionan en el trozo de líneas horizontales, denominadas lineas de barridos, que intersectan un numero de veces, permitiendo a partir de ella identificar los puntos que se consideran interiores al polígono.



INUNDACIÓN.


Empieza en un interior y pinta hasta encontrar la frontera del objeto. 

Partimos de un punto inicial (x,y), un color de relleno y un color de frontera. 

El algoritmo va testeando los píxeles vecinos a los ya pintados, viendo si son frontera o no. 

No solo sirven para polígonos, sino para cualquier área curva para cualquier imagen AE se usan los programas de dibujo.





FUERZA BRUTA.

Calcula una caja contenedora del objeto. 

Hace un barrido interno de la caja para comprobar c/pixel este dentro del polígono. 

Con polígonos simétricos basta con que hagamos un solo barrido en una sección y replicar los demás pixeles. 

Requiere aritmética punto-flotante, esto lo hace preciso y costoso.






RELLENO MEDIANTE UN PATRÓN.



Un patrón viene definido por el área rectangular en el que cada punto tiene determinado color o nivel de gris. Este patrón debe repetirse de modo periódico dentro de la región a rellenar. Para ello debemos establecer una relación entre los puntos del patrón y los pixeles de la figura. En definitiva debemos determinar la situación inicial del patrón respecto a la figura de tal forma que podamos establecer una correspondencia entre los pixeles interiores al polígono y los puntos del patrón.



ALTERNATIVAS PARA LA SITUACIÓN INICIAL DEL PATRÓN.



Consiste en situar el punto asociado a la esquina superior izquierda del patrón en un vértice del polígono. 

Considerar la región a rellenar en toda la pantalla y por lo tanto el patrón se sitúa en el origen de esta (esquina superior izquierda).




4.2 MODELOS BÁSICOS DE ILUMINACIÓN.
Entendemos por modelo de iluminación el cálculo de la intensidad de cada punto de la escena. 

En el cálculo de la intensidad de un punto intervienen: 

El tipo e intensidad de la fuente de luz 

El material del objeto 

La orientación del objeto con respecto a la luz 

El modelo más utilizado es el modelo de Phong. 



PROCESO DE ILUMINACIÓN.

Si un rayo de luz entra al ojo directamente de la fuente, se verá el color de la fuente.

Si un rayo de luz pega en una superficie que es visible al observador, el color visto se basará en la interacción entre la fuente y el material de la superficie: se verá el color de la luz reflejado de la superficie a los ojos. 




En término de gráfica por computadora, se reemplaza el observador por el plano de proyección, como se ve en la siguiente figura:


El recorte del plano de proyección y su mapeo a la pantalla significa un número particular de pixeles de despliegue. 

El color de la fuente de luz y las superficies determina el color de uno o mas pixeles en el frame buffer.

Se debe considerar solo aquellos rayos que dejan las fuentes y llegan al ojo del observador, el COP, después de pasar por el rectángulo de recorte.

Cuando la luz da en una superficie, parte se absorbe, y parte se refleja.



INTERACCIONES ENTRE LUZ Y MATERIALES.


Superficies especulares

Superficies Difusas

Superficies difusas perfectas

Superficies translúcidas







FUENTES DE LUZ.

La luz puede dejar una superficie mediante dos procesos fundamentales: 


  • Emisión propia 
  • Reflexión 

Normalmente se piensa en una fuente de luz como un objeto que emite luz solo mediante fuentes de energía internas, sin embargo, una fuente de luz, como un foco, puede reflejar alguna luz incidente a esta del ambiente. 

Si se considera una fuente como en la siguiente figura, se le puede ver como un objeto con una superficie.




MODELO DE ILUMINACIÓN PHONG.


Es un modelo empírico simplificado para iluminar puntos de una escena 

Los resultados son muy buenos en la mayoría de las escenas 

En este modelo, los objetos no emiten luz, sólo reflejan la luz que les llega de las fuentes de luz o reflejada de otros objetos 

El modelo usa cuatro vectores para calcular el color para un punto arbitrario p sobre la superficie. 

Si la superficie es curva, los cuatro vectores pueden cambiar según se mueve de punto a punto.

1.El vector n es la normal en p. 

2.El vector v tiene dirección de p al observador o COP. 

3.El vector l tiene dirección de una línea de p a un punto arbitrario sobre la superficie para una fuente de luz distribuida, o una fuente de luz de punto. 

4.El vector r tiene la dirección de un rayo perfectamente reflejado de l. La dirección de r está determinada por n y l.



El modelo Phong apoya los tres tipos de interacciones material-luz: ambiente, difusa y especular. Si se tiene un conjunto de fuentes puntos, con componentes independientes para cada uno de los tres colores primarios para cada uno de los tres tipos de interacciones material- luz; entonces, se puede describir la matriz de iluminación para una fuente de luz i para cada punto p sobre una superficie, mediante:
La primera fila contiene las intensidades ambiente para rojo, verde y azul para la fuente i.

La segunda fila contiene los términos difusos.

La tercera fila contiene los términos especulares. (Aún no se ha aplicado ninguna atenuación por la distancia.)



Si se emplea solo reflexiones ambiente y difusas, las imágenes serán sombreadas y aparecerán tridimensionales, pero todas las superficies se verán sin vida. Lo que hace falta son la reflexión de secciones más brillantes en los objetos. Esto ocasiona un color diferente del color del ambiente reflejado y luz difusa. Una esfera roja, bajo luz blanca, tendrá un resplandecer blanco que es la reflexión de parte de la luz de la fuente en la dirección del observador. 

Mientras que una superficie difusa es rugosa, una superficie especular es suave. Mientras mas lisa se la superficie, mas se parece a un espejo, como se ve en la siguiente figura.




Según la superficie se hace mas lisa, la luz reflejada se concentra en un rango mas pequeño de ángulos, centrado alrededor del ángulo de un reflector perfecto: un espejo o una superficie especular perfecta. Modelar superficies especulares realísticas puede ser complejo, ya que el patrón por el cual se esparce no es simétrico, dependiendo de el largo de onda de la luz incidente y cambia con el ángulo de reflexión



Phong propuso un modelo aproximado que puede computarse con solo un pequeño incremento en el trabajo para superficies difusas. El modelo agrega un término para reflexión especular. Se considera la superficie como rugosa para el término difuso u lisa para el término especular. La cantidad de luz que el observador ve depende del ángulo ø entre r, la dirección de un reflector perfecto, y v, la dirección del observador. El modelo de Phong usa la ecuación: 



Is= ks Ls cosα φ                  0 ≤ ks ≤ 1


El modelo de Phong se ha hecho en espacio de objetos. El sombreado, sin embargo, no se hace hasta que los objetos hayan pasado por las transformaciones modelo-vista y proyección. Estas transformaciones pueden afectar los términos de coseno en el modelo.



4.3 TÉCNICAS DE SOMBREADO.

INTENSIDAD CONSTANTE.

En ciertas condiciones, un objeto con superficies planas puede sombrearse en forma realista utilizando intensidades de superficie constantes. en el caso donde una superficie se expone solamente a la luz ambiente y no se aplican diseños, texturas o sombras de superficie, el sombreado constante genera un a representación exacta de la superficie. 



Una superficie curva que se representa como un conjunto de superficies planas puede sombrearse con intensidades de superficie constante, si los planos se subdividen la superficie se hace lo suficientemente pequeños.



La siguiente figura muestra un objeto modelado con sombreado constante.


Con este método, la intensidad se calcula en un punto interior de cada plano y toda la superficie se sombrea con la intensidad calculada. cuando la orientación entre planos adyacentes cambia en forma abrupta, la diferencia en intensidades de superficie puede producir un efectos áspero o irreal. podemos alisar las discontinuidades de intensidad sobre cada superficie de acuerdo con algún esquema de interpolación.





SOMBREADO DE GOURAUD...

La figura demuestra este esquema de interpolación.
Este esquema de interpolación de intensidad, creado por gouraud, elimina discontinuidades en intensidades entre planos adyacentes de la representación de una superficie variando en forma lineal la intensidad sobre cada plano de manera que lo valores de la intensidad concuerden en las fronteras del plano. en este método los valores de la intensidad a lo largo de cada línea de rastreo que atraviesan una superficie se interpolan a partir de las intensidades en los puntos de intersección de con la superficie.


Este proceso se repite con cada línea que pasa por el polígono. en este método de interpolación primero deben aproximarse las normales a la superficie en cada vértice de un polígono. esto se logra promediando las normales a la superficie para cada polígono que contiene el punto de vértice, como se muestra en la siguiente figura. estos vectores normales de los vértices se utilizan entonces en el modelo de sombreado para generar los valores de intensidad de los vértices.


Un ejemplo de un objeto de sombreado con el método de Gouraud.



El sombreado de phong primero interpola los vectores normales en los puntos limite de una línea de rastreo. puede hacerse mejoras a los modelos de sombreado de gouraud determinando la normal aproximada a la superficie en cada punto a lo largo de una línea de rastreo y calculando después la intensidad mediante el uso del vector normal aproximado en ese punto. 







UNIDAD 5. INTRODUCCIÓN A LA ANIMACIÓN POR COMPUTADORA


La animación por computadora, es el formato donde se presenta información digital en movimiento a través de una secuencia de imágenes o cuadros creados o generados por computadora, se utiliza principalmente en videojuegos y películas.

Cabe destacar la diferencia entre video y animación. El video toma el movimiento continuo y lo descompone en cuadros, la animación parte de varias imágenes estáticas y las une para crear la ilusión de movimiento continuo.
Mientras más imágenes conformen una animación, esta será más real.

5.1. Historia, evolución y aplicación de la animación por computadora

Resultado de imagen para Historia, evolución y aplicación de la animación por computadoraLa animación por computadora, comenzó entre los 40s y 50s, con la creación de una serie de películas experimentales con un dispositivo creado a partir de una antigua computadora análoga llamada Predictor Kerrinson. Dicha computadora estaba conectada por servo motores para controlar el movimiento de las luces e iluminar objetos.
 Estos fueron los primeros ejercicios de control de fotografías en movimiento, realizados por John Whitney y su hermano James. Jhon fue un animador estadounidense, compositor e inventor, actualmente es conocido como el padre de la animación por computadora.

Resultado de imagen para primer escáner digital en 1957
Primera imagen digital


Entre sus orígenes se encuentra la generación del primer escáner digital en 1957, desarrollada por Russell Kirsch, era un escáner de tambor; el cual servía para medir las variaciones de intensidad en la superficie de una fotografía.

En 1963 Edward Zajac produjo una de las primeras películas generadas por computadora en los laboratorios Bell, titulada A Two Gyro Gravity y Ken Knowlton desarrolló el sistema de animación Beflix (Bell Flicks), el cual fue utilizado para producir decenas de películas.

En 1965, Michael Noll creó una película 3D con la técnica de proyección estereográfica y para 1967 utilizaba su técnica para crear secuencias de títulos del cortometraje Incredible Machine y el especial de television The Unexplained.

En 1968 un grupo de físicos y matemáticos soviéticos con Nikolai Konstantinov al mando crearon un modelo matemático para determinar el movimiento de un gato, obteniendo como resultado la solución a diversas ecuaciones.

Colin Emmett y Alan Kitching desarrollaron su primer sólido renderizado a un color en 1972, para la animación del título para el especial de televisión de la BBC The Burke Special.

Creación de Antics, primer software desarrollado para crear animaciones sin lenguaje de programación, hecho por Kitching en 1973.Tambien surgió el primer largometraje que utilizo procesamiento de imágenes digitales para la película Westwold, realizada por Michael Crichton
En 1980 surge "The brave little toaster", primera caricatura en ordenador, propuesta por Lasseter a Disney. Un año después se realizó la fundación de Silicon Graphics, Inc (SGI) en 1981 por Jim Clark, dedicada a la fabricación de equipos de cómputo de alto nivel y software. Crearon el Geometry Engine transformaciones matemáticas que daban lugar a un espacio 3D

Resultado de imagen para Paintbox 1981En 1981, Quantel lanzó el “Paintbox“, El primer sistema de animación para usuarios finales, diseñado para la creación y composición de contenidos gráficos y de video para la televisión.



Resultado de imagen para pixar 1986

En 1986 Steve Jobs compra la división de gráficos de PC de George Lucas y establece una empresa independiente llamada "Pixar". 



En 1989 James Cameron lanzó la película de acción submarina El Secreto del Abismo. Fue la primera película que incluyó CGI foto realista en sus escenas. 

En 1991 Disney y Pixar anuncian un acuerdo para producir "La bella y la bestia" a y "Jurassic Park" en 1993. 
Resultado de imagen para jurassic park 1993Resultado de imagen para la bella y la bestia 1991 dvd

Resultado de imagen para 1995 toy storyEn 1995 Pixar y Disney producen "Toy Story", dirigida por John Lasseter, en tres dimensiones, la cual marcó un hit en el uso de la tecnología CGI y el Sistema de Motion Control en las cámaras.
Resultado de imagen para toy story 2"Toy Story 2" se estrena en los cines en 1999, siendo la primera película en ser exhibida de forma digital, teniendo como director a Lasseter. Con una calidad técnica sorprendente, con gran cantidad de gráficos y fondos. Además de grandes colores y movimientos parte de sus personajes.
Resultado de imagen para los increibles


En el 2004 se da lugar el lanzamiento de la película "Los increíbles”. Donde se utilizó un nuevo software y la nueva tecnología “goo”. Disney y Pixar llegan al final de su contrato, por ello desaparece el 2D.

En 2008 se demuestra el alto nivel de animación y el avance de la tecnología que logra el cálculo de cada movimiento, de los personajes, en el largometraje: WALL.-E, en la escena del baile en el espacio entre EVE y WALL-E donde se mueven al ritmo de la música.

En 2011 sale la película “Cars 2" donde se aprecia el detalle que puede darse a las texturas y colores que emanan a través de la pantalla.
Resultado de imagen para cars 2

En 2012 parecen animaciones muy realista como se pude observar en el cortometraje de "Valiente" (Brave) de los directores Mark Andrews, Brenda Chapman & Steve Purcell.
Resultado de imagen para valiente

Actualmente existen numerosas tecnologías y técnicas que permiten dar animación de formas variadas con efectos sorprendentes. Podría decirse que su aplicación esta presente en todos los campos ya que se utilizan también en la enseñanza de diversas áreas.


5.2 Tipos de animación 2D

Animación 2D: En este tipo de animación sólo pueden moverse horizontalmente (movimientos hacia adelante y hacia atrás) y verticalmente (movimientos hacia arriba y hacia abajo). Los objetos son planos, como en una fotografía.

Tipos

5.2.1 Tweening

Es un término usado específicamente para las técnicas tradicionales de animación.


5.2.2 Morphing

En el morphing de imágenes se utilizan dos efectos básicos; la deformación de la imagen, redistribuyendo sus colores y formas, y el fundido de dos imágenes, pasando de forma continúa de una a otra. Ambos efectos parten de una descomposición del espacio de la imagen en una malla de triángulos. Para especificar un cambio continuo en la forma de la imagen basta con describir cómo varía la posición de los vértices de la malla de un instante de tiempo al instante posterior.
El morphing se produce automáticamente cuando se mueven los vértices sin alterar las coordenadas de textura originales.

5.2.3 Onion skinning

es una técnica de gráficación  2D utilizada en la creación de dibujos animados y películas de edición para ver varias imágenes a la vez. De esta manera, el animador o editor puede tomar decisiones sobre cómo crear o cambiar una imagen basada en la imagen anterior en la secuencia.


5.3 Tipos de animación 3D

Animación 3D: En este caso, los objetos también pueden moverse más cerca o más lejos de la persona que ve la animación. Tiene un nivel de calidad y detalle que lo vuelve muy cercano a las imágenes de la realidad, en algunos casos haciéndose imperceptible la diferencia entre la animación y un objeto real.

5.3.1 Cel-Shaded

Es un tipo de renderización no fotorrealista diseñada para hacer que los gráficos por computadora parezcan dibujados a mano. Las sombras planas se usan comúnmente para imitar el estilo de los cómics o dibujos animados.

5.3.2 Morph

En este caso no se trata de modificar una imagen sino la forma del objeto en tres dimensiones. Este cambio continuo puede utilizarse en animación para representar deformaciones o crear efectos visuales. Otro uso, más técnico, consiste en suavizar las transiciones entre diferentes representaciones de un mismo objeto cuando éstas tienen diferente nivel de detalle.

5.3.3 Skeletal

Se crea una representación simplificada del cuerpo del personaje, análogo a un esqueleto o a un stickman.  En personajes humanos y animales, muchas partes del modelo de esqueleto corresponden a la ubicación real de los huesos, pero la animación del modelo de esqueleto skeletal animation es también utilizada para animar otras cosas, como expresiones faciales.

5.3.4 Motion Capture

La captura de movimiento (del inglés motion capture, o motion tracking, también abreviada mocap) es una técnica de grabación de movimiento, en general de actores y de animales vivos, y el traslado de dicho movimiento a un modelo digital, realizado en imágenes de computadora.


Ejercicios de OPEN GL y WEB GL
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
using Tao.OpenGl;
using Tao.Platform;
namespace AprendeOpenGl
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            int height = simpleOpenGlControl1.Height;
            int width = simpleOpenGlControl1.Width;
            simpleOpenGlControl1.InitializeContexts();
            Gl.glViewport(0, 0, width, height);
            Gl.glMatrixMode(Gl.GL_PROJECTION);
            Gl.glLoadIdentity();
            Glu.gluPerspective(45.0f, (double)width / (double)height, 0.01f, 5000.0f);
        }
        double xrot, yrot, zrot = 0;
        private void simpleOpenGlControl1_Load(object sender, EventArgs e)
        {
        }
        private void Form1_Paint(object sender, PaintEventArgs e)
        {
            Gl.glClear(Gl.GL_COLOR_BUFFER_BIT | Gl.GL_DEPTH_BUFFER_BIT);
            Gl.glMatrixMode(Gl.GL_MODELVIEW);
            Gl.glLoadIdentity();
            Gl.glTranslated(0, 0, -4);
            Gl.glRotated(xrot += 0.5, 1, 0, 0);
            Gl.glRotated(yrot += 0.3, 0, 1, 0);
            Gl.glRotated(zrot += 0.2, 0, 0, 1);
            Gl.glBegin(Gl.GL_LINE_LOOP);
            Gl.glBegin(Gl.GL_TRIANGLE_FAN);
            Gl.glColor3ub(255, 0, 255);
            Gl.glVertex3d(-1.5, -1.5, -1.5);
            Gl.glVertex3d(-1.5, 1.5, -1.5);
            Gl.glVertex3d(1.5, 1.5, -1.5);
            Gl.glVertex3d(1.5, -1.5, -1.5);
            Gl.glEnd();
         
         
           
        }
    }
}

<DOCTYPE html>
<html>
<canvas width="100" height="200" id="my_canvas">
 </canvas>
 <canvas width="90" height="100"  id="my_canvas2">
 </canvas>
  <canvas width="80" height="90"  id="my_canvas3">
 </canvas>
  <canvas width="70" height="80"  id="my_canvas4">
 </canvas>
  <canvas width="60" height="70"  id="my_canvas5">
 </canvas>
 <script src="arc2.js">
</script>
 </html>
Bibliografía
Curso de Graficación 
Grupo 601 
Elaborado por: 
Mayra Cristina Martínez Padrón
Roberto Andrés Vega Cerón
Roldán Ávila Delgado
Jesús Nazareth Sánchez Ortega

Comentarios