ISF

In this workshop we’ll learn how to integrate ISF into Kinetic Designer.

ISF stands for Interactive Shader Format and is a file format built on top of GLSL (OpenGL Shader Language) to create cross-platform and file-independent video generators or FX plugins that can be inter-connected using inputs and outputs.

In Kinetic Designer, there are two ways to use an ISF:

• As an Fx on a layer
• As a standalone effect or part of a chain in a Render Graph.
  

ISF as Layer Fx

Download the following shader file and add it to your project.

In the Media List panel open the ISF tab and create a new ISF with the button.

In the Media tab create a Solid media.

Drag & drop the Solid media into the timeline and select the layer. Open Fx tab and click the button to add an Fx.

Select ISF in the pop-up window and drag & drop the previously created ISF from the Media List in the shader field of the Fx.

If the ISF has accessible controls, they would appear as fields in this tab.

Notice the media now has the ISF applied. Since the shader does not have a controllable alpha channel, it is effectively overlayed on top of the media.

Play the timeline over the layer. Notice that when the timeline is playing the ISF is animated. This is because at least one property of the shader is using the TIME uniform (global variable) in the GLSL animating the shader over time.

However, this animation is only visible on the layer in the timeline if the timeline is playing. Even if the Solid media was replaced by a video file set to Loop/Freerun with the same shader applied, the shader would only animate if the timeline was playing.

This method of using ISF can be handy to quickly apply a simple effect via GLSL but gives limited control over the effect

ISF via Render Graphs

Render Graphs are specifically designed to create shader-type effects.

All the nodes available in the GPU_ categories in a render graph are in fact ISF shaders that are built-in to the Graph Editor.

Render Graphs also enable you to import your own custom ISF via the ISF node.

Create a new Render Graph in the Graph Editor. Leave the default name FxGraph_1.

In Windows Explorer, in your show folder open the FxGraph/FxGraph_1/ folder and copy the Shader file in there.

In the FxGraph_1 render graph create an ISF node and load the Shader file copied in the previous step.

Connect the output of the ISF node to the Output node.

Drag & drop the FxGraph_1 into the timeline.

Set the layer created to Loop and Freerun. Notice that the effect is animated.

If you set the Render Graph’s timecode to play, notice this also enables the time evolution in the Graph Editor.

Try using different node combinations to use the shader file you loaded in an original matter.

You can start by trying the following as a starting point:

The Noise Fractal has one color set to full white and the other set to full transparent. The Alpha Compositing node is set to Source In.

Tools

You can use the ISF Editor developped by VidVox to create or preview ISF files. It also has a function to import and automatically transcode to ISF shaders in GLSL from GLSLSandbox or Shadertoy, two common sharing platforms where you can find shaders developped by other people.