PDF de programación - Desarrollo en WebGL

Desarrollo en WebGL

Eduardo Antuña Díez1, Aitor Díaz Solares2, Daniel González Losada3.

E.P.I. Gijón, Universidad de Oviedo



1 [email protected]
2 [email protected]
3 [email protected]

Resumen. En el siguiente documento se buscará realizar un mini tutorial tra-
tando de iniciar y familiarizar a los lectores sobre la programación en WebGL,
partiendo desde la configuración de los navegadores para poder emplear esta
tecnología, mostrando las nociones básicas para poder programar ejemplos
simples, así como visualizar ejemplos más complejos en donde mostrar todo el
pontencial.

1 Introducción

WebGL es una especificación estándar que está siendo desarrollada actualmente para
desplegar gráficos en 3D en navegadores web. El WebGL permite activar gráficos en
3D acelerados por hardware en páginas web, sin la necesidad de plug-ins en cualquier
plataforma que soporte OpenGL 2.0 u OpenGL ES 2.0. Técnicamente es un enlace
(binding) para javascript para usar la implementación nativa de OpenGL ES 2.0, que
será incorporada en los navegadores. WebGL es manejado por el consorcio de tecno-
logía Khronos Group sin fines de lucro.

WebGL creció desde los experimentos del canvas 3D comenzados por Mozilla.
Mozilla primero demostró un prototipo de Canvas 3D en 2006. A finales de 2007,
tanto Mozilla como Opera habían hecho sus propias implementaciones separadas. A
principio de 2009 Mozilla y Khronos comenzaron el WebGL Working Group (Grupo
de Trabajo del WebGL).

El Grupo de Trabajo del WebGL incluye Apple, Google, Mozilla, y Opera, y
WebGL ya está presente en los builds nocturnos de Mozilla Firefox 3.7, Mozilla Fen-
nec 1.0, WebKit, y Google Chrome 4 developer previews.

Algunas bibliotecas en desarrollo que se están incorporando WebGL incluyen el

C3DL y el WebGLU.

Utiliza el elemento canvas del HTML 5.


2 Configurar navegadores

Como punto de partida trataremos de conseguir un navegador que soporte WebGL. La
mayoría de las versiones de desarrollo de los principales navegadores lo hace, sólo
tendremos que conseguir la versión adecuada y realizar unas pequeñas configuracio-
nes. Veremos las soluciones a adoptar en los principales sistemas operativos.

2.1 Windows

Si tenemos una tarjeta gráfica con GPU ATI o Nvidia, no debería haber problema.
Podremos emplear Firefox o Chrome. En caso de tener problemas, tendremos que usar
Firefox con software de renderización, es decir, los gráficos 3D serán ejecutados en el
procesador normal, no en la tarjeta gráfica.

Para el caso de chipset gráfico Intel, presente en muchos ordenadores portátiles,
sus controladores no suelen ser compatibles con OpenGL, por tanto tampoco lo serán
con WebGL ya que funciona a través de WebGL (en el futuro esto será distinto).
Podríamos probar las instrucciones para Firefox o Chrome, pero no es probable que
funcione; usaremos Firefox con software de renderización.


Firefox
La versión de desarrollo se denomina Minifield. Para conseguirla y poder emplear

WebGL seguiremos los siguientes pasos:

Descargaremos la versión adecuada a nuestra máquina.
Cerramos Firefox previamente, y una vez instalado Minifield, iremos a la página:

about:config

Nos ayudamos del filtro de búsqueda, en donde introducimos "WebGL"
Localizamos webgl.enabled_for_all_sites y lo ponemos a true

Firefox con software de renderización
Si nuestro hardware no es compatible con OpenGL 2.0, la única manera de hacer
funcionar WebGL será la utilización de la biblioteca Mesa. Lo que hace principalmen-
te es emular una tarjeta gráfica, por lo que será un poco lento, pero al menos podre-
mos usar WebGL. Se integra con Minifield. Los pasos a seguir son los siguientes:

Descargaremos la versión adecuada de Minifield para nuestra máquina.
Lo instalaremos, cerrando previamente Firefox.
Descargaremos la biblioteca Mesa. Lo descomprimimos y habrá un archivo lla-

mado OSMESA32.DLL que guardaremos en algún lugar de nuestra máquina.

Iniciamos Minifield y vamos a la página: about:config, nos ayudamos del filtro de

búsqueda e introducimos "WebGL"

Localizamos webgl.enabled_for_all_sites y lo ponemos a true
Localizamos webgl.osmesalib e introducimos la ruta donde se encuentra

OSMESA32.DLL, por ejemplo le daremos el valor: C:\Mesa\osmesa32.dll

Localizamos webgl.software_rendering y lo ponemos a true.




Chrome
La versión de desarrollo se denomina Chromium. Para conseguirla y poder emplear

WebGL seguiremos los siguientes pasos:

Descargaremos de la pagina de integración continua chrome-win32.zip
Descomprimimos, no es necesaria su instalacíón, simplemente ejecutamos el ar-

chivo chrome.exe.

