1 INTRODUCCIÓN

Objetivos
1. Entender el concepto de proposición y la forma en que se pueden elaborar proposiciones
compuestas usando los conectores lógicos.

1.1 Breve historia de la Graficación

La computación gráfica es el campo de la informática visual, donde se utilizan computadoras tanto
para generar imágenes visuales sintéticamente como integrar o cambiar la información visual y
espacial probada del mundo real. Un gráfico es cuando existe algún trazo o marca que han sido
hechos con intencionalidad. Lo gráfico, tiene por objeto representar (tomar el lugar de, o de presentar
de nuevo) alguna cosa que no está.

Un gran avance en gráficos por computadora iba a venir de un estudiante del MIT, Ivan Sutherland.
En 1961 Sutherland creó un programa de dibujo informático llamado “Sketchpad”.

Con el uso de un lápiz óptico, Sketchpad permitía a uno dibujar formas simples en la pantalla de la
computadora, salvarlos e incluso su posterior recuperarlos. El lápiz óptico en sí tenía una pequeña
célula fotoeléctrica en la punta. Esta célula emite un pulso electrónico cada vez que se colocaba
adelante de la pantalla de la computadora.

La infografía, es decir, los gráficos por computadora, continua siendo una de las áreas más excitantes
y de más rápido crecimiento de la tecnología moderna. Los métodos infográficos se aplican de forma
rutinaria en el diseño y la mayoría los productos, en los simuladores para actividades de
programación, en la producción de películas, anuncios de televisión, vídeos musicales, en el análisis
de los datos, en los estudios científicos.

El uso adecuado y provechoso de la tecnología ha hecho de la computadora un dispositivo poderoso

para producir imágenes en forma rápida y económica. Actualmente en todas las áreas es posible
aplicar gráficas por computadora con algún objetivo, por ello se ha generalizado la utilización de
gráficas por computadora.

Los métodos utilizados en las gráficas por computadora y en el procesamiento de imágenes son de
características similares pero no iguales, ambas realizan operaciones diferentes (fundamentadas).

Las herramientas para Graficación por computadoras se utilizan para crear más imágenes; mientras
que en el procesamiento de imágenes se aplican técnicas para modificar o interpretar imágenes
existentes.

Línea del Tiempo de la Historia de la Graficación por Computadora.

1950.

La Graficación por computadora tuvo sus inicios con el surgimiento de las computadoras digitales.
Una computadora digital como la Whirlwhin de la Mit fue una de las primeras en utilizar una pantalla
capaz de representar gráficos.

1955.

El primer sistema gráfico SAGE (Semi Auutomatic Ground Enviorement) de la Fuerzas aéreas
norteamericanas (US Air Force’s), es desarrollado en el Lincoln Laboratory del MIT (Massachusetts
Institute of Technology).El sistema SAGE procesaba datos de radar y otras informaciones de
localizaciones de objetos mostrándolos a través de una pantalla CTR.

1959.

Surgió el primer sistema de dibujo por computadora, la DAC-1(Design Augmentedby Computers) Fue
creado por General Motors e IBM. LaDAC-1 permitía al usuario describir un automóvil en 3D con la
capacidad de rotar y cambiar el ángulo de la imagen.”

1960 - 1970.

Ivan Suterland (Estudiante de MIT), creó un programa que llamó Sketchpad, mediante el cual podía
realizar trazos en la pantalla de la computadora auxiliándose de una pluma de luz:

1961.

Otro estudiante del MIT, Steve Rusell creó el primer juego de video, llamado “Spacewar” o guerra
espacial en español. Escrito para la DEC PDP-1, la guerra espacial fue un éxito inmediato. 1963 E. E.
Zajac un científico de la Bell Telephone Laboratory (BTL), creo una película llamada "Simulation of a
two-giro gravity attitude control system".

1970 – 1980.

Los años 70 consideraron la introducción de los gráficos por computadora en el mundo de la

televisión. Computer Image Corporation (CIC), desarrolló sistemas complejos de la dotación física y
de software tales como ANIMAC, SCANIMATE y CAESAR.

1978.

El laboratorio central de Física Aplicada de la Universidad John-Hopkins publica un trabajo que se

convertiría en la obra "Matematical elements for computer graphics" de David F. Rogers. Esta sucedió
desde ese momento una de las disciplinas importante tanto para el trazado de línea como en la
representación de objetos naturales. La informática gráfica se hizo presente en la gestión, la Medicina,
la televisión, la industria del espectáculo, los video juegos, la industria fílmica, y así en todas las
disciplinas científicas, Matemáticas, Aeronáuticas, Mecánicas y otras muchas esferas del
conocimiento.

1980 – 1990.

Turner Whitted publicó un artículo en el año 80 sobre un nuevo método de representación para
simular superficies altamente reflexivas. Conocido hoy como raytracing.1999 – 2000. En 1993, la
película Jurassic Park revoluciona los efectos visuales, al crear dinosaurios como nunca antes se
habían visto, con la ayuda de las computadoras.

1999.

La empresa Autodesk tiene 1.000.000 usuarios de AutoCAD LT y 100.000 3D Studio.*2000: Autodesk

inicia la venta por Internet de AutoCAD 2000.*2001: Presentación versión AutoCAD 2002. Destacan
la función de asociación de funciones de las dimensiones en el dibujo, el editor gráfico de atributos.
La definición de bloques y un conversor de capas asociado a la funcionalidad del gestor de normas.
Orientación hacia Internet.

La disciplina originalmente se relacionó mucho a las técnicas de Tratamiento de Imágenes. Su

evolución no puede comprenderse sino con el análisis de su producción digital, tanto dentro del
tratamiento estático o dinámico dentro de sus resultados. Esta define los gráficos, creados y
generados por un ordenador, donde la gestión se basa en una estación gráfica compuesta de
elementos materiales como el Procesador y la Tarjeta gráfica, las herramientas de adquisición como
el digitalizador o la Cámara digital, las periféricos de interfaz de usuario como el ratón o la Tablilla
gráfica, de medios de almacenamiento como el Disco Duro olas memorias USB y de herramientas de
reproducción como la impresora

Los 2000 a la fecha.

En la actualidad la mayoría de las personas que trabajan con gráficos utilizan computadoras de
grandes capacidades: discos duros de terabytes, tarjetas gráficas aceleradoras de video con memoria
en gigabytes, mouse óptico y memoria RAM en el orden de los gigas. También son muy utilizadas las
computadoras Macintosh especialmente en lo relacionado a efectos especiales y gráficos de
animación. En general, el hardware y software utilizado en lo que va de esta década es la
popularización de tecnologías creadas anteriormente pero que en el pasado no se habían difundido,
eran costosas o no estandarizadas.

1.2 Aplicaciones
Se puede observar que la Graficación por computadora o animación se puede aplicar en:

Diseño Asistido por Computadora

En los procesos de diseño se hace un uso importante de las gráficas por computadora, en particular,
para sistemas de ingeniería y arquitectura, sin embargo, en la actualidad casi todos los productos se
diseñan por computadora. Los métodos CAD se utilizan diariamente en el diseño de automóviles,
aeronaves, embarcaciones, naves espaciales, computadoras, telas, construcciones, software y otros
muchos productos.

Los métodos CAD se utilizan diariamente en el diseño de automóviles, aeronaves, embarcaciones,

naves espaciales, computadoras, telas, construcciones, software y otros muchos productos. El diseño
asistido por computadora, abreviado DAO pero más conocido por las siglas inglesas CAD (Computer
Aided Design), se trata básicamente de una base de datos de entidades geométricas (puntos, líneas,
arcos, etc). Con la que se puede operar a través de una interfaz gráfica.

