Download the example project and ISF generators for this tutorial.

Also in this series see the introduction to making your first ISF video FX.

One of the most powerful capabilities of modern GPUs is the ability to run specialized code known as GLSL shaders which can be used to create computer generated video streams whose control parameters can be manipulated in real-time.

An ISF, or “Interactive Shader Format” file is a GLSL fragment shader (.fs) that includes a small blob of information that describes any input controls that the host application (such as slider, button, and color picker controls in VDMX) should provide for the user when the generator is loaded for use, as well as other meta-data including the authorship, category and a description.

In this two part tutorial we'll cover the basics of using ISF generators within VDMX as sources for layers and how to install new example ISF files you may download from the Internet, followed by a quick introduction to creating your own GLSL fragment shaders.

A layer in VDMX rendering a basic sine wave ISF Generator.

Loading ISF Generators into VDMX

Loading ISF Generators into VDMX is essentially the same as when using other disk based files such as movies or Quartz Composer compositions. To add an ISF file to your VDMX project, simply drag the .fs file from the Finder or Media Browser window onto a page in a Media Bin plugin. To trigger the file to a layer, click on its thumbnail.

Like other built-in sources, any ISF generators that are installed system-wide can be directly accessed using the “Source Picker” menu in the Layer Source window, or accessed from the Media Browser window, under the ISF Sources category.

If you've downloaded ISF Generators or FX from a website such as the VDMX forums, you can install them to use as built-in sources by copying them to the: “/Library/Graphics/ISF” directory.

Making ISF Video Generators

For the second half of this tutorial let's now take a look at how the 'sine fill' example ISF file was created and ways we can modify it to have additional parameters. To begin, open the file in your text editor of choice – if you aren't sure which to use, TextEdit, TextMate, BBEdit, and SublimeText are great options.

Each ISF file is broken up into two sections: At the top, a commented out section written in a notation called JSON that describes the file. Below that is our GLSL code that does the actual drawing.

Viewing the file in a text editor you can see we've set up the math for the drawing to set each pixel below the curve to solid white (1,1,1,1), and any pixel above the curve to transparent black (0,0,0,0). The top section contains the inputs for the number of cycles and offset are declared as published variables that will show up as interface controls in VDMX.

Tip: You can modify existing ISF files to change its behavior or publish new variables for input controls.