웹 3D 관련 프로젝트에는 어떤 기술이 사용되나?

안녕하세요. 저희는 3D 관련 과제를 수주받아 납품하는것이 주력 매출중 하나입니다.

3D 관련 기술(WebGL)이 내재화 돼 있는 상태며,

다음과 같은 프로젝트를 진행했습니다.

3D 프린터의 소프트웨어에 들어가는 3D 캔버스

모듈러 건축물을 가상으로 설계하는 하는 웹 소프트웨어(정북일조, 도면 생성, 건축 모델링, 창호 문과 같은 파츠 배치 등의 기능)

현대자동차 아이오닉6 프로모션 웹사이트 - 실외 실내를 드라이빙 중에, 파노라마 형태로 볼 수 있는 인터렉티한 웹 사이트

그 외에도 webgl 기반 프로젝트를 다수 진행했습니다.

웹으로 3D 화면을 구성하는 방법은 다양한데, 그 중에 많이 쓰이는 기술을 기록해보겠습니다.

WebGL 베이스 기술들

three.js

현재 가장 많이 쓰이는 라이브러리로, 인터렉티브한 프로모션 웹사이트, 웹 게임 등에 많이 사용됩니다.

물리엔진 및 여러가지 포멧을 지원합니다.

Babylon.js

three.js 와 특징은 비슷합니다. 게임, 시뮬레이션, VR 등에 많이 사용됩니다.

A-Frame

three.js와 비슷한데, VR에 특화 돼 있습니다.

Visual Inspector를 기본적으로 지원하는데, tree 레이어 형식으로 배치된 모델링 데이터를 쉽게 확인 가능합니다.

Blend4Web

blender와 연동되는 3d 웹 콘텐츠 개발 프레임워크입니다.

인터렉티브한 콘텐츠보단, blender에서 제작된 결과물들을 웹에서 확인 가능한 플레이어 느낌이 강합니다.(쇼룸)

Unity

게임에서 아주 많이 사용하는 엔진인데요. WebGL export를 지원합니다.

Web Unity에선 교육용으로 많이 사용됩니다.

게임 캐릭터와 같은 콘텐츠를 뽑아서 프로모션 용으로 브라우저에서 노출시키는 경우가 있습니다.

이전에 일곱개의 대죄 모바일 게임이 출시 되기전 캐릭터를 뽑아서 twitter에 공개하는 프로젝트를 직접 진행한 경험이 있습니다.

출력된 javascript 소스를 살짝 수정해서 사용했습니다.

React Three Fiber

Three.js 기반인데, React에서 사용되는 hook이나 class 컴포넌트들처럼 사용하는 방식입니다.

사이트가 React일 경우 많이 고려되나, Three.js를 직접 활용하는 경우가 더 많은것 같습니다.

CesiumJS

지리적 정보 시각화를 위한 오픈 소스 라이브러리 입니다. 3D 지도나 지형 모델링에 탁원할 기능을 제공합니다.

BIM 프로젝트를 비롯해, 3D 도시 모델링, GIS 응용 프로그램, 항공기 및 위성 시뮬레이션 등에 사용됩니다.

Ammo.js, Cannon,js

물리엔진 라이브러리로 Three.js나 Babylon.js와 많이 사용됩니다. 

sculptGL

웹 기반 3d 스컬핑 도구로 zbrush의 기본적인 스컬핑 기능을 웹에서 사용할 수 있게 해줍니다. 

브러시, 스무딩, 크레이즈, 크리핑 등의 기본적인 스컬핑 도구를 제공합니다.

각 라이브러리마다 특장점이 있습니다.

웹에서 3ds max나 blender와 같은 기능과 동일한 소프트웨어를 개발하긴 굉장히 험난합니다.

그래서 특정 비즈니스에 특화돼 있는 소프트웨어를 만들어야 하며, 특정 비즈니스에 필요한 기술들을 검토후, 적합한 기술을 선택해야합니다.

예를들어 사용해야 하는 3d 포멧(fbx, obj, stl 등)이 제한적이라면, 그 포멧을 지원해야하는 라이브러리를 선택하는게 운영적인 면에서 좋을 수 있으나, 변환해서 넣어도 되는 환경이면 상관이 없을 수도 있습니다. 다만 변환될때 유실되는 데이터들을 면밀히 확인해 봐야 합니다.

기존 비슷한 프로젝트가 해당 라이브러리를 통해 성공적으로 개발한 내역이 있을 경우 해당 라이브러리를 선택하기 좋을 수 있습니다.

위 라이브러리들은 javascript 생태계에서 사용할 수 있으며, 프런트엔드가 어떤거냐에 따른 기술제약은 없습니다.

다만 React가 베이스고, 산출물의 형태가 간단한 경우 React Three Fiber 라이브러리를 선택하면 쉽게 개발할 수 있고, 좀 복잡한 형태인 경우, 이런 종속성을 깨고, 위 기술들의 특 장점들을 분석해보고 기술 선택을 하면 좋습니다.

백엔드는 일반적으로 어떤걸 써도 상관이 없을걸로 생각되기 때문에, 클라이언트의 유지보수 상황에 맞춰서 선택하면 됩니다.

서버에서 연동할 서비스 소프트웨어

SuperMap IServer, ArcGIS Server, GeoServer, MapServer, QGis Server, MapGuide 등이 있는데,

해당 서비스를 활용하면 좌표 등을 활용하여, 공간 데이터 관리, 분석, 또 그 데이터를 관리해주는 페이지를 제공합니다.

DB의 경우 

PostgreSQL의 PostGIS가 거리 검색등의 기능이 있고, 무료여서 많이 사용하는데, 대규모 서비스의 경우 Cassandra를 사용하는 게 날 수 있고, 속도를 위해 Redis 등을 추가하면 좋을 수 있습니다. 대규모 시스템에선 관련 시스템을 좀 복잡하게 설계해야 합니다.

3D Modeling에 대한 개념.

3ds max나 bleder같은 3d model 툴 같은걸 사용해서 어떤식으로 산출물이 뽑히는지 이해를 하면 좋습니다. 이 포스팅을 쓰는 저는 개발자이지만, 3d modeling을 어느정도 할 줄 압니다. 3d 프로젝트를 하기 위해선 이런 산출물이 어떻게 만들어지고, 어떻게 뽑아야 하는지 등을 알아야 최종적으로 사용할 수 있으며, 3d modeling을 요청하더라도 어떻게 만들어야 할지 알아야 요청할 수 있기 때문입니다.

제가 직접 모델링한 산출물😁

모슈에서 최근 진행하는 3d 프로젝트

최근엔 대학연구소의 의뢰를 받아 BIM 프로젝트를 진행중인데, 위에 언급된 내용중 하나를 사용해 진행중입니다.

web 3d 프로젝트를 계획중이시라면 위에 제가 언급한 기술들을 한번씩 검토해 보시길 바랍니다.

만약 전문가가 필요하시면 연락 주세요. 가능한 선에서 최고의 선택지를 제안해 드리겠습니다. 😍

상담이 필요하시다면? 클릭