Está en la página 1de 50

Programando

grficos

El tringulo de Sierpinski
Es una forma interesante que tiene
especial inters en reas como la
geometra. Es un objeto que puede ser
definido recursivamente y
aleatoriamente.
Suponiendo que tenemos tres puntos en
el espacio y que no son colineales,
tendremos los vrtices de un nico
tringulo y tambin un nico plano.
Asumimos que este plano est en el
plano z=0 y que estos puntos son
(x1,y1,0), (x2,y2,0) y (x3,y3,0)

Las construccin procede de la


siguiente forma:
1. Tomar un punto nico p=(x,y,0)
aleatorio dentro del tringulo.
2. Seleccionamos uno de los tres
vrtices aleatoriamente.
3. Encontramos el punto q a la
mitad entre p y el vrtice
seleccionado aletoriamente.
4. Mostramos q poniendo una
marca en su ubicacin.
5. Reemplazamos p con q
6. Volvemos al paso 2

Cada vez que generamos un punto lo


mostramos en el dispositivo de salida.
Este proceso se ilustra en la Figura 2.1
donde P0 es el punto inicial y P1, P2 son
los primeros dos puntos generados por el
algoritmo
Antes de desarrollar el programa
deberas tratar de determinar que
imagen te resultar.

Programando aplicaciones
bidimensionales
vemos el plano de dos
Matematicamente

dimensiones como una superficie o un


subespacio de uno de tres dimensiones.
Podemos representar un punto en el plano
z=0 como p=(x,y,0) en el mundo
tridimensional o como p=(x,y) en el plano
bidimensional.
Podemos representar punto de muchas
formas, pero es mas simple pensar que un
punto tridimensional es una matriz columna

Usaremos los trminos vrtice y punto de una


manera diferente en WebGL.
Vertice: es una posicin en el espacio. Se utilizan
para representar las primitvas geomtricas
atmicas. La primitiva geomtrica ms simple es un
punto en el espacio.

Queremos empezar con un programa simple


poniendo todos los datos que queremos
mostrar dentro de un cubo centrado en el
origen con diagonales entre (-1, -1, -1) a (1, 1,
1) en coordendadas recortadas.

Podremos escribir el programa usando un


arreglo simple de dos elementos para
contener los valores x e y de cada punto.
var p =[x,y];

Pero un arreglo no es una coleccin de


valores com en C; es un objeto con
mtodos y propiedades por lo que
utilizaremos
Var p = newFloat32Array([x, y]);

Ejercicio:
Ejecute gasket1.html y revise el script
gasket.js y cambie
var NumPoints = 5000;
pruebe para 50, 500, 5000 y 5000 puntos

La API de WebGL
WebGL es OpenGL 2.0 en javascript.
Renderiza en el elemento Canvas de
HTML5 y funciona con la mayora de los
navegadores.
Es una versin reducida de la versin de
escritorio de OpenGL.

3.1 Funciones grficas


El modelo de paquete grfico es de caja
negra, es decir que solo se describe por
las entradas y salidas

Las funciones se pueden dividir en siete


grupos:
1.
2.
3.
4.
5.
6.
7.

Funciones
Funciones
Funciones
Funciones
Funciones
Funciones
Funciones

primitivas
de atributos
de visualizacin
de transformacin
de entrada
de control
de consulta

Las funciones primitivas definen los


objetos de bajo nivel o entidades
atmicas que nuestro sistema puede
mostrar.
WebGL soporta solo un limitado numero
de primitivas
Puntos
Segmentos de lnea
Tringulos

El soporte para conjuntos de primitivas


expandidos se realiza mediante shaders
programables

Las funciones de atributos permiten


realizar operaciones que van desde elegir
el color de una lnea a elegir un patrn
con el cual rellenar un polgono.
En WebGL podemos establecer colores
pasando informacin de la aplicacin al
shader o con haciendo que el shader
calcule el color a partir de las luces u
otras propiedades.

Las funciones de visualizacin permiten


especificar varias vistas. WebGL no provee
ninguna funcin de vista pero se basa en el
uso de transformaciones en la aplicacin o los
shaders para proporcionar la vista deseada.
Las funciones de transformacin permiten
llevar a cabo transformaciones de objetos
como rotacin, traslacin o escalado.
Las funciones de entrada nos permiten
interactuar con las entradas que caracteriza a
los sistemas grficos modernos

Las funciones de control nos permiten


comunicarnos con el sistema para
inicializar programas y manejar los
errores que pueden ocurrir al ejecutar los
programas.
Las funciones de consulta nos permiten
obtener informacin del sistema y del
framebuffer.

