How do I create an image filter using GLSL?

I know how to write GLSL fragment shader text code, and I’d like to add some of my own image filters to Vuo. How can I do that?

In Vuo 0.5.0, there isn’t yet a way to create image filters using GLSL from the Vuo Editor. (We’re planning to add this functionality, but it isn’t ready yet.)

In the meantime, you can create a C node (outside the Vuo Editor) to embed your GLSL code. Here’s the process:

  • Download the Qt online installer and install using the default settings.
  • Download the Vuo SDK and unpack it.
  • Decide on a name for your node. Prefix it with your name or your company name. For example, gtoledo.raymarching.stereo.
  • In the Vuo SDK folder, open example/node. Copy the imageFilter folder, renaming it to match your node name. Rename the .pro and .c files to match the folder name (e.g., gtoledo.raymarching.stereo.pro and gtoledo.raymarching.stereo.c).
  • Double-click the .pro file, which opens the project in Qt Creator. Click “Configure Project”.
  • In Qt Creator, double-click the .pro file, and change test.adjustColorBrightness.c to your node class C file name and save.
  • In the “Other Files” section of your project, you’ll now see your C file. Double-click it.
  • In the VuoModuleMetadata call, change the title, description, and keywords.
  • Edit the GLSL code (around line 37).
  • Build your Qt project (Build > Build All).
  • Start the Vuo Editor (or restart it if it’s already running) and add your new node to a composition.

See Developing a Node Class for more information.  

1 Like

I’m very happy to hear this is planned! How closely will it mimic the CIFilter node in Quartz Composer? Being able to create and modify image kernels easily in realtime has been the primary reason I’ve used Quartz Composer for so many years (from developing custom After Effects filters via FxFactory to creating mobile app effects such as the heavily optimised blurs in Chrysler’s new 200 app!), and I’m hoping Vuo will fill that role in the semi-near future.