음악, 삶, 개발
PixiJS 를 몇일간 사용해보며 느낀것들. 본문
리액트와 달리 자료가 많지않아, 스스로 독파해야되는 부분이 컸다.
리액트에서도 최적화에 신경을 쓰다가, webGL 인데 알아서 잘 하겠지 라고 생각했지만 오산이었다.
런타임에서 잘못 함수를 호출했다가 cpu 가 스파이크 튀는것들을 지속적으로 보게되었다.
능숙해지지못하면 리액트보다 훨씬 나쁜 성능을 가지게 될수있다.
대략적으로 하지말아야할것.
1. Graphics 의 drawing 을 런타임에서 절대 하지말것.
이게 매우 큰 제약이긴한데...
물론 불필요한 상황이 있을수있을것이다. 하지만 매우 비싸다.
리액트보다 훨씬 cpu 를 많이 소모하였다. 내가 아직 다 모르는것일수도있지만,
drawRect 를 지속적으로 호출하는것이 매우 비싸다.
position 이나 transform 을 변경하는것은 그나마나 괜찮았다.
따라서 최대한 미리 전부 그려놓고, 보여주는것을 변경하는 쪽으로 가야한다.
2. 가능하면 Graphics 인스턴스를 줄일것.
이것또한 어려운일이겠지만, 128개의 Graphics 인스턴스의 draw 콜을
ticker 에서 실행하였더니, 순식간에 100프로 이상으로 cpu 가 치솟으면서 느려졌다.
3. addChild, removeChild, clear 이런 함수들이 런타임에서 호출되지말아야한다.
하여간 런타임에서 새로 추가 제거되고 새로 그려지고 지워지고 이런것들이
리소스를 굉장히 소모한다는것이다.
램 사용량이 늘어나더라도 미리 다 준비해놓고 보여주고 숨기는쪽으로가야한다.
마무리 :
결과적으로 리액트는 리랜더링을 방지하는쪽으로 신경을 썼었는데,
PIXI 에서는 최대한 무언가가 그려지지않는쪽으로 신경을 써야한다.
나는 게임을 만들게 아니라서, 미리 이미지화 할수있는것이 거의 없다.
대부분 그려져야하는데,
