Pixi 를 몇주간 사용해보며 느낀 단점 (feat. 리액트와 비교)

Pixi.js 란 라이브러리를 사용해보면서 느낀점을 정리해보려한다.

처음에는 희망에 찬 느낌으로 시작하였는데, 생각보다 매우 치명적인 단점들이 여기저기 존재하였다.

이 단점들을 어떻게 극복해내느냐에 따라 사용할지 말지가 결정될것같다..

 

< Pixi 의 단점 >

 

1. 굉장히 정적인 Bitmap 이며 svg 마냥 크기를 늘였다 줄였다하기 힘들다.  (거의 불가능)

 

이것은 Dom 의 세계에서는 전혀 고민하지않았던 부분이다.

Ctrl + 를 누르면 글자가 전혀 흐릿함없이 커지고, border radius 도 2rem 같은 단위에 기반하여 같이 자연스럽게 커진다.

하지만 Pixi 에서는 내가 그리는 순간 모든 크기는 고정되어버리며, 다시 그리던지 texture 라는 객체를 미리 준비하여 대비하여야한다.

Vector 처럼 하는것은 불가능하다고 보는게 맞다.

이것이 사용할수록 꽤나 치명적이며, 매우 매우 불편하다.

플러그인 GUI 의 세계는 많은 개발자들이 vector, svg 기반으로 가고있는데, 그게 역행하는 느낌이다.

이를 극복하기위해 정말 다양한 시도를 해보았으나, 만족스럽지않았다.

심지어 큰 image 를 가져다가 scaling 으로 줄일려고해도 antialiasing 이 부자연스러운 부분들이 많이 발견되었다. 

특히 큰 이미지를 줄일경우 blur 가 먹힌것처럼 흐릿해진다.

무언가가 흐릿하게 보여질 가능성들이 여기저기 뿌려져있다.

 

2. 뒤에서 게속 돌아가는 Renderer

지금 위의 사진처럼, 빈 아무것도 그려놓지않은 화면임에도, 

cpu 와 gpu 를 소모하고있다.

dom 을 사용할때는 그냥 0 이었다.

만약 여러 플러그인창이 3개정도 동시에 DAW 에 띄워져있을 경우에는 100프로가 될것같다.

만약 내가 2000~3000개의 요소를 가지고있다고하면 보통 20~30프로 cpu 가 기본적으로 게속 돌아가고있다.

이렇게 되는 이유는 이 랜더러가 60fps 로 계속 뒤에서 랜더링을 하고있기때문이다.

이벤트가 발생거나, 상태가 발생할때 업데이트되는게 아니라, 가만히 있어도 그냥 계속 랜더링되는것이다.

물론 이렇게 랜더링을 계속 하기때문에, 상태변화가 매우매우 빠르게 반영되는 이점이 생기지만

꽤나 큰 trade off 다.

 

3. 무언가를 런타임에서 그리기에는 부족한 도구 = 매우 나쁜 antialiasing

 

Pixi 의 antialiasing 성능은 매우 좋지않은거같다.

사실 antialiasing 도 평소에 전혀 고민 1도 안했던 부분인데, Pixi 를 사용하며 고민하게되었다.

예를 들어 SVG 를 로딩하게되면 원래 이미지와 달리 오돌토돌하게 모서리가 생성된다.

무언가를 이쁘게 잘 그릴려면 document.createElement('canvas') 

결국 cavas context 2d 를 가져와서 여기다 다 그린다음에,

이를 texture 로 변환한후 sprite 에 집어넣어서 화면에 보여주면 이쁘게 생성이 된다.

근데 문제가 또 document.createElement('canvas')  이게, 런타임에서 호출하기부담스러운 존재이다.

document.createElement('canvas') 를 통해 texture 를 생성할경우에 texture 를 destory() 하지않는한..나의 pixi app 이 돌아가는 동안 내내 메모리에 존재할것이라고 개발자의 답변을 받았다.document.createElement('canvas') 를 사용하여 3000개정도의 sprite 을 생성해보았었는데,램이 200~300메가는 늘어나는 느낌이었다.여러모로 알수없는 성능저하를 유발하는 느낌이다.