Arte digital
Los métodos de gráficas por computadora se utilizan en forma generalizada tanto en aplicaciones de
bellas artes como en aplicaciones de arte comercial. Los artistas o autores utilizan una variedad de
métodos computacionales, incluyendo hardware de propósito especial como tabletas digitalizadoras,
software desarrollado para este propósito, tales como Adobe Photoshop o Macromedia FreeHand y
paquetes CAD.

Una ventaja que ofrece el arte digital es que a diferencia del convencional, el primero permite el uso
de “layers” o capas, las cuales permiten añadir profundidad a las imágenes. De igual manera, el
arte digital no se desgasta con el tiempo ni las condiciones normales alas que se somete el arte
gráfico común.

Entretenimiento
En la actualidad, se utilizan comúnmente métodos de gráficas por computadora para producir
películas, videos musicales y programas de televisión. En ocasiones se despliegan solo imágenes
gráficas y otras veces se combinan objetos (creados en la computadora) con actores u objetos reales.

Animación por computadora

La animación pertenece al ámbito del cine y la televisión aunque está en relación directa con las artes
visuales clásicas, dibujo, pintura y escultura, así como con la fotografía. Para realizar animaciones
existen numerosas técnicas que van más allá de los familiares dibujos animados. Una técnica muy
utilizada en la actualidad es la animación por computadora, esta permite reducir los costos de
producción y edición. Paquetes de software como Macromedia Flash, Moho y algunos otros, han
permitido que casi cualquier persona pueda hacer una animación fácilmente.

Videojuegos
Un videojuego es un programa informático, creado expresamente para divertir, formando parte del
sector audiovisual. Los videojuegos están basados en la interacción entre una persona y una
computadora. Los videojuegos recrean entornos virtuales en los cuales el jugador puede controlar
a un personaje o cualquier otro elemento de dicho entorno, y así conseguir uno o varios objetivos
por medio de unas reglas determinadas.

Películas
Las gráficas por computadora se utilizan en diversas etapas de la creación de películas. Se puede
utilizar la animación, edición y efectos especiales, siendo los efectos especiales lo que más llama la
atención entre los consumidores.

Educación y capacitación
A menudo, se utilizan como instrumentos de ayuda educativa modelos de sistemas físicos, financieros
y económicos, los cuales se generan por computadora. Modelos de sistemas físicos, fisiológicos,
tendencias de población, pueden ayudar a los estudiantes a comprender la operación del sistema. En
el caso de algunas aplicaciones de capacitación, se diseñan sistemas especiales.

Visualización
Científicos, ingenieros, personal médico, analistas comerciales y otros necesitan con frecuencia
analizar grandes cantidades de información o estudiar el comportamiento de ciertos procesos. Las
simulaciones numéricas que se efectúan en supercomputadoras a menudo producen archivos de
datos que contienen miles e incluso millones de valores de datos. Las cámaras vía satélite y otras
fuentes acumulan grandes archivos de datos más rápido de lo que se puede interpretar. El rastreo
de estos grandes conjuntos de número para determinar tendencias y relaciones es un proceso tedioso
e ineficaz. Pero si se convierten a una forma visual es frecuente que se perciban de inmediato las
tendencias y los patrones.

Procesamiento de imágenes.
En las gráficas por computadora, se utiliza una computadora para crear una imagen. Por otro lado,
en el procesamiento de imágenes se aplican técnicas para modificar o interpretar imágenes
existentes, como fotografías y rastreos de televisión.

Para aplicar los métodos de procesamiento de imágenes, primero digitalizamos una fotografía u otra
imagen de un archivo de imagen. Entonces, se pueden aplicar métodos digitales para reordenar
partes de imágenes, para mejorar separaciones de colores o para aumentar la calidad de
sombreado. Por lo general, el procesamiento de imágenes y las gráficas por computadora se
combinan en muchas aplicaciones.

Interfaces gráficas de usuario

Es común que los paquetes de software ofrezcan una interfaz gráfica. Un componente importante de
una interfaz gráfica es un administrador de ventanas que hace posible que un usuario despliegue
áreas con ventanas múltiples. Cada ventana puede contener un proceso distinto que a su vez puede
contener despliegues gráficos y no gráficos.

Diagnóstico médico

Apoyado fuertemente por las imágenes tridimensionales que representan el interior del cuerpo
humano.

Cartografía.

La Informática Gráfica se utiliza para producir representaciones fiables y esquemáticas de fenómenos

naturales a partir de datos capturados con sensores. Como ejemplo podemos pensaren los mapas de
relieve o de vegetación que se obtienen a partir de datos transmitidos por los satélites.

Sistemas Multimedia.

Como su propio nombre indica, la multimedia implica el uso de más de un medio de comunicación.
Por supuesto uno de ellos es el medio visual y es aquí donde la Informática Gráfica juega un papel
primordial.

1.3 Herramientas y bibliotecas para gráficas (OpenGL, DirectX, Java3D).

A la hora de desarrollar una aplicación gráfica es interesante trabajar con herramientas y librerías
que nos abstraiga de las tareas más tediosas y menos relacionadas con nuestra aplicación. Las
librerías gráficas nos permiten abstraernos del hardware y realizar de manera transparente las
operaciones más usuales utilizando una plataforma común. A continuación se revisarán dos librerías
libres para el desarrollo de aplicaciones gráficas interactivas. Por razones de espacio nos centraremos
exclusivamente en librerías para el desarrollo de aplicaciones bidimensionales.

OpenGl
OpenGL (Open Graphics Library) es una especificación estándar que define una API multilenguaje
y multiplataforma para escribir aplicaciones que produzcan gráficos 2D y 3D. La interfaz consiste en
más de 250 funciones diferentes que pueden usarse para dibujar escenas tridimensionales complejas
a partir de primitivas geométricas simples, tales como puntos, líneas y triángulos. Fue desarrollada
originalmente por Silicon Graphics Inc. (SGI) en 19922 y se usa ampliamente en CAD, realidad
virtual, representación científica, visualización de información y simulación de vuelo. También se usa
en desarrollo de videojuegos, donde compite con Direct3D en plataformas Microsoft Windows.

DirectX
DirectX es una colección de API desarrolladas para facilitar las complejas tareas relacionadas
con multimedia, especialmente programación de juegos y vídeo, en la plataforma Microsoft Windows.
  DirectX consta de las siguientes API:
 Direct3D: utilizado para el procesamiento y la programación de gráficos en tres dimensiones
(una de las características más usadas de DirectX).
 Direct Graphics: para dibujar imágenes en dos dimensiones (planas), y para representar
imágenes en tres dimensiones.
 DirectInput: para procesar datos del teclado, mouse, joystick y otros controles para juegos.
 DirectPlay: para comunicaciones en red.
 DirectSound: para la reproducción y grabación de sonidos de ondas.
 DirectMusic: para la reproducción de pistas musicales compuestas con DirectMusic Producer.
 DirectShow: para reproducir audio y vídeo con transparencia de red.
 DirectSetup: para la instalación de componentes DirectX.
 DirectCompute: lenguaje e instrucciones especiales para el manejo de cientos o miles de
hilos de procesamiento, especial para procesadores de núcleos masivos.

A pesar de ser desarrollado exclusivamente para la plataforma Windows, se está desarrollando una
implementación de código abierto de su API para sistemas Unix (en particular Linux) y X Window
System por el proyecto WineHQ, del cual existe fork propietario, Cedega, desarrollada por la empresa
de software Transgaming y orientada a la ejecución de juegos desarrollados para Windows bajo
sistemas Unix.

