ISF editor para crear GLSL Generators y FX (VDMX y otros)

Hace ya tiempo que VDMX acepta archivos de tipo ISF que se pueden utilizar como Sources o como Filtros y en las sucesivas actualizaciones han ido cambiando bastantes efectos de tipo freeframe o quartz composer por los mismos efectos en formato ISF dada su sencillez, flexibilidad y fácil compilación. Para crear Generators y FX de este tipo podemos usar el ISF editor, un editor en el que podemos previsualizar en tiempo real el desarrollo de nuestros ISF. Éstos se pueden editar también en cualquier editor de texto como TexEdit, BBEdit, TextWrangler, etc. pero hay una serie de ventajas al usar el editor que no tenemos en un editor de textos normal como son: un Live preview donde podemos ver los cambios que hagamos en tiempo real, se pueden crear nuevos ISF desde templates, usar videos, quartz compositions y cámara inputs como test, publicar final output para Syphon, exportar generators como vídeos con diferentes codecs y una característica muy ventajosa es poder importar algunas shaders de GLSL Sandbox y Shadertoy.

ISF Editor

Como vemos en la imagen el editor consta de tres secciones y el live preview: a la izquierda tenemos nuestros shaders, los que hemos hecho y que por defecto se guardan en ~/Library/Graphics/ISF y a la derecha los shaders de sistema /Library/Graphics/ISF;
en el centro el editor con el código y a la derecha los diferentes controles de los inputs que hayamos publicado. A partir de aquí podemos crear nuevos ISF o modificar los ya existentes añadiendo o quitando inputs y funciones.
En la página de Vidvox hay dos tutoriales excelentes donde explican cómo crear un “New ISF File” y como importar un GLSL desde GLSL Sandbox y transformarlo añadiendo la variable “TIME”.
http://vdmx.vidvox.net/tutorials/using-the-isf-editor
Anteriormente, en el mismo blog, ya habían explicado cómo crear y modificar un ISF FX y un ISF Generator:
http://vdmx.vidvox.net/tutorials/creating-and-installing-isf-fx
http://vdmx.vidvox.net/tutorials/creating-and-installing-isf-generators

Pero ¿Qué son los ISF?. ISF es un formato de archivo que describe un “fragment shader GLSL”, así como la forma de ejecutarlo e interactuar con él. El objetivo de este formato de archivo es proporcionar una interfaz simple y mínima para filtros de imagen y fuentes de vídeo generativos. Cuando creamos un ISF hay que usar la extensión .fs
Cuando abrimos un archivo ISF en un editor de texto o en el ISF Editor vemos diferenciadas dos partes:
– Primero está un comentario (delineado usando “/ *” y “* /”) que contiene un dict JSON. Si el comentario no existe o el dict JSON está mal formado o no puede ser leído el archivo ISF no se puede cargar.
Este dict JSON se refiere como su “dict de nivel superior” y en el se definen las variables y otra información usada por la host aplicación que compilará el shader como son: “DESCRIPTION”, “CATEGORIES”, los diferentes tipos de “INPUTS” como “NAME”, “TYPE”, “DEFAULT”, “MIN”, “MAX”, “LABEL”, “PERSISTENT_BUFFERS”, “PASSES” etc.
Por ejemplo el “Color Multiply.fs” tendría esto en el principio como JSON Dictionary :
/*{
“DESCRIPTION”: “tint the video to the specified color”,
“CREDIT”: “by carter rosenberg”,
“CATEGORIES”: [
“Color Adjustment”
],
“INPUTS”: [
{
“NAME”: “inputImage”,
“TYPE”: “image”
},
{
“NAME”: “inputColor”,
“TYPE”: “color”,
“DEFAULT”: [
1.0,
1.0,
1.0,
1.0
]
},
{
“NAME”: “gain”,
“TYPE”: “float”,
“DEFAULT”: 1.0,
“MIN”: 0.0,
“MAX”: 2.0
}
]
}*/
Como es un filtro y no un generador siempre al comienzo hemos de poner un input de tipo image con el nombre “inputImage” para que sea procesado por el host aplicación (VDMX,etc):
{
“NAME”: “inputImage”,
“TYPE”: “image”
},

– Segundo, el código correspondiente al Fragment Shader (.fs) GLSL. Este código puede hacer también referencia a cualquier tipo de variables float, bool, long, point2D, color o image que se hayan definido en el JSON Dictionary.
void main()
{
vec4 srcPixel = IMG_THIS_PIXEL(inputImage);
gl_FragColor = srcPixel * inputColor * gain;
}
Éste sería el esquema de un archivo ISF que se puede ir complicando a medida que sumemos variables y funciones y crear diferentes FX y Generators muy útiles para usarlos en VDMX como Sources o como Fx. Para conocer los diferentes aspectos sobre el funcionamiento del lenguaje ISF es importante consultar esta referencia:
http://vdmx.vidvox.net/blog/isf
Desde el punto de vista práctico aquí podemos encontrar ejemplos sencillos de las características básicas de los ISF, pues cada ejemplo describe un solo aspecto del formato de archivo ISF (Bool, Color, Event, Float, etc).
ISF Test/Tutorial filters
También en esta página encontraremos una buena colección de ejemplos muy útiles gracias a la traslación que ha hecho la gente de @colin_movecraft del libro de Patricio Gonzalez Vivo’s “The Book of Shaders”, ejemplos de ISF que van explicando los diferentes tipos de inputs y código GLSL con dificultad de menor a mayor y un proyecto VDMX para ver los resultados:
http://www.movecraft.com/the-book-of-shaders-ifsvdmx-translation/

ISF_VDMX

Como ya dijimos anteriormente una de las ventajas del nuevo editor es la posibilidad de importar y convertir a ISF (algunas) shaders de páginas como GLSL Sandbox y Shadertoy. Para ello vamos al menú “File”->”Import from GLSL Sandbox” o ”Import from Shadertoy” y se abrirá una ventana donde pondremos la dirección URL del Shader que hemos escogido para convertir. Aparecerá el código y el preview del Shader y automáticamente se creará un archivo en ~/Library/Graphics/ISF. Luego en Categoría ponemos “Generator” y ya lo podemos usar como source en VDMX.

ISF Editor_import GLSL

Aquí hay diferentes ISF agrupados por Popular, Newest y Categoríes:
http://www.interactiveshaderformat.com

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