3.2 El pipeline grfico y


Mquinas de estados.
Podemos pensar en el sistema grfico como una
mquina de estados, una caja negra que contiene una
mquina de estado finito.
Esta mquina de estado recibe entradas de la aplicacin
y estos estados producen cambios en la mquina o
pueden hacer que la mquina produzca una determinada
salida.
Desde el punto de vista del API las funciones grficas son
de dos tipos: aquellas que hacen que las primitvas fluyan
en la mquina de estados y aquellas que alteran el
estado de la mquina.
Una consecuencia de la perspectiva de mquina de
estados es que la mayora de parmetros son
persistentes

3.3 OpenGL y WebGL

3.4 La interface de WebGL


El proceso bsico para correr una aplicacin WebGL
es como sigue:
La aplicacin est ubicada en algn lugar de la WWW en
un server
La computadora donde se corre la aplicacin es el
cliente.
El browser puede acceder a la aplicacin mediante una
direccin URL (Uniform Resource Locator)
Nuestro navegador puede reconocer algunos tipos de
archivos como HTML.
El archivo describe un documento o pgina web.
La pgina web obedece al estndar DOM (Document
Objet Model)

3.5 Sistemas de
coordenadas
Las coordenadas del mundo o de
aplicacin son independientes del
dispositivo.
Coordenadas de dispositivo: son las
unidades de la pantalla, tambin
llamados coordenadas de ventana se
expresan en tipos enteros por que el
centro de cualquier pixel en el
framebuffer debe localizarse en una
rejilla fija y los pixeles son
inherentemente discretos.

4. PRIMITIVAS Y ATRIBUTOS
Los sitemas minimalistas soportan
puntos, lneas y tringulos que pueden
ser generados eficientemente con el
hardware.
Un sistema mas complejo puede no ser
portable.
Tipos de primitivas:
Geomtricas: pueden ser manipuladas por
operaciones como rotacin o traslacin y
puedes formar bloques para otros objetos
geomtricos.
Imgenes o rster: no pueden ser

Las primitivas bsicas de WebGL son


especificadas por conjuntos de vrtices.
Todas las primitavas geomtricas de
WebGL son variantes de puntos, lneas y
polgonos triangulares. Un punto puede
ser mostrado como un pixel o grupo de
pixeles.
Segmentos de lnea: son secciones finitas
de lneas entre dos vrtices. Se usan
para definir aproximaciones de curvas o
lados de objetos

4.1 Polgonos bsicos


Polgono: es un objeto que tiene
un borde que puede ser descrito
por un bucle de lnea pero con un
interior bien definido.
Los vrtices definen los bordes del
polgono y el interior se renderiza
con un patrn usando texturas
Propiedades para que se muestren
correctamente:
Simple
Convexo
Plano

En tres dimensiones los polgonos son


mas complejos por que los vrtices que
los definen deben estar en el mismo
plano.
Si se usan tringulos se puede estar
seguro que sern renderizados
correctamente.

4.2 Polgonos en WebGL


WebGL soporta solamente tringulos.
Los tringulos se pueden mostrar en tres
formas:
Como vrtices usando puntos
Como bordes usando lneas
Como rellenos usando tringulos

Tipos de tringulos

4.3 Aproximando una


esfera

4.4 Triangulacin
Los tringulos son simples, planos y
convexos.
La triangulacin en empezar con una lista
de vrtices y generar un conjunto de
tringulos consistentes.
Todo conjunto de vrtices puede ser
triangulado pero no todas las
triangulaciones son equivalentes.

4.5 Texto
Las salidas grficas requieren anotaciones
como etiquetas.
El texto puede tener:

Estilos
Tamao
Color
Otros

Los sistemas grficos mas antiguos soportan


dos tipos de texto:
Trazado: definido por lneas y segmentos
Raster: definido como rectngulos o bit blocks

5. Color

6. visualizando
Vista ortogonal:

Visualizacin de dos dimensiones:


Rectngulo de corte:

7. Funciones de Control
Relacin de aspecto: en un rectngulo es la
relacin entre su ancho y su alto.
Si la relacin de aspecto no es la misma
especificada por el canvas la pantalla
distorsiona los objetos.
ViewPort: es un rea rectangular del la
ventana, por default es la ventana entera
pero puede ser de solo unos pixeles.
Se define como: gl.viewport(x,y,w,h) donde
(x,y) es la esquina inferior izquierda y w, h
son el ancho y el alto respectivamente

