brunch

You can make anything
by writing

C.S.Lewis

by 코드아키택트 May 04. 2024

React와 Three.js 그리고 AEC

D+35

갑작스럽게 Three.js에 대해 쓴 글에 엄청난 조회수가 생겼다. 그런 김에 Three.js와 관련된 이야기를 좀 더 진행해보려 한다. 


Vanilla Javascript와 Three.js

회사 프로젝틀르 위해 Three.js를 사용하고 있다. 거의 맨땅에 헤딩을 했고, 그래도 원하는 기능은 거의 다 구현된 가는 중이다. 최초에 Vanilla Javascript와 Three.js를 결합해서 사용했다. 객체를 만들고, 카메라를 설정하고, 객체와 카메라를 Scene에 넣는다. 그리고 화면을 Animate 하는 기능을 직접 구동한다. 그때는 몰랐지만 상당히 고단한 작업이었다. 기능이 하나 추가될 때마다 여기저기 번갈아가며 신경 쓸 것이 너무나 많았다. 그래서 결심했다. React를 써야겠다.


React+Three.js = r3f

React는 메타에서 개발한 오픈소스 라이브러리다. 웹개발을 좀 더 편하게 만들어주는 라이브러리로 이해하면 된다. 가령 React 없이 웹페이지를 만들 때 100줄이 소요된다면 React를 이용하면 10줄이면 된다. Loop 등도 가능하기 때문에 더더욱 간결하게 코드를 구성할 수 있다. React와 여러 용도를 결합한 라이브러리들이 꽤나 있다. 그중 Three.js와 연결시킨 것은 r3f 또는 React Three Fiber라고 불리는 라이브러리가 있다. 해당 라이브러리를 사용하면 단순히 연결하는 차원을 넘어 r3f 에코시스템의 여러 가지를 사용할 수 있다. 에코시스템 안에는 물리시뮬레이션, XR 등등 다양한 내용이 포함되어 있다.


r3f in AEC: 웹 뷰어에서 모델링 도구(SaaS)까지

AEC에서 r3f를 어떻게 사용할 수 있을까. 내가 기웃기웃거리면서 본 결과로는 위 두 가지가 현재 나와있는 사용 방법 중 하나다. 지난 글에서 three.js로 3dm, ifc, obj 등을 볼 수 있다고 이야기했다. 그렇기 때문에 가장 직관적인 쓰임 세는 웹 뷰어일 것이다. 어떤 면에서 웹 뷰어만 되어도 충분한 쓰임세를 가진다. 왜냐하면 크로스플랫폼이 대세인 현시대에 여전히 AEC 소프트웨어는 대부분 윈도에서만 돌아가기 때문이다.

그와 같은 결로 SaaS(Software as a Service)를 구현하려는 움직임도 보인다. BIM을 한다는 게 레빗만을 쓰는 게 아니라는 생각을 가지면 무엇이든 할 수 있다. 그런 생각을 가진 외국사람들이 최근 모델링 SaaS를 만드는 것을 볼 수 있었다. ifc를 대충 본 적이 있는데, 결국 ifc는 사람이 읽을 수 있는 일종의 xml형태로 되어있기 때문에 그 내용만 이해해서 파일에 넣어주면 만들 수 있다. 그런 지식에 기반해 프로그램을 개발하는 것으로 알고 있다.


한계

사실 모든 게 장밋빛 미래일 순 없다. Three.js기반 개발이 약속하는 건 많지만 현재 해결해야 하는 한계를 적어본다


1. 대용량 파일 다루기

건축 프로젝트는 상당히 거대하다. 프로젝트 규모에 따라 다르겠지만 Full 3D(나는 Full BIM이라는 말을 좋아하지 않는다)를 구축하면 레빗 또는 라이노 기준으로 100gb 이상의 파일이 생성될 것이다. 이 정도 크기를 하나의 컴퓨터에서 다루기 쉽지 않은데 과연 WebGL로 어느 정도 버텨줄지 의문이 생긴다. 뷰 거리에 따라 모델을 좀 더 뭉그려뜨려 보여주는 Level of Detail 개념을 쓰기도 하던데 이 역시 테스트하기 전에는 알 수 없는 일이다. Nvidia의 Omniverse를 이용해 꽤나 큰 파일을 웹에 띄운 사례도 있다고 들었다


2. 파일 호환성

건축에서 쓰는 파일은 3dm, rvt(ifc), obj정도가 3 대장이라고 생각한다. 해당 파일은 각각 용도가 다를 것이고 이를 웹에 내보내면 분명 각 프로그램에서 보던 것과 재료가 다른 던가 하는 여러 가지 문제가 생길 것이다. 건축에서는 눈뽕을 중시하기 때문에 만약 이들을 통합했을 때 누덕누덕해 보인다면 이를 고치는 것도 꽤나 큰일이 될 것이다. 더군다나 듣기로 Web에서는 glTF를 주로 쓴다 하던데, 이런 파일을 다룰 인력 풀이 있을지도 잘 모르겠다.


3. 인력이 거의 없다.

글을 쓰며 웹개발과 3D를 동시에 할 수 있는 사람에 대한 글을 찾아봤다. 누군가의 일지를 보니, 그런 사람은 거의 없는 것으로 보인다. 건축 업게엔 3D를 꽤나 해본 사람이 있으나, 이 중 웹개발을 할 수 있는 사람은 극히 드물다. 반대로 일반적인 웹개발을 하던 사람 중 3D를 할 수 있는 사람도 그리 없다는 것 같다. 그럼 이런 결론을 내릴 수 있다. 그런 고급인재가 건축 쪽에서 일할까? 

이전 05화 Three.js를 배워야 하는 이유
brunch book
$magazine.title

현재 글은 이 브런치북에
소속되어 있습니다.

작품 선택
키워드 선택 0 / 3 0
댓글여부
afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari