PDF de programación - Shader Tool: Un Ambiente Web de Desarrollo Integrado para GLSL

Sesión de Investigación: Artículos Largos

Shader Tool: Un Ambiente Web de Desarrollo

Integrado para GLSL

Luiyit Hernández y Esmitt Ramírez

Centro de Computación Gráfica,EscuelaeComputación

Universidad Central de Venezuela

Caracas, Venezuela

[email protected], [email protected]

Resumen—Un shader se define como una unidad de programa
escrita en un lenguaje de sombreado para la GPU, con la
finalidad de producir imágenes (render). Actualmente, existen
herramientas y tecnologías Web que realizan el despliegue de
este contenido en navegadores basados en HTML5. Por ello,
se ha impulsado el desarrollo de soluciones que apoyan la
implementación de programas de shaders para el lenguaje GLSL,
parte del estándar OpenGL. Sin embargo, de acuerdo a nuestra
investigación, no existen aplicaciones Web disponibles con un
criterio unificado y con todos los elementos fundamentales para
realizar un proceso completo de su desarrollo. En este trabajo
se presenta una solución llamada Shader Tool que contiene un
conjunto de herramientas que incorporan y enlazan todos los
elementos requeridos para el desarrollo de shaders. Esta una
herramienta que emplea plantillas, gráficos 3D, interactividad
y tecnología de sincronización para la implementación de código
GLSL. Nuestras pruebas determinaron la eficacia en rendimiento
de nuestra solución, y recopilaron las experiencias de los usuarios
de la aplicación en términos de utilidad, facilidad de uso y
resultados obtenidos. Así, se muestra la eficiencia de la solución
como un ambiente integrado completo para el desarrollo de
shaders en la Web.

Palabras Clave - shader; GLSL; MVC; WebGL; GPU

I.

INTRODUCCIÓN

Un software de procesamiento gráfico 3D permite la
creación y manipulación de modelos 3D por computadora.
Estas aplicaciones son empleadas tanto para la construcción
de imágenes como para la animación por computadora. En la
actualidad existe un número considerable de aplicaciones con
propósitos muy diversos y de ámbito standalone y online.

Estas aplicaciones han permitido el crecimiento en la
manera de percibir y crear contenido gráfico, generando cam-
bios sustanciales en diversas áreas. Desde el año 2013, los
navegadores han aumentado su rendimiento y son capaces
de ofrecer una plataforma para albergar aplicaciones de alto
procesamiento gráficos. La mayoría de los navegadores han
adoptado la tecnología WebGL [1], que permite crear aplica-
ciones con un rendimiento óptimo de gráficos 2D y 3D gráficos
en el navegador, empleando la unidad de procesamiento gráfico
(GPU).

Actualmente, existen herramientas en la Web basadas en
WebGL y bibliotecas especializadas en el área de los gráficos
2D/3D, que recrean un ambiente de desarrollo de aplicaciones
gráficas. Del mismo modo, muchas de éstas incluyen progra-
mas especiales dirigidos a ser ejecutados en los procesadores
gráficos, llamados shaders. Dichos programas son ejecutados

de manera independiente por la GPU de un computador para
un cierto programa de despliegue gráfico.

La forma tradicional de construcción de shaders es emple-
ando un computador con alguna aplicación standalone. Dado
que dichos programas están enfocados para la Web, es ideal
que el ambiente de desarrollo de éstos también este en la Web.
Sin embargo, no existe un criterio unificado de implementación
de ambientes de desarrollo de shaders para la Web. De hecho,
en algunas aplicaciones no percibe la incorporación de todos
los elementos requeridos para realizar la programación y
ejecución de shaders en GLSL.

En este trabajo se presenta el desarrollo de un sistema
integrado para el desarrollo de shaders para el lenguaje de
OpenGL, haciendo uso de tecnología Web de vanguardia, y de
arquitecturas pensadas para ofrecer un óptimo rendimiento. De
esta manera se busca proveer un conjunto de herramientas Web
que incorporen y enlacen todos los elementos involucrados
en el desarrollo de programas GLSL, además de proporcionar
accesos a la información relacionada con éstos. Shader Tool,
nombre de la solución propuesta, permite un libre acceso a una
biblioteca de recursos dentro de una plataforma de usuarios que
está disponible desde cualquier dispositivo con soporte a un
browser con HTML5. De forma puntual, nuestras principales
contribuciones son:

•

•

•

Una solución computacional para la creación de
shaders en GLSL bajo un entorno de desarrollo Web.

Un conjunto de librerías de recursos para la progra-
mación tanto para el vertex como el fragment shader.

Un sistema Web que almacena los trabajos realizados
por cada usuario dentro de Shader Tool.

Este trabajo se organiza como sigue: en la sección II es
presentada una breve introducción a las tecnologías para el
despliegue en la Web. La sección III muestra una recopilación
de los trabajos previos relevantes para nuestra investigación, así
como un cuadro comparativo de las necesidades en un sistema
integrado de desarrollo para la construcción de shaders. Luego,
la sección IV explica en detalle todos los aspectos asociados a
Shader Tool como parte de nuestra investigación. La sección V
presenta los detalles propios de la interfaz del ambiente Web
presentado. Una serie de experimentos para corroborar nuestro
trabajo se muestra en la sección VI. Por último, la sección VII
muestra una serie de conclusiones y recomendaciones a ser
aplicadas.

