ditherBayer()

function ditherBayer(
  params?: {
    size?: number;
    color?: boolean;
    levels?: number;
  } & {
    matrix?: 4 | 2 | 8;
  },
): EffectPass<
  {
    uTexture: (
      __namedParameters: Readonly<EffectUniformContext>,
    ) => WebGLTexture;
    uResolution: (
      __namedParameters: Readonly<EffectUniformContext>,
    ) => [number, number];
    uDpr: (__namedParameters: Readonly<EffectUniformContext>) => number;
    uSize: number;
    uColor: boolean;
    uLevels: number;
  } & {
    uMatrix: 2 | 4 | 8;
  }
>;

Creates a Bayer ordered dithering post-processing effect.

Each pixel is thresholded against a repeating Bayer matrix, which produces the classic cross-hatch pattern.

Parameters

params?

{ size?: number; color?: boolean; levels?: number; } & { matrix?: 4 | 2 | 8; }

Dither configuration.

Returns

EffectPass<{ uTexture: (__namedParameters: Readonly<EffectUniformContext>) => WebGLTexture; uResolution: (__namedParameters: Readonly<EffectUniformContext>) => [number, number]; uDpr: (__namedParameters: Readonly<EffectUniformContext>) => number; uSize: number; uColor: boolean; uLevels: number; } & { uMatrix: 2 | 4 | 8; }>

Remarks

Expects linear input and writes sRGB-encoded output, so use it as the last effect, after a tone mapping with outputColorSpace: "linear". The pattern is mixed in linear light between the two nearest palette levels, so the average light matches the source.