Fragment shadery napisane w języku GLSL. Niektóre mogą nie działać w przeglądarce innej niż Firefox.

Czarno–białe zakładki · 
#ifdef GL_ES precision mediump float; #endif uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; uniform sampler2D u_tex0; uniform vec2 u_tex0Resolution; uniform sampler2D u_tex1; uniform vec2 u_tex1Resolution; uniform sampler2D u_tex2; uniform vec2 u_tex2Resolution; #define PI 3.1415926 float random (vec2 st) { return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123); } vec4 rgb(vec2 st, vec2 matrix) { return texture2D(u_tex0, st*matrix + vec2(0., .25)); } vec4 zbuf(vec2 st, vec2 matrix) { return texture2D(u_tex1, st*matrix + vec2(0., .25)); } vec4 proc(vec2 st, vec2 matrix) { vec4 rgb = rgb(st, matrix); vec4 zbuf = zbuf(st, matrix); vec4 c = vec4(0.); float acc = 0.; for (int i = -3; i <= 3; i++) { for (int j = -3; j <= 3; j++) { c += texture2D(u_tex0, st*matrix + vec2(float(i)/u_resolution.x, float(j)/u_resolution.y) + vec2(0., .25)); acc += 1.; } } c = mix(texture2D(u_tex0, st*matrix + vec2(0., .25)), c/acc, abs(zbuf.b - .5) + length(st - vec2(.5))); c *= pow(smoothstep(0., 1., length(c.rgb)/1.7321), .5)*.85 + .1; //value curve c *= cos(length(st - vec2(.5))); //vignette c += (texture2D(u_tex2, fract(st*vec2(1., u_resolution.y/u_resolution.x) + vec2(random(vec2(u_time)), random(vec2(-u_time*PI)))*.1)) - .5)*10.*sin(length(c.rgb)/1.7321*PI) + (random(vec2(u_time*10. - fract(u_time*10.)) - .5)*.025); //grain c = vec4(vec3(.18*c.r + .41*c.g + .41*c.b), 1.); return c; } void main() { vec2 st = gl_FragCoord.xy/u_resolution; vec2 matrix = vec2(1., u_resolution.y/u_resolution.x*u_tex0Resolution.x/u_tex0Resolution.y); vec4 col; float c_cut = gl_FragCoord.x + u_resolution.y*.5; float z_cut = gl_FragCoord.x - u_resolution.y*1.5; if (u_mouse.y > u_mouse.x + u_resolution.y*.5) { c_cut = gl_FragCoord.x - u_resolution.y; z_cut = gl_FragCoord.x - u_resolution.y*1.5; } else if (u_mouse.y < u_mouse.x - u_resolution.y*1.5) { c_cut = gl_FragCoord.x + u_resolution.y*.5; z_cut = gl_FragCoord.x; } if (gl_FragCoord.y > c_cut) { col = rgb(st, matrix); } else if (gl_FragCoord.y < z_cut) { col = zbuf(st, matrix); } else { col = proc(st, matrix); } gl_FragColor = col; }

Najpierw wpadłem na pomysł „zakładek” rozsuwanych po najechaniu na nie myszką, potem stwierdziłem, że wykorzystam to do rozłożenia jakiegoś efektu na obraz wejściowy z użyciem mapy głębokości (z–buffer). Pomysł w pracy, wykonanie w pociągu.