165

Tercera Conferencia Nacional de Computación, Informática y Sistemas / CoNCISa 2015 / ISBN: 978-980-7683-01-2

Universidad de Carabobo, Valencia, Venezuela - 28 al 30 de octubre de 2015

(a) Google Body Browser

(b) Editor 3D Castle Defender

(c) The Pulse of the Planet - Twitter

Figura 1. Ejemplos del uso de WebGL en diversas aplicaciones en la Web

II. TECNOLOGÍAS PARA EL DESPLIEGUE EN LA WEB

La Web siempre ha sido un medio visual, sin embargo hasta
hace poco, fue de uso exclusivo de un grupo de aplicaciones
específicas. La mayoría portales Web basados en CSS y
JavaScript, gracias a la incorporación de tecnologías como
el elemento canvas de HTML5 [2], la especificación WebGL
[1] y las imágenes SVG [3], el desarrollo Web ahora es
más dinámico y adaptable. El uso combinado de toda esta
tecnología puede dar como resultados aplicaciones, juegos o
herramientas de alto impacto. La Web ofrece posibilidades de
uso diversos y los editores de shaders es uno de ellos.

El despliegue de gráficos 3D ha tomado un gran impulso
en los últimos años, especialmente en el ámbito de los video-
juegos. Por ello se han desarrollado APIs especializadas para
facilitar los procesos en todas las etapas de generación de grá-
ficos por computador. Éstas han demostrado ser primordiales
para los fabricantes de componentes, proporcionando un medio
de acceso al hardware de una manera abstracta.

Desde hace dos décadas esta tendencia ha ido aumentando
y se unió a la tecnología Web existente. De esta forma, surgen
nuevas formas de producir gráficos 2D/3D y demandas en el
ámbito de la Informática Gráfica. Una gran tendencia de de-
sarrollo para su incorporación fue el uso de lenguajes de script
para la Web como JavaScript (JS). Basados en este lenguaje,
varios grupos de desarrollos coinciden que dicho lenguaje
cuenta con la plataforma más sólida para ser considerado al
momento de crear estándares y APIs que permitan el desarrollo
de aplicaciones gráficas en los navegadores modernos [4].

Entre estos grupos se encuentra Khronos Group (https:
//www.khronos.org) que desde el año de 2011 desarrolla la
biblioteca WebGL (Web Graphics Library). WebGL es una
API escrita totalmente en el lenguaje JavaScript para el desplie-
gue interactivo de gráficos 2D/3D sobre cualquier navegador
compatible, y sin el uso de plugins. WebGL permite el uso
de aceleración a través de la GPU para cálculos físicos,
procesamiento de imagen y efectos gráficos.

Entonces, WebGL es la solución para el despliegue de grá-
ficos por computadora más aceptada en la actualidad por estar
fundamentada en OpenGL, y por contar con la capacidad de
estar presente en los navegadores de forma nativa [5]. Basados
en WebGL, han surgido diversas bibliotecas de desarrolladores
independientes que ofrecen una capa de abstracción para el
despliegue de gráficos 2D/3D. La Fig. 1 muestra ejemplos de

despliegues: (a) una enciclopedia visual del cuerpo humano,
(b) un editor de bloques 3D para personajes, y (c) un indicador
visual de tendencias en Twitter para un hashtag.

En WebGL se emplean programas de shaders, los cuales
son pequeñas unidades de programas que son ejecutadas por el
procesador gráfico para lograr aceleramiento en el despliegue
de gráficos 2D/3D. En WebGL, existen dos tipos de shaders:
vertex shader y fragment shader, los cuales invocan a partes
programables del pipeline de OpenGL. El vertex shader pro-
porciona las posiciones para cada vértice que se dibujará, y
el fragment shader proporciona el color de cada píxel a ser
dibujado.

Estos shaders están escritos en GLSL (OpenGL Shading
Language) [6]. Un shader puede ser incluido en una página
Web con WebGL como texto codificado en un archivo fuente
de JavaScript, como archivos independientes incluidos con el
uso de la etiqueta < script >, ó se recupera desde el servidor
como texto sin formato. El código JavaScript se ejecuta en la
página y luego se envía para su compilación utilizando la API
de WebGL y ejecutados en la GPU del dispositivo.

De esta forma básica, se ejecuta WebGL en los browser
modernos, a continuación se presenta una serie de trabajos
previos relacionados a nuestra investigación.

III. TRABAJOS PREVIOS

Hasta hace poco un editor de texto era un programa que
permitía exclusivamente crear y modificar archivos digitales
compuestos por texto sin formato, conocidos comúnmente
como archivos de texto plano. La forma de evaluar los editores
de texto ha cambiado, y actualmente es posible, en pocos
segundos, contar con un editor en la Web para su us