7.3 Organizacin de la
aplicacin
El mecanismo bsico para mostrar ser formar una
estructura de datos que contenga toda la geometra y
los atributos que necesitamos para especificar una
primitiva y como queremos que se muestre.
Enviamos esta estructura a los shaders, y podemos
continuar generando ms primitivas.
Se usa procesamiento de eventos para darnos un
control interactivo de nuestros programas.
Cuando un evento ocurre este se pone en una cola de
eventos, la cual puede ser examinada por la aplicacin
En WebGL identificaremos los eventos a los cuales
reaccionar mediante funciones llamadas listeners o
callbacks.

2.8 El programa gasket


webgl-utils.js contiene lo necesario para crear
un canvas WebGL
initShaders.js contiene el cdigo para leer,
compilar y enlazar los shaders.
MV.js contiene funciones de manejo de vectores
y matrices.
gl-canvas hace referencia al canvas en nuestra
aplicacin y especifica el ancho y el alto inicial de
la ventana en la que aparecer nuestro grfico.
Los Shaders son programas que se compilan en
los drivers

El evento que desencadena todo es


onload que ocurre cuando son leidos los
archivos del script y provoca que
myFucntion sea ejecutado.
Llamaremos a nuestra funcin onload
como init, y tendremos al menos una
segunda funcin llamada render que
controla la reproduccin en el canvas.
Dependiendo de la aplicacin
adicionaremos algunas funciones.

Una aplicacin tpica tiene estas tres


principales acciones:
1. Inicializacin: leer, compilar y enlazar los
shaders y formar la estructura de datos en
el GPU
2. Generacin de la geometra
3. Rendering de la geometra

Todo el cdigo anterior es una funcin para enviar


datos al buffer del GPU, gl.bufferData. Pero este
solo acepta arreglos con valores de tipo de datos
nativos.
Para convertir los arreglos de JavaScript a datos
aceptados por gl.bufferData usamos la funcin
flatten.
Necesitaremos conocer el numero de bytes usados
para almacenar varios tipos para usarlo en los
desplazamientos de bytes en el buffer del GPU. Para
esto Mv.js incluye un array asociativo llamado
sizeof, que retorna el tamao de cualquiera de
nuestros tipos.

8.1 enviando datos al GPU


Empezamos creando un (VBO) vertex
vuffer object en el GPU.
La funcin gl.creatBuffer crea el buffer y
devuelve el identificador buffer.
La operacin de enlazar bindBuffer, hace
de este buffer el actual
Ponemos la data en el GPU con
bufferData

8.2 Renderizando los


puntos
Para mostrar los puntos usamos
gl.drawArrays y con el parmetro
gl.POINTS le decimos al GPU que los
datos deben ser renderizados como
puntos distintos en lugar de tringulos o
lneas.
El proceso de rendering se lleva a cabo
por el pipeline (vertex shader, rasterizer,
y fragment shader) de forma que los
pixeles se muestren en el framebuffer.

8.3 El Vertex Shader


La nica informacin que ponemos en nuestro
vertex buffer es la ubicacin de cada punto.
Cuando ejecutamos gl.drawArrays, cada uno de
los cada uno de los vrtices genera una
ejecucin de un vertex shader que debe
proveerse.
El shader se escribe utilizando OpenGL ES
Shading Languaje (GLSL), el cual es parecido a C.
Cada shader es un programa completo con un
main como punto de entrada. El tipo vec4 es el
equivalente en C++ para un arreglo de cuatro
floats.

La ubicacin del vrtice de entrada est


dada por el vector 4-dimensional
vPosition.
En general, un vertex shader
transformar la representacin de una
ubicacin de un vrtice del sistema de
coordenadas en el que se ha
representado a una representacin en
coordenadas de clip

8.4 El fragment Shader


Aqu se agrega un color 4-dimensional
para cada framento mediante la variable
gl_FragColor. En RGBA.
Tambin se declara la variable precisin
con un real de precisin media mediump.
Muchos dispositivos no soportan alta
precisin highp,

8.5 Combinando las partes

9. Polgonos y recursin

evaluacin
Teora
En que consiste el Pipeline y para qu sirve en
computacin grfica?
En que consiste el Trazado de Rayos y el Mapeo de
fotones?
Que es el entrelazado?
En que consiste la tcnica de radiosity?
Explique con sus palabras lo que es una shader

Prctica
Dibuje un polgono regular de tantos lados como letras
tiene su apellido paterno utilizando triangle strip
Dibuje una estrella regular de tantas puntas como letras
tiene su apellido materno utilizando triangle fan