The Code Therapy

CRT Webcam

Just a sample to demonstrate the usage of camTexture sampler2D uniform

Created by marcogomez on Sat, 25 Sep 2021 09:46:50 GMT.

Author Twitter Profile: TheCodeTherapy
Author Website: https://mgz.me

CRT, VHS, distortion, displacement, color shift


// ╔═════════════╦════════════════╗
// ║ Marco Gomez ║ https://mgz.me ║
// ╚═════════════╩════════════════╝
precision highp float;

uniform sampler2D prgm5Texture;
uniform vec2 resolution;

void main(void) {
  vec2 uv = gl_FragCoord.xy / resolution.xy;
  vec4 prgm5 = texture2D(prgm5Texture, uv);
  gl_FragColor = prgm5;
}


// ╔═════════════╦════════════════╗
// ║ Marco Gomez ║ https://mgz.me ║
// ╚═════════════╩════════════════╝
precision highp float;

uniform sampler2D camTexture;
uniform vec2 resolution;

void main(void) {
  vec2 uv = gl_FragCoord.xy / resolution.xy;
  float ar = resolution.x / resolution.y;
  uv = uv * 2.0 - 1.0;
  uv *= 0.9;
  uv = uv * 0.5 + 0.5;
  vec2 uvar = uv * vec2(ar, 16.0 / 9.0) * 0.5;
  vec4 cam = texture2D(camTexture, uvar);
  vec3 matrix = vec3(
    pow(abs(cam.x), 3.0 / 2.0),
    pow(abs(cam.y), 4.0 / 5.0),
    pow(abs(cam.z), 3.0 / 2.0)
  );
  cam.xyz = mix(cam.xyz, matrix, 0.5);
  gl_FragColor = cam;
}


// ╔═════════════╦════════════════╗
// ║ Marco Gomez ║ https://mgz.me ║
// ╚═════════════╩════════════════╝
precision highp float;

uniform sampler2D prgm1Texture;
uniform vec2 resolution;
uniform float time;
uniform float fft;

const float amount = 1.0;
const float reinhardAmount = 0.7;
const float contrast = 1.1;
const float brightness = 1.2;
const float saturation = 0.9;
const vec2 vignetteSize = vec2(0.25, 0.25);
const float vignetteRoundness = 0.12;
const float vignetteMix = 1.0;
const float vignetteSmoothness = 0.42;
const float W = 1.2;
const float T = 7.5;

float filmicReinhardCurve(float x) {
  float q = (T * T + 1.0) * x * x;
  return q / (q + x + T * T);
}

vec3 filmicReinhard(vec3 c) {
  float w = filmicReinhardCurve(W);
  return vec3(
    filmicReinhardCurve(c.r),
    filmicReinhardCurve(c.g),
    filmicReinhardCurve(c.b)
  ) / w;
}

vec3 ContrastSaturationBrightness(vec3 color, float brt, float sat, float con) {
  const float AvgLumR = 0.5;
  const float AvgLumG = 0.5;
  const float AvgLumB = 0.5;
  const vec3 LumCoeff = vec3(0.2125, 0.7154, 0.0721);
  vec3 AvgLumin = vec3(AvgLumR, AvgLumG, AvgLumB);
  vec3 brtColor = color * brt;
  vec3 intensity = vec3(dot(brtColor, LumCoeff));
  vec3 satColor = mix(intensity, brtColor, sat);
  vec3 conColor = mix(AvgLumin, satColor, con);
  return conColor;
}

float sdSquare(vec2 point, float width) {
  vec2 d = abs(point) - width;
  return min(max(d.x, d.y), 0.0) + length(max(d, 0.0));
}

float vignette(vec2 uv, vec2 size, float roundness, float smoothness) {
  uv -= 0.5;
  float minWidth = min(size.x, size.y);
  uv.x = sign(uv.x) * clamp(abs(uv.x) - abs(minWidth - size.x), 0.0, 1.0);
  uv.y = sign(uv.y) * clamp(abs(uv.y) - abs(minWidth - size.y), 0.0, 1.0);
  float boxSize = minWidth * (1.0 - roundness);
  float dist = sdSquare(uv, boxSize) - (minWidth * roundness);
  return 1.0 - smoothstep(0.0, smoothness, dist);
}

vec3 dither(vec3 c, vec2 uv, float d) {
  return (
    floor(
      fract(
        dot(vec2(131.0, 312.0), uv + time) /
        vec3(103.0, 71.0, 97.0)
      ) * 0.375 - 0.1875 + c * d
    ) / d
  );
}