Java3D
El API 3D de Java es un árbol de clases Java que sirven como interface para sistemas de renderizado
de gráficos tridimensionales y un sistema de sonido. El programador trabaja con constructores de
alto nivel para crear y manipular objetos geométricos en 3D. Estos objetos geométricos residen en
un universo virtual, que luego es renderizado. El API está diseñado con flexibilidad para crear
universos virtuales precisos de una ámplia variedad de tamaños, desde astronómicos a subatómicos.

A pesar de toda esta funcionalidad, el API es sencillo de usar. Los detalles de renderizado se manejan
automáticamente. Aprovechándose de los Threads Java, el renderizador Java 3D es capaz de
renderizar en paralelo. El renderizador también puede optimizarse automáticamente para mejorar el
rendimiento del renderizado.

Un programa Java 3D crea ejemplares de objetos Java 3D y los sitúa en un estructura de datos de
escenario gráfico. Este escenario gráfico es una composición de objetos 3D en una estructura de
árbol que especifica completamente el contenido de un universo virtual, y cómo va a ser renderizado.

Los programas Java 3D pueden escribirse para ser ejecutados como aplicaciones solitarias o como
applets en navegadores que hayan sido extendidos para soportar Java 3D, o ámbos.

WebGL
WebGL (Web Graphics Library)1 es una especificación estándar que define una API implementada
en JavaScript para la renderización de gráficos en 3D dentro de cualquier navegador web. No precisa
del uso de plug-ins2 adicionales en cualquier plataforma que soporte OpenGL 2.0 u OpenGL ES 2.0.
WebGL está integrada completamente en todos los estándares web del navegador, permitiendo la
aceleración hardware3 (física) de la GPU y el procesamiento de imágenes y efectos como parte del
lienzo o "canvas" de la página web.

Los elementos de WebGL se pueden combinar con otros elementos HTML y estar compuestos con
otras partes de la página o del fondo (background) de la página. Los programas WebGL consisten
en un código de control escrito en JavaScript que permite usar la implementación nativa de OpenGL
ES 2.0, un lenguaje similar a C o C++, que se ejecuta en una unidad de procesamiento gráfico
(GPU). WebGL está diseñado y gestionado por el consorcio de tecnología sin ánimo de lucro Khronos
Group.5

1.4 Visualización de datos.

La visualización de datos (data visualization, en inglés) es el proceso de búsqueda, interpretación,
contrastación y comparación de datos que permite un conocimiento en profundidad y detalle de los
mismos de tal forma que se transformen en información comprensible para el usuario.

Este término surgió a raíz del nacimiento de la web 2.0, en la que la abundancia de datos provoca
complejidad en su búsqueda e interpretación, lo que da lugar a la necesidad de un mecanismo que
permita facilitar la comprensión y asimilación de la información. Esto se debe a que en la actualidad
los procedimientos que engloban la visualización de datos son varios. En primer lugar es necesario
analizar los datos para compendiar aquellos útiles para el conocimiento del tema y descartar los
inconexos. En segundo lugar es necesario interpretar los datos seleccionados de tal forma que sean
comprensibles de forma exacta y detallada. Antes de continuar es imprescindible contrastar estos
datos con otros vinculados y estudiar todos ellos para no cometer errores y saber discernir los
verdaderamente significativos para lograr el fin último, es decir, facilitar la comprensión del usuario.
El último paso en este proceso es saber comunicar la información obtenida, de tal forma que el
usuario adquiera los conocimientos necesarios para comprender correctamente los datos facilitados.
Para conseguir este fin, el propio creador de la visualización debe tener muy clara la información que
desea comunicar, para que le resulte más sencillo transmitírsela a otras personas a través de las
observaciones y cotejos oportunos de los datos constituyentes de la visualización.

La visualización es una herramienta para ayudar al análisis y no un sustituto de la habilidad analítica.

Tampoco es un sustituto de las estadísticas, es más, el gráfico puede resaltar las diferencias o
correlaciones entre los puntos de datos. Disponer de una buena herramienta no es suficiente; como
indica Enrique Rodríguez también es necesario que se disponga de conocimientos de negocio,
estadística, teoría del color, composición gráfica, story-telling e inteligencia emocional.

Las visualizaciones de datos, y más si estas se basan en herramientas gratuitas online con plantillas,
no hacen todo el trabajo de forma automática. El éxito de una visualización se basa, entre otras
variables, en la comprensión de nuestros datos que por lo general requiere una combinación de
habilidades de análisis, estadística y experiencia en la limpieza de datos. No hay todavía un perfil
determinado de visualizadores de datos; hoy en día encontramos desde diseñadores hasta ingenieros,
pasando por psicólogos, periodistas y profesionales de la comunicación y el marketing en general.

1.5 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 decolores, 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.

Clases de Imágenes
El tipo de gráfico más difundido es el Bitmap o mapa de bits, o sea una cadena de números que
representa una imagen. Vector graphics, o gráficos vectoriales, es el sistema utilizado principalmente
para el diseño asistido por ordenador (CAD). Cada segmento de imagen se representa como un
vector, definido por sus dos puntos extremos en una matriz x-y. La imagen se almacena como una
lista de vectores, denominada display list (lista de presentación), donde se agregan ecuaciones
matemáticas que evitan la distorsión de los vectores durante las diferentes etapas de edición. Uno
de los problemas que presentan estos gráficos es que, en su mayoría, son propietarios -o sea, de
marcas concretas-, así que deben tratarse con aplicaciones específicas.

Estos dos sistemas no son los únicos, pero sí los más utilizados, por lo que no nos detendremos a
analizar el resto, que no son más que variaciones sobre estos dos.

Formatos Gráficos
El espectacular aumento de las posibilidades gráficas que se han conseguido en la informática ha
traído consigo una exagerada cantidad de formatos. Es prácticamente imposible conocer todos los
formatos, pero sí creemos interesante revisar el proceso de formación de las imágenes y comentar
alguno de los formatos más conocidos del mercado.

Un formato de archivo gráfico es el modelo que se usa para almacenar la información de una imagen
en un archivo. Existe una gran cantidad de formatos de archivos para gráficos, algunos de los cuales
ya se encuentran en desuso. Entre los más utilizados hoy en día podemos mencionar a los siguientes:

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.

Formatos de gráficos vectoriales

El concepto de paleta de colores no existe en este tipo de gráficos, ya que su orientación es diferente.
La mayoría de los formatos están pensados para el diseño gráfico y las presentaciones.

CDR: es un ejemplo claro de formato orientado al diseño. Este sistema, que coincide con la extensión
de sus archivos, 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.
Metafiles
Como en cualquier otra faceta de la vida, en informática no sólo existe el blanco o el negro. Es decir,
no sólo hay mapas de bits y vectoriales; existe otra variedad, los metafiles, que pueden almacenar
más de un tipo de información. Esto quiere decir que pueden coexistir imágenes vectoriales y de
mapas de bits. Los dos formatos más conocidos son CGM y WMF.

CGM (computer graphics metafile): se trata de un sistema orientado, básicamente, a la importación

y exportación de archivos de un formato a otro. Utiliza tres tipos de codificación diferentes a la hora
de realizar la compresión. El primero facilita la transmisión de datos; el segundo, binario, proporciona
un acceso rápido a cualquier punto del gráfico; y, por último, existe una tercera fase que permite la
edición.
A pesar de que este sistema no soporta imágenes en tres dimensiones, se han realizado diferentes
intentos de crear un formato, relacionado con GKS (graphics kernel system), que reúna esas
características.

WMF (windows metafile): lo más interesante de este formato creado por Microsoft es que incluye
llamadas a funciones gráficas del entorno Windows.

Aunque pueda parecer lo contrario, este sistema no está concebido para una aplicación específica.
Su uso, como ocurre con la mayoría de los metafiles, está orientado a la importación y exportación
de unos formatos a otros. Además de estos dos formatos existe otro en desarrollo, 3DMF (3D
metafile)

