Literally everything is a Vector
Lecture at SFPC by Patricio Gonzalez Vivo, author of The Book of Shaders.
The main example we are looking at from here.
The code for this is here:
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y;
st += vec2(.0);
vec3 color = vec3(1.);
color = vec3(st.x,st.y,0.0);
gl_FragColor = vec4(color,1.0);
}
The main input here is gl_FragCoord, it is a vec3 that has the value of each pixel (0 to width-1)
The main output is gl_FragColor
, a vec4 which has RED, BLUE, GREEN, and ALPHA.
We are creating a vec2 using the gl_FragCoord.xy. We normalize it with this:
vec2 st = gl_FragCoord.xy/u_resolution.xy;
We then create a gradient with the RED, and GREEN values by doing so:
color = vec3(st.x,st.y,0.0);
The last value of the BLUE is set to 0.0, and the ALPHA is set to be 1.0.
Working with sine / cosine
To produce some very “organic” results, we can start using sin and cosine.
The code for the piece above:
#ifdef GL_ES
precision mediump float;
#endif
#define PI 3.14159
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
float line(float x, float c, float w) {
return step(c,x)-step(c+w,x);
}
void main() {
vec2 pos = gl_FragCoord.xy/u_resolution;
vec3 color = vec3(0.);
color += abs(sin(PI/-pos.y*PI));
color.b += abs(cos(PI/-sin(u_time)*PI));
color.r += abs(sin(pos.x));
color.g -= 0.4;
color -= 0.5;
gl_FragColor.rgb = color;
gl_FragColor.a = 1.0;
}
The key piece of code which creates the effect is sin(PI/-pos.y*PI)
.
Main takeaway
GLSL is definitely not very intuitive. In fact, I would say it is the least–intuitive programming I’ve done in a while. Nonetheless, I feel motivated to start messing around with the language more. Shaders seem to be pretty cool after all.
fin