웹에서 고퀄리티 3D 구현하기
Blender 작업부터 최적화까지
브랜드 경험을 만드는 디지털 크리에이티브 파트너, 하이퍼랩
안녕하세요 브랜드 경험을 만드는 디지털 크리에이티브 파트너 하이퍼랩입니다.
하이퍼랩은 최근 게이미피케이션 요소를 활용한 다양한 인터랙티브 콘텐츠를 제작하며,
웹 환경에서도 몰입도 높은 경험을 만드는 방법을 지속적으로 고민하고 있습니다.
이번 콘텐츠에서는 웹 환경에서 고퀄리티 3D를 구현하기 위해 고민했던 작업 과정과 테스트 경험을 공유하고자 합니다.
1. Blender 작업 시 기본 전제 조건
최종 결과물은 웹 환경에서 고퀄리티로 플레이되는 것을 목표로 함
Blender 뷰포트에서의 결과와 실제 웹에서 보여지는 결과가 다를 수 있다는 점을 인지한 상태에서 작업 진행
2. Blender 환경 세팅 접근 방식
렌더링 엔진 선택 기준
웹 빌드를 전제로 할 경우 Blender 렌더 엔진의 영향도는 상대적으로 낮습니다.
따라서 EEVEE 엔진을 사용해 애니메이션과 결과를 빠르게 확인하는 용도로 활용했습니다.
씬 구성 시 불필요한 요소를 줄이기 위한 판단 기준
씬을 구성할 때는 처음부터 최적화를 염두에 두고 작업했습니다.
1. 모델링 후 Culling 작업이 가능한 구조인가
2. Image Texture 사이즈는 적절한가
→ 반드시 잘 보여야 하는 부분인지 판단 후 해상도 선택
*해상도 비교 이미지
웹 업로드를 고려해 초반부터 신경 쓴 요소
웹 환경을 고려해 초기 단계부터 다음 요소들을 설계했습니다.
모델링 단계에서 제한적인 폴리곤 사용
Shader node로 구현한 Texture는 웹 환경에서 정보가 유실될 수 있으므로, 텍스처 최적화 작업 후 glb로 내보내기
Draw Call 최적화를 위한 텍스처 아틀라스 및 모델링 Batching
일부 모디파이어 기반 애니메이션은 정보 유실 가능성이 있으므로 제작 방식을 초기에 설계 후 진행
애니메이션 사용 시 NLA 트랙 지정 및 Web 재생을 위한 애니메이션 name 설정
3. 라이팅 설계 기준
웹 환경 라이팅에서 중요하게 본 요소
웹에서는 라이팅이 어둡거나 플랫하게 표현되는 경우가 발생합니다.
텍스처 명도를 올려 선조정 진행
효과가 미미할 경우, 개발팀에서 웹 환경 라이팅을 별도 조절 요청
4. 머티리얼 & 텍스처 설정 방향
머티리얼과 텍스처 작업은 작업자마다 접근 방식이 다를 수 있습니다.
일반적으로는 Substance Painter로 작업하는 경우가 많습니다.
하지만 대부분의 텍스처 작업은 Blender 안에서도 해결이 가능하기 때문에,
Painter를 반드시 사용하지는 않았습니다.
텍스처 제작이 필요하더라도 블렌더의 Shader node로 구현하고,
Web 환경 빌드 시 정보가 유실되지 않도록 최적화 작업을 진행합니다.
해상도는 텍스처 아틀라스 작업 시 디테일이 중요한 UV 영역을 크게 배치해 선명도를 확보하는 방식으로 조정했습니다.
5. 폴리곤 & 구조 최적화
퀄리티를 해치지 않는 선에서의 경량화
Web에서 작게 보여질 리소스의 폴리곤은 과감하게 낮췄습니다.
6. Blender 결과 vs Web 결과 비교
실제 테스트를 통해 확인한 차이
Blender에서 예상했던 결과
블렌더 셰이더 노드 상태의 머티리얼Web 환경에서 실제로 보였던 결과
좌: 블렌더 셰이더 노드 상태의 추출 결과 (데이터 유실) / 우: 최적화 작업 후 추출 결과 (데이터 보존)좌측: 블렌더 셰이더 노드 상태로 glb 추출 후 웹 업로드 시 머티리얼 텍스처 정보가 유실되어 하얗게 표현됨
우측: 웹 환경에 맞춰 최적화 과정을 거친 후 텍스처 정보가 정상적으로 보존된 결과
차이가 발생한 주요 포인트
블렌더의 셰이더 노드로 제작한 머티리얼은
그 상태 그대로 glb로 추출하면 웹에서 데이터가 유실될 수 있습니다.
따라서 웹 환경에 맞는 최적화 과정을 거쳐야
의도한 표현을 유지할 수 있습니다.
7. 디자이너 관점에서의 작업 정리 & 인사이트
블렌더 환경에서 구현한 리소스(모델링, 텍스처, 이펙트, 애니메이션 등)를
웹 환경에서도 그대로 재현할 수 있도록 초기 작업 설계가 가장 중요하다고 느꼈습니다.
블렌더에서는 간단하게 제작된 리소스라도 웹 빌드를 위해 복잡한 우회 과정을 거쳐야 하는 경우가 있습니다.
그 과정에서
데이터가 수 MB 단위로 증가하기도 하고
다시 KB 단위로 압축해야 하는 상황도 발생합니다
웹 환경 3D 작업의 핵심
결국 핵심은 데이터 경량화입니다.
텍스처 해상도와 폴리곤 수를 줄이면 성능은 좋아지지만 그만큼 퀄리티는 하락합니다.
따라서 웹 기반 3D 작업은 제한된 리소스 안에서 최상의 결과물을 만들기 위해 경량화와 퀄리티 사이의 간극을 끊임없이 조율하며 합리적인 타협점을 찾아가는 과정이라고 생각합니다.
지금까지 웹 환경에서 고퀄리티 3D를 구현하기 위해 고민했던 작업 기준과 테스트 과정을 살펴보았습니다.
블렌더에서의 완성도가 곧 웹에서의 완성도를 의미하지는 않기에,
처음부터 웹 환경을 전제로 설계하고 최적화하는 과정이 무엇보다 중요합니다.
앞으로도 하이퍼랩은 웹이라는 제한된 환경 안에서도
완성도 높은 3D 경험을 구현하기 위해 기술적 테스트와 고민을 지속해 나가겠습니다.
웹에서의 3D 구현이 고민이신 분들께
이번 작업 과정이 도움이 되었기를 바랍니다.
디지털 에이전시 하이퍼랩이 더 궁금하다면?
새로운 디지털 크리에이티브로 브랜드 경험을 한 단계 더 확장해보세요.
하이퍼랩에서 진행한 프로젝트는 홈페이지에서 자세히 확인하실 수 있습니다.