웹에서 성능좋은 물리엔진을 쉽게 사용하기 위한 노력

물체의 물리적 현상을 계산해주는 코드가 있다

이것을 흔히들 물리엔진이라고 부른다

물리엔진은 즉 물리계산기이다

이를테면 컴퓨터에게 질량 1짜리 공이 지상 10미터 높이에서 떨어지면 0.3초 후에 어느지점에 도달해있을지와 같은것을 계산해주는 프로그램이다

이 물리계산기를 이용해서 0.3초후 공의 위치를 알아낼 수 있다

이렇게 알아낸 정보를 통해 매순간 순간 화면에 표현해주는 것을 Renderer라고 부른다

즉 공이 화면상에 날아다니는 것을 표현하고자 한다면 물리엔진과 Renderer를 함께 사용한다

이 작업을 위해 내가 선택한 것은 물리엔진으로써는 Box2D, Renderer로써는 PIXIJS를 선택했다

Box2D는 앵그리버드라는 게임에서도 사용된 엔진으로 유명하다

PIXIJS는 웹상에서 그래픽요소를 표현하고 인터랙션하는데 있어서 강력한 기능을 제공한다

나는 이 두개를 합쳐서 사용하기 쉽게 PIXICS라는 이름의 모듈을 제작하고있다

이 모듈은 앞으로 작업할 것들(주로 게임)에서 작업시 기술적 내용은 배제하고 로직에만 신경쓸수 있게 하여 작업의 피로도를 줄여주고 생산성을 높여줄 예정이다

Box2D는 본래 C/C++로 쓰여진 엔진이다

나는 이것을 웹에서 쓰고자 하여 Javascript로 포팅된 것을 사용했다

Javascript용으로 포팅된 Box2D의 종류가 많이 있다

나는 이 중 Planck.js(https://piqnt.com/planck.js/) 라는 엔진을 선택해서 PIXICS를 만들었다

그리하여 만들어서 사용하던 중 많은 요소를 계산해야하는 상황에서 성능적 아쉬움이 생겼다

화면상에서 일어나는 물리현상의 계산을 적어도 0.016초 이내에 계산해내야 부드러운 화면 묘사가 가능하다

그런데 계산해내야하는 내용이 많아지면 처리속도가 0.016초를 넘어갈 수 있고 이렇게 되면 화면은 뚝뚝 끊기게 된다

이것의 장점은 빠르다는것이다. 웹어셈블리로 C++코드를 사용하는 방식이다.

이것의 단점은 사용성이였다. 그리고 자바스크립트를 위한 문서가 잘 되어있지 않다는점이다.

그 다음으로 찾은것이 https://google.github.io/liquidfun/ 이다

이것은 구글에서 프로젝트를 관리하고있는것으로 보이는 엔진이다

이것은 사이트들어가면 바로 나오는 화면에서 아.. 이거 빠르겠구나 생각되게 했던 엔진이다

그럴만한 이유가 이름에서 처럼 액체의 표현을 수 많은 요소의 움직임으로 표현하고 있다

하지만 이것도 사용성에서 아쉬움이 있었다

planck.js 사용자의 글이고 내용은 planck.js의 성능적 아쉬움에 대한 내용의 글이였다

글을 쓰면서 작성자는 자신이 다른 엔진들과 벤치마킹해둔 결과물을 올려두었다

또 다른 box2d 포팅버전과 planck.js 를 비교한 글이였는데 이때 비교된 엔진이

덧붙여서 작성자는 이 엔진은 구글의 liquidfun 엔진을 포함하고 있다고 설명했다

나는 이것을 사용하기로 하고 바로 PIXICS에 포함시키는 작업을 하고 그 결과물은 다음과 같고 아래 두개를 통해 서로의 성능의 차이를 비교해볼 수 있다

flyover/box2d.ts

flanck.js