GLSL Bayer dithering shader.

frag.glsl

// adapted from http://devlog-martinsh.blogspot.com/2011/03/glsl-8x8-bayer-matrix-dithering.html

uniform sampler2D bgl_RenderedTexture;
uniform sampler2D bayerTexture;

varying vec2 vUv;

float find_closest(float x, float y, float c0) {
    float limit = texture2D(bayerTexture, vec2(x / 4.0, y / 4.0)).r;

    if(c0 < limit)
        return 0.0;
    else
        return 1.0;
}

void main(void) {
    vec4 lum = vec4(0.5, 0.5, 0.5, 0);

    float grayscale = dot(texture2D(bgl_RenderedTexture, vUv), lum);
    vec3 rgb = texture2D(bgl_RenderedTexture, vUv).rgb;

    vec2 xy = vUv;
    float x = mod(xy.x, 4.0);
    float y = mod(xy.y, 4.0);

    float final = find_closest(x, y, grayscale);
    gl_FragColor = vec4(final, final, final, 1.0);
}

render.js

function getBayerTexture() {
    var canvas = document.createElement('canvas');
    canvas.width = 4;
    canvas.height = 4;

    var context = canvas.getContext('2d');
    var image = context.getImageData(0, 0, canvas.width, canvas.height);

    var data = [
        [1, 9, 3, 11],
        [13, 5, 15, 7],
        [4, 12, 2, 10],
        [16, 8, 14, 6],
    ]

    var x = 0, y = -1;

    for (var i = 0, j = 0, l = image.data.length; i < l; i += 4, j ++) {
        x = j % canvas.width;
        y = x == 0 ? y + 1 : y;

        var norm = Math.floor(255.0 * data[y][x] / 17.0);

        image.data[i ] = norm;
        image.data[i + 1] = norm;
        image.data[i + 2] = norm;
        image.data[i + 3] = norm;
    }

    context.putImageData(image, 0, 0);
    var texture = new THREE.Texture(canvas);
    texture.minFilter = THREE.NearestFilter;
    texture.needsUpdate = true;

    return texture;
}

var material = new THREE.ShaderMaterial( {
	uniforms: {
		time: { type: "f", value: 1.0 },
		resolution: { type: "v2", value: new THREE.Vector2() },
        bgl_RenderedTexture: { type: "t", value: THREE.ImageUtils.loadTexture("textures/texture.png"); },
        bayerTexture: { type: "t", value: getBayerTexture() }
	},
	vertexShader: document.getElementById( 'vertexShader' ).textContent,
	fragmentShader: document.getElementById( 'fragmentShader' ).textContent
} );

mesh = new THREE.Mesh(new THREE.PlaneGeometry(5, 5, 5), material);
mesh.scale.set(15, 15, 15);
mesh.position.y = 0;
mesh.position.x = 0;
mesh.position.z = 900;

scene.add(mesh);

vert.glsl

varying vec2 vUv;

void main() {
    vUv = uv;

    gl_Position =   projectionMatrix *
                    modelViewMatrix *
                    vec4(position,1.0);
}