Editores de Shaders en la Web

Gracias a la implementación de WebGL en los browser actuales junto al elemento Canvas de HTML5 + CSS3 + SVG, es posible construir aplicaciones, herramientas o juegos de alto impacto para la Web. Una de éstas aplicaciones en la Web son los editores. Actualmente, existen diversos editores en línea, máquinas virtuales, sandbox para el testing de aplicaciones/lenguajes en particular, etc. Particularmente, en el área de Informática Gráfica los editores de programas en la GPU (shaders) son de alto interés porque no requieren desarrollar todo el entorno para ser utilizados. Empleando OpenGL para la Web, es decir, WebGL, se emplea el lenguaje de shader ESSL  o GLSL ES. Dicho lenguaje, está formado por el programa de vértices (vertex shader) y el programa de fragmentos (fragment o pixel shader), los cuales para ser ejecutados con WebGL requieren varias líneas de código. En este post, veremos algunos editores que son herramientas muy útiles y nos permitirán ahorrar varias líneas y empezar a trabajar directamente con los shaders.

Los editores existentes apuestan por ofrecer la combinación más adecuada entre una aplicación web y los gráficos 3D, mostrando el resultado de los shaders construidos en tiempo real. Existen diversas implementaciones donde funcionalidades básicas de un editor, crear redes de usuarios y compartir el contenido son las características más importantes. A continuación se muestran algunas, las más relevantes a la fecha, sin un orden en particular:

Shdr Editor

Website: http://shdr.bkcore.com/

shdr

SHDR es un visor, editor y validador de Shaders en línea para vertex y fragment shader. Ofrece unos modelos geométricos clásicos para ser utilizados en los efectos a realizar. Es un editor bastante completo, contiene code highlight, snippets, cambio de contexto, operaciones de abrir/nuevo/salvar/descargar el trabajo actual. Un punto interesante de este editor es su alta interactividad donde se actualiza a medida que se escribe el modelo desplegado. Esto se ejecuta gracias al uso de tecnologías como Three.js, Ace.js, RawDeflate.js y jQuery.

Shdr fue desarrollado por Thibaut Despoulain, y está disponible en Github.

GLSL Sandbox

Website: http://glslsandbox.com/

sandbox

Este sandbox cuenta con herramientas de edición y despliegue de efectos, ofreciendo un amplia galería de efectos y composiciones 2D/3D y su visor en pantalla completa (transparent background). GLSL Sandbox es limitado y poco práctico en la edición de los efectos, ya que solo aplica para el fragment shader. Sin embargo, permite el uso de una malla propia a través de buffers de despliegue, interacción con los dispositivos de entrada del equipo local, manipulación de las propiedades de la cámara, entre otras. Existe igualmente el concepto de galería de trabajos de los usuarios. Es posible descargar su código desde Github.

WebGL Playground

Website: http://webglplayground.net/

playground

La idea de este editor es escribir código en WebGL y ver el resultado, todo en una misma página (HTML, CSS, JS, GLSL). Del mismo modo, es posible ver la galería de trabajos realizado por los demás usuarios (y obviamente, guardar tus trabajos). La sección de edición permite ver todo el código necesario para el despliegue del lado derecho, incluyendo el vertex y fragment shader. Al tener acceso al HTML y JS es posible hacer uso del mouse o de eventos de interacción en el browser empleando Javascript. El creador de este sitio es Krystian Samp.

SelfShadow

Website: http://www.selfshadow.com/sandbox/gloss.html

selfshadow

SelfShadow es un sandbox donde es posible modificar el fragment shader de un teapot, ofreciendo algunas opciones de configuración básicas (color difuso, color especular, glossiness). Este es un proyecto mantenido por Stephen Hill (3D Technical Lead, Ubisoft). Realmente, es un editor bastante limitado y con un número de variables fijas del tipo uniform y varying.

Shader Toy

Website: https://www.shadertoy.com/

