[HN Gopher] GLSL Web CRT Shader
___________________________________________________________________
GLSL Web CRT Shader
Author : msephton
Score : 98 points
Date : 2026-01-04 19:22 UTC (4 days ago)
(HTM) web link (blog.gingerbeardman.com)
(TXT) w3m dump (blog.gingerbeardman.com)
| msephton wrote:
| Revised title: WebGL CRT Shader
| sublinear wrote:
| 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.
| bsimpson wrote:
| 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.
| msephton wrote:
| 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.
| msephton wrote:
| 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.
| JKCalhoun wrote:
| A Bloom filter?
|
| Never mind, I'm guessing you mean a different kind.
| flohofwoe wrote:
| In rendering, bloom filter means this thing:
|
| https://en.wikipedia.org/wiki/Bloom_(shader_effect)
|
| ...the other Bloom filter is named after a person.
| greggman65 wrote:
| 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...
| msephton wrote:
| How are they different/better/worse?
| zokier wrote:
| 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...
| skywal_l wrote:
| Nice to see you on HN and thanks for webglfundamentals!
| archerx wrote:
| What's the point of these? I grew up using CRT monitors and TVs
| and they look nothing like the shaders.
| flohofwoe wrote:
| 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).
| Sharlin wrote:
| Mostly, it's retro aesthetic for people who actually did not
| grow with CRT displays.
| OuterVale wrote:
| 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.
| msephton wrote:
| 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).
| pezezin wrote:
| 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!
| robin_reala wrote:
| A Trinitron shader would be two very thin horizontal lines
| trisecting the screen.
| zokier wrote:
| 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
| u8080 wrote:
| In theory, good CRT shader emulates temporal and "subpixel"
| tricks that game developers used to overcome color and
| resolution limitations.
| TiredOfLife wrote:
| Torture.
| okasaki wrote:
| 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.
| flohofwoe wrote:
| 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.
| Sharlin wrote:
| 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.
| theragra wrote:
| It was fine back then, but now I can't tolerate even a minute
| of CRT TV or low frequency monitor.
| msephton wrote:
| 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.
| pezezin wrote:
| 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.
| voidUpdate wrote:
| They also don't replicate the 15khz whine that makes CRTs
| incredibly annoying for me to use
| pezezin wrote:
| That only applies to TV sets, computer monitors operated at
| much higher frequencies outside the human hearing range.
| zokier wrote:
| Of course that is also available as a shader:
| https://news.ycombinator.com/item?id=42506211
| TiredOfLife wrote:
| All of them make my eyes water, som they are doing something
| right.
| onion2k wrote:
| 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.
| spankalee wrote:
| https://github.com/WICG/html-in-canvas
| swiftcoder wrote:
| 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...
| dylan604 wrote:
| 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
| msephton wrote:
| 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.
___________________________________________________________________
(page generated 2026-01-08 23:01 UTC)