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.
CRT shaders are a rabbit hole. Retro gaming/emulator community has been iterating on them for a while now. Found this blog post with tons of comparisons between different shaders in different configurations: https://thingsiplay.game.blog/2024/10/19/showcase-for-retroa...
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
OP here. Red does bleed that way with this, you can see the lines almost disappear (especially with vertical movement) if you enable the coloured shape layer which was added specifically for this purpose.
But it's not displaying any specific CRT, TV, PVM, etc. It's not a simulator, rather just a minimal (as in GPU work it results in) shader to give that kind of vibe/aesthetic.
Yeah it's not a CRT simulator. It's a minimal shader to give a CRT-like vibe. Minimal as in the least amount of processing, so it performs well on older devices.
A better demo would correlate the pixelization of the source with the settings in the sidebar. Doesn't even have to be part of the shader, but would convey the effect better. The animated shapes toggle really kills the illusion.
The animated shapes are off by default. They're there only so you can see how the settings affect red, green, and blue individually and in motion. For example with some settings the scanlines tend to disappear on red when in motion.
Yet still the 'raw' pixel data of old games rendered on modern displays without any filtering also doesn't look anything like they looked on CRT monitors (and even on CRT monitors there's a huge range between "game console connected to a dirt cheap tv via coax cable" and "desktop publishing workstation connected to professional monitor via VGA cable").
All the CRT shaders are just compromises on the 'correctness' vs 'aesthetics' vs 'performance' triangle (and everybody has a different sweet spot in this triangle, that's why there are so many CRT shaders to choose from).
Most of these CRT shaders seem to emulate the lowest possible quality CRTs you could find back in the day. I have a nice Trinitron monitor on my desk and it looks nothing like these shaders.
The only pleasant shader I have found is the one included in Dosbox Staging (https://www.dosbox-staging.org/), that one actually looks quite similar to my monitor!
Indeed. I made this because I grew up with CRTs and miss that vibe. As I say on the page: it's not scientifically accurate, but it looks good, and gives the same sort of feeling. And more than that uses minimal shader code so it works well on older devices. I'm currently making a 3D game that uses this shader and it runs at 60fps an iPhone XS (2018).
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.
People have varying sensitivies to flicker, but the refresh rate of even basic cheap CRT monitors was something like 75 or 85 Hz, which most people found essentially flickerless. Higher-end monitors would go up to 100 or 120 Hz, one of the several ways that for some use cases they were superior to LCD displays for quite a long time. Televisions, at 50 or 60 Hz, were pretty bad of course.
This CRT shader actually has a flicker slider. But 'brain melting flicker' sounds more like you were gaming with a 50Hz PAL console (or home computer) on a professional computer monitor which was intended for higher frequencies (like 72Hz). Regular TVs normally had plenty of 'afterglow' to reduce flicker.
Have you tried BFI (black frame insertion)? Many people swear by it because it improves the "motion clarity", but it has the side effect of significantly increasing flicker.
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.
https://github.com/WICG/html-in-canvas
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...
Nice to see you on HN and thanks for webglfundamentals!
How are they different/better/worse?
CRT shaders are a rabbit hole. Retro gaming/emulator community has been iterating on them for a while now. Found this blog post with tons of comparisons between different shaders in different configurations: https://thingsiplay.game.blog/2024/10/19/showcase-for-retroa...
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
OP here. Red does bleed that way with this, you can see the lines almost disappear (especially with vertical movement) if you enable the coloured shape layer which was added specifically for this purpose.
But it's not displaying any specific CRT, TV, PVM, etc. It's not a simulator, rather just a minimal (as in GPU work it results in) shader to give that kind of vibe/aesthetic.
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.
Yeah it's not a CRT simulator. It's a minimal shader to give a CRT-like vibe. Minimal as in the least amount of processing, so it performs well on older devices.
A better demo would correlate the pixelization of the source with the settings in the sidebar. Doesn't even have to be part of the shader, but would convey the effect better. The animated shapes toggle really kills the illusion.
The animated shapes are off by default. They're there only so you can see how the settings affect red, green, and blue individually and in motion. For example with some settings the scanlines tend to disappear on red when in motion.
A Bloom filter?
Never mind, I'm guessing you mean a different kind.
In rendering, bloom filter means this thing:
https://en.wikipedia.org/wiki/Bloom_(shader_effect)
...the other Bloom filter is named after a person.
Revised title: WebGL CRT Shader
What's the point of these? I grew up using CRT monitors and TVs and they look nothing like the shaders.
Yet still the 'raw' pixel data of old games rendered on modern displays without any filtering also doesn't look anything like they looked on CRT monitors (and even on CRT monitors there's a huge range between "game console connected to a dirt cheap tv via coax cable" and "desktop publishing workstation connected to professional monitor via VGA cable").
All the CRT shaders are just compromises on the 'correctness' vs 'aesthetics' vs 'performance' triangle (and everybody has a different sweet spot in this triangle, that's why there are so many CRT shaders to choose from).
Most of these CRT shaders seem to emulate the lowest possible quality CRTs you could find back in the day. I have a nice Trinitron monitor on my desk and it looks nothing like these shaders.
The only pleasant shader I have found is the one included in Dosbox Staging (https://www.dosbox-staging.org/), that one actually looks quite similar to my monitor!
Based on the repo dosbox staging seems to be mostly using crt-hyllian as their shader: https://github.com/dosbox-staging/dosbox-staging/tree/main/r...
That same shader is also available for RetroArch
A Trinitron shader would be two very thin horizontal lines trisecting the screen.
In theory, good CRT shader emulates temporal and "subpixel" tricks that game developers used to overcome color and resolution limitations.
Mostly, it's retro aesthetic for people who actually did not grow with CRT displays.
You say this, but the author was born in 1976. It not being perfect doesn't mean that the person involved doesn't know what they're talking about.
Indeed. I made this because I grew up with CRTs and miss that vibe. As I say on the page: it's not scientifically accurate, but it looks good, and gives the same sort of feeling. And more than that uses minimal shader code so it works well on older devices. I'm currently making a 3D game that uses this shader and it runs at 60fps an iPhone XS (2018).
Torture.
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.
People have varying sensitivies to flicker, but the refresh rate of even basic cheap CRT monitors was something like 75 or 85 Hz, which most people found essentially flickerless. Higher-end monitors would go up to 100 or 120 Hz, one of the several ways that for some use cases they were superior to LCD displays for quite a long time. Televisions, at 50 or 60 Hz, were pretty bad of course.
It was fine back then, but now I can't tolerate even a minute of CRT TV or low frequency monitor.
The default flicker rate on this shader is 0.01 which is about 85Hz. Indeed it's almost imperceptable but adds a lot to the feel.
This CRT shader actually has a flicker slider. But 'brain melting flicker' sounds more like you were gaming with a 50Hz PAL console (or home computer) on a professional computer monitor which was intended for higher frequencies (like 72Hz). Regular TVs normally had plenty of 'afterglow' to reduce flicker.
Of course that is also available as a shader: https://news.ycombinator.com/item?id=42506211
Have you tried BFI (black frame insertion)? Many people swear by it because it improves the "motion clarity", but it has the side effect of significantly increasing flicker.
They also don't replicate the 15khz whine that makes CRTs incredibly annoying for me to use
That only applies to TV sets, computer monitors operated at much higher frequencies outside the human hearing range.
All of them make my eyes water, som they are doing something right.