🪵 4. 보간법 적용 및 커서 보정

선을 빠르게 그렸을 때 모서리 부분이 끊김

문제 정의

• 빠르게 그렸을 때 모서리 부분에서 선이 끊기는 현상이 발생하였습니다.

• 하지만 터치 이벤트에서는 발생하지 않았습니다. (MouseEvent 트리거 시에만 발생)

  

문제 원인

• mousemove는 마우스가 움직일 때 트리거되지만, 모든 픽셀이 이벤트에 전달되지는 않습니다.
• mousemove 이벤트는 사용자 디바이스의 Polling Rage(샘플링 빈도)에 따라 발생합니다.
• 일반적인 마우스의 폴링 레이트는 125Hz 또는 1000Hz(게이밍 마우스)입니다.
• 브라우저는 하드웨어에서 발생한 모드 마우스 이동 이벤트를 처리하지 않고, 이를 최적화하여 샘플링한 좌표만 전달합니다.
• 따라서, 빠르게 그릴 경우 mousemove는 현재 샘플링과 다음 샘플링의 중간 픽셀을 놓칠 수도 있게 되는 것입니다.

문제 해결1. 경계선 부분 좌표 보간 [성공]

• 마우스가 객체를 벗어날 때 트리거되는 mouseleave 이벤트 핸들러에 좌표값을 추가하여, 경계선 부분의 좌표를 보간해줍니다.

const { canvas, ctx } = getCanvasContext(mainCanvasRef);
const { x: drawX, y: drawY } = convertCoordinate(getDrawPoint(e, canvas));

ctx.lineTo(drawX, drawY);
ctx.stroke();

• 마우스가 화면 밖을 벗어날 때의 좌표를 얻어 모서리까지 선을 그을 수 있도록 해주는 것입니다.

• 하지만 해당 조치로 마무리하기에는, touchEvent에서는 왜 원래부터 잘 작동하였는 지 궁금증이 생겼습니다.

  왜 touchEvent에서는 해당 현상이 없는가?

  • 터치 디바이스는 보통 정밀한 좌표 감지를 위해 설계되어있다고 한다. 하드웨어 성능 차이 문제도 있다는 뜻이다.
  • 터치 센서가 디스플레이 바로 아래에 있기 때문에, 물리적 입력과 화면상의 위치가 더 직접적으로 연결된다.
  • 터치 이벤트는 연속적인 좌표 데이터를 보장하도록 설계되었다.
    • 제스쳐 인식, 스와이프, 핀치 줌 등의 기능이 중요한 환경이므로 터치에 더 민감하게 설계되었다.
  • 터치 이벤트는 사용자의 연속적이고 직관적인 입력 처리를 보장하기 위해 전역에서 작동하도록 설계되었다.
    • 사용자가 화면에 접촉한 동안 상태를 지속적으로 추적한다.
    • 터치가 특정 요소에서 시작해 손가락을 움직여 다른 요소로 이동하거나 화면을 벗어났을 경우에도, 이벤트는 해당 특정 요소에 계속 전달된다.
    • canvas에서 터치가 시작되었다면, cavas 밖으로 터치가 이동해도 터치와 관련된 이벤트들은 canvas에서 처리된다는 뜻이다. (다른 요소의 터치 이벤트들은 무시됨)

문제 해결2. 이벤트 핸들러를 document에 부착하여 입력 좌표값을 전역에서 관리 [실패]

• 이벤트 리스너를 특정 요소에 부착하여 사용할 경우, 마우스 커서가 빠르게 요소를 이탈했을 경우 이벤트값을 받지 못할 수 있었습니다.
• 아래와 같은 방법으로 전역 수준에 핸들러를 붙여 제어해주었습니다.

  const canvasEventHandlers: CanvasEventHandlers = {
    mousedown: (e) => addDelegation(e, handleDrawStart),
    mousemove: (e) => addDelegation(e, handleDrawMove),
    mouseup: (e) => addDelegation(e, stopDrawing),
    mouseleave: (e) => addDelegation(e, stopDrawing),
    touchstart: (e) => addDelegation(e, handleDrawStart),
    touchmove: (e) => addDelegation(e, handleDrawMove),
    touchend: (e) => addDelegation(e, stopDrawing),
    touchcancel: (e) => addDelegation(e, stopDrawing),
  };

  useEffect(() => {
    for (const [event, handler] of Object.entries(canvasEventHandlers)) {
      document.addEventListener(event, handler);
    }

    return () => {
      for (const [event, handler] of Object.entries(canvasEventHandlers)) {
        document.removeEventListener(event, handler);
      }
    };
  }, [canvasEventHandlers]);

• 하지만 경계선 부근에서 선이 끊기는 이슈는 해결되지 않았습니다.
• 또한, 위 처럼 구현 시 변경해야할 부분이 더 있을 것 같아, 성능 문제가 발견되었을 때 리팩토링하여 개선하는 방향이 맞을 것 같다는 결론에 이르렀습니다.

