Download the example project and ISF FX for this tutorial and the collection of reference filters.

Also in this series visit the introduction tutorial on making your first ISF video generator.

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 real-time video filters that can be applied to movies, live cameras, and other computer generated feeds.

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 FX is loaded for use, as well as other meta-data including the authorship, category and a description.

Along with running in desktop applications like VDMX, ISF based FX can also run on the web. Here are two example filters that you can play with to get a sense of what is possible with a single filter:

Example ISF “Color Multiply” FX applied to a VDMX layer.

In this two part tutorial we'll cover the basics of applying ISF based FX to layers in VDMX and how to install new example ISF files you may download from the Internet, followed by a quick introduction to creating your own image processing GLSL fragment shaders.

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

Applying ISF FX to Layers in VDMX

Using ISF based FX in VDMX is essentially the same as using other formats such as CoreImage, Quartz Composer and FreeFrame. Like other FX types each individual filter will have special input controls that are specific to the filter that show up as interface items such as sliders, buttons and color pickers.

If you've downloaded ISF FX from a website such as the VDMX forums, you can install them by copying them to the: “/Library/Graphics/ISF” directory or in the VDMX application support folder under ISF.

Once installed the FX will show up under the appropriate category in the Layer FX window under the “Load Asset” pop-up menu.

Tip: Many standard FX are available in multiple formats, the ones that are ISF can be identified by the .fs extension at the end of its name.

Creating and Installing ISF FX

For the second half of this tutorial let's now take a look at how the ‘Color Multiply’ example ISF FX 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, including its FX category and the "inputImage" variable that will deliver the incoming video frame to be processed. Below that is our GLSL code that handles the processing for each pixel in the input image.

Viewing the file in a text editor you can see we've set up the math to simply multiply the RGBA color value of each pixel by the input color. The top section contains the inputs for the image and color are declared as published variables for VDMX to access and provide interface controls for.

More details about making FX and examples can be found on the ISF Specification page.