The Code Therapy

CRT Test

WebRTC post-processing test

Created by marcogomez on Fri, 16 Sep 2022 13:37:29 GMT.

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

video texture, post-processing, crt, webrtc


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

uniform sampler2D prgm3Texture;
uniform vec2 resolution;

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


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

uniform sampler2D eTexture0; // https://i.imgur.com/q5rCm49.png
uniform sampler2D camTexture;
uniform vec2 resolution;
uniform float time;

float osc(float s, float e, float t, float ts) {
  return (e - s) / 2.0 + s + sin(t * ts) * (e - s) * 0.5;
}

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);
  vec4 sonic = texture2D(eTexture0, gl_FragCoord.xy / resolution.xy);
  float m = clamp(osc(-2.0, 2.0, time, 0.25), 0.0, 1.0);
  cam = mix(cam, sonic, m);
  gl_FragColor = cam;
}


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

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

const float PI = acos(-1.0);
const float TAU = PI * 2.0;
const float hardscan = -8.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(prgm1Texture, 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.00001;
  vec3 m = vec3(maskDark, maskDark, maskDark);
  pos.x = fract(pos.x / 6.0);
  if (pos.x < 1.0 / 3.0) {
    m.r = maskLight;
  } else if (pos.x < 2.0 / 3.0) {
    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(320.0, 200.0);
  vec2 uv = gl_FragCoord.xy / resolution.xy;
  vec2 pos = uv;
  vec4 color = vec4(tri(pos, res) * mask(gl_FragCoord.xy), 1.0);
  color.xyz = toSRGB(color.xyz);
  drawVig(color.rgb, pos);
  gl_FragColor = color;
}


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

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

#define ss smoothstep
const float PI = acos(-1.0);
const float TAU = PI * 2.0;
const vec2 hashv2 = vec2(12.9898, 78.233);
const float hashS = 43758.5453123;
const int blurIter = 8;
const float blurSize = 0.07;
const float width = 0.49;
const float height = 0.3;


float rand(vec2 co) {
  return fract(sin(dot(co.xy, hashv2)) * hashS);
}

vec2 CurvedSurface(vec2 uv, float r) {
  return r * uv / sqrt(r * r - dot(uv, uv));
}

vec2 crtCurve(vec2 uv, float r, bool content) {
  uv = CurvedSurface(uv, 1.9);
  if (content) { uv *= 0.5 / vec2(width, height); }
  return uv;
}

float roundSquare(vec2 p, vec2 b, float r) {
  return length(max(abs(p) - b, 0.0)) - r;
}

float rs(vec2 uv, float r) {
  return roundSquare(uv, vec2(width, height) + r, 0.05);
}

vec2 borderReflect(vec2 p, float r) {
  float eps = 0.0001;
  vec2 epsx = vec2(eps, 0.0);
  vec2 epsy = vec2(0.0, eps);
  vec2 b = (1.0 + vec2(r, r)) * 0.5;
  r /= 3.0;
  p -= 0.5;
  vec2 normal = vec2(
    roundSquare(p - epsx, b, r) - roundSquare(p + epsx, b, r),
    roundSquare(p - epsy, b, r) - roundSquare(p + epsy, b, r)
  ) / eps;
  float d = roundSquare(p, b, r);
  p += 0.5;
  return p + d * normal;
}

vec2 normalizeAndFix() {
  vec2 uv = (gl_FragCoord.xy / resolution.xy) * 2.0 - 1.0;
  uv *= 0.9;
  float targetAR = 16.0 / 9.0;
  float ar = resolution.x / resolution.y;
  uv.x *= ar;
  uv *= (
    ar < targetAR &&
    resolution.x < 800.0 &&
    resolution.x < resolution.y
  ) ? 1.1 : 0.55;
  return uv;
}

void main(void) {
  float s = 0.0021;
  vec4 color = vec4(vec3(0.0), 1.0);
  const vec4 multColor = vec4(0.21);
  const float ambient = 0.12;
  vec4 bezel = vec4(0.5);
  vec2 uv = normalizeAndFix();
  vec2 suv = gl_FragCoord.xy / resolution.xy;
  vec2 uvC = crtCurve(uv, 1., true) + 0.5;
  vec2 uvS = crtCurve(uv, 1., false);
  vec2 uvE = crtCurve(uv, 1.25, false);
  color += (max(0.0, ambient - 0.25 * distance(uvS, vec2(0.0))) * ss(s, -s, rs(uvS, 0.0)));
  color += (bezel * ambient * 0.7 * ss(-s, s, rs(uvS, 0.0)) * ss(s, -s, rs(uvE, 0.05)));
  color -= (bezel * ss(-s * 2.0, s * 10.0, rs(uvE, 0.05)) * ss(s * 2.0, -s * 2.0, rs(uvE, 0.05)));
  color += (bezel * ambient * ss(-s, s, rs(uvE, 0.05)) * ss(s, -s, rs(uvE, 0.15)));
  for (int i = 0; i < blurIter; i++) {
    vec2 uvR = borderReflect(uvC + (vec2(rand(uvC + float(i)), rand(uvC + float(i) + 0.1)) - 0.5) * blurSize, 0.05);
    color += (
      (multColor - bezel * ambient) *
      texture2D(prgm2Texture, uvR) / float(blurIter) *
      ss(-s, s, rs(uvS, 0.0)) *
      ss(s, -s, rs(uvE, 0.05))
    );
  }
  vec4 prgmMipMaps = texture2D(prgm2Texture, uvC, 3.0) + texture2D(prgm2Texture, uvC, 4.0) + texture2D(prgm2Texture, uvC, 5.0);
  color += (prgmMipMaps * ss(0.0, -s * 20.0, rs(uvS, -0.05)) * 0.5);
  color += (
    max(0.0, (1.0 - 2.0 * gl_FragCoord.y / resolution.y)) * vec4(0.1, 0.1, 0.1, 0.0) *
    ss(-0.3, 0.3, roundSquare(uvC - vec2(0.5, 0.0), vec2(width + 0.2, height), 0.1)) *
    ss(-s * 2.0, s * 2.0, roundSquare(uvE, vec2(width, height) + 0.15, 0.05))
  ) * 1.5;
  if (uvC.x > 0.0 && uvC.x < 1.0 && uvC.y > 0.0 && uvC.y < 1.0) {
    color = texture2D(prgm2Texture, uvC);
  }
  gl_FragColor = color;
}