void main(void) {
  vec2 uv = gl_FragCoord.xy / resolution.xy;
  vec4 prgm1 = texture2D(prgm1Texture, uv);
  vec3 reinhard = filmicReinhard(prgm1.rgb);
  vec3 color = prgm1.rgb;
  color = dither(color, gl_FragCoord.xy, 8.0);
  color = mix(prgm1.rgb, reinhard, reinhardAmount);
  color = ContrastSaturationBrightness(color, brightness, saturation, contrast);
  float v = vignette(uv, vignetteSize, vignetteRoundness, vignetteSmoothness);
  vec3 vig = color * v;
  color = mix(color, vig, vignetteMix);
  color = mix(prgm1.xyz, color, amount);
  color = clamp(color, 0.0, 1.0);
  gl_FragColor = vec4(color, 1.0);
}


// ╔═════════════╦════════════════╗
// ║ Marco Gomez ║ https://mgz.me ║
// ╚═════════════╩════════════════╝
precision highp float;

uniform sampler2D noiseTexture;
uniform sampler2D prgm2Texture;
uniform vec2 resolution;
uniform float time;

vec4 rgbShift(vec2 p , vec4 shift) {
  shift *= 2.0 * shift.w - 1.0;
  vec2 rs = vec2(shift.x, -shift.y);
  vec2 gs = vec2(shift.y, -shift.z);
  vec2 bs = vec2(shift.z, -shift.x);
  float r = texture2D(prgm2Texture, p + rs, 0.0).x;
  float g = texture2D(prgm2Texture, p + gs, 0.0).y;
  float b = texture2D(prgm2Texture, p + bs, 0.0).z;
  return vec4(r,g,b,1.0);
}

vec4 noise(vec2 uv) {
  return texture2D(noiseTexture, uv, 0.0);
}

vec4 vec4pow(vec4 v, float p) {
  return vec4(
    pow(v.x, p),
    pow(v.y, p),
    pow(v.z, p),
    v.w
  );
}

void main(void) {
  vec2 uv = gl_FragCoord.xy / resolution.xy;
  vec2 mo = uv * 2.0 - 1.0;
  mo *= 0.01;
  vec3 chromaticAberration;
  chromaticAberration.r = texture2D(prgm2Texture, uv - mo * 0.05, 0.0).r;
  chromaticAberration.g = texture2D(prgm2Texture, uv - mo * 0.15, 0.0).g;
  chromaticAberration.b = texture2D(prgm2Texture, uv - mo * 0.25, 0.0).b;
  vec4 color = vec4(vec3(0.0), 1.0);
  color.xyz = mix(color.xyz, chromaticAberration, 0.3);
  const float speed = 0.004;
  const float amplitude = 0.012;
  vec4 shift = vec4pow(
    noise(
      vec2(speed * time, speed * time / 25.0 )
    ), 8.0
  ) * vec4(vec3(amplitude), 1.0);
  color += rgbShift(uv, shift);
  gl_FragColor = color;
}


// ╔═════════════╦════════════════╗
// ║ Marco Gomez ║ https://mgz.me ║
// ╚═════════════╩════════════════╝
precision highp float;

uniform sampler2D prgm3Texture;
uniform vec2 resolution;
uniform float time;
uniform float fft;

const float h = 0.002;
const float v = 0.003;
const float g = 0.07;

float stepm(float a, float b, float c) {
  return step(c, sin(time + a * cos(time * b)));
}

