Movi Kanti Revo - 1부 - 3D 세상 만들기

Pete LePage

Movi Kanti Revo 로고

Movi.Kanti.Revo는 Cirque du Soleil에서 만들고 Cirque du Soleil에서 개발한 새로운 감각적인 Chrome 실험으로, 최신 웹 기술을 통해 Cirque du Soleil의 경이로움을 웹에서 구현합니다.

3D 세상 만들기

실험은 HTML5만을 사용하여 만들었으며, 환경은 전적으로 마크업과 CSS로 구축되었습니다. 스테이지의 세트와 마찬가지로 div, img, 작은 video 및 기타 요소는 CSS를 사용하여 3D 공간에 배치됩니다. 자바스크립트 얼굴 인식 라이브러리가 키보드나 마우스를 사용하는 대신 새로운 getUserMedia API를 사용하여 실험과 상호작용하는 완전히 새로운 방법을 사용할 수 있게 되었습니다. 또한 자바스크립트 얼굴 인식 라이브러리가 머리를 추적하여 함께 환경을 움직입니다.

모든 웹의 단계

이 실험을 만들려면 브라우저를 스테이지로, <div>, 이미지, 동영상, 기타 요소와 같은 요소를 CSS를 사용하여 3D 공간에 배치된 조각으로 생각하는 것이 좋습니다. 각 요소 또는 세트 조각은 3D 변환을 적용하여 스테이지에 배치됩니다. translate3d 변환에 익숙하지 않은 경우 세 개의 매개변수(X, Y, Z)가 필요합니다. X는 가로선을 따라 요소를 이동하고 Y는 요소를 위아래로 이동하고 Z는 요소를 더 가까이 또는 더 멀리 이동합니다. 예를 들어 transform: translate3d(100px, -200px, 300px)를 적용하면 요소가 오른쪽으로 100픽셀, 아래로 200픽셀, 뷰어를 향해 300픽셀 더 가깝게 이동합니다.

강당 건설

마지막 장면을 살펴보고 어떻게 배치되는지 살펴보겠습니다. 모든 장면은 세 가지 기본 컨테이너, 즉 세계 컨테이너, 관점 컨테이너, 스테이지로 분류됩니다. 세계 컨테이너는 뷰어 카메라를 효과적으로 설정하고 CSS perspective 속성을 사용하여 뷰어가 요소를 볼 위치를 브라우저에 알립니다. #perspective-container는 3D 변환을 적용하여 시점을 변경하는 데 사용됩니다. 마지막으로 스테이지에는 화면에 표시되는 실제 세트 피스가 있습니다.

<div id="world-container">
  <div id="perspective-container">
    <div id="stage">
    </div>
  </div>
</div>

#world-container {
perspective: 700px;
overflow: hidden;
}

#perspective-container {
{ % mixin transform-style: preserve-3d; % }
{ % mixin transform-origin: center center; % }
{ % mixin perspective-origin: center center; % }
{ % mixin transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); % }
}

단계 시각화

스테이지 내 최종 장면에는 7가지 요소가 있습니다. 뒤에서 앞으로 이동하면 하늘 배경, 안개층, 문, 물, 반사, 추가 안개층, 마지막으로 앞에 있는 절벽이 포함됩니다. 각 항목은 3D 공간에 맞는 위치를 나타내는 transform: translate3d(x, y, z) CSS 속성과 함께 스테이지에 배치됩니다. z-index를 사용하는 것과 비슷한 방식으로 z 값을 사용했지만 translate3d 속성을 사용하여 값이 있는 단위도 제공할 수 있습니다.

그림 1: 측면의 스테이지
그림 1: 측면의 스테이지

그림 1에서는 다양한 세트 조각이 스테이지 내에 배치되는 방식을 시각화할 수 있도록 축소하고 거의 90도 회전한 장면을 보여줍니다. 맨 왼쪽 뒤에서 배경, 안개, 문, 물, 마지막으로 절벽이 보입니다.

스테이지에 배경 배치

배경 이미지부터 살펴보겠습니다. 가장 멀리 떨어져 있으므로 Z축에 -990px 변환을 적용하여 우리의 관점에서 볼 수 있도록 푸시합니다(그림 2 참고).

스테이지(배경만 -990픽셀로 배치됨)
그림 2: -990px에 배경만 배치된 스테이지

물리학에서는 공간 안으로 이동하므로 크기가 작아질 것을 요구하므로 scale(3.3) 속성을 통해 표시 영역에 맞게 크기를 조절하고 상단 가장자리를 y축에 translate3d을 사용하여 표시 영역 상단과 정렬해야 합니다 (그림 3 참고).

.background {
width: 1280px;
height: 800px;
top: 0px;
background-image: url(stars.png);
{ % mixin transform: translate3d(0, 786px, <b>-990px</b>) <b>scale(3.3)</b>; % }
}
그림 3: 배경이 배치되고 크기가 조정된 스테이지
그림 3: 배경만 배치되고 크기가 조정된 스테이지

각각 적절한 z 위치와 배율로 translate3d를 적용하여 안개, 문, 절벽을 동일한 방식으로 구성합니다(그림 4 참고). 안개가 문 뒤와 절벽 뒤에 어떻게 쌓이는지 살펴보세요.

그림 4: 안개, 문, 절벽이 배치되고 조정된 스테이지
그림 4: 안개, 문, 절벽이 배치되고 조정된 스테이지

바다 추가

가능한 한 현실적인 환경을 만들기 위해 물을 수직면에 담는 것 자체가 아니라 실제 세계에서는 이런 식으로 존재하지 않는 경우가 일반적이라는 것을 알았습니다. translate3d를 적용하여 스테이지에 물을 배치하는 것 외에도 x축 (수평) 회전을 60도 (rotateX(60deg))로 적용하여 평평하고 질감이 있는 것처럼 만듭니다. 문이 올바른 평면에 표시되도록 문 반사와 보조 안개에 비슷한 회전을 추가했습니다 (그림 5 참고).

.sea {
bottom: 120px;
background-image: url(sea2.png);
width: 1280px;
height: 283px;
{ % mixin transform: translate3d(-100px, 225px, -30px) scale(2.3) <b>rotateX(60deg)</b>; % }
}
그림 5: 모든 것이 배치되고 조정된 스테이지
그림 5: 모든 항목이 배치되고 조정된 스테이지
>

각 장면은 비슷한 방식으로 제작되었으며, 요소는 스테이지의 3D 공간 내에서 시각화되었으며, 각 장면에 적절한 변환이 적용되었습니다.

추가 자료