Aquí se presenta algunos otros formatos:

AI, Adobe Ilustrator.

El mateformato AI es el utilizado por el programa Adobe Ilustrator para guardar sus archivos gráficos
nativos. Los archivos AI admiten cabecera de pre visualización (thumbnail) y pueden trabajar con
vectores y mapas de bits. Permiten texturas, degradados, fotos integradas o vinculadas a archivos
externos, textos trazados o con fuentes incluidas y manejo de capas y máscaras.

CIN, Cineon
El formato Cineon fue diseñado específicamente para representar imágenes escaneadas de películas.
Tiene algunas diferencias interesantes con otros formatos tales como el tiff,y jpeg.
Fue definido en un documento de Kodak por Glenn Kennel. El formato se reemplazó tiempo después
por el formato DPX que es muy similar y está basado en el Cineon.
CPT, Corel PhotoPaint
Formato propietario usado por defecto en los documentos de Corel PhotoPaint. Dispone de
importantes características extra, como la composición por capas. Compatible con muy pocos
programas aparte de los de la misma casa. Su tamaño suele ser menor que el de los documentos
creados por Adobe Photoshop.

DPX, Digital Picture eXchange

DPX es un formato común para películas digitales y es un estándar ANSI/SMPTE (268M- 2003). El
formato representa la densidad de cada canal de color de un negativo escaneado en un formato de
10 bits de longitud donde la gama del negativo original es preservado tal como se tomó del escaner.
DPX ofrece gran flexibilidad en el almacenamiento del color y otra información de intercambio para
detalles de producción. Posee múltiples formas de empaquetado y alineación.

DFX, Drawing Interchange Format

El formato DXF es un formato vectorial que la empresa Autodesk lanzó para permitir el intercambio
de archivos de dibujo entre los diferentes programas de CAD. Soporta hasta 256 colores (8 bits).

EMF, Enhanced MetaFile

EMF es un metaformato gráfico vectorial de 32 bits, reconocido por casi todas las aplicaciones de
diseño gráfico y compatible con los sistemas operativos Windows, pudiendo ser usado en las
aplicaciones del paquete Office.

EPS, Encapsulated PostScript

PostScript encapsulado, o EPS, es un formato de archivo gráfico. Un archivo EPS es un archivo
PostScript que satisface algunas restricciones adicionales. Estas restricciones intentan hacer más fácil
a programas de software el incluir un archivo EPS dentro de otro documento PostScript.

EXR, Extended Dynamic Range Image File Format

OpenEXR es el formato de código libre para imágenes de alto rango dinámico (High dynamic-range
o HDR) desarrollado por la industria Light & Magic para la generación de imágenes en las
producciones de cine. La principal ventaja del formato es que soporta píxeles en coma flotante de
más de 32 bits y múltiples algoritmos de compresión sin pérdidas, con un ratio superior al 2:1 en
imágenes con grano.

FLA, Macromedia Flash Document

Fla es el formato utilizado por Macromedia Flash para la creación y edición de sus populares
animaciones. Un archivo fla guarda todos los datos de una película: los gráficos y textos en forma
vectorial, las imágenes incluidas en la película, los sonidos o algún otro elemento tal como un vídeo,
así como la información de la animación en sí y los actionscripts.

FHx, Macromedia FreeHand File

Formato nativo del programa de gráficos vectoriales FreeHand x, x representa la versión de la
aplicación mencionada. Puede llevar cabecera de previsualización (thumbnail) y se puede comprimir,
dependiendo el tamaño final del contenido. Puede llevar las fotos integradas o vinculadas a archivos
externos y textos trazados o con fuentes incluidas. Es posible importarlo a diferentes programas
gráficos, como Macromedia Flash o Adobe Ilustrator, pero no es soportado por ningún navegador
web.

JP2, Joint Photographic Experts Group 2000

Es una forma de compresión de imágenes basada en la transformada discreta de wavelet. Puede
trabajar con niveles de compresión mayores a los de JPEG sin incurrir en los principales defectos del
formato anterior con altas tasas de compresión.

MNG, Multiple-image Network Graphics

El MNG (pronunciado ming) es un formato de fichero, libre de derechos, para imágenes animadas.
Las iniciales significan Multiple-image Network Graphics. El formato MNG está estrechamente
vinculado al formato de imagen PNG

PBM, Portable Bitmap Format

Formato simple para gráficos en blanco y negro. Utiliza 1 bit por pixel. A diferencia del resto de
formatos gráficos, un fichero PBM contiene texto plano y puede ser modificado con un simple
procesador de texto. Está relacionado con los formatos PGM (escala de grises) y PPM (color).

PCX, PiCture eXchange

PCX es un formato de imagen digital que usa la forma simple de la codificación runlength (un tipo de
compresión sin perdidas).

PDF, Portable Document Format

PDF es un formato de almacenamiento de documentos, desarrollado por la empresa Adobe Systems.
En esencia no es un formato gráfico propiamente dicho, sino un formato de almacenamiento de
documentos, que permite almacenar texto con formato, imágenes de diferentes tipos, etc. Es una
versión simplificada de PostScript; permite contener múltiples páginas y enlaces.

MNG, Multiple-image Network Graphics

Es un formato de fichero libre e derechos, para imágenes animadas. La estructura de los archivos de
formato MNG es básicamente idéntica a la de los archivos PNG, difiriendo solamente en la firma (8A
4D 4E 47 0D 1A 0A en hexadecimal) y en la utilización de unidades de información discretas que
proporcionan una gran variedad de dispositivos de animación.

PBM, Portable Bitmap Format

Formato simple para gráficos en blanco y negro. Utiliza 1 bit por pixel. A diferencia del resto de
formatos gráficos, un fichero PBM contiene texto plano y puede ser modificado con un simple
procesador de texto. Está relacionado con los formatos PGM (escala de grises) y PPM (color).

PCX, PiCture eXchange

Es un formato de imagen digital que usa la forma simple de la codificación runlegth (un tipo de
compresión sin pérdidas).
PDF, Portable Document format
Es un formato de almacenamiento de documentos, que permite almacenar textos con formato,
imágenes de diferentes tipos, etc. Es una versión simplificada de PostScript; permite contener
múltiples páginas y enlaces.

PGM, Portable Graymap Format

Es un formato de gráficos simple en escala de grises. Utiliza 8 bits por píxel. A diferencia del resto de
formatos gráficos, un fichero PGM contiene texto plano y puede ser modificado con un simple
procesaro de texto.

PIC. Picture
Este formato puede almacenar una imagen de mapa de bits con dos posibilidades: 256 colores a una
resolución máxima de 320 x 200 píxeles y 16 colores a una resolución de 640 x 480 píxeles.

PPM, Portable Pixmap Format

PPM es un formato gráfico simple en color. Utiliza 24 bits por píxel: 8 para el rojo, 8 para el verde y
8 para el azul. A diferencia del resto de formatos gráficos, un fichero PPM contiene texto plano y
puede ser modificado con un simple procesador de texto. Está relacionado con los formatos PGM
(escala de grises) y PBM (blanco y negro).

PSD (Photoshop Digital Format)

PSD es el formato de mapa de bits (aunque con funcionalidades avanzadas) nativo del programa de
tratamiento de imágenes Adobe Photoshop, válido para MAC y PC.
Es un formato sin compresión, por lo que no produce pérdidas de calidad, y admite todos los Modos
de Color, canales alfa, tintas Planas, guías, trazados, selecciones, textos, capas simples y de ajuste
y máscaras.

PSP, Documento de Paint Shop Pro

