pixel test와 renderer regression test

렌더러는 작은 변경으로도 깨질 수 있습니다. matrix 순서, DPR, blending, clipping, text upload 같은 문제는 타입 검사만으로 잡기 어렵습니다.

command log와 pixel sample을 같이 검증한다

전체 screenshot golden test만 쓰면 브라우저와 GPU 차이 때문에 flaky해질 수 있습니다. 대신 중요한 픽셀 샘플과 renderer command log를 함께 봅니다.

function samplePixels(gl, points) {
  const pixel = new Uint8Array(4);
  return points.map((point) => {
    gl.readPixels(point.x, point.y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel);
    return { ...point, rgba: Array.from(pixel) };
  });
}

expect(sample.rgba).toBeCloseToRgba([246, 200, 95, 255], { tolerance: 3 });

golden image에는 tolerance를 둔다

function compareImages(actual, expected, options) {
  const { maxDifferentPixels, channelTolerance } = options;
  let different = 0;

  for (let i = 0; i < actual.length; i += 4) {
    if (Math.abs(actual[i] - expected[i]) > channelTolerance) different += 1;
  }

  return different <= maxDifferentPixels;
}

테스트 대상은 모든 강의가 아니라 renderer가 깨지기 쉬운 대표 장면으로 고릅니다.

matrix transform
alpha blending
clipping
texture sampling
text preview
selection overlay

오늘의 핵심

renderer regression test는 pixel-perfect를 강요하는 장치가 아닙니다. 중요한 렌더링 계약이 깨졌는지 빠르게 알려주는 안전망입니다.