WebGL canvas UI 테스팅(PNG 와 비교)

WebGL 결과물은 보통 PNG 이미지와 비교를 하는 방식으로 테스팅을 진행한다.

canvas의 context가 2D 인 경우, context의 imageData를 추출하고 pixelmatch의 도움을 받아 다음과 같이 진행하면 된다(imageData 자체를 비교해도 무관하다).

const width = targetCanvas.width;
const height = targetCanvas.height;

const refCanvas = document.createElement("canvas");
refCanvas.width = width;
refCanvas.height = height;

const refContext = refCanvas.getContext("2d");
refContext.drawImage(image, 0, 0);

const mismatch = pixelmatch(
  context.getImageData(0, 0, width, height).data,
  refContext.getImageData(0, 0, width, height).data,
  null, width, height);
// mismatch === 일치하지 않는 픽셀 수

하지만 canvas의 context가 webgl 인 경우, imageData를 추출할 수 없다. 이 때 canvas의 데이터를 얻을 수 있는 유일한 방법은 toDataURL() 을 호출하는 것인데, drawImage 의 첫 번째 파라미터로 toDataURL() 의 결과를 입력할 경우 타입 에러가 발생한다.

따라서 2D의 경우와 같은 방식으로 진행할 수 없다.

 

이를 해결 하기 위해선 webgl context를 갖는 canvas를 2d context를 갖는 canvas로 먼저 복사한 후, 위 과정을 진행하면 된다.

const width = targetCanvas.width;
const height = targetCanvas.height;

const copiedTargetCanvas = document.createElement("canvas");
copiedTargetCanvas.width = width;
copiedTargetCanvas.height = height;

const copiedTargetContext = copiedTargetCanvas.getContext("2d");
copiedTargetContext.drawImage(targetContext.canvas, 0, 0, width, height);

const targetData = copiedTargetContext.getImageData(0, 0, width, height).data;

const refCanvas = document.createElement("canvas");
refCanvas.width = width;
refCanvas.height = height;

const refContext = refCanvas.getContext("2d");
refContext.drawImage(image, 0, 0);

const refData = refContext.getImageData(0, 0, width, height).data;

// targetData 와 refData 가 일치하는지 비교
// 일치하면 동일한 이미지, 그렇지 않으면 다른 이미지.