Floraturowa tapeta · 
#ifdef GL_ES precision mediump float; #endif uniform vec2 u_resolution; uniform float u_time; #define PI 3.1415926 float random(vec2 st) { return fract( sin( dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123); } float Fleur(vec2 st) { // draw center leaf float center = sin((1. - st.y)*PI*2.5 + 2.*PI/3.) + 1.; if (st.y < .65) { center *= .49; } center = 1. - ((center)*0.4) - .5; if (abs((st.x*2. - 1.)*2.) < center && st.y < .9 && st.y > .1) { return 1.; } // draw left leaf if (length(vec2(.25, .275) - st) < .2 && length(vec2(.2, .2) - st) > .18) { return 1.; } // draw right leaf if (length(vec2(.75, .275) - st) < .2 && length(vec2(.8, .2) - st) > .18) { return 1.; } return 0.; } void main() { vec2 st = gl_FragCoord.xy/u_resolution; // shift every other column by half line if (mod(st.x*3., 1.) < .5 ) { st.y += 1./12.; } // draw fleurons vec2 pos = mod(st*6., 1.); float v = Fleur(pos); // assign base colors vec4 col; if (v == 1.) { col = vec4(1., .8, .2, 1.); } else { col = vec4(.1, .1, .3, 1.); col.rgb *= 1. + sin(gl_FragCoord.x*PI/3.)*.2; } // unshift columns to prevent messed up lighting if (mod(st.x*3., 1.) < .5 ) { st.y -= 1./12.; } // add lighting col.rgb *= 1. - sin(length(st - vec2(.5) + vec2(sin(u_time), cos(u_time))*.3)*PI/2.)*.75; // add noise col.rgb += (random(st) - .5)*.4; gl_FragColor = col; }

Postanowiłem spróbować swoich sił w programatycznym rysowaniu wzorów po obejrzeniu w internecie pięknych prac tego typu. Wybór padł na tapetę z floraturowym deseniem. Najpierw naszkicowałem kształt na kartce za pomocą sinusów i okręgów, potem spróbowałem odwzorować go łączeniem i wycinaniem funkcji w kodzie. Dla urozmaicenia dodałem też proceduralną teksturę złotej farby, rowki tapety oraz subtelnie krążące światło.

Wykres siły ziarna w funkcji jasności · 
#ifdef GL_ES precision mediump float; #endif uniform vec2 u_resolution; uniform float u_time; uniform sampler2D u_tex0; uniform vec2 u_tex0Resolution; #define PI 3.1415926 float Curve(float value, float shadows, float lights, float dark_shape, float light_shape) { float val = 0.; if (value <= lights) { val = pow( smoothstep(-shadows, shadows, value)*2. - 1., dark_shape); } else { val = pow( (1. - smoothstep(lights, 2. - lights, value) )*2. - 1., light_shape); } return val; } void main() { float SCALE = 1.; float STRENGTH = 10.; float BLACKS = sin(u_time/2.)*.2 + .2; float WHITES = sin(u_time/PI)*.1 + .1; float DARK_SHAPE = sin(u_time/3.7) + 1.5; float LIGHT_SHAPE = sin(u_time/1.7) + 1.5; float SHADOWS = sin(u_time/4.51)*.2 + .4; float LIGHTS = sin(u_time/PI/2.1)*.1 + .7; vec2 st = gl_FragCoord.xy/u_resolution; vec4 col = vec4(0., 0., 0., 1.); // add positive bias to black and white point float bias = 0.; if (st.x < SHADOWS) { bias = BLACKS; } else { bias = WHITES; } // compute value of the curve float response = Curve(st.x, SHADOWS, LIGHTS, DARK_SHAPE, LIGHT_SHAPE) + (-Curve(st.x, SHADOWS, LIGHTS, DARK_SHAPE, LIGHT_SHAPE) + 1.)*bias; // prepare grain texture vec3 c = texture2D(u_tex0, st*(u_resolution/u_tex0Resolution)/SCALE).rgb; c = (c - vec3(.5))*STRENGTH*response + vec3(.5); // draw final graph float off = response - st.y; if (st.y < response) { col = vec4(c + vec3(st.x) - vec3(.5), 1.); } else { col = vec4(c*.15, 1.); } gl_FragColor = col; }

Wykres oryginalnie napisany (tak jak kolejny poniżej) w języku shaderów silnika Godot Engine, podobnym do GLSL. Ten wykres to część projektu interfejsu aplikacji graficznej służącej do symulacji kliszy fotograficznej. Ziarno pod krzywą pokrywa gradient zgodnie z wartością wykresu.

