Files
video-shader-toys/shaders/vhs/shader.slang
Aiden 163d70e9bd
All checks were successful
CI / React UI Build (push) Successful in 11s
CI / Native Windows Build And Tests (push) Successful in 2m22s
CI / Windows Release Package (push) Successful in 2m28s
Annotations
2026-05-08 20:01:22 +10:00

276 lines
10 KiB
Plaintext

float onOff(float a, float b, float c, float framecount)
{
return step(c, sin((framecount * 0.001) + a * cos((framecount * 0.001) * b)));
}
float2 jumpy(float2 uv, float framecount)
{
float2 look = uv;
float m = frac(framecount / 4.0);
float dy = look.y - m;
// Localize the horizontal tear to a moving scanline window instead of
// bending the whole frame equally.
float window = 1.0 / (1.0 + 80.0 * dy * dy);
look.x += 0.05 * sin(look.y * 10.0 + framecount) / 20.0 * onOff(4.0, 4.0, 0.3, framecount) * (0.5 + cos(framecount * 20.0)) * window;
float vShift = (0.1 * wiggle) * 0.4 * onOff(2.0, 3.0, 0.9, framecount) * (sin(framecount) * sin(framecount * 20.0) + (0.5 + 0.1 * sin(framecount * 200.0) * cos(framecount)));
look.y = frac(look.y - 0.01 * vShift);
return look;
}
float2 circle(float start, float points, float point)
{
float rad = 6.28318530718 * (1.0 / points) * (point + start);
return float2(-(.3 + rad), cos(rad));
}
float3 rgb2yiq(float3 c)
{
return float3(
0.2989 * c.x + 0.5959 * c.y + 0.2115 * c.z,
0.5870 * c.x - 0.2744 * c.y - 0.5229 * c.z,
0.1140 * c.x - 0.3216 * c.y + 0.3114 * c.z
);
}
float3 yiq2rgb(float3 c)
{
return float3(
1.0 * c.x + 1.0 * c.y + 1.0 * c.z,
0.956 * c.x - 0.2720 * c.y - 1.1060 * c.z,
0.6210 * c.x - 0.6474 * c.y + 1.7046 * c.z
);
}
float noiseHash(float2 p)
{
return frac(sin(dot(p, float2(127.1, 311.7))) * 43758.5453123);
}
// Gold Noise (c)2015 dcerisano@standard3d.com, adapted for Slang.
float goldNoise(float2 xy, float seed)
{
const float phi = 1.61803398874989484820459;
return frac(tan(distance(xy * phi, xy) * seed) * xy.x);
}
float grainScalar(float2 uv)
{
return frac(sin(dot(uv, float2(12.9898, 78.233))) * 43758.5453);
}
float3 animatedChromaGrain(float2 uv, float time, float2 outputResolution, float grainSize)
{
float safeGrainSize = max(grainSize, 0.001);
// Quantize the coordinates first so larger grain sizes become visible
// chroma blocks rather than simply lower-frequency smooth noise.
float2 baseUv = uv * outputResolution * float2(0.85, 0.95) / safeGrainSize;
float2 grainUv = floor(baseUv) + 0.5;
float2 drift = float2(time * 19.7, time * 23.3);
float r = grainScalar(grainUv + drift + float2(13.1, 71.7));
float g = grainScalar(grainUv * float2(1.03, 0.97) + drift * 1.11 + float2(47.2, 19.4));
float b = grainScalar(grainUv * float2(0.96, 1.05) + drift * 0.91 + float2(83.6, 53.8));
return float3(r, g, b) * 2.0 - 1.0;
}
float valueNoise2(float2 p)
{
float2 cell = floor(p);
float2 f = frac(p);
float2 u = f * f * (3.0 - 2.0 * f);
float a = noiseHash(cell);
float b = noiseHash(cell + float2(1.0, 0.0));
float c = noiseHash(cell + float2(0.0, 1.0));
float d = noiseHash(cell + float2(1.0, 1.0));
return lerp(lerp(a, b, u.x), lerp(c, d, u.x), u.y);
}
float tapeLineNoise(float2 uv, float time, float2 outputResolution)
{
float y = floor(uv.y * outputResolution.y);
// Combine stable per-line noise with frame-rate noise so bands have both
// slow tape wander and fast electronic shimmer.
float slowLine = valueNoise2(float2(y * 0.021, floor(time * 10.0)));
float fastLine = noiseHash(float2(y * 1.73, floor(time * 59.94)));
float line = (slowLine * 0.7 + fastLine * 0.3) * 2.0 - 1.0;
float band = sin(uv.y * outputResolution.y * 0.42 + time * 36.0);
return line * (0.65 + 0.35 * band);
}
float3 analogStatic(float2 uv, float time, float2 outputResolution)
{
float2 safeResolution = max(outputResolution, float2(1.0, 1.0));
float2 pixel = floor(uv * safeResolution / max(noiseSize, 0.25));
float frame = floor(time * 59.94);
float seed = frac(time);
// Several differently skewed hashes keep the snow from forming obvious
// diagonal or grid patterns at broadcast frame cadence.
float2 goldPixel = pixel + float2(0.37, 0.61) + frame;
float snowA = goldNoise(goldPixel, seed + 0.1);
float snowB = goldNoise(goldPixel * float2(0.37, 2.11) + float2(19.0, 41.0), seed + 0.2);
float snowC = goldNoise(goldPixel * float2(1.73, 0.81) + float2(53.0, 7.0), seed + 0.3);
float snow = (snowA * 0.72 + snowB * 0.28) * 2.0 - 1.0;
float lineNoise = tapeLineNoise(uv, time, safeResolution);
float dropoutSeed = goldNoise(float2(floor(uv.y * safeResolution.y * 0.25) + 1.0, frame + 2.0), seed + 0.4);
float dropout = smoothstep(0.965, 1.0, dropoutSeed);
float fleck = smoothstep(0.988, 1.0, snowA) - smoothstep(0.0, 0.012, snowC);
float scan = sin(uv.y * safeResolution.y * 3.14159265);
float scanMask = 0.55 + 0.45 * scan * scan;
float lumaNoise = snow * 0.55 + lineNoise * staticLines * 0.45 + fleck * 0.7 + dropout * lineNoise * 1.2;
return float3(lumaNoise * scanMask, lumaNoise * 0.42, lumaNoise * 0.72);
}
float3 softBloom(float2 uv, float2 outputResolution, float radius)
{
float2 pixel = 1.0 / max(outputResolution, float2(1.0, 1.0));
float2 dx = float2(pixel.x * radius, 0.0);
float2 dy = float2(0.0, pixel.y * radius);
float3 sum = sampleVideo(frac(uv)).rgb * 0.28;
sum += sampleVideo(frac(uv + dx)).rgb * 0.14;
sum += sampleVideo(frac(uv - dx)).rgb * 0.14;
sum += sampleVideo(frac(uv + dy)).rgb * 0.14;
sum += sampleVideo(frac(uv - dy)).rgb * 0.14;
sum += sampleVideo(frac(uv + dx + dy)).rgb * 0.075;
sum += sampleVideo(frac(uv + dx - dy)).rgb * 0.075;
sum += sampleVideo(frac(uv - dx + dy)).rgb * 0.075;
sum += sampleVideo(frac(uv - dx - dy)).rgb * 0.075;
return sum;
}
float3 blurVhs(float2 uv, float d, int sampleCount)
{
float3 sum = float3(0.0, 0.0, 0.0);
float weight = 1.0 / max(float(sampleCount), 1.0);
float start = 2.0 / max(float(sampleCount), 1.0);
float2 pixelOffset = float2(d, 0.0);
float2 scale = 0.66 * 8.0 * pixelOffset;
// The circular tap pattern approximates soft tape smear while keeping the
// maximum loop bound fixed for shader compilation.
for (int i = 0; i < 15; ++i)
{
if (i >= sampleCount)
break;
float2 offset = circle(start, float(sampleCount), float(i)) * scale;
sum += sampleVideo(frac(uv + offset)).rgb * weight;
}
return sum;
}
float distortedTapeTime(ShaderContext context)
{
return context.time + context.startupRandom * 113.0;
}
float4 buildTapeSmear(ShaderContext context)
{
float2 uv = context.uv;
float time = distortedTapeTime(context);
float framecount = frac(time * wiggleSpeed / 7.0) * 7.0;
int sampleCount = int(clamp(blurSamples, 3.0, 15.0) + 0.5);
// Split the source into YIQ, smear each component by a different amount,
// then recombine to mimic luma/chroma bandwidth mismatch on tape.
float d = 0.1 - round(frac(time / 3.0)) * 0.1;
uv = jumpy(uv, framecount);
float s = 0.0001 * -d + 0.0001 * wiggle * sin(time * wiggleSpeed);
float e = min(0.30, pow(max(0.0, cos(uv.y * 4.0 + 0.3) - 0.75) * (s + 0.5), 3.0)) * 25.0;
float r = 250.0 * (2.0 * s);
uv.x += abs(r * pow(min(0.003, (-uv.y + (0.01 * frac(time / 5.0) * 5.0))) * 3.0, 2.0)) * wiggle;
d = 0.051 + abs(sin(s / 4.0));
float c = max(0.0001, 0.002 * d) * smear;
float3 yBlur = blurVhs(uv, c + c * uv.x, sampleCount);
float y = rgb2yiq(yBlur).r;
uv.x += 0.01 * d;
c *= 6.0;
float3 iBlur = blurVhs(uv, c, sampleCount);
float i = rgb2yiq(iBlur).g;
uv.x += 0.005 * d;
c *= 2.5;
float3 qBlur = blurVhs(uv, c, sampleCount);
float q = rgb2yiq(qBlur).b;
float3 color = yiq2rgb(float3(y, i, q)) - pow(s + e * 2.0, 3.0);
return float4(saturate(color), 1.0);
}
float4 finishVhs(ShaderContext context)
{
float time = distortedTapeTime(context);
float3 color = sampleVideo(context.uv).rgb;
// Radial red/blue offsets create lens and deck misregistration before the
// wider tape effects are layered in.
float2 centered = context.uv * 2.0 - 1.0;
centered.x *= context.outputResolution.x / max(context.outputResolution.y, 1.0);
float2 aberrationOffset = centered * (aberrationAmount * 0.0015);
float redAberration = sampleVideo(frac(context.uv + aberrationOffset)).r;
float blueAberration = sampleVideo(frac(context.uv - aberrationOffset)).b;
color.r = lerp(color.r, redAberration, 0.35);
color.b = lerp(color.b, blueAberration, 0.35);
float2 halationOffset = float2(0.0015, 0.0) * (1.0 + smear * 0.35);
float3 halationSource =
sampleVideo(frac(context.uv + halationOffset)).rgb * 0.4 +
sampleVideo(frac(context.uv - halationOffset)).rgb * 0.4 +
sampleVideo(frac(context.uv + halationOffset * 2.0)).rgb * 0.2;
float halationLuma = dot(halationSource, float3(0.299, 0.587, 0.114));
float halationMask = smoothstep(0.45, 1.0, halationLuma) * halationAmount;
color += halationSource * float3(1.0, 0.38, 0.24) * halationMask * 0.35;
// Bloom and fade are applied as separate layers so highlights glow without
// flattening the full picture into the faded black level.
float3 bloomSource = softBloom(context.uv, context.outputResolution, 2.0 + smear * 2.5);
float bloomLuma = dot(bloomSource, float3(0.299, 0.587, 0.114));
float bloomMask = smoothstep(0.32, 1.0, bloomLuma) * bloomAmount;
color = lerp(color, bloomSource, bloomAmount * 0.18);
color += bloomSource * float3(1.0, 0.96, 0.92) * bloomMask * 0.24;
float3 speckle = animatedChromaGrain(context.uv, time, context.outputResolution, noiseSize);
float luma = dot(color, float3(0.299, 0.587, 0.114));
float noiseMask = lerp(0.65, 1.0, 1.0 - saturate(luma));
float chunkiness = lerp(1.0, 2.4, saturate((noiseSize - 1.0) / 5.0));
// Push darker regions harder: analog noise reads most naturally in shadows
// and avoids washing out bright highlights.
float3 chromaNoise = float3(speckle.x * 1.2, speckle.y * 0.28, speckle.z * 1.35);
color += chromaNoise * noiseAmount * noiseMask * chunkiness;
color.rg = lerp(color.rg, float2(color.r, color.g) + speckle.xy * noiseAmount * 0.2 * chunkiness, 0.35);
color.b = lerp(color.b, color.b + speckle.z * noiseAmount * 0.28 * chunkiness, 0.5);
float3 staticNoise = analogStatic(context.uv, time, context.outputResolution);
float staticMask = lerp(0.45, 1.15, 1.0 - saturate(luma));
color += staticNoise * staticAmount * staticMask;
color = lerp(color, color + float3(staticNoise.r * 0.22, staticNoise.g * 0.08, -staticNoise.b * 0.08), saturate(staticAmount * 2.0));
float3 grayscale = float3(luma, luma, luma);
color = lerp(color, grayscale, fadeAmount * 0.18);
color = color * (1.0 - fadeAmount * 0.08) + float3(0.055, 0.055, 0.065) * fadeAmount;
color = lerp(color, softBloom(context.uv, context.outputResolution, 1.0 + smear), fadeAmount * 0.12);
float vignetteBase = context.uv.x * (1.0 - context.uv.x) * context.uv.y * (1.0 - context.uv.y);
float vignette = saturate(pow(vignetteBase * 16.0, 0.22));
color *= lerp(1.0 - vignetteAmount, 1.0, vignette);
return float4(saturate(color), 1.0);
}
float4 shadeVideo(ShaderContext context)
{
return finishVhs(context);
}