ditherHalftone()

function ditherHalftone(
  params?: {
    size?: number;
    color?: boolean;
    levels?: number;
  } & {
    angle?: number;
  },
): EffectPass<
  {
    uTexture: (
      __namedParameters: Readonly<EffectUniformContext>,
    ) => WebGLTexture;
    uResolution: (
      __namedParameters: Readonly<EffectUniformContext>,
    ) => [number, number];
    uDpr: (__namedParameters: Readonly<EffectUniformContext>) => number;
    uSize: number;
    uColor: boolean;
    uLevels: number;
  } & {
    uAngle: number;
  }
>;

Creates a halftone post-processing effect.

Unlike the ordered matrices, this is a continuous, angled dot screen: round dots grow from each cell centre, which reads as a printed halftone and scales to any size without visible steps. The size parameter sets the distance between dot centres, not their diameter, so halftone looks finer than the solid-cell patterns at the same value.

Parameters

params?

{ size?: number; color?: boolean; levels?: number; } & { angle?: number; }

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; } & { uAngle: number; }>

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.