Formatos estándar de los documentos de Paint Shop Pro, similares a los documentos .psd de
Photoshop. Compatible con muy pocos programas.

SVG, Scalable Vector Graphics

SVG es un lenguaje para describir gráficos vectoriales bidimensionales, tanto estáticos como
animados (estos últimos con ayuda de SMIL), en XML. SVG se convirtió en una recomendación del
W3C en Septiembre de 2001, por lo que ya ha sido incluido de forma nativa en el navegador web del
W3C Amaya.

SWF, ShockWave Flash

SWF es la extensión de los archivos creados con Macromedia Flash, y significa ShockWave Flash. Los
archivos SWF pueden protegerse para que no sean editables, y son una compilación y compresión
del archivo de autor (FLA) editable desde Flash.

TGA, Truevision TGA

El formato TGA es un formato gráfico de mapa de bits desarrollado por la empresa
Truevision para las tarjetas Targa y Vista, válido para PC y MAC, que permite guardar imágenes
monocromáticas (2 bits) y con diferentes niveles de profundidad de color (8, 16, 24 y 32 bits),
utilizando o no una paleta gráfica. Puede trabajar en Escala Grises, Color Indexado, RGB (16 y 24
bits sin canales alfa) y RGB de 32 bits (un solo canal alfa).

TIFF, Tagged Image File Format

La denominación en inglés Tagged Image File Format (formato de archivo de imágenes con etiquetas)
se debe a que los archivos TIFF contienen, además de los datos de la imagen propiamente dicha,
"etiquetas" en las que se archiva información sobre las características de la imagen, que sirve para
su tratamiento posterior.

WMF, Windows MetaFile Format

WFM es un metaformato de 16 bits de los sistemas operativos Windows, siendo un estándar de
intercambio de gráficos entre las diferentes aplicaciones Microsoft (Word, Excel, Access, etc.).

XBM, X BitMap
Formato nativo en blanco y negro del sistema X Window, compatible con la mayoría de navegadores
web. Se trata de un formato ASCII sin compresión diseñado de tal forma que los archivos tienen
sintaxis de C/C++, pudiendo ser incluidos en el código fuente.

XCF, eXperimental Computing Facility

Formato nativo para el programa The GIMP (OpenSource), con múltiples características extra, como
la composición por capas. Usado, sobre todo, en The GIMP, pero también leíble por ImageMagick.

X-Pixmap (.xpm)
Inspirado en el formato XBM, es usado casi exclusivamente en plataformas UNIX, Linux, BSD con el
sistema X Windows.

1.5 Sistemas de coordenadas de referencia

En geometría, un sistema de coordenadas es un sistema que utiliza uno o más números
(coordenadas) para determinar unívocamente la posición de un punto o de otro objeto geométrico.
El orden en que se escriben las coordenadas es significativo y a veces se las identifica por su posición
en una tupla ordenada; también se las puede representar con letras, como por ejemplo «la
coordenada-x». El estudio de los sistemas de coordenadas es objeto de la geometría analítica,
permite formular los problemas geométricos de forma "numérica".2

Un ejemplo corriente es el sistema que asigna longitud y latitud para localizar coordenadas
geográficas. En física, un sistema de coordenadas para describir puntos en el espacio recibe el
nombre de sistema de referencia.

Para describir una imagen, primero es necesario seleccionar un sistema de coordenadas cartesianas
adecuado. Puede ser bidimensional o tridimensional. Extensión de coordenadas: valores x,y y z
mínimos y máximos para cada objeto.
2 INTRODUCCIÓN A WEBGL

Primeramente se dará a conocer algunos términos que se utilizarán a lo largo del semestre. Es
imprescindible entrar en estos detalles para una mejor comprensión del tema. El primer término
importante a mencionar es HTML5. HTML5 (HyperText Markup Language, versión 5), es la quinta
versión del lenguaje para estructurar y presentar contenido en la web. Su principal objetivo es
manejar la mayoría de los contenidos multimedias actuales sin la necesidad de plugins. Ofrece
muchas características significativas, pero la que nos interesa ahora es el elemento canvas.

Canvas es un elemento de HTML5 que permite la generación de gráficos dinámicamente por medio
del scripting. Permite generar gráficos estáticos y animaciones. Este objeto puede ser accedido a
través de javascript, permitiendo generar gráficos 2D, animaciones, juegos y composición de
imágenes. Actualmente está soportado por la mayoría de los navegadores, incluyendo Internet
explorer 9. Con canvas podemos crear rectángulos, líneas, arcos, curvas, dibujar imágenes,
añadir colores y estilos, además de transformaciones y composiciones, y lo más importante,
animaciones. Nos permite hacer imágenes dinámicas pero sin plugins externos.

OpenGL(Open Graphics Library) es una especificación estándar que define una API (application
programming interface) multiplataforma para escribir aplicaciones que contengan gráficos 2D y 3D.
OpenGL está manejado por el grupo tecnológico Khronos Group, el cual es un consorcio industrial sin
fines de lucro encargado de crear estándares abiertos para permitir la creación y aceleración
de la computación paralela, gráficos y medios dinámicos en una variedad de plataformas y
dispositivos.

OpenGL ES 2.0 (OpenGL for Embedded Systems) es una variante simplificada de OpenGL para
dispositivos integrados, tales como smartphones, PDAs, consolas, entre otros. Consiste de un
subconjunto bien definido de OpenGL. Permite la programación completa de gráficos 3D. Al igual que
OpenGL, está manejado por Khronos Group. Toda la familia de OpenGL tiene una característica muy
importante: la aceleración por hardware.

Hardware-Acceleration (Aceleración por hardware) es el uso del hardware para desempeñar

algunas funciones mucho más rápido de los que es posible en software corriendo en la CPU de
propósito general. De esta manera se utiliza la GPU de la tarjeta gráfica para procesar grandes cargas
de gráficos. La GPU (Graphics Processing unit) o unidad de procesamiento de gráficos es
un procesador dedicado al procesamiento de gráficos u operaciones de coma flotante.

JavaScript es un lenguaje de scripting multiparadigma que soporta los estilos de programación

orientada a objetos, imperativa y funcional. Es un lenguaje del lado del cliente (client-side),
implementado como parte del navegador web, permitiendo mejoras en la interfaz de usuario y lo
más importante, páginas web dinámicas. Todos los navegadores web modernos interpretan el código
javascript integrado en las páginas web. Javascript permite a los navegadores ser
capaces de reconocer objetos en una página HTML a través del DOM. Por último, DOM (Document
Object Model) o modelado de objetos del documento es una API multiplataforma para representar e
interactuar con objetos en documentos HTML, XHTML y XML. Esto permitirá a los programas y scripts
acceder dinámicamente y modificar el contenido, estructura y estilo de los documentos HTML y
XHTML. DOM es requerido por JavaScript para inspeccionar y modificar páginas web dinámicamente.

Prueba de WebGL
Como averiguar si se dispone de soporte para WebGL en nuestra máquina. Abre un navegador y
accede a cualquiera de las muchas páginas que informan de si el navegador soporta o no WebGL.
Por ejemplo, la página http://get.webgl.org es una de ellas. Si funciona, se mostrara una página
con un cubo en alambre dando vueltas´ sobre sí mismo como el que aparece en la figura.

Comprueba la disponibilidad de WebGL en los diferentes navegadores que tengas

instalados en tu equipo. Si tienes varios sistemas operativos repite las pruebas en cada uno
de ellos. Si tienes dispositivos moviles, teléfonos o tabletas a tu alcance.

¿Piensas que lo que desarrolles en WebGL vas a tener que probarlo en cada navegador y sistema
con el fin de comprobar, no solo su funcionamiento, sino también si se obtiene o no el mismo
resultado?