vec3 badVHS(vec2 uv, sampler2D tex) {
  float tmod = mod(time * 0.25, 3.0);
  float lookyMod = uv.y - tmod;
  float window = 1.0 / (1.0 + 20.0 * lookyMod * lookyMod);
  float lookyStep = stepm(4.0, 4.0, 0.3) * 0.5;
  uv.x = uv.x + sin(uv.y * 10.0 + time) / 100.0 * lookyStep * (1.0 + cos(time * 80.0)) * window * 0.25;
  float vShift = v * stepm(2.0, 3.0, 0.9) * (sin(time) * sin(time * 20.0) + (0.5 + 0.1 * sin(time * 200.0) * cos(time)));
  uv.y = mod(uv.y + vShift, 5.0);
  vec3 desatColor;
  float _r, _g, _b;
  float x = sin(0.3 * time + uv.y * 21.0) * sin(0.7 * time + uv.y * 29.0) * sin(0.3 + 0.33 * time + uv.y * 31.0) * h;
  _r = texture2D(tex, vec2(x + uv.x + 0.001, uv.y + 0.001)).x + 0.007;
  _g = texture2D(tex, vec2(x + uv.x + 0.000, uv.y - 0.002)).y + 0.007;
  _b = texture2D(tex, vec2(x + uv.x - 0.002, uv.y + 0.000)).z + 0.007;
  _r += 0.08 * texture2D(tex, 0.75 * vec2(x +  0.012, -0.013) + vec2(uv.x + 0.001, uv.y + 0.001)).x;
  _g += 0.05 * texture2D(tex, 0.75 * vec2(x + -0.011, -0.010) + vec2(uv.x + 0.000, uv.y - 0.002)).y;
  _b += 0.08 * texture2D(tex, 0.75 * vec2(x + -0.010, -0.009) + vec2(uv.x - 0.002, uv.y + 0.000)).z;
  float _luma = 0.3 * _r + 0.6 * _g + 0.1 * _b;
  float _desat = 0.2;
  desatColor = vec3(
    _r + _desat * (_luma - _r),
    _g + _desat * (_luma - _g),
    _b + _desat * (_luma - _b)
  );
  desatColor = clamp(desatColor, 0.0, 1.0);
  return desatColor;
}

float gaussian(float z, float u, float o) {
  return (
    (1.0 / (o * sqrt(2.0 * 3.14159265359))) *
    (exp(-(((z - u) * (z - u)) / (2.0 * (o * o)))))
  );
}

vec3 gaussgrain(float t) {
  vec2 ps = vec2(1.0) / resolution.xy;
  vec2 uv = gl_FragCoord.xy * ps;
  float seed = dot(uv, vec2(12.9898, 78.233));
  float noise = fract(sin(seed) * 43758.5453123 + t);
  noise = gaussian(noise, 0.0, 0.5);
  return vec3(noise);
}

void main(void) {
  vec2 uv = gl_FragCoord.xy / resolution.xy;
  float frameScale = 29.97;
  float frameTime = floor(time * frameScale) / frameScale;
  vec3 grain = gaussgrain(frameTime * 2.0);
  vec3 grainB = gaussgrain(frameTime * 0.5);
  vec3 vhsCol = badVHS(uv, prgm3Texture) + (grain * grainB) * g;
  vec4 finalColor = vec4(vhsCol, 1.0);
  gl_FragColor = finalColor;
}


// ╔═════════════╦════════════════╗
// ║ Marco Gomez ║ https://mgz.me ║
// ╚═════════════╩════════════════╝
precision highp float;

uniform sampler2D prgm4Texture;
uniform vec2 resolution;
uniform float time;

const float PI = acos(-1.0);
const float TAU = PI * 2.0;
const float hardscan = -16.0; // -8.0 = soft | -16.0 = medium
const float hardPix = -4.0; // -2.0 = soft | -4.0 = hard
const float maskDark = 0.5;
const float maskLight = 2.5;

float toLinear(float c) {
  return (c <= 0.04045) ? c / 12.92 : pow(abs((c + 0.055) / 1.055), 2.4);
}

vec3 toLinear(vec3 c) {
  return vec3(toLinear(c.r), toLinear(c.g), toLinear(c.b));
}

float toSRGB(float c) {
  return(c < 0.0031308 ? c * 12.92 : 1.055 * pow(abs(c), 0.41666) - 0.055);
}

vec3 toSRGB(vec3 c) {
  return vec3(toSRGB(c.r), toSRGB(c.g), toSRGB(c.b));
}

vec3 fetch(vec2 pos, vec2 off, vec2 res) {
  pos = floor(pos * res + off) / res;
  if (max(abs(pos.x - 0.5), abs(pos.y - 0.5)) > 0.5) {
    return vec3(0.0);
  }
  return toLinear(texture2D(prgm4Texture, pos.xy, -16.0).xyz);
}

vec2 dist(vec2 pos, vec2 res) {
  pos = pos * res;
  return -((pos - floor(pos)) - vec2(0.5));
}

float gauss(float pos, float scale) {
  return exp2(scale * pos * pos);
}

vec3 horz3(vec2 pos, float off, vec2 res) {
  vec3 b = fetch(pos, vec2(-1.0, off), res);
  vec3 c = fetch(pos, vec2(+0.0, off), res);
  vec3 d = fetch(pos, vec2(+1.0, off), res);
  float dst = dist(pos, res).x;
  float scale = hardPix;
  float wb = gauss(dst - 1.0, scale);
  float wc = gauss(dst + 0.0, scale);
  float wd = gauss(dst + 1.0, scale);
  return (b * wb + c * wc + d * wd) / (wb + wc + wd);
}

