PDF de programación - WebGL

Web-based Graphics Library

Carlos Samuel Cantero Gonz´alez.

[email protected]

Universidad Cat´olica Nuestra Se˜nora de la Asunci´on

Facultad de Ciencias y Tecnolog´ıa

Ingenier´ıa inform´atica.

Resumen ´Este art´ıculo trata sobre uno de los nuevos est´andares de la
Web3D: WebGL. Aqu´ı se dar´a a conocer qu´e es WebGL, c´omo trabajar
con ella, algunas aplicaciones desarrolladas y todo lo relacionado con su
crecimiento en la industria.

1.

Introducci´on

Antes de empezar a dar una definici´on formal de WebGL, se dar´a a conocer
otros t´erminos que se utilizar´an a lo largo del texto. Es imprescindible entrar en
estos detalles para una mejor comprensi´on del tema.
El primer t´ermino importante a mencionar es HTML5. HTML5 (HyperText
Markup Language, versi´on 5), es la quinta versi´on del lenguaje para estructurar
y presentar contenido en la web. Actualmente se encuentra en modo experimen-
tal aunque ya es utilizado por muchos desarrolladores. Su principal objetivo es
manejar la mayor´ıa de los contenidos multimedias actuales sin la necesidad de
plugins.[11] 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´on de gr´aficos din´ami-
camente por medio del scripting. Permite generar gr´aficos est´aticos y animacio-
nes. Este objeto puede ser accedido a trav´es de javascript, permitiendo generar
gr´aficos 2D, animaciones, juegos y composici´on de im´agenes.[10] Actualmente
est´a soportado por la mayor´ıa de los navegadores, incluyendo Internet explorer
9. Con canvas podemos crear rect´angulos, l´ıneas, arcos, curvas, dibujar im´age-
nes, a˜nadir colores y estilos, adem´as de transformaciones y composiciones, y lo
m´as importante, animaciones. Nos permite hacer im´agenes din´amicas pero sin
plugins externos.
OpenGL(Open Graphics Library) es una especificaci´on est´andar que define una
API (application programming interface) multiplataforma para escribir aplica-
ciones que contengan gr´aficos 2D y 3D. [12]. OpenGL est´a manejado por el grupo
tecnol´ogico Khronos Group, el cual es un consorcio industrial sin fines de lucro
encargado de crear est´andares abiertos para permitir la creaci´on y aceleraci´on
de la computaci´on paralela, gr´aficos y medios din´amicos en una variedad de pla-
taformas y dispositivos.[23]
OpenGL ES 2.0 (OpenGL for Embedded Systems) es una variante simplifi-
cada de OpenGL para dispositivos integrados, tales como smartphones, PDAs,

consolas, entre otros. [13] Consiste de un subconjunto bien definido de OpenGL.
Permite la programaci´on completa de gr´aficos 3D. Al igual que OpenGL, est´a ma-
nejado por Khronos Group.
Toda la familia de OpenGL tiene una caracter´ıstica muy importante: la acelera-
ci´on por hardware.
Hardware-Acceleration (Aceleraci´on por hardware) es el uso del hardware
para desempe˜nar algunas funciones mucho m´as r´apido de los que es posible en
software corriendo en la CPU de prop´osito general. De esta manera se utiliza la
GPU de la tarjeta gr´afica para procesar grandes cargas de gr´aficos. [6]
La GPU (Graphics Processing unit) o unidad de procesamiento de gr´aficos es
un procesador dedicado al procesamiento de gr´aficos u operaciones de coma
flotante.[15]
JavaScript es un lenguaje de scripting multiparadigma que soporta los estilos
de programaci´on 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´as importante, p´aginas web
din´amicas. [7] Todos los navegadores web modernos interpretan el c´odigo ja-
vascript integrado en las p´aginas web. Javascript permite a los navegadores ser
capaces de reconocer objetos en una p´agina HTML a trav´es del DOM.
Por ´ultimo, DOM (Document Object Model) o modelado de objetos del docu-
mento es una API multiplataforma para representar e interactuar con objetos
en documentos HTML, XHTML y XML. [5] Esto permitir´a a los programas
y scripts acceder din´amicamente y modificar el contenido, estructura y estilo
de los documentos HTML y XHTML. DOM es requerido por JavaScript para
inspeccionar y modificar p´aginas web din´amicamente.

2. Comenzando con WebGL

WebGL fue creado inicialmente por Mozilla, y m´as tarde estandarizado por
el grupo tecnol´ogico Khronos Group, el mismo grupo responsable de OpenGL y
OpenGL ES. El primer prototipo fue dise˜nado por Mozilla en el a˜no 2006 y a
principios del 2009, Mozilla y Khronos Group comenzaron el WebGL Working
Group. Adem´as 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´an interesados en verificar que el contenido WebGL pueda correr
tanto en desktop y hardware de dispositivos m´oviles.
Pero, ¿Qu´e es WebGL?. WebGL (Web-based Graphics Library) es un est´andar
web multiplataforma para una API de gr´aficos 3D de bajo nivel basado en
OpenGL ES 2.0 y expuesto a trav´es del elemento canvas de HTML5 como interfa-
ces DOM (Document Object Model).[24] Esta API provee enlaces de JavaScript
a funciones OpenGL haciendo posible proveer contenido 3D acelerado en hard-
ware a las p´aginas web.[1] Esto hace posible la creaci´on de gr´aficos 3D que se
actualizan en tiempo real, corriendo en el navegador.