Wykres nasycenia w funkcji odcienia · 
#ifdef GL_ES precision mediump float; #endif uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; #define PI 3.1415926 #define SQRT2 1.4142 #define POINT0 0. #define POINT1 60. #define POINT2 120. #define POINT3 180. #define POINT4 240. #define POINT5 300. // Smooth HSV to RGB conversion (https://www.shadertoy.com/view/MsS3Wc) vec3 hsv2rgb_smooth(vec3 c) { vec3 rgb = clamp(abs(mod(c.x*6. + vec3(0., 4., 2.), 6.) - 3.) - 1., 0., 1.); rgb = rgb*rgb*(3. - 2.*rgb); // cubic smoothing return c.z*mix(vec3(1.), rgb, c.y); } float Curve(float left, float center, float right, float point) { if (point <= center) { return smoothstep(left, center, point); } else { return 1.0 - smoothstep(center, right, point); } } void main() { float VALUE0 = sin(u_time/10.)*sin(-u_time/37.913)*.6 + sin(u_time/1.913)*.2; float VALUE1 = sin(u_time/2.)*.5 + sin(u_time/12.37)*.2 + .2; float VALUE2 = sin(u_time/PI)*.3 + sin(-u_time/43.437)*.6; float VALUE3 = sin(u_time)* sin(u_time/13.71)*.7 - .1; float VALUE4 = pow(sin(-u_time/7.37),4.)*.6 + sin(u_time/1.13)*.3; float VALUE5 = sin(u_time/2.345)*.5 + sin(-u_time/9.97)*.3 + .1; vec2 st = gl_FragCoord.xy/u_resolution; // compute value of the curve float value = 0.; value += Curve(POINT5 - 360., POINT0, POINT1, st.x)*VALUE0; value += Curve(POINT0, POINT1, POINT2, st.x)*VALUE1; value += Curve(POINT1, POINT2, POINT3, st.x)*VALUE2; value += Curve(POINT2, POINT3, POINT4, st.x)*VALUE3; value += Curve(POINT3, POINT4, POINT5, st.x)*VALUE4; value += Curve(POINT4, POINT5, POINT0 + 360., st.x)*VALUE5; value += Curve(POINT5, POINT0 + 360., POINT1 + 360., st.x)*VALUE0; // check if given pixel bool tick = false; if (value >= 0. && st.y >= .5 && st.y - .5 < value*.5) { tick = true; } else if (value < 0. && st.y < .5 && st.y - .5 > value*.5) { tick = true; } if (abs(st.y - .5) < 4./u_resolution.x) { tick = true; } // color given pixel: x->hue, y->saturation+value vec4 c = vec4(hsv2rgb_smooth(vec3(st.x, smoothstep(0., 1., st.y), st.y*.75)), 1.); if (!tick) { c *= .15; } gl_FragColor = c; }

Kolejna część interfejsu aplikacji do symulacji kliszy fotograficznej. Ten wykres odpowiada za jasność wyjściowego piksela obrazu monochromatycznego w funkcji odcienia kolorowego piksela wejściowego.

Monitor CRT · 
#ifdef GL_ES precision mediump float; #endif uniform vec2 u_resolution; uniform float u_time; #define PI 3.1415926 #define SQRT2 1.4142 void main() { vec2 st = gl_FragCoord.xy/u_resolution; // mark the border vec2 toCenter = vec2(.5) - st; float radius = length(toCenter) * SQRT2; float step = step(abs(mod(st.x + .5, 1.) - .5)*2.*abs(mod(st.y + .5,1.) - .5)*2., .05); vec3 color = vec3(0.); if (step < 1.) { // draw the pixel grid color = vec3(sin(gl_FragCoord.x*PI/3.)*.5 + .5, sin((gl_FragCoord.x - 2.)*PI/3.)*.5 + .5, sin((gl_FragCoord.x - 4.)*PI/3.)*.6 + .5); // add vignette step = abs(1. - sin(radius*.5) * (1. - sin(gl_FragCoord.y*PI/3.) - .5 )); // add animated framerate desynchronization effect step += .1*(pow(clamp(sin(st.y*PI*2. + u_time*.5) + .5, 0., 1.), .25) - 1.); color *= step; } gl_FragColor = vec4(color,1.); }

Prosty monitor CRT. Ma staromodną zaokrągloną ramkę, subpiksele RGB, winietę i efekt braku synchronizacji klatek między lampą a kamerą.

Różne kółka ·