🪵 4. 캔버스 성능 최적화 시도 ‐ requestAnimationFrame, throttle, offscreenCanvas

결론 요약 ( 12월 02일 기준)

• requestAnimationFrame (미적용)
• offscreenCanvas (미적용)
• throttle (시작 페이지 캔버스에만 적용)

과정

• drawingBuffer 배열을 만들어서 드로잉 할 작업들을 저장한 후, requestAnimationFrame을 통해 순차적으로 처리하는 최적화 로직을 시도해 보았습니다. 하지만 상대의 선을 받았을 때 전체 선을 redraw하는 과정에서, ctx.stroke() 호출 단위로 매 프레임마다 렌더링되는 이슈가 발생했습니다.
• 이를 해결하기 위해 drawingBuffer에 넣을 때 type 부여했습니다.
  • line or redraw
• 이후 OffscreenCanvas를 사용해 멀티 스레드에서 드로잉 로직을 수행 후 병합하는 방식까지 시도해봤지만, 해당 방식의 경우 리렌더링이 발생할 때 마다 화면 깜빡임이 발생해 사용할 수 없었습니다.
  • 리렌더링이 빈번할 때는 부적합한 것으로 보입니다.

OffscreenCanvas 시도

useDrawingState.ts

  interface DrawingLine {
    type: 'line';
    data: DrawingData;
  }

  interface DrawingRedraw {
    type: 'redraw';
    data: DrawingData[];
  }

  type DrawingBuffer = DrawingLine | DrawingRedraw;

  const drawingBufferRef = useRef<DrawingBuffer[]>([]);

useDrawingOperation.ts & useDrawing.ts

• drawStroke에 바로 작업을 맡기는 대신 drawingBuffer에 저장 후 requestAnimationFrame 메소드로 최신 작업 순으로 수행하였습니다.

state.drawingBufferRef.current.push({ type: 'line', data: updatedDrawing });

useDrawingOperation.ts

  useEffect(() => {
    let lastTime: DOMHighResTimeStamp = 0;
    const drawingBuffer = state.drawingBufferRef.current;

    const drawAnimation = (timestemp: DOMHighResTimeStamp) => {
      if (timestemp - lastTime > 16) {
        if (drawingBuffer.length >= 0) {
          const currentDraw = drawingBuffer.shift();
          if (currentDraw) {
            if (currentDraw.type === 'line') drawStroke(currentDraw.data);
            else if (currentDraw.type === 'redraw') {
              const drawDataList = currentDraw.data;
              const { ctx } = getCanvasContext(canvasRef);
              const offScreen = new OffscreenCanvas(MAINCANVAS_RESOLUTION_WIDTH, MAINCANVAS_RESOLUTION_HEIGHT);
              const worker = new Worker('canvasWorker.js');

              worker.postMessage({ canvas: offScreen, dataList: drawDataList }, [offScreen]);

              worker.onmessage = (event) => {
                const bitmap = event.data; // ImageBitmap 객체
                ctx.drawImage(bitmap, 0, 0); // 메인 캔버스 위에 병합
              };
            }
          }
        }

        lastTime = timestemp;
      }

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

    return () => {
      if (aniId) cancelAnimationFrame(aniId);
    };

canvasWorker.js

• react 개발 환경에서는 public 폴더 아래에 있어야 정상 작동합니다.

self.onmessage = (event) => {
  const {canvas, dataList} = event.data;
  const ctx = canvas.getContext('2d');

  ctx.beginPath();
  dataList.forEach((drawingData) => {
    const { points, style } = drawingData;
    ctx.save();
    ctx.strokeStyle = style.color;
    ctx.lineWidth = style.width;
    points.forEach((point, idx) => {
      const { x, y } = point;
      if (idx === 0) ctx.moveTo(x, y);
      else ctx.lineTo(x, y);
    });
  });
  ctx.stroke();

  const bitmap = canvas.transferToImageBitmap();
  // 작업 완료 메시지 전송
  self.postMessage(bitmap, [bitmap]);
};

requestAnimationFrame 시도 최종 코드

• 하지만 적용 안하느니 못한 것 같아 미적용 상태로 롤백하였습니다.
• 아무래도 프레임 당 처리량을 너무 많이 부여한 것 같습니다.

  useEffect(() => {
    let lastTime: DOMHighResTimeStamp = 0;
    const drawingBuffer = state.drawingBufferRef.current;

    const drawAnimation = (timestemp: DOMHighResTimeStamp) => {
      if (timestemp - lastTime > 16) {
        if (drawingBuffer.length >= 0) {
          const currentDraw = drawingBuffer.shift();
          if (currentDraw) {
            if (currentDraw.type === 'line') drawStroke(currentDraw.data); //type이 line일 경우는 일반 드로잉
            if (currentDraw.type === 'redraw') //type이 redraw일 경우에는 전체 드로잉 라인들의 배열
              currentDraw.data.forEach((drawingData) => {
                drawStroke(drawingData);
              });
          }
        }

        lastTime = timestemp;
      }

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

    return () => {
      if (aniId) cancelAnimationFrame(aniId);
    };
  }, [drawStroke, state.drawingBufferRef.current]);

Background Canvas Throttle 적용

• 시작화면 background에 마우스 커스터마이징을 구현한 로직에 throttle을 적용해 최적화를 시도하였습니다.
• Test 환경
  • 갤럭시북2 - intel CORE i7 - RAM 16GB - x64
  • windows 11 Home
  • chrome 브라우저

적용 전 현황 체크

• mousemove 발생 주기

  • performance.now() 를 사용해 mousemove 이벤트 간격을 console.log로 출력했습니다.

    • 중간에 100단위 넘는 수들은 마우스를 잠깐 멈췄다가 다시 움직였을 때 발생
    

  • 대략 7~8ms 간격으로 발생했습니다.

      currentTimestamp.current = performance.now();
      console.log(currentTimestamp.current - lastTimestamp.current);
      lastTimestamp.current = currentTimestamp.current;

• 가운데 로고 및 버튼 기준으로 두 바퀴 그렸을 때 버퍼 속 좌표 수를 측정하였습니다.

  • 400~600개 가량 좌표가 쌓입니다.
  

performance throttle 적용 후 (16ms 간격으로 설정)

• 16ms 이상 간격에서는 드로잉이 시각적으로 조금 불안정했습니다. 따라서 16ms 간격으로 좌표를 샘플링합니다.

    currentTimestamp.current = performance.now();
    if (currentTimestamp.current - lastTimestamp.current < 16) return;

    console.log(currentTimestamp.current - lastTimestamp.current); //간격 출력
    lastTimestamp.current = currentTimestamp.current;

• mousemove 발생 주기

  • performance.now() 를 사용해 mousemove 이벤트 간격을 console.log로 출력해봅니다.
    • 중간에 100단위 넘는 수들은 마우스를 잠깐 멈췄다가 다시 움직였을 때 발생
  
  • 대략 16~25ms 사이로 발생

• 가운데 로고 및 버튼 기준으로 두 바퀴 그렸을 때 버퍼 속 좌표 수를 측정하였습니다.

  • 200~300개 가량 좌표가 쌓였습니다.
  

• 테스트 PC 기준 throttle, requestAnimationFrame 둘 다 16ms 간격으로 발생시키면 선이 매끄럽게 이어지므로, 샘플링 간격이 16ms 로 규칙적으로 발생할 수 있도록 구현하였습니다.