캔버스 api와 블러

css 효과에는 블러라는 게 있다. 엘리먼트(filter)나 엘리먼트 뒤의 요소(backdrop-filter)를 뿌옇게 해서 다른 요소의 가독성을 높여주는 등 디자인적 요소로 쓰인다. 그런데 css 블러를 캔버스에 적용하면 프레임 드랍이 일어난다는 사실, 알고 계셨는가?

css 효과에 블러를 적용하지 않으면 60fps를 유지하던 캔버스가 블러를 적용시키니 30fps 정도로 프레임이 뚝 떨어지는 모습을 볼 수 있다. 아마 css 블러와 web 캔버스 api가 역시너지를 일으키면서 gpu를 잡아먹는 것으로 보이는데, 자세한 것은 더 찾아봐야 할 것 같다.

특이한 점은 backdrop-filter를 적용한 엘리먼트와 캔버스가 겹치면 캔버스가 실제로 다른 엘리먼트에 가려져 보이지 않아도 무조건 프레임 드랍이 일어난다는 것이다.

결론적으로 오늘의 교훈은 다음과 같다.

• css 블러와 캔버스 api는 절대 겹치지 않도록 할 것. 가급적이면 블러 효과가 들어간 배경을 사용할 때 포토샵 등으로 블러를 먼저 먹인 이미지를 사용할 것.
  • 헤더에 backdrop-filter는 본문에 캔버스 api를 사용하지 않을 때에나 사용할 것.
• 캔버스 자체적으로 블러 효과를 먹이고 싶을 경우 css 블러를 사용하는 것이 아니라 캔버스 자체 블러 필터를 사용할 것. (pixi.js의 경우 blurfilter가 존재)