pixelizer.js

A single-file, palette-based pixelization and dithering library for JavaScript in the browser.

pixelizer.js renders an image through a configurable color palette, optionally applies Bayer dithering, and produces a retro-inspired result. It can be used as a standalone image processor, integrated into custom WebGL pipelines, or attached as a post-processing effect in Three.js, Babylon.js, and p5.js.

Now for the fun part...

The background behind this page is rendered using Three.js with pixelizer.js post processing.

This page is not only a landing page, it is a playground! Tinker with the options below and watch the results.

Dithering strength:

Pixel size:

Enter the name of a palette on Lospec to use:

Or enter a palette in the form of a JSON array:

Current palette:

Perfectly accurate
This style was the style used by previous versions. It is slower and looks a bit less retro with some slight anti-aliasing, but nice in it's own way. This is both a performance decision and a stylistic choice. Have fun!

pixelizer.js enabled

Generated configuration for functions