Case Study: Crosswire

Crosswire는 틀을 깨고 업계에 대한 그들의 파괴적인 접근 방식을 완전히 구현하는 웹 사이트를 만들도록 우리에게 도전했습니다. 독특하고 기억에 남으며 시각적으로 눈에 띄는 것이 필요했습니다. 핵심 과제는 Crosswire의 복잡한 서비스 제공을 단순하고 이해하기 쉬운 방식으로 시각화하는 것이었습니다. 우리의 솔루션은 WebGL을 사용하여 고객 비즈니스의 디지털 환경을 나타내는 3D 환경을 만드는 것이었습니다. 과제 : 1. 장면 레이아웃 및 애니메이션 환경은 회사의 브랜드 마크를 구성하는 모양에서 영감을 얻은 3D 그리드 시스템을 사용하여 설계되었습니다. 이러한 구성 요소를 반복하여 제품 기능을 시각적으로 표현하는 섹션과 간단한 애니메이션을 만들었습니다. 풍경을 따라 움직이는 작은 삼각형 모양은 제품의 사용자를 나타냅니다. 그리드는 올바르게 배치해야 하는 개별 모델로 구성되었습니다. 이를 달성하기 위해 내부 Blender 추가 기능을 사용하여 장면을 포인트 클라우드로 내보냈습니다. 이 기술을 사용하여 각 개별 모델의 위치와 회전을 대상으로 지정하고 애니메이션해야 하는 모델을 식별할 수 있었습니다. 이를 통해 각 모델에 대한 인스턴스 메시를 생성하고 WebGL 환경에 배치할 수 있었습니다. 프로세스의 복잡성을 줄이고 경험을 가능한 한 효율적으로 유지합니다. 2. 재료 및 반사 디자인은 사용자가 페이지를 아래로 스크롤할 때 주변 환경을 반영하는 금속 재질을 활용했습니다. 당연히 WebGL의 실시간 반사 및 그림자는 성능이 매우 높은 작업이므로 이러한 한계를 극복하기 위한 창의적인 방법을 찾아야 했습니다. 오리지널 컨셉 렌더링 원본 스타일 프레임(왼쪽), 라이브 웹사이트(오른쪽) 스타일 프레임에 정의된 미학을 달성하기 위해 처음에는 사용자 지정 HDR을 생성하여 3D 소프트웨어에서 생성된 환경을 모방하려고 시도했습니다. 초기 결과는 유망했지만 안타깝게도 설계와는 거리가 멀었습니다. 스크롤에서 약간의 회전 이동은 장면의 미학을 크게 변경합니다. 그 결과 카메라 좌표를 사용하여 텍스처를 매핑하고 구운 조명 모델을 제공하는 매트캡을 실험하기로 결정했습니다. 이 접근 방식은 매우 효과적인 것으로 입증되었으며 블렌더에서 약간의 미세 조정을 통해 우리가 추구하는 시각적 결과를 얻을 수 있었습니다. 그러나 우리는 전체 경험에서 단일 matcap이 우리가 찾고 있는 정확한 조명을 제공하지 않는다는 것을 알았습니다. 그래서 대신 카메라가 잘 작동하면서 여러 matcap 사이를 페이드하려고 했습니다. WebGL 환경을 만들 때 핵심 고려 사항은 성능입니다. 항상 비주얼과 중요한 60fps 간의 균형을 맞추는 작업입니다. 결과적으로 우리는 항상 성능을 개선할 수 있는 독창적인 방법을 찾고 있습니다. 3. InstancedMesh에서 절두체 컬링 부족 이에 대한 한 가지 예는 "바닥"을 형성하는 블록 컬렉션을 구축할 때 Three.js의 InstancedMesh를 활용하는 것입니다. 블록은 서로 다른 세 가지 반복되는 기하학으로 구성되기 때문입니다. 프로젝트를 빌드할 때 InstancedMesh 개체는 기본적으로 프러스텀 컬링을 지원하지 않았기 때문에 자체 솔루션을 구현해야 했습니다. 각 섹션이 카메라 절두체에 들어오고 나갈 때 다른 WebGL 요소도 제어하고 싶었기 때문에 기존 Frustum 클래스를 Three에서 확장하는 "FrustumDetector" 구성 요소를 만들기로 했습니다. 이를 통해 바닥을 섹션으로 그룹화하고 보이는 것만 렌더링할 수 있었습니다. 4. 사용자 추적 뒤에 트레일을 형성하는 데 필요한 미리 정의된 경로를 따라 장면을 가로질러 이동하는 작은 삼각형 모양(사용자). 이를 달성하는 몇 가지 방법이 있지만 우리는 사용자가 따라가는 경로를 선택하고 이를 따라 등거리 지점을 샘플링하고 벽과 같은 구조를 형성하여 사용자 정의 기하학을 구축했습니다. 즉, 프래그먼트 셰이더의 UV 좌표를 사용하여 2D 트레일 모양을 형성하고 경로를 따라 사용자 위치의 진행 상황을 사용하여 x축에서 이동할 수 있습니다. 5. 방사형 스캔 경험의 일부에는 장면을 덮는 "스캐닝" 효과가 필요했습니다. 이것은 바닥을 덮는 단순한 2D 평면일 수 있지만 3D 풍경의 모양을 올바르게 따르지 않는 한 효과가 설득력이 없다는 것을 알았습니다. 대신 우리는 바닥을 구성하는 지오메트리에 사용된 재료의 조각 셰이더에서 이 작업을 수행하기로 결정했습니다. 재능 있는 Yuri Artiukh(일명 @akella )는 최근 이 효과를 재현했으며 여기에서 볼 수 있습니다. 그의 접근 방식은 원본과 매우 유사하므로 여기에 추가 분석이 필요합니다! 헥스 텍스처 마스크 또는 다중 웨이브를 포함하지 않은 효과의 초기 반복 최종 방사형 스캔 결론 이 사례 연구가 마음에 드셨기를 바랍니다. 질문이 있으시면 언제든지 Twitter @uns__nstudio 로 문의해 주십시오 . 피드백을 받으면 매우 기쁠 것입니다!