GLSL Web CRT Shader

I've always thought it's a shame that CSS PaintWorklets (https://developer.chrome.com/blog/paintapi/) can't access DOM elements to apply GLSL effects to things on a page. I understand why (it'd be a security nightmare having things rendered by something that's not the browser) but it's still annoying. I could make some cool stuff.

Oh, these are fun. I whipped one up for ludumdare 57 - https://swiftcoder.github.io/fathom/

Shader source: https://github.com/swiftcoder/fathom/blob/cd56fce9528641c7ed...

There's several of these on shadertoy

https://www.shadertoy.com/results?query=crt

I made a Pico-8 post processing script using a few

https://greggman.github.io/pico-8-post-processing/nano-villa...

also an article on starting one on WebGPU here

https://webgpufundamentals.org/webgpu/lessons/webgpu-post-pr...

What CRT standard is this meant to be emulating? It can't be NTSC, it's too clean. Red would never display that cleanly. Red was infamous for bleeding as the saturation increased. Never had much experience with True PAL in that I've only ever seen PAL at 60Hz so I'm not sure if had the same bleeding red issue.

It's these kinds of details that can really set your yet another emulator apart

I'm confused by the way scanlines are implemented here. They seem to have no effect on how the pixels are drawn.

What this actually seems to be is a plain old bloom filter that happens to have horizontal lines overlaid.

What's the point of these? I grew up using CRT monitors and TVs and they look nothing like the shaders.

Revised title: WebGL CRT Shader

One thing I haven't seen CRT shaders really replicate is the brain-melting flicker that comes with that technology. LCD was such a relief when it became common.