A partir de la definici´on anterior, podemos decir tambi´en que WebGL, es una
librer´ıa de software que extiende al lenguaje de programaci´on javaScript pa-
ra permitir generar gr´aficos interactivos 3D dentro de cualquier navegador web
compatible. WebGL es un contexto del elemento canvas que provee un API de
gr´aficos 3D sin la necesidad de plugins.[8] Decir que WebGL es un contexto del
elemento canvas, podr´ıa no entenderse hasta que se muestre como trabajan jun-
tos en la siguiente secci´on.
WebGL trae el API de OpenGL ES 2.0 al elemento canvas. El contenido 3D
est´a limitado a canvas. Se hicieron cambios en la API de WebGL en relaci´on
con la API de OpenGL ES 2.0 para mejorar la portabilidad a trav´es de varios
sistemas operativos y dispositivos.
Podemos observar un modelo conceptual de la arquitectura de WebGL en la
figura 1. En este modelo se utiliza JavaScript para obtener a trav´es del DOM

Figura 1. Modelo conceptual de la arquitectura WebGL.

el elemento Canvas de HTML5. Una vez obtenido el elemento Canvas, se defi-
ne el contexto WebGL, por medio del cual accedemos a la API de WebGL, la
cual est´a basada en la API de OpenGL ES. Por eso se dice que, t´ecnicamente
es un enlace (binding) para JavaScript para usar la implementaci´on nativa de
OpenGL ES 2.0.[8] Este ´ultimo, se encarga de comunicarse con el driver de la
tarjeta gr´afica y as´ı poder realizar la aceleraci´on 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´ua bien con el resto de las plataformas web; espec´ıfi-
camente se proporciona apoyo para la carga de texturas 3D a partir de im´agenes
HTML o video, y la entrada del teclado y mouse se manejan mediante los cono-
cidos eventos DOM.
Este API poderoso es de muy bajo nivel y su uso requiere buenos conocimientos
acerca de la programaci´on 3D y matem´atica 3D. Otra desventaja de WebGL es
que consume mucha CPU.
Una caracter´ıstica importante de WebGL es que, brinda la posibilidad de con-
tenidos 3D a la web sin la necesidad de utilizar plugins, ya que se encuentra
implementado en el navegador.
Otra caracter´ıstica relevante: WebGL es un est´andar web, pero ¿Porqu´e es impor-
tante un est´andar?. Un est´andar web, es un conjunto de especificaciones t´ecnicas
en constante evoluci´on y de mejores pr´acticas para construir sitios web. Con ello
se facilita el mantenimiento, la usabilidad, la interoperabilidad y la calidad de
los trabajos.[9]
Utilizar un est´andar asegura una larga vida a los proyectos, ya que provee por
lo menos una peque˜na estructura de mantenimiento. Tambi´en asegura de que la
mayor´ıa de las personas puedan visitar el sitio web, sin importar que navegador
se est´e utilizando. La compatibilidad hacia adelante y hacia atr´as (forward and
backward compatibility) es posible.[4]
En el caso particular de WebGL, su API est´a basado en un est´andar de gr´aficos
3D familiar y ampliamente aceptado.
No utilizar un est´andar tiene varias desventajas, como poco soporte, mayor ex-
posici´on a problemas de seguridad y problemas de performance. Adem´as la curva
de aprendizaje suele ser muy alta, con un costo-beneficio menor. Otro problema
que se puede dar es el del vendor lock in, en donde se tiene una dependencia
absoluta del proveedor, el cual puede tener un costo elevado.[26]
El lanzamiento (release) de la especificaci´on de la versi´on final de WebGL 1.0 se
di´o el 3 de marzo del 2011 en la conferencia de desarrolladores de juego (Game
Developers Conference - GDC), en San Francisco, Estados Unidos.

3. Utilizando WebGL

A partir de esta secci´on se busca entender m´as a fondo la definici´on anterior

de WebGL, y su funcionamiento.
En general, para empezar a trabajar con WebGL, tenemos que entender c´omo
funciona canvas. En la introducci´on se hab´ıa dado una definici´on de la misma.

Como sabemos, canvas es un elemento de HTML5 que nos permite la generaci´on
de gr´aficos de forma din´amica, el cual posee dos atributos, width (ancho) y height
(alto), y cuyo tama˜no por defecto es 150. Este objeto puede ser accedido a trav´es
de javaScript. A canvas hay que indicarle en que contexto queremos trabajar,
ya sea 2D o 3D (webGL). Podemos decir que el contexto es el acceso a una API
particular, para dibujar ya sea en 2D o WebGL.[18]

3.1. Ejemplo en contexto 2D

A partir de ahora se ir´a creando un ejemplo b´asico del uso del elementos

canvas utilizando un contexto 2D:

<canvas id="micanvas" width="200" height="150">
El navegador no soporta el elemento canvas de HTML5.
</canvas>

Con esto agregamos al