Create Retro CRT Screen Effects with JavaScript and WebGL – CRTFilter

Preview:

Description:

CRTFilter is a lightweight JavaScript library that applies realistic old CRT screen effects to canvas elements using WebGL technology. Works with most modern browsers and supports WebGL2 with automatic fallback to WebGL1,

This library generates old-school ripple effects (Moiré patterns) that perfectly replicate the visual characteristics of vintage CRT displays. It’s a great fit if you’re building a retro-style video game or any project where you want that vintage screen aesthetic.

More Features:

• Barrel Distortion: Creates the curved look of old screens.
• Chromatic Aberration: Adds a slight color separation for realism.
• Static Noise & Horizontal Tearing: Introduces visual interference.
• Glow Bloom: Mimics the glow of CRT pixels.
• Vertical Jitter & Retrace Lines: Adds subtle image oscillation and refresh lines.
• Dot Mask: Simulates the pixel structure of CRTs.
• Adjustments: Fine-tune brightness, contrast, and desaturation.
• Flicker & Signal Loss: Creates flickering and signal loss common in older displays.
• Scanline Intensity: Adjusts the prominence of scanlines.
• VHS Effects Simulates loss of VHS signal. (in future updates)
• Event Support: Events are forwarded from the filtered canvas to your original canvas.

See It In Action:

How to use it:

1. Download the CRTFilter package and import it into your project as a module:

import { CRTFilterWebGL } from './CRTFilterWebGL.js';

2. Create a canvas element in your HTML:

<canvas id="myCcanvas" width="600" height="450"></canvas>

3. Get a reference to your canvas and create a new CRTFilterWebGL instance:

const canvas = document.getElementById("myCanvas");
const crtEffect = new CRTFilterWebGL(canvas);
crtEffect.start();

4. Start and stop the effect as needed:

crtEffect.start();
crtEffect.stop();

5. The real power of CRTFilter lies in its customization options. You can adjust various parameters to get the precise CRT look you’re after:

• barrelDistortion: (Number) Simulates the curvature of CRT screens. Higher values mean more curvature.
• curvature: (Number) Adjusts the overall amount of CRT screen curvature. This works in conjunction with barrelDistortion.
• chromaticAberration: (Number) Creates a slight separation of RGB color channels, mimicking the color fringing seen on older displays.
• staticNoise: (Number) Adds visual static noise to the image. Higher values create more noise.
• horizontalTearing: (Number) Simulates horizontal distortion, similar to a screen with a faulty connection.
• glowBloom: (Number) Simulates the phosphorescent glow of CRT pixels.
• verticalJitter: (Number) Introduces a slight vertical oscillation or shaking of the image.
• retraceLines: (Boolean) Enables or disables the rendering of CRT retrace lines (the faint lines seen during the electron beam’s return).
• scanlineIntensity: (Number) Controls the visibility and intensity of the scanlines. A value of 0 would make them invisible, while higher values make them more prominent.
• dotMask: (Boolean) Enables or disables the simulation of the CRT’s pixel structure (the individual red, green, and blue dots).
• motionBlur: (Number) Currently not implemented. Intended to simulate motion blur on fast-moving objects.
• brightness: (Number) Adjusts the overall brightness of the screen. A value of 1.0 is likely normal brightness.
• contrast: (Number) Adjusts the contrast of the image. A value of 1.0 is likely normal contrast.
• desaturation: (Number) Reduces the color saturation, creating a faded or aged look. A value of 0 would leave colors unchanged; 1.0 would be completely grayscale.
• flicker: (Number) Simulates the occasional flickering common in CRT screens.
• signalLoss: (Number) Simulates artifacts caused by VHS or UHF signal loss, creating a distorted, noisy effect.
• horizontalRoll: Not mentioned in How to Use section but mentioned in the feature, no default value provided.
• trackingJitter: Not mentioned in How to Use section but mentioned in the feature, no default value provided.

const crtEffect = new CRTFilterWebGL(canvas, {
  barrelDistortion: 0.001, 
  curvature: 0.002, 
  chromaticAberration: 0.0005,
  staticNoise: 0.001, 
  horizontalTearing: 0.00012, 
  glowBloom: 0.001, 
  verticalJitter: 0.001,
  retraceLines: true,
  scanlineIntensity: 0.6,
  dotMask: false,
  motionBlur: 0, 
  brightness: 0.9, 
  contrast: 1.0,
  desaturation: 0.2, 
  flicker: 0.01,
  signalLoss: 0.05
});

FAQs

Q: Can I use CRTFilter on images and videos?
A: CRTFilter works on canvas elements. You can draw images or video frames onto a canvas and then apply the filter.

Q: Will CRTFilter slow down my website?
A: CRTFilter uses WebGL, which is generally hardware-accelerated. Performance impact should be minimal, but it depends on the complexity of your scene and the user’s device.