Accede a la siguiente web: http://webglreport.com/. Aunque muchos términos te resulten extraños,

trata de contestar a las siguientes preguntas:

¿Cuál es la versión de WebGL que soporta tu navegador?

¿Cuántos bits se utilizan para codificar el color de un píxel?

Si realizas una búsqueda en internet encontrarás bastantes páginas que ofrecen una selección de
ejemplos y de páginas donde los desarrolladores cuelgan sus propios trabajos. A continuación figuran
tres de ellos, prueba algunos de los ejemplos que ahí puedes encontrar:

 Chrome Experiments: http://www.chromeexperiments.com/

 Experimental WebGL Demo Examples: http://www.awwwards.com/22-experimental-webgl-
demo-examples.html
 WebGL Samples: http://webglsamples.org/
1.1 Qué es WebGL
WebGL fue creado inicialmente por Mozilla, y más tarde estandarizado por el grupo tecnológico
Khronos Group, el mismo grupo responsable de OpenGL y OpenGL ES. El primer prototipo fue
diseñado por Mozilla en el año 2006 y a principios del 2009, Mozilla y Khronos Group comenzaron el
WebGL Working Group. Además de los ya mencionados, actualmente los principales fabricantes
de navegadores, Apple (Safari), Google (Chrome) y Opera (Opera), así como algunos proveedores
de hardware son miembros del grupo de trabajo WebGL o WebGL Working Group.Todos ellos están
interesados en verificar que el contenido WebGL pueda correr tanto en desktop y hardware de
dispositivos móviles.

WebGL (Web-based Graphics Library) es un estándar web multiplataforma para una API de
gráficos 3D de bajo nivel basado en OpenGL ES 2.0 y expuesto a través del elemento canvas de
HTML5 como interfaces DOM (Document Object Model). Esta API provee enlaces de JavaScript a
funciones OpenGL haciendo posible proveer contenido 3D acelerado en hardware a las páginas web.
Esto hace posible la creación de gráficos 3D que se actualizan en tiempo real, corriendo en el
navegador.

Podemos decir también que WebGL, es una librería de software que extiende al lenguaje de
programación javaScript para permitir generar gráficos interactivos 3D dentro de cualquier navegador
web compatible y código de efectos especiales (código shader) que se ejecuta en la unidad de
procesamiento gráfico de una computadora (GPU). WebGL es un contexto del elemento canvas
que provee un API de gráficos 3D sin la necesidad de plugins. Los elementos WebGL se pueden
mezclar con otros elementos HTML y componerse con otras partes de la página o el fondo de la
misma.

Modelo conceptual de la arquitectura WebGL

En este modelo se utiliza JavaScript para obtener a través del DOM el elemento Canvas de HTML5.
Una vez obtenido el elemento Canvas, s e define el contexto WebGL, por medio del cual accedemos
a la API de WebGL, la cual está basada en la API de OpenGL ES. Por eso se dice que, técnicamente
es un enlace (binding) para JavaScript para usar la implementación nativa de OpenGL ES 2.0. Este
último, se encarga de comunicarse con el driver de la tarjeta gráfica y así poder realizar la aceleración
por hardware en la GPU. Como vemos, se diferencian los eventos que ocurren en el espacio de
usuario y en el kernel.

La API de WebGL interactúa bien con el resto de las plataformas web; específicamente se proporciona
apoyo para la carga de texturas 3D a partir de imágenes HTML o video, y la entrada del teclado y
mouse se manejan mediante los conocidos eventos DOM. Este API poderoso es de muy bajo nivel y
su uso requiere buenos conocimientos acerca de la programación 3D y matemática 3D. Otra
desventaja de WebGL es que consume mucha CPU.

HTML5 y canvas
Un canvas es un elemento rectangular que define el espacio de la página web donde se desea
visualizar la escena 3D. El código se muestra como crear un canvas de tamaño 800 por 600.

Canvas es un elemento de HTML5 que permite la generación de gráficos dinámicamente por medio
del scripting. Permite generar gráficos estáticos y animaciones. Este objeto puede ser accedido a
través de javascript, permitiendo generar gráficos 2D, animaciones, juegos y composición de
imágenes. Actualmente está soportado por la mayoría de los navegadores, incluyendo Internet
explorer 9. Con canvas podemos crear rectángulos, líneas, arcos, curvas, dibujar imágenes, añadir
colores y estilos, además de transformaciones y composiciones, y lo más importante, animaciones.
Nos permite hacer imágenes dinámicas pero sin plugins externos.

Le agregamos un border de
grosor 1 px mediante un css.

La zona correspondiente al
canvas, con un
tamaño de 800 x 600 píxeles.

Este texto se mostrará en los

navegadores que nos
soporten el elemento canvas.
Contexto WebGL
Un contexto WebGL es un objeto JAVASCRIPT a través del cual se accede a toda la funcionalidad
de WebGL. Es necesario crear primero el canvas y entonces obtener el contexto a partir de este.

Para poder hacer referencia al elemento canvas y trabajar

sobre él se requiere de javaScript.

Lo primero que debemos realizar es obtener el elemento

canvas o la referencia hacia el elemento mediante el DOM.

Una vez obtenido el elemento, debemos establecer el contexto en

el cual vamos a trabajar, utilizando el método getContext y
pasándole como argumento el contexto deseado. En este caso en
particular vamos a utilizar “2d”.
Una vez obtenido el contexto podemos empezar a dibujar en él, con los varios métodos existentes
que provee canvas. Una práctica buena es comprobar el contexto canvas, de manera a declarar
código en un navegador que no soporte canvas y mostrar algo aceptable en lugar de un error.
Podemos realizar esto, uniendo las líneas anteriores en el siguiente fragmento de código.

Para comprender el listado, veamos algunos de los atributos que podremos utilizar para realizar
rellenos con Canvas:
 fillStyle: es el color del relleno y puede recibir como valor un color.
 strokeStyle: similar al anterior, pero se refiere al color del trazo (contorno).
 lineWidth: es una propiedad para indicar el grosor de una línea.
 lineCap: permite establecer cómo se verán los extremos de una línea. Puede recibir los
valores butt (predeterminado, es recto, arranca y termina exactamente con el path), round
(redondeados, dibuja un semicírculo con base a partir del comienzo del path, superando esa
posición) o square (dibuja un rectángulo a partir del inicio y final del path, superándolo).
 lineJoin: nos da la posibilidad de definir cómo se verán las líneas cuando se unen. Por
ejemplo, en un cuadrado o en un rectángulo definirá cómo lucirán sus ángulos. Puede recibir
los valores miter (predeterminado, no hay cambios), round o bevel (crea un biselado)

Resulta importante destacar que también es posible recurrir a algunos métodos de JavaScript para
realizar el dibujo, hacer paths (trayectorias), mover, crear arcos y curvas. A continuación veremos el
detalle:
 getContext(): es el método que invoca el contexto del Canvas. Debemos recordar que se
utiliza en el comienzo.
 rect(): sirve para dibujar rectángulos que no tengan relleno. Puede recibir cuatro
parámetros. Recordemos que los dos primeros corresponden a las coordenadas de los ejes
X e Y, las otras dos son, anchura y altura en pixeles.

 fillRect(): sirve para dibujar rectángulos que tengan relleno. Puede recibir cuatro
parámetros. Recordemos que los dos primeros corresponden a las coordenadas de los ejes
X e Y, las otras dos son, anchura y altura en pixeles.

 strokeRect(): permite dibujar el rectángulo sin relleno (solo el trazo del borde). Recibe los
mismos parámetros que fillRect().

 clearRect(): debemos tener en cuenta que con este método, podremos limpiar o borrar