결론

• 따라서 우선 stopDrawing 메소드에 경계선 좌표를 보간하는 첫번째 방법으로 결정했습니다.
• 하지만 해당 방법으로는 브러시가 클릭한 상태에서 캔버스 밖으로 나갔다가 돌아왔을 때 선이 이어지지 않았습니다.
• 마우스 이벤트가 캔버스에 붙어있으면, 마우스가 캔버스 밖으로 나갔을 때의 상태를 모니터링 할 수가 없기 때문이었습니다.
• 따라서 위 문제를 해결하기 위해서는 이벤트를 document에 붙여 전역에서 관리해야 할 것이며, 해당 필요성이 생겼을 때 시도할 예정입니다.

선을 그릴 때 각이 지는 현상

• 선을 그릴 때 부드럽게 그려지지 않는 이슈가 있었습니다.
• 처음에는 픽셀이 깨지는 현상인 줄 알고 안티 앨리어싱을 적용하였지만, 이후 그릴 때 선이 굴곡지는 이슈에 가깝다는 사실을 깨달았습니다.
• 아래는 순서대로 타 서비스인 갈틱폰의 부드러운 선, 우리 서비스의 각지는 선 이미지입니다.

알아두면 좋을 지식

마우스 폴링 레이트(Polling Rate)란?

• 폴링 레이트는 특정 기기에서 PC로 데이터를 전송하는 주기입니다. 캔버스 상황에서는 마우스 혹은 터치 스크린이 PC로 좌표를 전달하는 빈도가 될 것입니다.
• 단위는 Hz(헤르츠)를 사용합니다. 초 당 몇 번의 데이터를 전달하는 지를 나타내는 수치입니다.
• 일반적인 폴링 레이트 단위는 다음과 같습니다.
  • 125Hz: 초당 125번 데이터 전송 (8ms 간격)
  • 250Hz: 초당 250번 데이터 전송 (4ms 간격)
  • 500Hz: 초당 500번 데이터 전송 (2ms 간격)
  • 1000Hz: 초당 1000번 데이터 전송 (1ms 간격)
• 하지만! 일반적인 브라우저의 마우스 이벤트는 위와 같은 하드웨어의 폴링 레이트에 완벽히 동기화되지 않습니다.

브라우저 마우스 이벤트 발생 빈도

• 브라우저 마우스 이벤트의 발생 빈도는 화면 재생 빈도(Refresh Rate)와 독립적으로 작동합니다.
  • 대부분의 디스플레이는 60Hz(16.67ms 간격)로 동작합니다.
  • 브라우저는 시스템 이벤트 큐를 기반으로 마우스 이벤트를 처리합니다..
  • 폴링 레이트 간격으로 마우스가 데이터를 보내면, 브라우저는 이를 토대로 mouseEvent를 발셍시킵니다.
    • 즉, 마우스 이벤트 발생 빈도는 폴링 레이트와 관련이 있습니다.

Polling Rate와 Refresh Rate 간의 관계

• 하지만, Polling Rate가 아무리 높아도 Refrash Rate가 60Hz면 폴링 레이트 된 모든 데이터가 샘플링되지는 못합니다.
• 마우스가 1초에 150번 데이터를 보내더라도, 브라우저는 이 데이터를 1초에 60번 만 확인하여 렌더링 할 수 있는 것입니다.
  • 브라우저는 1/60초마다 마우스가 보낸 데이터 중 가장 최신 데이터를 가져가게 됩니다.
  • 이렇게 가져오게 된 데이터를 샘플링된 데이터라고 부릅니다.
  • 마우스 이벤트는 화면 갱신 주기와는 독립적으로 발생할 수 있습니다. (더 많을 수도 있음.)

문제 해결1. 아래 게시글 참고하여 안티 앨리어싱 적용해보기 [실패]

• 삽질하기 싫으면 꼭 읽어봐야 할 Canvas 트러블 슈팅 : NHN Cloud Meetup

canvas.width = canvas.clientWidth * window.devicePixelRatio;
canvas.height = canvas.clientHeight * window.devicePixelRatio;
ctx.imageSmoothingEnabled = true;

...
...
    
    
const convertCoordinate = ({ x, y }: Point): Point => {
  return { x: Math.floor(x * coordinateScale.current) + 0.5, y: Math.floor(y * coordinateScale.current) + 0.5 };
};

...
...

const ctx = canvas.getContext('2d', { willReadFrequently: true });

• 흔히 추천하는 안티 앨리어싱 방법을 적용해보았지만 큰 차이는 없었습니다.
• 무엇보다, 위에서 정리한 것 처럼 선이 각지는 이슈는 안티 앨리어싱과는 관련이 없습니다.

