webGl

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 p or 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. S utherland. En 1961 Sutherland creó un programa de dibujo informático 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 (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  “Spacewar”  ”  o   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

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 (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  “Spacewar”  ”  o   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 s e 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 se trata básicamente básicamente de una base de datos de entidades geométricas geométricas (puntos, líneas, arcos, etc). Con la que se puede puede operar a través través de una interfaz 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   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 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 a lmacenar 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 so nidos 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. L a 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 c oordenadas 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 q ue 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-webgldemo-examples.html WebGL Samples: http://webglsamples.org/

1.1Qué 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 a ccedemos 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 6 00. 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 e s 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 , 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:

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 q ueremos 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.2Preparando 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. Tu navegador parece no soportar el elemento HTML5 <canvas>.

1.3Preparando 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); color base en negro, totalmente opaco gl.enable(gl.DEPTH_TEST); de profundidad gl.depthFunc(gl.LEQUAL); opacan objetos lejanos gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT); de color asi como el de profundidad } }

// Establecer el // Habilitar prueba // Objetos cercanos // Limpiar el buffer

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.4Cambiando 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 ); 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 e scala; 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.