웹에서 3D 컨텐츠 구현해보기

 웹에서 3D를 구현하는 방법에는 여러가지가 있지만, 현재 많이 사용되고 있는 것은 Three.js 그리고 Babylon.js 가 있다고 한다. 3D를 구현해보는건 처음이기에 둘 중 어느 것으로 구현을 하는게 좋을지 조사했다.

Three.js vs Babylon.js 비교

비교해보자면 Three.js는 사용이 자유로운 라이브러리라면 Babylon.js는 프레임워크에 가까워 보였다.

커뮤니티의 크기는 Three.js가 압도적으로 크다고 한다. 아무래도 용량도 가볍고 쉽게 가져다 쓸 수 있어서 그런 것일까.

사용처를 기반으로 비교하면 복잡한 3D 게임 같은 것을 만들고 싶다면 Babylon.js를, 단순한 3D 인터랙션에 사용하고 싶은 거라면 Three.js를 추천하고 있었다.

무엇을 만들지 결정하기

 그렇다면 나는 무엇을 만들고 싶은건지, 그리고 무엇을 만들어나가게 될 지 생각해봤다.

요즘은 웬만한 건 웹에서 다 되는 세상이다. 단순히 3D 모델을 웹에 올리는건 이제는 생각보다 복잡한 일이 아닐 것이다. 네이티브에서나 수행할 수 있었던 고성능 작업들도 이제는 웹으로 할 수 있는 것들이 많다. Figma, Spline 같은 2D/3D 디자인툴이나 최근에는 어릴 때 재미있게 즐겼던 게임 건즈를 웹으로 포팅한 프로젝트까지 나왔다.

나는 뭘 좋아하지? 뭘 만들고 싶어했지?

생각보다 복잡한 이야기다. 뭘 좋아한다고 꼭 그에 맞는 걸 만들어야 하는 것은 아니니까. 소프트웨어는 결국 필요에 의해서 만들어지고, 사람들이 필요로 할 때 가치가 생기는 거니까.

토이 프로젝트에서까지 그런 거창함을 생각해야할까?

생각해보니, 토이 프로젝트다. "이런 기능이 필요해서 만들어봤습니다." 같은 거창한 이유가 필요 없는, 나 자신의 만족을 위한 프로젝트. 조바심을 내지 않고 다시 생각했다. 미래에는 내가 Web AR/XR을 이용한 프로젝트를 진행할 수도 있겠지, 하지만 당장 내가 만들어보고 싶은건 게임이다.

어릴 때부터 게임을 만들어보고 싶었다. 내가 만든 이야기가 그려진 세상을 그려보고 싶었다. 다만 그것이 2D든 3D든 혼자서 만들어내기엔 너무 벅차 조금씩 풀어내다 사라졌었다. 하지만 이제는 세상이 바뀌었다. 내가 그린 그림만으로 2D, 3D 애셋이 만들어지는 세상이다. 이거면 그 수많은 워크플로우를 혼자서 감당할 수 있을지도 모른다는 생각이 들었다.

그래서 게임을 만들어 보기로 했다. 우선은 생각보다 간단한 걸로.

선택: Babylon.js

그래서 Babylon.js를 선택했다. Three.js 자체로 3D 오브젝트를 구현하는 것은 난이도 곡선이 비교적 낮겠지만, 여기서 게임 같은 고수준 애플리케이션을 구현하려고 하면 오히려 Babylon.js 보다 난이도가 더 어려워질 것으로 봤다. 그래서 필요한 것들이 모두 포함된 Babylon.js를 선택했다.

장르: 레이싱

장르는 우선 토이카 레이싱으로 정했다. 중간 정도의 구현 난이도를 가진 프로젝트로 Babylon.js에 대해 먼저 익숙해지기로 결정했다. 프로젝트는 현재 블로그의 서브 도메인에 올릴 예정이기에 블로그의 모노레포 프로젝트에 추가하였다. "Next.js에서 Babylon.js 프로젝트 띄우기" 같은 것은 Babylon.js를 탐구하자는 취지와 맞지 않아 하지 않기로 했다. 그것은 나중에 두 프레임워크에 대해서 잘 이해하게 되었을 때에야 깊이 들어가 볼 일이다.

Babylon.js는 물리엔진으로 havok을 사용한다고 한다. 또한, 간단한 3D 오브젝트 같은 것은 프레임워크 내에서 직접 구현이 가능하니, 일단은 Babylon.js만 이용하여 단순한 자동차 모델과 트랙을 만들어보기로 결정했다.

이제 다음 순서로는 어떻게 프로젝트를 매끄럽게 만들지, 프롬프트를 잘 작성하는 일이다.