Sesión 3

Software de computación gráfica

Computación Gráfica
Escuela de ingeniería de 750006M
sistemas y computación
2021-1
1 | Software de computación gráfica
Clasificación del software CG

● Paquetes de propósito especial

● Paquetes de propósito general
Software CG propósito especial

● Diseñado para no programadores

Software CG propósito general (SGPG)

● Librería de funciones gráficas para un lenguaje de programación(CG API).

SGPG Representación de coordenadas

● Proporcionar descripciones
geométricas.
● Uso principalmente de
coordenadas cartesianas
estándar.
● Definir formas individuales de
cada objeto con su respectivo
sistema de referencia.
Coordenadas de modelado.
(modeling coordinates, local
coordinates, master
coordinates)
Representación de coordenadas

● Construcción de la escena agregando cada objeto dentro de la ubicación

apropiada de las coordenadas universales (World coordinates) y su
respectiva transformación de coordenadas.
● Manejo de descripciones geométricas de modelado y universales en un
conveniente tipo de datos, no importa las restricciones de salida.
Computer Graphics with OpenGL®, Fourth Edition, Donald Hearn, M. Pauline Baker, Warren R. Carithers.
SGPG Representación de coordenadas

● Procesado de las coordenadas universales en uno o más sistemas de

referencia del dispositivo de salida.
○ Transformación a coordenadas de visualización(viewing coordinates).
○ Transformación a una proyección 2D de la escena.
Computer Graphics with OpenGL®, Fourth Edition, Donald Hearn, M. Pauline Baker, Warren R. Carithers.
SGPG Representación de coordenadas

● Almacenamiento en coordenadas normalizadas (normalized device

coordinates). Independencia entre paquete gráfico y dispositivo salida
○ Rango -1 a 1
○ Rango 0 a 1
Computer Graphics with OpenGL®, Fourth Edition, Donald Hearn, M. Pauline Baker, Warren R. Carithers.
SGPG Representación de coordenadas

● Eliminación de partes por fuera de los limites de vista,

● Almacenamiento en el frame buffer en coordenadas de dispositivo(Device
coordinates) o coordenadas de pantalla. Almacenamiento de profundidad.
● Coordenadas de dispositivo son enteros entre 0 y Máximo Pixeles
Computer Graphics with OpenGL®, Fourth Edition, Donald Hearn, M. Pauline Baker, Warren R. Carithers.
SGPG Representación de coordenadas

● Transformaciones de coordenadas:

