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
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 Heroku 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
- Code: Select all
#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.
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.
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.
- Code: Select all
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
- Code: Select all
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.
10. The code has been nicely noted for us so it easy to find what we need to change.
Lines 25 and 26.
- Code: Select all
/* 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.
- Code: Select all
/* 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.
13. Here is the final code and Quartz file. There is loads of code over on the Heroku Sandbox just waiting to be convetred to Quartz. http://glsl.heroku.com/e#5916.0
http://glsl.heroku.com/
- Code: Select all
#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: */
}
4. 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