vec3 horz5(vec2 pos, float off, vec2 res) {
  vec3 a = fetch(pos, vec2(-2.0, off), res);
  vec3 b = fetch(pos, vec2(-1.0, off), res);
  vec3 c = fetch(pos, vec2(+0.0, off), res);
  vec3 d = fetch(pos, vec2(+1.0, off), res);
  vec3 e = fetch(pos, vec2(+2.0, off), res);
  float dst = dist(pos, res).x;
  float scale = hardPix;
  float wa = gauss(dst - 2.0, scale);
  float wb = gauss(dst - 1.0, scale);
  float wc = gauss(dst + 0.0, scale);
  float wd = gauss(dst + 1.0, scale);
  float we = gauss(dst + 2.0, scale);
  return (a * wa + b * wb + c * wc + d * wd + e * we) / (wa + wb + wc + wd + we);
}

float scan(vec2 pos, float off, vec2 res) {
  float dst = dist(pos, res).y;
  return gauss(dst + off, hardscan);
}

vec3 tri(vec2 pos, vec2 res) {
  vec3 a = horz3(pos, -1.0, res);
  vec3 b = horz5(pos, +0.0, res);
  vec3 c = horz3(pos, +1.0, res);
  float wa = scan(pos, -1.0, res);
  float wb = scan(pos, +0.0, res);
  float wc = scan(pos, +1.0, res);
  return a * wa + b * wb + c * wc;
}

vec3 mask(vec2 pos) {
  pos.x += pos.y * 3.0;
  vec3 m = vec3(maskDark, maskDark, maskDark);
  pos.x = fract(pos.x / 6.0);
  if (pos.x < 0.333) {
    m.r = maskLight;
  } else if (pos.x < 0.666) {
    m.g = maskLight;
  } else {
    m.b = maskLight;
  }
  return m;
}

float bar(float pos, float bar) {
  pos -= bar;
  return pos * pos < 4.0 ? 0.0 : 1.0;
}

float rand(vec2 uv, float t) {
  float seed = dot(uv, vec2(12.9898, 78.233));
  return fract(sin(seed) * 43758.5453123 + t);
}

float gaussian(float z, float u, float o) {
  return (
    (1.0 / (o * sqrt(TAU))) *
    (exp(-(((z - u) * (z - u)) / (2.0 * (o * o)))))
  );
}

vec3 gaussgrain(float t) {
  vec2 ps = vec2(1.0) / resolution.xy;
  vec2 uv = gl_FragCoord.xy * ps;
  float noise = rand(uv, t);
  noise = gaussian(noise, 0.0, 0.5);
  return vec3(noise);
}

vec2 warp(vec2 uv, vec2 warpAmount) {
  uv = uv * 2.0 - 1.0;
  vec2 offset = abs(uv.yx) / vec2(warpAmount.x, warpAmount.y);
  uv = uv + uv * offset * offset;
  uv = uv * 0.5 + 0.5;
  return uv;
}

void drawVig(inout vec3 color, vec2 uv) {
  float vignette = uv.x * uv.y * (1.0 - uv.x) * (1.0 - uv.y);
  vignette = clamp(pow(abs(16.0 * vignette), 0.1), 0.0, 1.0);
  color *= vignette;
}

void main(void) {
  vec2 warpAmount = vec2(7.0, 5.0);
  vec2 res = vec2(640.0, 320.0);
  vec2 uv = gl_FragCoord.xy / resolution.xy;
  float vig = (0.0 + 1.0 * 21.0 * uv.x * uv.y * (1.0 - uv.x) * (1.0 - uv.y));
  float v = exp(-0.01 * length(uv)) * vig;
  float frameScale = 29.97;
  float frameTime = floor(time * frameScale) / frameScale;
  vec3 g = gaussgrain(frameTime) * 0.07;
  vec2 pos = warp(uv, warpAmount);
  float s = clamp(0.35 + 0.35 * sin(3.0 * time + pos.y * res.y * 3.0), 0.0, 1.0);
  float scanLines = pow(s, 1.33);
  vec4 color = vec4(tri(pos, res) * mask(gl_FragCoord.xy), 1.0);
  color.xyz = toSRGB(color.xyz * 2.0) - g;
  color = mix(color, color * v, 0.75);
  color = mix(color, color * s * 0.21, 0.5);
  gl_FragColor = color;
}