[Babylon.js] 01. 기본 scene 만들어보기

---

Babylon.js VS Three.js

반복되는 비슷한 일에 지쳐가던 찰나에

웹 환경에서 3D를 구현할 수 있는 babylon.js를 공부할 기회가 생겼다.

 

babylon.js를 사용해야 한다고 전달받고는 three.js가 예제도 많고 커뮤니티도 더 큰 걸로 기억하는데

왜 babylon.js인가 싶어서 조금 찾아보았다.

	Babylon.js	Three.js
장점	- microsoft가 개발 - typescript 지원 - 빠른 이슈 처리	- 쉬운 접근성 - 많은 예시 코드 - 큰 커뮤니티
단점	- 적은 예시 - 불편한 공식문서	- 버전에 따른 낮은 api 안정성

간단히 보면 위 표 정도가 되는데,

사실 babylon.js의 장점 2개만 봐도 어떤 것이 실제 프로덕트에 적용하는 것이 좋을지 나오는 것 같긴 하다.

 

#microsoft  #typescript.

typescript 지원은 microsoft가 개발했기 때문에 당연히 따라오는 것이긴 했겠지만

microsoft가 개발한다는 신뢰도와 typescript 지원에서 오는 코드 안정성 거기에 빠른 이슈처리까지

(실제로 바빌론 포럼을 보면 빠른 시간 내에 이슈에 대한 답변이 달리고 처리되고 있다.)

 

이러한 점들로 인해 three.js에 비해 예시가 적고, 커뮤니티가 작다고 할지라도 babylon.js를 선택하여 사용할만한 장점이 되는 것 같다.

 

babylon.js 선택 이유 분석은 간단하게 이 정도로 하고

이제 유튜브에서 찾은 가뭄에 단비 같은 babylon.js 101 영상을 보며 구현했던 코드와 알게 된 내용을 정리하여 작성하여 남겨둘 것이다.

 

---

기본 화면 만들기

babylon.js 101은 babylon.js + vue의 조합이지만 

나는 리엑트에서 구현을 해볼 것이므로 강의 영상의 코드를 보고 리엑트 환경에 적용해보는 방법으로 진행하였으며,

babylon.js에서 따로 리엑트용으로 만들어진 라이브러리는 없기 때문에

babylon.js 공식문서에 나와있는 리엑트 예시를 기본틀로 두고 코드를 작성하였다.

 

코드는 크게 아래 세 개의 컴포넌트로 이루어져 있다.

1. 기능 컴포넌트를 랜더 하는 App.tsx

2. SceneComponent를 랜더하는 기능컴포넌트

3. 캔버스를 랜더 하고 engine, scene 생성을 담당하는 SceneComponent.tsx

* babylonjs-hook 라이브러리를 사용하여 SceneComponent를 대체할 수도 있다.

 

1번 컴포넌트는 기능 컴포넌트를 바꿔 끼워주는 일 말고는 거의 변경될 일이 없다. 

2번 컴포넌트는 지금 내가 만들어서 구현하고자 하는 기능을 담당하는 컴포넌트로 매번 새로 만들어지거나, 수정되는 컴포넌트이다.

3번 컴포넌트는 2번 컴포넌트가 내려보내주는 props를 받아서 canvas에 랜더 하는 역할뿐이다.

 

 

위의 완성된 코드를 보면 SceneComponent에서 생성한 scene, engine를 onSceneReady 함수의 인자로 넘겨주는 것을 볼 수 있는데

지금처럼 단순한 코드에서는 별 문제가 되지 않지만, 점차 복잡해지는 예시에서는 넘겨받은 scene, engine을 기능 컴포넌트 여러 곳에서 사용하고, 길어진 코드를 함수로 추출하면 또 인자로 scene, engine을 넘겨주는 상황이 발생하게 되어 리엑트의 props drilling처럼 parameter drilling이 발생하게 되었다.

 

이러한 문제를 해결하기 위해 기능 컴포넌트 상단에 scene, engine 데이터를 넣을 변수를 생성하여 저장한 후 사용하는 방식으로 대처했지만 과연 이 방법이 맞는가 하는 의문이 계속 들어서 더 나은 방법은 없는지 찾아볼 것이다.