Home

This tutorial will go through the steps required to take code from the Heroku GLSL sandbox website and get it working in Quartz Composer and VDMX.

http://glsl.heroku.com/

1. Go to http://glsl.heroku.com/ and select a shader you wish to convert.

For this tutorial im going to use http://glsl.heroku.com/e#5916.0

2. Open Quartz Composer with a blank patch then add the following patches.

Clear
Sprite
GLSL Shader

Screen shot 2013-01-10 at 13.17.44

3. Cut (cmd + X) the Sprite then double click on the GLSL Shader and paste the Sprite inside.
Resize the sprite to Width 2 Height 1.2
Click Edit Parent in the viewer to go back up a level.

4. Go to the page of your selected shader on glsl.Heroku.com and copy all the code.

You will see the code here has notes which help explain each function. This is going to make it easier for us to create inputs for Quartz Composer

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 mouse;
uniform vec2 resolution;
uniform float time;

/* Made by Krisztián Szabó */
/* mod DamianPrg */
void main(){
/* The light's positions */
vec2 light_pos = resolution*mouse;
/* The radius of the light */
float radius = 1.0;
/* Intensity range: 0.0 - 1.0 */
float intensity = 0.2;

/* Distance between the fragment and the light */
float dist = distance(gl_FragCoord.xy, light_pos);

/* Basic light color, change it to your likings */
vec3 light_color = vec3(0.2, 1.0, 1.0);
/* Alpha value of the fragment calculated based on intensity and distance */
float alpha = 1.0 / (dist*intensity);

/* The final color, calculated by multiplying the light color with the alpha value */
vec4 final_color = vec4(light_color, 1.0)*vec4(alpha, alpha, alpha, 1.0);

final_color.rgb *= atan(dist)+sin(dist+time*50.0);
final_color.rgb *= 2.0;

//final_color.rgb *= atan(dist)+cos(dist);

gl_FragColor = final_color;

/* If you want to apply radius to the effect comment out the gl_FragColor line and remove comments from below: */

}

5. Go back to Quartz Composer click on the GLSL Shader and hit CMD + 2
This will open the settings window of the shader.

6. Click on the Fragment Shader tab and copy your code from Heroku over the existing code.

Screen shot 2013-01-10 at 13.25.28

7. Notice how the shader already has some inputs available on the GLSL patch now we have pasted some new code.

Resolution (X)
Resolution (Y)
Mouse (X)
Mouse (Y)
Time

8. To get things started bring a Patch Time in from the patch library.
In the GLSL SHader change the setting to Resolution X 100, Resolution Y 100, Mouse X 2.5, Mouse Y 2
Attach the Patch Time to The Time of the GLSL Shader Patch.

Screen shot 2013-01-10 at 13.43.37

9. Now we want to play and make some more of the settings available to us.

Click on the GLSL shader and bring up the settings (CMD + 2) and click on the Fragment Shader tab.
The first thing to notice is at the top.

uniform vec2 mouse;
uniform vec2 resolution;
uniform float time;

These match up to our input ports in Quartz Composer. For a input to appear in Quartz we need to declare it first in the GLSL code. So lets add some code to get control of the light color.

Add the following code

uniform float r;
uniform float g;
uniform float b;

This will create 3 values which we will use to control RGB values in the code.

Now your Fragment Shader window in Quartz should look like this.

Screen shot 2013-01-10 at 13.38.26

10. The code has been nicely noted for us so it easy to find what we need to change.

Lines 25 and 26.

/* Basic light color, change it to your likings */
vec3 light_color = vec3(0.2, 1.0, 1.0);

Now we need to match those 3 values to the inputs we created earlier so replace the 3 values with
the values we created earlier.

Code should now look like this.


/* Basic light color, change it to your likings */
vec3 light_color = vec3(r, g, b);

11. The GLSL patch has now gained some new inputs

Bring in a Color to RGB patch from the Library attach to the GLSL Patch and we have control over the color.

12. Again go back to the Fragment Shader and do the same again for different setting remembering to declare each input port first.

Screen shot 2013-01-10 at 13.52.26

13. Here is the final code and Quartz file. There is loads of code over on the glsl.heroku.com Sandbox just waiting to be convetred to Quartz. http://glsl.heroku.com/e#5916.0

http://glsl.heroku.com/

Screen shot 2013-01-10 at 13.50.48

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 mouse;
uniform vec2 resolution;
uniform float time;
uniform float r;
uniform float g;
uniform float b;
uniform float lightradius;
uniform float lightintensity;
uniform float lightalpha;
uniform float speed;

/* Made by Krisztián Szabó */
/* mod DamianPrg */
void main(){
/* The light's positions */
vec2 light_pos = resolution*mouse;
/* The radius of the light */
float radius = lightradius;
/* Intensity range: 0.0 - 1.0 */
float intensity = lightintensity;

/* Distance between the fragment and the light */
float dist = distance(gl_FragCoord.xy, light_pos);

/* Basic light color, change it to your likings */
vec3 light_color = vec3(r, g, b);
/* Alpha value of the fragment calculated based on intensity and distance */
float alpha = lightalpha / (dist*intensity);

/* The final color, calculated by multiplying the light color with the alpha value */
vec4 final_color = vec4(light_color, 1.0)*vec4(alpha, alpha, alpha, 1.0);

final_color.rgb *= atan(dist)+sin(dist+time*speed);
final_color.rgb *= 2.0;

//final_color.rgb *= atan(dist)+cos(dist);

gl_FragColor = final_color;

/* If you want to apply radius to the effect comment out the gl_FragColor line and remove comments from below: */

}

14. To make all these setting available to VDMX just right click on the GLSL Patch and publish the inputs so they are available to VDMX.

Thanks to Krisztián Szabó for the original code posted to Heroku and Alexandre from Pixiequark for helping explain how parts of this work.

https://dl.dropbox.com/u/16456244/rings.qtz
https://dl.dropbox.com/u/16456244/ringsVDMX.qtz With published inputs for VDMX

Advertisements

6 thoughts on “Converting GLSL shaders for use in Quartz Composer and VDMX

    • Time may not be applicable to all code. Have you tried changing the time base in qc?

      Are you putting the R,G,B values in the correct place and declaring the uniform vec at the start?

      You might need to change the code depending on which OS your on. This was done in 10.6.8.

  1. Hi, thanks for the swift response. I think I just started with the wrong one 🙂
    I understand what you’re saying about time not being applicable to all of them, but I got it working in most of the others I tried, and then also managed to change some variables in some of them as well – thanks to you. I’m on on Snow Leopard too.

  2. I was trying to use one of the glsl.heroku.com shader in quartz composer(the glsl file is http://glsl.heroku.com/e#15857.2 ), but when I copy the code in fragment shader, it has error to do with `varying vec2 surfacePosition;`, it seems that I need have a vertex shader use this parameter, do you know how to do?

  3. Pingback: GLSL Shader en Quartz Composer y VDMX | Hipnosia's Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s