Skip to content

gingerbeardman/webgl-crt-shader

Repository files navigation

WebGL CRT Shader

Tweakable CRT shader for web canvas, three.js, etc.

If you use this in your game/app/website I'd love to hear about it.

Let's call this Serenity Shader if we need a name to refer to it as.

About

This is a WebGL shader, written in GLSL, intended for use in web browsers.

  • Runs on the device’s hardware GPU
  • Browser provides the WebGL interface and safety checks
  • Renders to a <canvas> (or OffscreenCanvas)
  • Not limited to games — usable for effects, demos, and creative coding

Try it

LIVE DEMO

😎

Notes

  • in this example the source image is scaled with interpolation (smoothing) to add to the vibe
  • you want to try to match the number of lines to the output resolution (here, 256)
  • optimised to run well on as far back as iPhone XS (2018, A12 Bionic CPU w/ 4-core GPU)

Announcement blog post

Screenshot

Default parameters

Licence

MIT

About

Tweakable CRT shader for web canvas

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project