- Sign In
- Sign Up
A Tribute to Phenomena +dither
A tribute to the unforgettable 90s aesthetics and to the pioneer giants whose shoulders we stand on.
Created by marcogomez on Sat, 21 Aug 2021 20:50:32 GMT.
// ╔═════════════╦════════════════╗ // ║ Marco Gomez ║ https://mgz.me ║ // ╚═════════════╩════════════════╝ precision highp float; uniform sampler2D eTexture0; // https://i.imgur.com/N9yUvGf.png uniform sampler2D prgm1Texture; uniform sampler2D prgm2Texture; uniform vec2 resolution; uniform float time; uniform float alpha; const vec3 tWhite = vec3(1.0); const float tPixelSize = 8.0; const float transitionSpread = 0.21; const float transitionSpeed = 0.15; const float transitionIntensity = 32.0; void main(void) { vec2 uv = gl_FragCoord.xy / resolution.xy; vec4 prgm1 = texture2D(prgm1Texture, uv); vec4 prgm2 = texture2D(prgm2Texture, uv); vec2 noiseCell = floor(gl_FragCoord.xy / tPixelSize); vec2 noiseUV = noiseCell / resolution.xy; float noise = texture2D(eTexture0, noiseUV).x * transitionSpread; float progress = (time * transitionSpeed) + noiseUV.y + noise; float peak = cos(progress) * transitionIntensity; float transition = clamp(peak, 0.0, 1.0); vec4 col = mix(prgm2, prgm1, transition); gl_FragColor = col; }
// ╔═════════════╦════════════════╗ // ║ Marco Gomez ║ https://mgz.me ║ // ╚═════════════╩════════════════╝ precision highp float; uniform vec2 resolution; uniform float time; #define t time * 0.7 const int starsPerPlane = 30; const int planes = 4; const float barSize = 0.12; const float barsAng = 1.4; vec2 barPos; vec3 barCol; vec3 cp; float rand (vec2 uv) { return fract(sin(dot(uv, vec2(12.4124, 48.4124))) * 48512.41241); } float noise (vec2 uv) { vec2 b = floor(uv); return mix( mix(rand(b), rand(b + vec2(1.0, 0.0)), 0.5), mix(rand(b + vec2(0.0, 1.0)), rand(b + vec2(1.0, 1.0)), 0.5), 0.5 ); } vec3 mixCol(float val, float r, float g, float b) { return vec3(val * r, val * g, val * b); } void bar(float pos, float r, float g, float b) { if ( (barPos.y <= pos + barSize) && (barPos.y >= pos - barSize) ) { barCol = mixCol(1.0 - abs(pos - barPos.y) / barSize, r, g, b); } } vec3 twist(vec3 p) { float f = sin(t / 3.0) * 1.45; float c = cos(f * p.y); float s = sin(f / 2.0 * p.y); mat2 m = mat2(c, -s, s, c); return vec3(m * p.xz, p.y); } float cube(vec3 p) { p = twist(p); cp.x = sin(-t); cp.y = cos(-t); mat2 m = mat2(cp.y, -cp.x, cp.x, cp.y); p.xy *= m; p.xy *= m; p.yz *= m; p.zx *= m; p.zx *= m; p.zx *= m; cp = p; return length(max(abs(p) - vec3(0.4), 0.0)) - 0.08; } float face(vec2 uv) { uv.y = mod(uv.y, 1.0); return (uv.y < uv.x != 1.0 - uv.y < uv.x) ? 1.0 : 0.0; } vec3 getNormal(vec3 p) { vec2 e = vec2(0.005, -0.005); return normalize( e.xyy * cube(p + e.xyy) + e.yyx * cube(p + e.yyx) + e.yxy * cube(p + e.yxy) + e.xxx * cube(p + e.xxx) ); } void main(void) { vec2 uv = gl_FragCoord.xy / resolution.xy; vec2 suv = uv; uv = uv * 2.0 - 1.0; float ar = resolution.x / resolution.y; uv.x *= ar; uv *= 1.2; float x = gl_FragCoord.x; float stp = 1.0; float dist = 0.0; float near = -1.0; float far = -1.0; vec3 lightPos = vec3(1.5, 0.5, 1.0); float hitdist = -1.0; float ay = max(0.1, 0.5 - t / 6.0); vec3 ro = vec3(0.0, 0.0, 2.1); vec3 rd = normalize(vec3(uv, -2.0)); for (int i = 0; i < 128; i++) { stp = cube(ro + rd * dist); dist += stp * 0.5; if (dist > 4.0) { break; } if (stp < 0.01) { far = ( face(+cp.yx) + face(-cp.yx) + face(+cp.xz) + face(-cp.xz) + face(+cp.zy) + face(-cp.zy) ); if (hitdist < 0.0) { hitdist = dist; } if (near < 0.0) { near = far; } dist += 0.05; } } const float speed = 42.0; const int layers = 12; float stars = 0.0; float fl, s; for (int layer = 0; layer < layers; layer++) { fl = float(layer); s = (500.0 - fl * 30.0); stars += step( 0.1, pow( abs(noise(mod(vec2(suv.x * s + time * speed - fl * 100.0, suv.y * s), resolution.x))), 21.0 ) ) * (fl / float(layers)); } barPos = uv; barCol = vec3(stars); bar(sin(time ), 1.0, 0.0, 0.0); bar(sin(time + barsAng / 6.0 ), 1.0, 1.0, 0.0); bar(sin(time + barsAng / 6.0 * 2.0), 0.0, 1.0, 0.0); bar(sin(time + barsAng / 6.0 * 3.0), 0.0, 1.0, 1.0); bar(sin(time + barsAng / 6.0 * 4.0), 0.5, 0.0, 1.0); bar(sin(time + barsAng / 6.0 * 5.0), 1.0, 0.0, 1.0); vec3 col = barCol; if (near > 0.0) { vec3 sp = ro + rd * hitdist; vec3 ld = lightPos - sp; float lDist = max(length(ld), 0.001); ld /= lDist; float atten = 1.0 / (1.0 + lDist * 0.2 + lDist * 0.1); float ambience = 0.5; vec3 sn = getNormal(sp); float diff = min(0.3, max(dot(sn, ld), 0.0)); float spec = pow(max(dot(reflect(-ld, sn), -rd), 0.0), 32.0); col = mix( vec3(0.12, 0.0, 0.3), vec3(1.0, 1.0, 1.0), vec3((near * 0.45 + far * far * 0.04)) ); col = col * (diff + ambience) + vec3(0.78, 0.5, 1.0) * spec / 1.5; } float gs = 2.0; float grid = ( (mod(floor((suv.x) * resolution.x / gs), 2.0) == 0.0 ? 1.0 : 0.0) * (mod(floor((suv.y) * resolution.y / gs), 2.0) == 0.0 ? 1.0 : 0.0) ); gl_FragColor = vec4(col, 1.0); }
// ╔═════════════╦════════════════╗ // ║ Marco Gomez ║ https://mgz.me ║ // ╚═════════════╩════════════════╝ precision highp float; uniform sampler2D prgm1Texture; uniform vec2 resolution; const mat4 bayertl = mat4( 00.0 / 64.0, 32.0 / 64.0, 08.0 / 64.0, 40.0 / 64.0, 48.0 / 64.0, 16.0 / 64.0, 56.0 / 64.0, 24.0 / 64.0, 12.0 / 64.0, 44.0 / 64.0, 04.0 / 64.0, 36.0 / 64.0, 60.0 / 64.0, 28.0 / 64.0, 52.0 / 64.0, 20.0 / 64.0 ); const mat4 bayertr = mat4( 02.0 / 64.0, 34.0 / 64.0, 10.0 / 64.0, 42.0 / 64.0, 50.0 / 64.0, 18.0 / 64.0, 58.0 / 64.0, 26.0 / 64.0, 14.0 / 64.0, 46.0 / 64.0, 06.0 / 64.0, 38.0 / 64.0, 62.0 / 64.0, 30.0 / 64.0, 54.0 / 64.0, 22.0 / 64.0 ); const mat4 bayerbl = mat4( 03.0 / 64.0, 35.0 / 64.0, 11.0 / 64.0, 43.0 / 64.0, 51.0 / 64.0, 19.0 / 64.0, 59.0 / 64.0, 27.0 / 64.0, 15.0 / 64.0, 47.0 / 64.0, 07.0 / 64.0, 39.0 / 64.0, 63.0 / 64.0, 31.0 / 64.0, 55.0 / 64.0, 23.0 / 64.0 ); const mat4 bayerbr = mat4( 01.0 / 64.0, 33.0 / 64.0, 09.0 / 64.0, 41.0 / 64.0, 49.0 / 64.0, 17.0 / 64.0, 57.0 / 64.0, 25.0 / 64.0, 13.0 / 64.0, 45.0 / 64.0, 05.0 / 64.0, 37.0 / 64.0, 61.0 / 64.0, 29.0 / 64.0, 53.0 / 64.0, 21.0 / 64.0 ); float dither(mat4 m, ivec2 p) { if (p.y == 0) { if (p.x == 0) { return m[0][0]; } else if (p.x == 1) { return m[1][0]; } else if (p.x == 2) { return m[2][0]; } else { return m[3][0]; } } else if (p.y == 1) { if (p.x == 0) { return m[0][1]; } else if (p.x == 1) { return m[1][1]; } else if (p.x == 2) { return m[2][1]; } else { return m[3][1]; } } else if (p.y == 2) { if (p.x == 0) { return m[0][1]; } else if (p.x == 1) { return m[1][2]; } else if (p.x == 2) { return m[2][2]; } else { return m[3][2]; } } else { if (p.x == 0) { return m[0][3]; } else if (p.x == 1) { return m[1][3]; } else if (p.x == 2) { return m[2][3]; } else { return m[3][3]; } } } void main(void) { ivec2 p = ivec2(mod(gl_FragCoord.xy, 8.0)); vec2 uv = gl_FragCoord.xy / resolution.xy; vec4 prgm1 = texture2D(prgm1Texture, uv); vec3 c = prgm1.xyz; c = pow(abs(c), vec3(2.2)); c -= 1.0 / 255.0; vec3 d = vec3(0.0); if (p.x <= 3 && p.y <= 3) { d.r = float(c.r > dither(bayertl, p)); d.g = float(c.g > dither(bayertl, p)); d.b = float(c.b > dither(bayertl, p)); } else if (p.x > 3 && p.y <= 3) { d.r = float(c.r > dither(bayertr, p - ivec2(4, 0))); d.g = float(c.g > dither(bayertr, p - ivec2(4, 0))); d.b = float(c.b > dither(bayertr, p - ivec2(4, 0))); } else if (p.x <= 3 && p.y > 3) { d.r = float(c.r > dither(bayerbl, p - ivec2(0, 4))); d.g = float(c.g > dither(bayerbl, p - ivec2(0, 4))); d.b = float(c.b > dither(bayerbl, p - ivec2(0, 4))); } else if (p.x > 3 && p.y > 3) { d.r = float(c.r > dither(bayerbr, p - ivec2(4, 4))); d.g = float(c.g > dither(bayerbr, p - ivec2(4, 4))); d.b = float(c.b > dither(bayerbr, p - ivec2(4, 4))); } vec4 color = vec4(d, 1.0); gl_FragColor = color; }
xxxxxxxxxx
// ╔═════════════╦════════════════╗
// ║ Marco Gomez ║ https://mgz.me ║
// ╚═════════════╩════════════════╝
precision highp float;
uniform sampler2D eTexture0; // https://i.imgur.com/N9yUvGf.png
uniform sampler2D prgm1Texture;
uniform sampler2D prgm2Texture;
uniform vec2 resolution;
uniform float time;
uniform float alpha;
const vec3 tWhite = vec3(1.0);
const float tPixelSize = 8.0;
const float transitionSpread = 0.21;
const float transitionSpeed = 0.15;
const float transitionIntensity = 32.0;
void main(void) {
vec2 uv = gl_FragCoord.xy / resolution.xy;
vec4 prgm1 = texture2D(prgm1Texture, uv);
vec4 prgm2 = texture2D(prgm2Texture, uv);
vec2 noiseCell = floor(gl_FragCoord.xy / tPixelSize);
vec2 noiseUV = noiseCell / resolution.xy;
float noise = texture2D(eTexture0, noiseUV).x * transitionSpread;
float progress = (time * transitionSpeed) + noiseUV.y + noise;
float peak = cos(progress) * transitionIntensity;
float transition = clamp(peak, 0.0, 1.0);
vec4 col = mix(prgm2, prgm1, transition);
gl_FragColor = col;
}
102 fps 16ms
00:00:00.32
0.00