2.2 Macintosh

Si trabajamos con Snow Leopard (OS X 10.6) no deberíamos tener problemas.
Usaremos una versión de desarrollo alternativa de Safari. Si por contra la versión que
manejamos es OS X 10.5, no podremos emplear dicha versión de desarrollo, debere-
mos usar Firefox o Chrome (las cuales a su vez también podríamos usar con OS X
10.6).


Safari
Recordar que WebGL sólo es compatible con Safari en la versión de Snow Leo-
pard OS X 10.6. Para poner en marcha WebGL en esta versión empleando Safari,
realizaremos los siguientes pasos:

Asegurarse que al menos tenemos la versión 4 de Safari
Descargar la versión de desarrollo del enlace
Abriremos un terminal donde ejecutamos: defaults write com.apple.Safari Web-

KitWebGLEnabled -bool YES

Ejecutamos la aplicación de desarrollo recién instalada

Firefox
Se realiza del mismo modo que en Windows, con la salvedad que debemos descar-

gar la versión oportuna para este sistema operativo.


Chrome
Vuelve a ser similar a Windows, el proceso a seguir es:
Descargaremos de la página de integración continua chrome-mac.zip
Descomprimimos. Abrimos una terminal, e iremos a la ruta donde lo hemos des-

comprimido

Nos aseguramos de no tener abierto el Chrome
Ejecutaremos el

siguiente comando una vez estemos en esa

ruta:

./Chromium.app/Contents/MacOS/Chromium

2.3 Linux

Si tenemos una tarjeta gráfica con GPU ATI o Nvidia, no debería haber problema.
Podremos emplear Firefox o Chrome. En caso de tener problemas, tendremos que usar
Firefox con software de renderización, es decir, los gráficos 3D serán ejecutados en el
procesador normal, no en la tarjeta gráfica.

Para el caso de chipset gráfico Intel, presente en muchos ordenadores portátiles,
sus controladores no suelen ser compatibles con OpenGL, por tanto tampoco lo serán
con WebGL ya que funciona a través de WebGL (en el futuro esto será distinto).
Podríamos probar las instrucciones para Firefox o Chrome, pero no es probable que
funcione; usaremos Firefox con software de renderización.


Firefox
Se realiza como en Windows, tener en cuenta que hay que bajar la versión oportuna

para el sistema operativo.


Firefox con software de renderización
Los pasos a seguir son los siguientes:
Descargaremos la versión adecuada de Minifield para nuestra máquina en el si-

guiente enlace.

Lo instalaremos, cerrando previamente Firefox.
Emplearemos el gestor de paquetes para obtener Mesa, asegurándonos de que ha

sido instalado y está actualizado a la última versión.

Iniciamos Minifield y vamos a la página: about:config, nos ayudamos del filtro de

búsqueda e introducimos "WebGL"

Localizamos webgl.enabled_for_all_sites y lo ponemos a true
Localizamos webgl.software_rendering y lo ponemos a true
Localizamos webgl.osmesalib e introducimos la ubicación de la biblioteca com-

partida OSMesa, que suele ser algo como: /usr/lib/libOSMesa.so


Chrome
Para conseguirla y poder emplear WebGL seguiremos los siguientes pasos:
Descargaremos de la página de integración continua chrome-linux.zip para la ver-

sión 32 bits o 64 bits, según cual emplemos.

Descomprimimos. Abrimos una ventana del terminal y vamos al directorio donde

se ha descomprimido.

Nos aseguramos de no tener abierto el Chrome.
Ejecutaremos el siguiente comando una vez estemos en esa ruta: ./chromium

3. Primer Programa

En primer lugar vamos a ver como incrustar nuestro código de webGL en cualquier

página html.

Para incrustar el código html debemos:
Definir en la etiqueta <body> la función encargada gestionar el interface gráfico.
Definir un canvas, asignarle una etiqueta(para luego referenciarlo) y su tamaño.
Cargar los scripts externos que vayamos a necesitar (en este caso los propios de la

API webGL y otro necesario para trabajar con matrices).

Una vez definidos estos aspectos ya podemos comenzar a programar nuestro propio

script en webGL.

Al iniciar nuestra página debemos señalar que función hemos de cargar a la vez que

el código, para nuestro caso será webGLStart().

En dicha función vemos como en primer lugar se ha de inicializar el canvas, lla-
mando a la función initGL() donde, entre otras cosas, se comprueba que el navegador
soporta webGL;

A continuación se inicializan los Shaders, así como los buffers. Nos vamos a cen-
trar un poco en esta última función, puesto que es donde se definen los objetos que
posteriormente se van a mostrar.

Ahora veremos los pasos a seguir para definir los buffers que permiten dibujar un

objeto en la escena:

Crear un buffer para el objeto
Asignar el buffer actual con el que acabamos de crear
Definir los vértices del objeto
Cargar los datos en el buffer
Definir como se han introducido los datos en el buffer
Podemos modificar los vértices para obtener la figura que queramos, siempre y
cuando tengamos cuidado de especificar correctamente como le estamo