canvas에서 생명체의 이미지를 활용해 60FPS로 애니매이션을 그리는 과정에서 렉이 심하게 걸리는 현상이 있었다.
처음에는 단순히 이미지 용량이 큰 것이 원인이라고 아닐까 싶어서 프론트 개발자 동료에게 이미지 축소를 요청했다.
하지만 용량이 절반 이하가 되었지만 문제가 전혀 개선이 되지 않았다.
인터넷에서 단서를 얻을 수 있었다. 과거에 게임할때 렉이 걸리며 프레임이 끊기는 경우 해상도를 낮춰 해결한 경험도 생각났다.
각 프레임을 형성하는 이미지 내의 픽셀수를 줄여야 했다.
처음 용량을 줄인 경우는 픽셀수를 줄인 것이 아니라 비트 심도를 낮추는 방향으로 용량을 줄였다는 것도 알게 되었다.
1. 새롭게 알게된 부분은 프레임으로 표현되는 화면에서 프레임을 구성하는 픽셀수의 성능영향이 생각보다 크다는점과
2. 이미지 용량축소에는 두 가지 방법이 있다는 것이다. 비트심도를 낮추거나, 이미지 크기 즉 픽셀수를 줄이거나.
비트 심도를 낮춘다는 의미는 각 픽셀당 표현가능한 색의 개수를 줄임으로서 용량을 낮춘다는 의미라는 것이다.
마치 C언어에서 수를 표현하는데 short, int, long 각각의 자료형의 표현가능한 수의 개수가 다르고 메모리상 차지하는 크기가 다른것과 비슷한 원리 같다.
https://www.inven.co.kr/board/maple/2304/13650
메이플스토리 인벤 : 렉도 줄일수 있는 해상도, 이해를 돕기 위한 지침서 - 메이플스토리 인벤 팁
<빚값, 팁과 노하우 인증글 >
www.inven.co.kr
https://www.intel.co.kr/content/www/kr/ko/gaming/resources/how-to-fix-your-low-frame-rate.html
낮은 FPS: 프레임 속도 저하 해결 방법 | 인텔
게임을 플레이할 때 fps(프레임 속도)가 낮습니까? 인텔 게이밍이 제공하는 팁으로 FPS가 낮아지는 것을 방지하고 게임 성능을 개선하는 방법을 알아보십시오.
www.intel.co.kr
이미지 용량을줄이는 방법
1) 비트 심도를 줄인다.
웹용 이미지 포토샵 bit / 컬러 프로파일 설정
1.bit (비트)란?컴퓨터의 정보량의 최소 단위로 2진수 0과 1의 한자리를 1bit라 한다. 비트에 따른 색상표현범위이미지에서 점(dot)또는 픽셀에 몇비트의 색상을 할당할것인지에 따라서 표현할수있
velog.io
2) 해상도를 줄인다.