Download the completed project files for this tutorial.

When writing GLSL shaders that run as generators or are used as image filters, one of the most fun parts of the process is playing with different control functions to animate all of the various variables that you've created in the composition. Using the ISF specification, GLSL shaders can publish their uniform variables so that host applications can provide user interface controls that can be connected to MIDI, OSC, DMX or other data-sources for automation.

In this tutorial we will look at adapting an existing GLSL shader into ISF, publishing some of its variables as uniforms, and loading the composition into VDMX where we will animate its properties using a variety of different plugins and MIDI input.

Tip: Also check out the tutorial on making and installing ISF based FX.

Adapting a GLSL Shader to ISF

One of the best online resources for learning GLSL is The Book of Shaders which includes many code samples that can be previewed and edited with its online editor. Many of these code examples come with challenges for ways to extend or modify the code to behave differently.

Here we will look at the Brick fragment shader from the Patterns section of BoS.

To adapt this shader into ISF we will need to do three things:

Create a new file with a ".fs" file extension (eg "Brick Pattern.fs")
Add a JSON blob at the top that describes the shader and any optional parameters like its input variables.
Remove the uniform variables declared (ISF declares its own automatically) and replace them with the ISF counterparts. In this case instead of "u_resolution.xy" use "RENDERSIZE" (In other examples from BoS, instead of "u_time" use "TIME" for ISF)

One of the most useful resources when adapting GLSL shaders is the "ISF tests+tutorials" download which includes sample files that you can copy and paste code from. Here we will quickly grab an example JSON section and modify it to our needs.

The first of the challenges is "Try animating this by moving the offset according to time." which sounds like a great example for this tutorial on animating properties. However instead of simply animating this based on the time in seconds, we are going to publish this as a parameter so that it can be driven by any control data-source. As we are going through the code, we can also find several other hardcoded variables, such as the amount of fill (0.9), the fill color (1.0,1.0,1.0,1.0), and the number of bricks (5.0), that might be worth publishing to make this shader more general purpose.

Tip: The ISF Specification Page contains additional tips for adapting shaders.

Animating ISF Input Parameters in VDMX

Once we have our generator shader adapted to the ISF specification, it can be loaded into VDMX (or some other host application) where it can be loaded onto a layer. Starting from a new project, the "Brick Pattern.fs" can be dragged into a media bin from the Finder and triggered by clicking on it. In the layer source controls window are user interface items for each of the elements listed in the "INPUTS" section of the ISF JSON section.

The LFO and Step Sequencer plugins are two of the basic plugins that VDMX offers for automating parameters. Here we will use a sine wave from an LFO to control the "fillSize" parameter and a Step Sequencer to adjust the "fillColor" parameter. To make the output from the sine wave a little more interesting, a second LFO plugin can be added and used to modulate the rate of the first.

Another way to control parameters for GLSL shaders is with MIDI devices. In this example we will right-click on the "offset" slider, choose the "Detect MIDI" option and then sending some MIDI data to assign a control.

Tip: Use the automatic BPM detection option in the Clock plugin to sync LFO and Step Sequencer plugins with music.