
Movi.Kanti.Revo は、Cirque du Soleil が制作し、Subatomic Systems が開発した新しい Chrome センサリー テストです。最新のウェブ技術を駆使して、Cirque du Soleil の驚異をウェブに届けます。
3D 世界を構築する
このテストは HTML5 のみを使用して作成され、環境はマークアップと CSS で完全に構築されています。ステージ上のセットピースのように、div
、img
、小さな video
などの要素は、CSS を使用して 3D 空間に配置されます。新しい getUserMedia
API を使用すると、キーボードやマウスを使用する代わりに、JavaScript の顔検出ライブラリでユーザーの頭をトラッキングし、ユーザーの動きに合わせて環境を移動する、まったく新しい方法でテストを操作できるようになりました。
ウェブはすべてステージ
このテストを構築するには、ブラウザをステージ、<div>
、画像、動画などの要素を CSS を使用して 3D 空間に配置されたセットピースと考えるのがよいでしょう。各要素(セットピース)は、3D 変換を適用してステージに配置されます。translate3d
変換についてよく知らない場合は、X、Y、Z の 3 つのパラメータを取ることを覚えておいてください。X は要素を水平線に沿って移動し、Y は要素を上下に移動し、Z は要素を近づけたり遠ざけたりします。たとえば、transform: translate3d(100px, -200px, 300px)
を適用すると、要素は右に 100 ピクセル、下に 200 ピクセル、視聴者側に 300 ピクセル移動します。
オーディトリアムの構築
最後のシーンとその構成を見てみましょう。すべてのシーンは、ワールド コンテナ、パースペクティブ コンテナ、ステージの 3 つのメイン コンテナに分割されます。ワールド コンテナは視聴者のカメラを効果的に設定し、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 値は z-index
を使用する場合と同様に使用しましたが、translate3d
プロパティでは値に単位を指定することもできます。

図 1 は、シーンをズームアウトしてほぼ 90 度回転させたものです。各セットピースがステージ内にどのように配置されているかを確認できます。後ろ(左端)には、背景、霧、ドア、水、最後に崖が見えます。
ステージに背景を配置する
背景画像から始めましょう。最も奥にあるため、Z 軸に -990 ピクセルの変換を適用して、遠近感で奥に押し出しました(図 2 を参照)。

宇宙空間で後方に移動するにつれて、物理的な要請によりサイズが小さくなるため、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>; % }
}

フォグ、ドア、崖も同様に、適切な z 位置とスケール ファクタを持つ translate3d
を適用します(図 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>; % }
}

各シーンは同様の方法で構築され、要素はステージの 3D 空間内で可視化され、それぞれに適切な変換が適用されました。