shadertoy

Esta página fue lanzada en el 2009 (se puede considerar la 1ra de su tipo) con el objetivo de fomentar una comunidad de desarrolladores que “modifiquen” píxeles en la pantalla. Así, el objetivo según sus creadores es ofrecer una herramienta para crear prototipos, experimentar, enseñar, aprender, inspirar y compartir sus creaciones con la comunidad.

La página permite escribir el código y compilar en tiempo real. Existe una amplia comunidad de desarrolladores de shaders, discusiones abiertas por medio de comentarios, así como insumos para los shaders: videos, webcam, audio, texturas, hora del día y la posición del ratón, visualización de los shaders en pantalla completa, editor con resaltado de sintaxis, guardar, compartir y publicar los shaders. El alcance de la herramienta es amplio, es posible desarrollar efectos simples como animaciones de sprites o complejas composiciones 3D tales como terrenos procedurales.

Mr. Doob

Website: http://mrdoob.com/projects/htmleditor/

doob

Además de ser un editor, en este sitio se puede “jugar” un poco el código soportado en un browser como HTML, CSS3, Javascript. Lo interesante de este sitio es que el resultado de la página que se modifica se puede observar como transparent background. En el ejemplo de la página inicial, se emplea código en Three.js para dibujar un cubo. El código del editor está disponible en GitHub y fue escrito utilizando CodeMirror y Esprima.

WebGL Shader Lab

Website: http://codedstructure.net/projects/webgl_shader_lab/

exp

Es un editor de efectos experimental, un poco limitado en cuanto a interfaz de usuario. Para editar el código se cuenta con 3 áreas de texto: geometría, vértices y fragmentos; donde cada una se puede editar de forma directa. Este sitio forma parte del proyecto Coded Structure, que actualmente se encuentra en constante desarrollo.

Pixel Shader Editor

Website: http://pixelshaders.com/editor/

pxlshredt

Pixel Shader forma parte de un proyecto para la enseñanza de programación gráfica. En la página se puede encontrar un libro y ejemplos escritos por Toby Schachman. El editor solo se enfoca en el fragment shader dado que permite modificar solo los píxeles. Es posible cargar los ejemplos disponibles en el libro, así como darle autorización al uso de la Webcam instalada en el computador.

Kick.js Shader Editor

Website: http://www.kickjs.org/example/shader_editor/shader_editor.html

kick

Kick.js es un engine para WebGL, y en su página desarrollaron un editor completo para GLSL. El editor de shader presenta una interfaz de usuario bastante simple; pero en cuanto a funcionalidades es uno de los editores más completos que está disponible en la Web. Contiene módulos para el uso de texturas múltiples, ajuste de variables uniform, panel de status de efectos y configuraciones varias del contexto 3D. Permite cargar y almacenar efectos, crearlos desde su inicio o usar alguno de los ejemplos incluidos en la aplicación.

En este editor es posible emplear la cuenta de usuario de Google del usuario para almacenar y restaurar el trabajo realizado.

Firefox WebGL Shader Editor

Website: Desde la versión 27 de Firefox, se habilita en el browser (más info aquí)

firefox

Permite editar en tiempo real todos los programas de shaders de una aplicación WebGL. Esta edición es limitada ya que no se puede añadir nuevas variables uniformes y atributos (pero si del tipo varying). Después de editar los shaders, se re-compila las ediciones de usuario y así los atributos y uniformes pueden cambiar. El editor maneja la reasignación y mapeo de manera transparente al desarrollador y elimina las variables uniformes sin referencia luego de la actualización.

Resumen: Cualquier editor que selecciones será ideal para tus labores de programador de gráficos 2D/3D 🙂

Anuncios

Acerca de smittynpro

Escribiendo algunas cosas de computación gráfica
Esta entrada fue publicada en Código, Herramientas y etiquetada , , , . Guarda el enlace permanente.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s