Computer Graphics with OpenGL®, Fourth Edition, Donald Hearn, M. Pauline Baker, Warren R. Carithers.
SGPG Funciones gráficas
Funciones para la creación y manipulación de imágenes y datos relacionados.
● Primitivas de salida. Partes básicas para la construcción de imágenes: Cadenas
de caracteres, entidades geométricas (Puntos, líneas rectas, líneas curvas,
polígonos, matrices de puntos.
● Atributos. Propiedades de las primitivas de salida: color, estilo de línea, estilo
de texto, patrones de relleno de áreas.
● Transformaciones geométricas: Funciones que permiten hacer cambios en el
tamaño, posición, orientación de un objeto modelado.
● Transformaciones de visualización. Se utilizan para proyectar una vista de un
objeto en un dispositivo de salida. Selección de vista, tipo de proyección,
posición dispositivo salida, tamaño, estructura, iluminación, textura.
● Funciones de entrada. Permiten controlar y procesar datos de dispositivos de
entrada
SGPG Estándares de software
Permiten portabilidad, traslado del software de un sistema de hardware a otro
usando las diferentes implementaciones y aplicaciones.
● 1984 Graphical Kernel System (GKS). Inicialmente 2D, ISO, ANSI.
● Programmer’s Hierarchical Interactive Graphics System (PHIGS). Extensión de
GKS. Modelado jerárquico, color , representación de superficies.
● PHIGS+. Extensión de PHIGS, representación superficies 3D.
● Graphics Library(GL). Inicialmente incluido en estaciones de trabajo de SGI.
Ganó popularidad. Renderizado rápido y en tiempo real, extensión a otros
sistemas de hardware.
● 1990 OpenGL. Versión de GL independiente del hardware. Procesamiento
eficiente para aplicaciones 3D. Manejo de dos dimensiones z=0.
● Correspondencia del lenguaje. Funciones gráficas son independientes del
lenguaje de programación. Desarrollo sintaxis para cada acceso desde LP.
2 | Introducción a OpenGL
OpenGL - Biblioteca básica
● OpenGL posee una biblioteca básica que le permite ser independiente del
hardware. Hay subrutinas de entrada y salida disponibles en bibliotecas
auxiliares.
● También llamada biblioteca de núcleo de OpenGL.
● Las funciones empiezan con el prefijo gl y cada palabra del nombre empieza con
mayúscula: glBegin, glClear, glCopyPixels, glPolygonMode
● Constantes simbólicas. Requeridas por algunas funciones. Prefijo GL
mayúsculas, las palabras que conforman el nombre se escriben en mayúsculas
con un guión abajo de separador: GL_2D, GL_RGB, GL_CCW, GL_POLYGON,
GL_AMBIENT_AND_DIFFUSE
● Tipos de datos predefinido. Nombre empieza con las mayúsculas GL y, a
continuación, un identificador de tipo de datos estándar, escrito con letras
minúsculas: GLbyte, GLshort, GLint, GLfloat, GLdouble, Glboolean
●
OpenGL - Bibliotecas auxiliares
● OpenGL Utility (GLU) :
○ Configuración de matrices de visualización y proyección.
○ Descripción objetos complejos mediante líneas y polígonos.
○ Visualización de cuádricas y B-splines
○ Sintaxis: Las funciones comienzan con el prefijo glu en minúscula
● OpenGL X Window System (GLX):
○ Permite crear una ventana de visualización del programa.
○ Sintaxis: funciones con prefijo glX.
○ Diferentes sistemas operativos: Apple: AGL, Windows: WGL, IBM OS/2: PGL
● OpenGL Utility Toolkit (GLUT):
○ Biblioteca de funciones para interactuar con cualquier sistema de ventanas
○ Permite que los programas sean independientes del dispositivo
○ Sintaxis: Prefijo glut
OpenGL - Archivos de cabecera
● Para cada programa se debe incluir la biblioteca núcleo OpenGL.
● Algunos programas requieren GLU
● En Windows el archivo para subrutinas adicionales es windows.h, debe incluirse
antes de la biblioteca núcleo y de GLU:
#include <windows.h>
#include <GL/gl.h>
#include <GL/glu.h>
● Si usa GLUT como gestor de ventanas no requerirá incluir gl.h ni glu.h:
#include <GL/glut.h>
● Dependiendo del sistema operativo las cabeceras podrían estar en una
ubicación diferente.
● También puede incluir librerías auxiliares de C++. Ejemplo: #include <stdio.h>
#include <stdlib.h> #include <math.h>
●
OpenGL - Programa Completo

Computer Graphics with OpenGL®, Fourth Edition, Donald Hearn, M. Pauline Baker, Warren R. Carithers.
OpenGL - Programa Completo

Salida del programa.

Compilado: gcc -o ejemplo1 ejemplo1.c -L/System/Library/Frameworks
Configuración de la ventana -framework GLUT -framework OpenGL
Ejecución: ./ejemplo1
Computer Graphics with OpenGL®, Fourth Edition, Donald Hearn, M. Pauline Baker, Warren R. Carithers.
2 | Introducción a WebGL
WebGL - Características
● WebGL (Web-based Graphics Language) es una nueva tecnología que permite
un soporte completo a gráficos 3D dentro de un navegador WEB.
● Usa un API JavaScript que interactúa con la GPU.
● El contexto del API es obtenido del elemento HTML5 <canvas>, no requiere
algún plugin adicional.
● Los programas de shaders usan GLSL (OpenGL Shading Language), un lenguaje
de alto nivel cuya sintaxis se basa en C/C++. Se compila en tiempo de ejecución.
● Proporciona mejor rendimiento que el contexto 2D canvas.
● Permite un mayor realismo y configurabilidad de las escenas.
● Configuración de WebGL: Manejo del contexto, Configuración de los buffers,
interacción con los shaders, carga de texturas.
● Usos: visualización, modelado, diseño, tours virtuales, mapeo, juegos, arte,
procesamiento de datos e imágenes.
WebGL - Configuración de la escena
● Obtener el contexto WebGL
● Creación de diferentes tipos de primitivas
● Creación de vertex buffer objects (VBOs) y atributos
● Procesamiento o renderizado 2D
● Crear un programa y sus shaders
● Configurar las matrices de visualización
● agregar animación y movimiento
● Procesar un modelo tridimensional
 WebGL - Implementar el canvas

● Clonar Repositorio
● Ejecutar listing_1-1.html
Beginning WebGL for HTML5 by Brian Danchilla (Apress, 2012).
 WebGL
Adicionar el contexto

● 2 contextos disponibles 2D,

WebGL
● Definir de manera explicita
cual contexto usar.
● Prefijos OpenGL:
GL_DEPTH_TEST, glClearColor.
WebGL: gl.DEPTH_TEST,
gl.clearColor
● Ejecutar listing_1-2.html

Beginning WebGL for HTML5 by Brian Danchilla (Apress, 2012).

WebGL - Implementar el canvas

Salida Normal Sin soporte WebGL

Beginning WebGL for HTML5 by Brian Danchilla (Apress, 2012).

 WebGL
Adicionar el contexto

● 2 contextos disponibles 2D,

WebGL
● Definir de manera explicita
cual contexto usar.
● Prefijos OpenGL:
GL_DEPTH_TEST, glClearColor.
WebGL: gl.DEPTH_TEST,
gl.clearColor
● Ejecutar listing_1-2.html

Beginning WebGL for HTML5 by Brian Danchilla (Apress, 2012).

WebGL - Componentes
● Buffers de dibujo: Memoria temporal.
○ Buffer de Color (rojo, verde, azul, alpha)
○ Buffer de profundidad, profundidad del pixel z-value
○ Buffer de plantilla (Stencil Buffer). Incluye partes del plano de proyección
visibles y no visibles por la cámara actual.
● Primitivas: Hay tres tipos de primitivas: Puntos, líneas y triángulos pero 7
maneras de procesar la imagen: POINTS, LINES, LINE_STRIP, LINE_LOOP,
TRIANGLES, TRIANGLE_STRIP, TRIANGLE_FAN
● Mecanismos de almacenamiento de vértices: Permite seleccionar el color o
localización de un vértice directamente en una escena. Por medio de objetos
(Vertex buffer objects, VBOs) podemos pasar información de posición, color, y
coordenadas normalizadas y de textura.
WebGL - Primitivas

POINTS - LINES - LINE_STRIP - LINE_LOOP

TRIANGLES - TRIANGLE_STRIP - TRIANGLE_FAN

Beginning WebGL for HTML5 by Brian Danchilla (Apress, 2012).

WebGL - Renderización en 2D

● Ejecutar listing_1-3.html, listing_1-4.html, listing_1-5.html, listing_1-6.html

Beginning WebGL for HTML5 by Brian Danchilla (Apress, 2012).

Próxima Clase - Estudiar quiz

● Panorama General componentes gráficos.

● Entender uso de primitivas en códigos del final del capítulo 3 Graphics Output
Primitives. Libro Computer Graphics with Open GL. Donald D. Hearn/M. Pauline
Baker, Warren Carithers
Gracias