áreas de forma rectangular. Puede recibir los mismos parámetros que el método fillRect().

 beginPath(): utilizamos este método para indicar que comenzará el dibujo de un path. No
recibe parámetros.
 moveTo(): con este método, nos encargamos de mover el puntero que marca desde dónde
comenzaremos a dibujar el path. Recibe como parámetros las coordenadas del eje X e Y.
 lineTo(): nos permite dibujar una línea. El origen será el lugar donde está posicionado el
puntero. El final de la línea estará dado por los parámetros que le pasemos a este método
(X e Y).

 closePath(): este método nos permite cerrar el path con una recta desde el punto inicial al
final (no recibe parámetros).

 fill(): nos brinda la posibilidad de llenar con color el área que hayamos definido con el path.
Si el dibujo realizado con el path no está cerrado, se realizará el cierre con una línea recta
(entre principio y final). Debemos recordar que no deben quedar segmentos intermedios sin
dibujar porque, en ese caso, no tendrá efecto el relleno con este método.

 stroke(): se trata de una opción que nos permite realizar el dibujo de una línea en el
contorno del path. A diferencia de fill(), este método no rellena, ya que solo dibuja el
contorno.

 arc(): se emplea para dibujar arcos, con los cuales podremos describir una circunferencia (o
un segmento de ella). Recibe como parámetros, primero, las coordenadas de los ejes X e Y.
Los siguientes dos parámetros son los que corresponden al ángulo de comienzo y al
de final, y deben estar expresados en radianes. El último parámetro que recibe es el sentido
que tomará (true para sentido antihorario de principio a f n y false para el sentido contrario).

 arcTo(): nos permite redondear esquinas. Recibe los dos primeros parámetros como el X y
el Y del subpath; los dos siguientes se refieren al X y al Y del final; el último valor es el radio.

 bezierCurveTo(): permite dibujar curvas Bezier, las cuales se definen a través de funciones
matemáticas. El comienzo de la curva coincide con la posición inicial del puntero. Los dos
primeros parámetros que le pasamos a este método nos permiten indicar los puntos X e Y
del primer punto que define la tendencia de la primera curva. El siguiente par define el punto
(X e Y) de la segunda curva. Los dos valores finales marcan el final, también con X e Y.

 quadraticCurveTo(): permite dibujar curvas cuadráticas, que se pueden considerar como

un subtipo de curvas Bezier. La curva comienza a dibujarse desde donde esté parado el
puntero; los primeros dos parámetros definen las coordenadas X e Y que tendría
imaginariamente el punto que marca la inflexión en la tendencia tomada por la curva. Los
dos parámetros siguientes indican los ejes X e Y donde concluye la curva.

 strokeText(texto, x, y): dibujará sólo la línea perimetral de cada carácter.

 fillText(texto, x, y): dibujará un texto lleno con algún color o imagen como patrón
(pattern)

 save(): Salva el estado actual del canvas.

 restore(): Regresa el estado canvas almacenado.
A continuación, utilizaremos algunos de los métodos vistos hasta aquí para crear una forma triangular
que se llenará de color azul:

A continuación, se presenta un código que dibuja un rectángulo que se rellenará de color rojo:

Cuál es la salida del siguiente código?

A continuación, se presenta un código que dibuja un rectángulo con contorno de color rojo:

Cuál es la salida del siguiente código?

Cuál es la salida del siguiente código?

Código que presenta un ejemplo completo donde se dibujan dos rectángulos superpuestos.
Realizar un programa que muestre 6 rectángulos, tres arriba y tres abajo.

Realizar un programa que llene de cuadros la pantalla y cada uno de color diferente.

Para trabajar con imágenes en Canvas de HTML5, contamos con el método drawImage(). Con esta
opción, podremos mostrar imágenes (GIF, JPG o PNG) dentro de nuestro lienzo. Recibe tres
parámetros; el primero es el objeto de la imagen que vamos a emplear, y los dos siguientes son
su posición (en los ejes X e Y). Opcionalmente, podemos indicar dos parámetros más que indiquen
el ancho y el alto de la imagen si deseamos escalarla. Si no indicamos estos dos últimos parámetros
y la imagen entra en el espacio definido, no habrá problemas. En caso de que la imagen sea más
grande que el espacio de nuestro Canvas, si no instrumentamos otras opciones y no la escalamos,
no se mostrará. Veamos un ejemplo de cómo aplicarlo:

Invocando la función dibujarCanvas al momento que se cargue la página.

Cuál es la salida del siguiente código?

Cuál es la salida del siguiente código?

https://developer.mozilla.org/es/docs/Web/Guide/HTML/Canvas_tutorial
Una vez entendido cómo funciona canvas utilizando un contexto 2D, se puede comenzar a trabajar
con Canvas y WebGL. Para trabajar en canvas 3D existen dos métodos:

 Uno de ellos implica desarrollar un plano 2D desde un objeto 3D, controlando el plano y la
cámara que queremos mostrar.

 La otra alternativa, es utilizando WebGL.

Como hemos vimos previamente, para trabajar en 2D, debemos utilizar el contexto “2d” en el
elemento canvas, y para trabajar en WebGL debemos utilizar el contexto “webgl” o en caso de que
no funcione, el “experimental-webgl”. Las cadenas son case sensitive. Una vez obtenido el
contexto para WebGL utilizando el elemento canvas, podemos empezar a trabajar con WebGL.
WebGl tiene una gran variedad de funciones las cuales deben ir dentro de la etiqueta <script>, ya
que se encuentran escritas en javaScript.

Para empezar, se muestra una función que recibe como parámetro el elemento canvas obtenido a
través del DOM, y que se encarga de inicializar el contexto WebGL.

Ya finalizada la función anterior, se procede a crear la función start() que será llamada en el body,
de la siguiente manera:
<body onload="start()">

Esta función obtendrá el elemento canvas, y llamará a la función initWebGL() para obtener el
contexto WebGL. Aquí se muestra:
Ahora empezaremos a crear nuestros fragmentos de código para probar WebGL. Debemos sustituir
cada uno de los siguientes códigos dentro del if anterior.

En el siguiente código sencillo WebGL se muestra información acerca de la versión de WebGL, el

navegador, y el renderizador usado. Como se observa, se utilizan algunos atributos y métodos del
objeto contexto.

Hasta ahora, sólo se realizó una inicialización del contexto WebGL, pero para trabajar con WebGL se
requieren de muchas cosas más.

Una vez que se ha obtenido el contexto WebGL, se debe crear el buffer de dibujo (drawing buffer)
en el cual son renderizadas todas las llamadas a la API. El tamaño del buffer, está determinado por
los atributos width y height del elemento canvas. Se debe limpiar (clear) el buffer con un color y una
profundidad (Depth) específica, cuyos valores por defecto son (0,0,0,0) y 1.0 respectivamente.
Luego, se deben crear unos buffers con los cuales trabajar.

Podemos expandir nuestra función start(), agregando dos funciones, realizando el clear del buffer
de dibujo mencionado, y una llamada a la función drawScene().

En initBuffers(), se crean los buffers que almacenaran los vértices de los gráficos. Los vértices son
los puntos en el espacio 3D que definen la figura que estamos dibujando. Este buffer se crea con el
método del objeto contexto, contexto.createBuffer(). Este buffer, es en realidad un poco de
memoria en la tarjeta gráfica.

Para manejar los buffers, existen dos métodos:

 contexto.bindBuffer() especifica el buffer actual, en el cual deben realizarse las

operaciones
 contexto.bufferData() permite cargar el buffer actual.
