3D로 구축한 스튜디오 웹사이트 웹 디자인을 항상 2D로 할 필요는 없습니다: Hybrid Forest는 Cinema 4D와 WebGL을 사용하여 자신의 웹 사이트를 회화적인 3D 풍경으로 만들었습니다!
스웨덴 스톡홀름에 있는 크리에이티브 스튜디오인 Hybrid Forest는 VR 및 360° 비디오 프로덕션 전문가로서, 젊은 팀원들에게 끝없는 디자인 가능성과 창의적인 자유를 제공하여 크게 화제가 되는 주제들을 다루고 있습니다.
3D 그래픽스를 웹 브라우져에서 표현하는 최신 기법들을 테스트하기 위하여, 이 팀에서는 WebGL 테크놀로지를 실험해 보았습니다. 아직은 초보 단계이지만, WerbGL 그래픽스는 3D그래픽스를 웹 브라우져 내에서 렌더링하기 위하여 그래픽스 카드의 성능을 이용합니다. 따라서, 사용자들은 어떠한 추가적인 브라우져 플러그인도 필요치 않습니다.
Hybrid Forest는 자신들의 전문 분야를 반영할 수 있는 혁신적인 웹 사이트가 필요하였기 때문에 자신들의 WebGL 실험 결과를 이용하여 자신들의 회사 웹사이트를 만들었습니다.
Hybrid Forest 팀은 디자인을 위하여 스웨덴의 목가적인 자연을 사용하였으며, 3D에 대한 팀 자신의 매혹됨이 영감으로 작용하였습니다: 사이트는 산들로 둘러싸인 호수와 전형적인 스웨덴 목조 주택이 숲 끝자락에 펼쳐진 그림같은 풍경을 360° 뷰로 보여줍니다. 이를 자세히 들여다보면 거기에는 애니메이션되는 곰도 있는 것을 발견하실 수 있습니다.
전체 씬과 모든 애셋들은 3D 아티스트인 Ashley Reed가 Cinema 4D를 사용하여 모델링했습니다. 그는 폴리곤 수를 낮추어 스타일라이즈된 낮은 폴리곤 모양을 유지하고, 아울러 성능이 떨어지는 엔드-유저의 시스템을 위하여 씬의 성능을 최적화하였습니다. Polygon Pen 툴이 빠르고 쉽게 지오메트리를 생성하는 데 아주 중요한 역할을 하였습니다. Polygon Reduction 툴 또한 Sculpt 기능을 사용하여 만들어진 산들의 지오메트리를 삼각형으로 표현하고 복잡도를 낮추는데 사용되었습니다. 이 과정은 또한 삼각형 메쉬가 아닌 애셋들이 WebGL에 사용되면서 벌어질 수 있는 여러 이슈들을 예방해주었습니다. Phong 태그를 제거함으로써, Ashley는 저-폴리곤 모양을 강조할 수 있었는데, 그 이유는 폴리곤들이 소프트 서페이스 셰이딩에 의하여 더 이상 라운드되지 않기 때문입니다.
Cinema 4D의 쉬운 사용법 덕분에, 팀은 온전히 자신들의 창의성을 표현하는 일에만 집중할 수 있었습니다: “Cinema 4D는 모델러와 프로그래머인 나와의 최고의 협력이 가능하도록 해준 완벽한 툴이었습니다,” Hybrid Forest의 게임 엔진 및 웹 개발자인 Daniel Mayor의 말입니다.
특별한 어려움은 Cinema 4D에서 만들어진 애셋들을 웹사이트 상에서 WebGL과 통합시키는 것이었습니다. 먼전 이들을 Cinema 4D에서 OBJ로 익스포트하고 특별한 툴을 사용하여 이들을 JSON 파일들로 저장하였습니다. 이 파일들은 웹 어플리케이션에서 읽어들일 수 있는 텍스트를 포함하고 있어 Three.js JavaScript 라이브러리의 도움을 받아 웹사이트 안으로 통합이 가능합니다.
씬이 최종적으로 브라우져로 올라와 WebGL로 구동될 때, 팀은 테크놀로지의 한계를 경험하였는 데, 브라우져에서는 사실적인 섀도우 캐스팅이 불가능하였습니다. 이로 인하여 씬에서의 섀도우들을 모두 비 활성화 시킬 수 밖에 없었습니다. 동시에, 씬의 저-폴리곤 광학과 연계된 라이트가 캐스트 섀도우의 느낌을 주는 셰이딩을 생성하고 있었습니다. 그들은 태양의 위치가 사용자 컴퓨터의 시간 설정에 따라 변하도록 하는 이스터 에그를 추가하였습니다. 사이트에 들어오는 방문자들도 인터페이스를 이용하여 낮과 밤 조명을 바꾸어 태양의 위치에 영향을 줄 수도 있습니다.
이들의 혁신적인 웹사이트 런치는 Hybrid Forest 팀에게는 완벽한 성공작이었습니다: 이 프로젝트는 디자이너들을 위한 영감을 주는 작품으로 프리젠테이션되고 AWWWARDS에서 디자인 어워드에노미네이션되었습니다.
Hybrid Forest는 Cinema 4D에 매우 감명을 받았으며, 더 많은 스패트들이 Cinema 4D를 사용하고 있습니다. 팀은 또한 정기적으로 Cinema 4D 워크샾을 수행하고 있습니다. 3D 아티스트인 Ashley Reed는 Cinema 4D의 쉬운 사용법에 대한 열정적인 팬입니다: “Cinema 4D로 작업하는 것은 믿을 수 없을 만큼 재미있는 데, 왜냐하면 내가 온전히 내 아이디어를 구체화하는 것에 모든 시간을 쏟을 수 있게 해주기 때문입니다.”