Feature - ordered dither: apply Bayer threshold in perceptual (sRGB) space

[claudobahn]

The ordered dither currently adds the Bayer threshold to pixel values in linear RGB space. Because of the sRGB gamma curve, this produces a ~2-3x stronger perceptual effect in shadows/midtones than in highlights — dark regions get visibly heavier dithering patterns while bright areas are barely affected.

Applying the threshold in sRGB space instead (or scaling it by local perceptual sensitivity) would produce more uniform dithering across the tonal range. This matches how error diffusion already works — it accumulates error in sRGB space specifically because mid-tone sRGB 128 should produce ~50% dithering dots, not the ~21% that linear space gives.

Note: this affects all three language implementations (Rust, JS, Python) equally — the Rust port faithfully preserved the original behavior. Changing it would alter output for all images using ordered dithering and would require regenerating regression references.

An attempt at visualizing the challenge:

And the code that was used to generate that:

import numpy as np
import matplotlib.pyplot as plt

def srgb_to_linear(x):
    return np.where(x <= 0.04045, x / 12.92, ((x + 0.055) / 1.055) ** 2.4)

def linear_to_srgb(x):
    return np.where(x <= 0.0031308, x * 12.92, 1.055 * (x ** (1 / 2.4)) - 0.055)

# Plot 1 Data
srgb_vals = np.linspace(0, 1, 256)
threshold = 0.5

# Threshold in Linear Space
linear_vals = srgb_to_linear(srgb_vals)
lin_plus = np.clip(linear_vals + threshold, 0, 1)
lin_minus = np.clip(linear_vals - threshold, 0, 1)
lin_spread_srgb = (linear_to_srgb(lin_plus) - linear_to_srgb(lin_minus)) * 255

# Threshold in sRGB Space
srgb_plus = np.clip(srgb_vals + threshold, 0, 1)
srgb_minus = np.clip(srgb_vals - threshold, 0, 1)
srgb_spread_srgb = (srgb_plus - srgb_minus) * 255

# Plot 2 Data (Gradient)
gradient_base = np.linspace(0, 1, 256).reshape(1, -1)
gradient_base = np.tile(gradient_base, (40, 1))

# Row 2: Linear + 0.25
lin_grad = srgb_to_linear(gradient_base)
lin_grad_mod = np.clip(lin_grad + 0.25, 0, 1)
row2 = linear_to_srgb(lin_grad_mod)

# Row 3: sRGB + 0.25
row3 = np.clip(gradient_base + 0.25, 0, 1)

# Combined Image for Plot 2
# We'll stack them with spacers
spacer = np.ones((5, 256))
vis_gradient = np.vstack([gradient_base, spacer, row2, spacer, row3])

# Create Figure
fig, (ax1, ax2) = plt.subplots(2, 1, figsize=(10, 10))

# Plot 1
ax1.plot(srgb_vals * 255, lin_spread_srgb, color='blue', label='threshold in linear space')
ax1.plot(srgb_vals * 255, srgb_spread_srgb, color='red', label='threshold in sRGB space')
ax1.set_title("Perceptual spread of $\pm 0.5$ threshold: linear vs sRGB space")
ax1.set_xlabel("input sRGB value (0–255)")
ax1.set_ylabel("perceptual spread in sRGB levels")
ax1.legend()
ax1.grid(True, alpha=0.3)

# Plot 2
ax2.imshow(vis_gradient, cmap='gray', aspect='auto', extent=[0, 255, 0, 130])
ax2.set_yticks([110, 65, 20])
ax2.set_yticklabels(['Original', 'Linear +0.25', 'sRGB +0.25'])
ax2.set_title("Threshold effect on a gradient")
ax2.set_xlabel("sRGB Level")
ax2.set_xticks(np.arange(0, 257, 32))

plt.tight_layout()
plt.savefig('dithering_comparison.png')
plt.close()

[claudobahn]

Here's a visualization of how that impacts ordered dithering:

Code:

import numpy as np
import matplotlib.pyplot as plt

def srgb_to_linear(x):
    return np.where(x <= 0.04045, x / 12.92, ((x + 0.055) / 1.055) ** 2.4)

def linear_to_srgb(x):
    return np.where(x <= 0.0031308, x * 12.92, 1.055 * (x ** (1/2.4)) - 0.055)

# Plot 1
srgb_vals = np.linspace(0, 1, 256)
linear_vals = srgb_to_linear(srgb_vals)

# Linear space threshold spread
l_high = np.clip(linear_vals + 0.5, 0, 1)
l_low = np.clip(linear_vals - 0.5, 0, 1)
spread_linear = (linear_to_srgb(l_high) - linear_to_srgb(l_low)) * 255

# sRGB space threshold spread
s_high = np.clip(srgb_vals + 0.5, 0, 1)
s_low = np.clip(srgb_vals - 0.5, 0, 1)
spread_srgb = (s_high - s_low) * 255

plt.figure(figsize=(10, 6))
plt.plot(srgb_vals * 255, spread_linear, label='threshold in linear space', color='blue')
plt.plot(srgb_vals * 255, spread_srgb, label='threshold in sRGB space', color='red', linestyle='--')
plt.title('Perceptual spread of $\pm 0.5$ threshold: linear vs sRGB space')
plt.xlabel('input sRGB value (0–255)')
plt.ylabel('perceptual spread in sRGB levels')
plt.legend()
plt.grid(True, alpha=0.3)
plt.savefig('perceptual_spread.png')

# Plot 2: Dithered Gradients
bayer_4x4 = np.array([
    [ 0,  8,  2, 10],
    [12,  4, 14,  6],
    [ 3, 11,  1,  9],
    [15,  7, 13,  5]
])
bayer_norm = (bayer_4x4 / 16.0) - 0.5

width = 256
height_per_row = 40
gradient = np.tile(np.linspace(0, 1, width), (height_per_row, 1))

# Row 1: sRGB space dither
row1 = np.zeros((height_per_row, width))
for y in range(height_per_row):
    for x in range(width):
        thresh = bayer_norm[y % 4, x % 4]
        val = np.clip(gradient[y, x] + thresh, 0, 1)
        row1[y, x] = 1.0 if val >= 0.5 else 0.0

# Row 2: Original gradient
row2 = gradient

# Row 3: Linear space dither
row3 = np.zeros((height_per_row, width))
for y in range(height_per_row):
    for x in range(width):
        thresh = bayer_norm[y % 4, x % 4]
        lin_val = srgb_to_linear(gradient[y, x])
        val = np.clip(lin_val + thresh, 0, 1)
        row3[y, x] = 1.0 if val >= 0.5 else 0.0

# Combine rows
full_img = np.vstack([row1, row2, row3])
plt.figure(figsize=(12, 6))
plt.imshow(full_img, cmap='gray', aspect='auto', interpolation='nearest')
plt.axis('off')
plt.text(-10, 20, 'sRGB Dither', va='center', ha='right', fontsize=12)
plt.text(-10, 60, 'Original', va='center', ha='right', fontsize=12)
plt.text(-10, 100, 'Linear Dither', va='center', ha='right', fontsize=12)
plt.title('4x4 Bayer ordered dither on a grayscale gradient')
plt.savefig('dither_comparison.png')

[claudobahn]

Here's what that change could look like:
claudobahn@0910208

Here's a few examples of the impact of this change: