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

Shader Tool: Un Ambiente Web de Desarrollo Integrado

para GLSL

Luiyit Hernández1, Esmitt Ramírez1

[email protected], [email protected]

1 Escuela de Computación, Universidad Central de Venezuela, Caracas, Venezuela

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
necesarios involucrados en el proceso de 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. La solución emplea plantillas, gráficos 3D, interactividad y tecnología de sincronización para la implementación
de código GLSL. De acuerdo a los resultados obtenidos en las pruebas realizadas, se determinó que la solución optimiza
adecuadamente los procesos y cuenta con un nivel de rendimiento significativamente alto. Así, se muestra el potencial
de la aplicación como un ambiente integrado completo para el desarrollo de shaders en la Web.
Palabras Clave: Shader; Programación en la GPU; GLSL; MVC; WebGL; GPU.
Abstract: A shader is defined as a unit of program written in a shading language to the GPU to produce images (render).
Nowadays, there are tools and Web technologies which used the display of this content in HTML5-based browsers. Thus,
it has guided the development of solution to support the implementation of shader programs to the GLSL language, as
part of OpenGL standard. However, being our research, there are not available Web applications with unified standard
and which contains all involved elements in the development process. In this paper, a solution called Shader Tool is
presented, it contains a set of tools which incorporated and linked all features to the shader development. This is a
tool which uses templates, 3D graphics, interactivity and synchronization technologies to the implementation of GLSL
code. According to the results of the tests, it was determined that the solution adequately optimizes processes and has a
significantly higher level of performance. In this way, we shown the potential of the application as a complete integrated
environment to the development of shaders in the Web.
Keywords: Shader; GPU Programming; 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 aplica-
ciones 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 cambios sus-
tanciales 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 aplicaciones con un

rendimiento óptimo de gráficos 2D y 3D 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 empleando
un computador con alguna aplicación standalone. Dado que
dichos programas no están enfocados para la Web, es ideal
contar con las mismas capacidades de desarrollo en el entorno

Revista Venezolana de Computación ISSN: 2244-7040 http://www.svc.net.ve/revecom Vol. 2, No. 1, pp. 70-82, Diciembre 2015 Selección de los Mejores Artículos de CoNCISa 2015 de Computación70 (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

Web. Sin embargo, en soluciones actuales disponibles no
existe un criterio unificado de implementación. De hecho,
en algunas aplicaciones no se 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 in-
tegrado 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
y opciones de escalabilidad. 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 programación

de shaders.

• 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 sis-
tema 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 de
la aplicación Web. 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 recomenda-
ciones a ser aplicadas.

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 videojuegos.
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].

WebGL es una API escrita totalmente en el lenguaje JavaScript
para el despliegue 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 Figura 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

71Revista Venezolana de Computación - ReVeCom (ISSN: 2244-7040) - SVC Vol. 2, No. 1, Diciembre 2015 - Selección de los Mejores Artículos de CoNCISa 2015 son pequeñas unidades de programas que son ejecutadas por
el procesador gráfico para lograr acelerar 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