문제 해결2. requestAnimationFrame으로 캔버스 최적화 해보기 [실패]

  useEffect(() => {
    let lastTime: DOMHighResTimeStamp = 0;

    const drawAnimation = (timestemp: DOMHighResTimeStamp) => {
      if (timestemp - lastTime > 16) {
        if (currentDrawingRef.current) drawData(currentDrawingRef.current);
        lastTime = timestemp;
      }

      requestAnimationFrame(drawAnimation);
    };
    const aniId = requestAnimationFrame(drawAnimation);

    return () => {
      if (aniId) cancelAnimationFrame(aniId);
    };
  }, []);

• requestAnimationFrame 인자로 넘어오는 timestamp 값을 이용해 16ms 간격으로 그리기 함수를 실행해보았습니다.
• 하지만 requestAnimationFrame의 timestamp는 브라우저 성능에 따라 간격이 달라질 수 있기 때문에, performance.now() 를 쓰는 것이 정확했습니다.
• 결과적으로 위 시도로 크게 달라지는 점은 없었고, 선이 굴곡지는 이슈는 선과 선 사이에 각이 지는 현상으로 렌더링 성능과는 크게 상관이 없었습니다.

문제 해결3. 보간법으로 곡선 그리기 [성공→미적용]

• 위 이미지에서 확인할 수 있듯이, 마우스에서 샘플링된 포인트 기준으로 굴곡이 져있습니다.
• 즉, 해당 문제는 점이 찍히는 간격(Event Sampling Rate)을 조절하거나, 보간(Interpolation) 방법을 사용하여 해결해야 한다는 것을 깨달았습니다.

스플라인 이해

• 스플라인이란 기준점과 제어점을 통해 그려지는 곡선을 뜻합니다. 스플라인 그리기는 좌표 라인의 함수 모양에 따라 1차, 2차, 3차 등으로 나뉩니다.
• 부드러운 곡선을 계산하는 것은 결국 찍힌 점들이 어떤 방정식 그래프 위에 있는 지를 계산하는 것과 같습니다. 그렇기 때문에 1차 스플라인은 두 개의 점만 있으면 구현할 수 있고, 2차 스플라인은 최소 3개의 점이 필요하게 됩니다. 3차 스플라인은 4개의 점이 있어야 그래프 방정식을 구할 수 있습니다.
• 위의 방식으로 기준점들이 이어지는 방적식을 구한 후, 스플라인의 모양을 확정하기 위해 필요한 것이 제어점입니다.
  • 제어점은 곡선 방적식을 미분하여 1차 도함수, 2차 도함수를 활용해 계산합니다. 1차 도함수는 x좌표에 따른 기울기를, **2차 도함수는 특정 점에서의 기울기 변화량(곡률)**을 의미합니다.
  • 차수가 높아질 수록 도함수들의 구조도 더 복잡해지고, 다양한 곡률을 구현할 수 있게 됩니다.
• Context2D 의 lineTo가 1차 스플라인을 그릴 수 있게 해주는 메소드입니다.
• quadraticCurveTo와 bezierCurvetTo 메소드를 사용하면 각각 2차 스플라인, 3차 스플라인을 그릴 수 있습니다.

quadraticCurveTo 메소드로 보간하기

• canvas api에서 quadratic 스플라인을 그려주는 메소드입니다.
• quadraticCurveTo(cp1x, cp1y, x, y)
• cp는 제어점, x 및 y는 마지막에 찍힐 점을 의미합니다. quadratic 스플라인은 최소 3개의 점이 있어야 곡선을 그릴 수 있으므로, 점 3개일 때 부터 곡선을 그릴 수 있도록 해야합니다.
• 첫 번째 점과 마지막 점 사이의 점들을 제어점 으로 삼아 곡선을 그려나가는 방식을 사용했습니다.

  const drawSmoothLine = (drawingData: DrawingData, canvasRef: RefObject<HTMLCanvasElement>) => {
    const { ctx } = getCanvasContext(canvasRef);
    if (!currentDrawingRef.current) return;
    const { points } = drawingData;

    if (currentDrawingRef.current.points.length < 2) return;

    ctx.beginPath();
    ctx.moveTo(points[0].x, points[0].y);

    for (let i = 1; i < points.length - 1; i++) {
      const midPoint = {
        x: (points[i].x + points[i + 1].x) / 2,
        y: (points[i].y + points[i + 1].y) / 2,
      };

      ctx.quadraticCurveTo(points[i].x, points[i].y, midPoint.x, midPoint.y);
    }

    // 마지막 점 연결

    ctx.stroke();
  };

결론

• 하지만 위 방식은 지연이 많이 발생해 추후 도전 과제로 남겨두게 되었습니다.

참고 자료

• Quadratic interpolation을 쓰지 않는 이유
• 선형보간법과 삼차보간법