The Code Therapy

Me on a CRT

Another sample to demonstrate the usage of the camTexture sampler2D uniform

Created by marcogomez on Sat, 25 Sep 2021 10:30:42 GMT.

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

retro, crt, webcam, matrix, light shafts, god rays


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

uniform sampler2D prgm4Texture;
uniform vec2 resolution;

void main(void) {
  vec2 uv = gl_FragCoord.xy / resolution.xy;
  vec4 prgm4 = texture2D(prgm4Texture, uv);
  gl_FragColor = vec4(prgm4.xyz, 1.0);
}


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

uniform sampler2D camTexture;
uniform vec2 resolution;

void main(void) {
  float ar = resolution.x / resolution.y;
  vec2 uv = gl_FragCoord.xy / resolution.xy;
  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 eTexture0; // https://i.imgur.com/N9yUvGf.png
uniform sampler2D prgm1Texture;
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(prgm1Texture, p + rs, 0.0).x;
  float g = texture2D(prgm1Texture, p + gs, 0.0).y;
  float b = texture2D(prgm1Texture, p + bs, 0.0).z;
  return vec4(r,g,b,1.0);
}

vec4 noise(vec2 uv) {
  return texture2D(eTexture0, 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(prgm1Texture, uv - mo * 0.05, 0.0).r;
  chromaticAberration.g = texture2D(prgm1Texture, uv - mo * 0.15, 0.0).g;
  chromaticAberration.b = texture2D(prgm1Texture, 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.01;
  const float amplitude = 0.01;
  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 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 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 seed = dot(uv, hashv2);
  float noise = fract(sin(seed) * hashS + t);
  noise = gaussian(noise, 0.0, 0.5);
  return vec3(noise);
}

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.5);
  if (content) { uv *= 0.5 / vec2(width, height); }
  uv.x -= mouselerp.x * 0.5;
  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;
  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(0.02, 0.02, 0.03, 0.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;
  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)
  );
  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);
    color = mix(color, color * grid, 0.6);
  }
  vec3 g = gaussgrain(time) * 0.015;
  color.xyz += g;
  gl_FragColor = color;
}


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

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

const float PI = acos(-1.0);
const float TAU = PI * 2.0;

const int samples = 8;
const float density = 0.5;
const float weight = 0.7;
const float Exposure = 0.55;

float rand(vec2 uv) {
    uv = fract(uv * vec2(5.3987, 5.4421));
    uv += dot(uv.yx, uv.xy + vec2(21.5351, 14.3137));
    float xy = uv.x * uv.y;
    return fract(xy * 95.4307) + fract(xy * 75.04961) - 1.0;
}

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 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;
  vec2 dist = (vec2(uv.x, uv.y) - (-vec2(mouselerp.x * 0.5, -0.05) + 0.5));
  float density = 0.75 + 0.2 * sin(2.0 * radians(360.0));
  dist *= 1.0 / float(samples) * density;
  vec3 g = gaussgrain(time) * 0.021;
  vec3 color = texture2D(prgm3Texture, uv).rgb;
  vec3 prgm5 = color;
  float illuminationDecay = 1.0;
  for (int i = 0; i < samples; i++)   {
    uv -= dist;
    vec3 sample_ = texture2D(prgm3Texture, uv + dist * rand(uv)).rgb + g;
    sample_ *= illuminationDecay * weight;
    color += sample_ * 0.7;
    float Decay = 0.4 + fft * 0.3;
    illuminationDecay *= Decay;
  }
  gl_FragColor = vec4(mix(prgm5, color * Exposure, 0.21), 1.0);
}