Using GLSL in Quartz
A Few years ago I stumbled on some interesting sites that used GLSL programs to create some neat visuals.
A bit of an introduction. There’s many libraries for making graphics in computers but one that has been around for quite a while and is used in many places is called OpenGL. It takes care of a lot of the underlying details so you can specifiy a box or a cube or just triangles and have it draw something on your screen in a 3D world. GLSL is a subset of OpenGL written specifically for GPU’s, ie your graphics card. This allows you complete control and very low level control over exactly how those triangles get converted to colored pixels on your screen.
The two sites I found with so many nice examples were http://glslsandbox.com and http://shadertoy.com. These sites would show you the code used and the output. You can go in change little bits and see the results almost immediately. This was all well and good but I’ve been using quartz plugins to help create live visuals when I’m doing performances, so how do I utilize all these neat GLSL examples.
It turns out most programming languages and graphics libraries support GLSL and quartz is no different. There are a few differences which usually comes down to different naming conventions used in various implementations.
If you don’t know what quartz is or find code scary, look away now.
This is aimed at Mac users. Apple doesn’t install Quartz Composer by default. The only way to install it is log into apple developer site and use your apple id. Search for additional tools for Xcode . That contains Quartz Composer among other things.
Most VJ programs, VDMX, Resolume, Vidvox, CoGe, all support quartz plugins as input sources, some also support them as effects plugins (VDMX and CoGe). To use the Quartz Plugins you make and have them expose some controls in the program you’re using requires a specific setup.
- Make a new Quartz Patch from Template, Choose Image Filter.
- Select Editor -> Edit Protocol Conformance -> Graphic Animation
- Add a GLSL Shader Patch from your library – It will complain that it has to disable some protocol conformance, It’ll remove the image filter conformance, that’s fine. You can get ride of the image input -> process Image -> output image nodes
- Double Click the GLSL Shader macro and add a sprite patch there if it’s not already
- Now Edit parent
- Click the GLSL shader and select Settings from the Patch Inspector or command-2
- Now you will be at the Vertex and Fragment Shader editors. You can largely ignore the vertex shaders, at least so far I’ve only been experimenting with Fragment Shaders which control the way the color is calculated wheras the Vertex Shaders can control how all the triangles are manipulated in space.
- Select Fragment Shader and paste in some GLSL code from GLSLsandbox.com
Let’s try this code snippet
uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;
float h (float n) {
return sin(sin(n)*158.5453);
}
vec2 f (float n) {
n -= time * 1.9;
return vec2(h(n*.0057)*2., h(n*.0048)*2.);
}
void main (void) {
vec2 uv = (gl_FragCoord.xy/resolution.xy) * 2. - 1.;
uv.x *= resolution.x/resolution.y;
float a = time*.5;
vec3 o = vec3(f(0.),0.);
vec3 r = normalize(vec3(uv + (f(.6)-o.xy), 1));
vec3 p;
float t = 0.;
for (int i=0; i<32; ++i) {
p = o+t*r;
float k = 16.;
float d = length(p.xy - f(p.z)) - 3.11 ; /*+ .2 * sin(k*p.x)*sin(k*p.y)*sin(k*p.z)*/;
t += d*.5;
}
vec2 c = f(p.z)-fract(f(p.z)*9.)-fract(p.x*9.);
gl_FragColor = vec4(vec3(c,c.y/c.x)*8./(t*t), 1);
}
The first variable declarations, namely :
uniform float time; uniform vec2 mouse; uniform vec2 resolution;
Those variable when referenced from within your program get a corresponding input node in your quartz patch. If however you just named the variable, such as in the case of “uniform vec2 mouse;” since I never used the variable within the GLSL code it never appears on your quartz patch. Something to do with how the GLSL actually gets compiled and ran for the hardware. Since the variable never gets referenced then it doesn’t need to be in the runtime.
That’s basically all you have to do, now whatever GLSL code you put in the Fragment Shader you can now run in your favorite VJ program.
There is a few more things you’ll want to do to make it behave sanely across programs. one is to use Render dimensions to get the active dimensions, also adding some “hooks” so you can control things inside of your GLSL Fragment. typically this would be X,Y,foreground color, background color, and pace.
To do this open up Editor -> Edit Protocol Conformance , and make sure Graphic Animation is selected. To be fair I just tried this and it didn’t work. I had to first start a new patch using the Image Filter Template then it would properly add the values when I selected Graphic Animation in Protocol Conformance Editor Section. Sadly this par for the course with Quartz, the little forgotten App that runs almost everything apple but is rarely given so much as a glance from the corporate masters. I digress.
Having these properly named input’s will ensure it’ll function as a standard plugin no matter what host you put it into. You could even use these on an iphone when designing an app.
The one other thing I alluded to but didn’t say outright was that when pulling GLSL fragments from somewhere you generally have to change a few names or get ride of the odd thing. I found glslsandbox.com has almost the same syntax, but shadertoy you have to change the odd thing. Sadly Quartz has about the worst editor you can imagine, here google is your friend as someone has probably stumbled across it before.
As always in computers there is always something new and in the time that has passed to when I first did this and till today when I revisted some of this information I noticed there are many examples within the GLSL patch library selector. Every day there is also new GLSL fragments to try on the various sites.
Here’s a few of the example patchs
GLSLNewTest
Heart
FractalNoise
I meant to write this post awhile ago so I could get the starving artist discount for VDMX, Their currently running a back to school promotion so it’s time I finished this off. Expect to see some VDMX posts in the future.
If you have any questions or are looking for people in this realm say Hello. I’m currently looking for new opportunities.
*EDIT
After a quick response for the promotion I have VDMX!! Yeah. Seems like Vidvox has a way to use GLSL snippets without all the hassle of having to use quartz. Enter Interactive Shader Fragments. More info here, and here.
Lots of good tutorials to go through now 🙂