La función drawScene(), es el lugar en donde utilizamos los buffers para dibujar la imagen que se
ve en pantalla. En ella se utiliza el método viewport() el cual define el lugar de los resultados de
renderización en el buffer de dibujo. Sin el viewport, no se manejará adecuadamente el caso donde
canvas cambie de tamaño. Luego, se define la perspectiva con el cual queremos observar la escena.
Por defecto, WebGL dibuja las cosas que se encuentran cerca con el mismo tamaño que el de las
cosas que se encuentran alejadas. Para definir que las cosas alejadas se vean más pequeñas, hay
que modificar la perspectiva.

Para empezar a dibujar, hay que moverse al centro de la escena 3D. Al dibujar una escena, se
especifica la posición actual y la rotación actual, ambos mantenidos en una matriz. La matriz que se
usa para representar el estado actual move/rotate es llamado model-view matrix. Esta matriz
nos mueve al punto de origen desde el cual podemos empezar a dibujar.

La función initShaders(), inicializa los Shaders, evidentemente. Pero, ¿Qué es un Shader?. Un

Shader es un conjunto de instrucciones de software que es utilizado para realizar transformaciones
y crear efectos especiales, como por ejemplo iluminación, fuego o niebla. Proporciona una interacción
con la GPU hasta ahora imposible, por lo cual la renderización se realiza en hardware gráfico a gran
velocidad.

Se utilizan los shaders de manera a que los segmentos de programa gráficos sean ejecutados en la
GPU, y no en javaScript, lo cual sería muy ineficiente y lento. Un lenguaje de sombreado muy utilizado
es GLSL(OpenGL Shading Language), el cual es un lenguaje de alto nivel basado en C.
Por eso, algunos desarrolladores reconocen a WebGL como una API basado en el uso de shaders
GLSL.

OpenGL maneja muchos tipos de recursos como parte de su estado. WebGL representa estos
recursos como objetos DOM. Los recursos que son soportados actualmente son: texturas, buffers,
framebuffers, renderbuffers, shaders y programas. La interfaz del contexto tiene un método
para crear un objeto para cada tipo.
1.2 Preparando el renderizado en 3D
Lo primero que necesitas para poder usar WebGL para renderizar en 3D es un HTML canvas. El
fragmento HTML a continuación establece un canvas y configura un controlador de
eventos onload que se utilizarán para inicializar nuestro contexto WebGL.

<body onload="start()">
<canvas id="glcanvas" width="640" height="480">
Tu navegador parece no soportar el elemento HTML5
<code>&lt;canvas&gt;</code>.
</canvas>
</body>

1.3 Preparando el contexto de WebGL

La función start(), en nuestro código JavaScript, es llamada después de que el documento fue
cargado. Su misión es establecer el contexto WebGL y empezar a renderizar contenido.

var gl; // Un variable global para el contexto WebGL

function start() {
var canvas = document.getElementById("glcanvas");

gl = initWebGL(canvas); // Inicializar el contexto GL

// Solo continuar si WebGL esta disponible y trabajando

if (gl) {
gl.clearColor(0.0, 0.0, 0.0, 1.0); // Establecer el
color base en negro, totalmente opaco
gl.enable(gl.DEPTH_TEST); // Habilitar prueba
de profundidad
gl.depthFunc(gl.LEQUAL); // Objetos cercanos
opacan objetos lejanos
gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT); // Limpiar el buffer
de color asi como el de profundidad
}
}

La primer cosa que hacemos es obtener una referencia al canvas, ocultándolo en una variable
llamada canvas. Obviamente si no necesitas referenciar repetidamente, deberías evitar guardar este
valor globalmente, y solo guardarlo en una variable local o miembro de un objeto.Una vez tenemos
el canvas, llamamos a la función llamada initWebGL(); esta es una función que definiremos
momentáneamente; su trabajo es inicializar el contexto WebGL.

Si el contexto es exitosamente inicializado, gl será una referencia a este. En este caso, establecemos
el color base a negro, después limpiamos el contexto a ese color. Después, el contexto es configurado
estableciendo parámetros. En este caso, estamos habilitando la prueba de profundidad y
especificando que los objetos cercanos opacaran a los objetos lejanos.
Para los propósitos de esta introducción al código, eso será todo lo que haremos. Empezaremos a
ver cómo crear algo después.

1.4 Cambiando el tamaño del contexto WebGL

Un nuevo contexto WebGL establecerá el tamaño de su ventana a la altura y anchura del elemento
canvas, sin CSS, al instante el contexto fue obtenido. Editando el estilo del elemento canvas cambiara
su tamaño mostrado pero no cambiara la resolución de renderizado. Editando los atributos de
anchura y altura de un elemento canvas después de crear el contexto tampoco cambiara el número
de pixeles a ser renderizados. Para cambiar la resolución en la cual WebGL renderiza, como cuando
el usuario cambia el tamaño de ventana de un canvas de documento completo o quieres proveer
ajustes gráficos ajustables dentro de la aplicación, necesitaras llamar a la función del contexto WebGL
llamada viewport() para hacer efectivo el cambio.

Para modificar la resolución renderizada de un contexto WebGL con las variables gl y canvas como
fue usado en el ejemplo de arriba:

gl.viewport(0, 0, canvas.width, canvas.height);

<canvas id="glcanvas" width="940" height="880">

Un lienzo experimentara escalado cuando es renderizado en una resolución diferente a la establecida
en el estilo CSS . Cambiar el tamaño con CSS es muy util para salvar recursos renderizando a una
baja resolución y permitiendo que el navegador aumente la escala; bajar la escala es posible, lo que
producirá un efecto de Super Sample AntiAliasing (SSAA) (con resultados sencillos y un costo alto de
rendimiento). Es mejor usar el MSAA (Multi Sample AntiAliasing) e implementar un filtrado de
texturas en el navegador del usuario, si es que está disponible y es apropiado, en lugar de hacerlo
por medio de la fuerza bruta, esperando que el algoritmo de reducción de la imagen del navegador
produzca un resultado limpio.

1.5 Frameworks
Debido a que WebGL posee un API de muy bajo nivel, podría provocar el rechazo por parte de
algunos programadores. Gracias a su creciente uso, se han de varios frameworks. Estos frameworks
son sólidos y garantizan que corren en cualquier dispositivo, haciendo la programación más fácil.
Esto permite que los desarrolladores web no tengan que lidiar con las complejidades WebGL y la
matemática 3D.

Algunos frameworks son: C3DL, CopperLicht, CubicVR, EnergizeGL, GammaJS, GLGE, GTW,
Jax, O3D, Oak3D, PhiloGL, SceneJS, SpiderGL, TDL, Three.js y X3DOM. La mayoría son
librerías JavaScript.

A parte de los frameworks WebGL, existen otras librerías útiles para el manejo de matrices que
también facilitan la programación, tales como: Sylvester, mjs, glMatrix.
https://threejs.org/examples/
1.5 Introduccion a los shaders en WebGL

Los shaders son a grandes rasgos, pequeños programas que se ejecutan en la tarjeta gráfica para
representar todos y cada uno de los píxeles que compondrán la escena final en 3D. En concreto
tenemos dos tipos de shaders:

 Vertex shader (VS): Se trata de una función de procesamiento gráfico, que se encarga
de manipular y representar los vertex (vértices) en un plano 3D, se encarga por ejemplo de
calcular el color, la textura o la posición en la escena de ese punto.

 Fragment shader (FS) o Pixel shader (PS): De forma parecida al VS, estos son funciones
o pequeños programitas que manipulan los fragments (algo así como píxeles con datos
adicionales como color, iluminacion, etc).

De esta manera estos programas llamados shaders, procesan y representan finalmente una escena
3D en un monitor, ejecutandose cada VS por cada vértice, y cada FS por cada fragmento, decidiendo
así la posición, color, cantidad de iluminación, etc, de cada punto de la escena.