
Movi.Kanti.Revo, Cirque du Soleil tarafından tasarlanan ve Subatomic Systems tarafından geliştirilen yeni bir duyusal Chrome denemesi. Cirque du Soleil'in büyüsünü modern web teknolojileri aracılığıyla web'e taşıyor.
3D Dünyayı Oluşturma
Deneme yalnızca HTML5 kullanılarak oluşturuldu ve ortam tamamen işaretleme ve CSS ile oluşturuldu. Sahnedeki dekor parçaları gibi div
, img
, küçük video
ve diğer öğeler CSS kullanılarak 3D bir alanda konumlandırılır. Yeni getUserMedia
API'nin kullanılması, deneyle etkileşime geçmenin yepyeni bir yolunu sağladı. Klavye veya fare kullanmak yerine JavaScript yüz algılama kitaplığı başınızı izler ve ortamı sizinle birlikte hareket ettirir.
Web'in tamamı bir sahne
Bu denemeyi oluşturmak için tarayıcıyı bir sahne, <div>
'ler, resimler, videolar ve diğer öğeleri ise CSS kullanılarak 3D uzayda konumlandırılmış sahne parçaları olarak hayal etmek en iyisidir. Her öğe veya sahne parçası, 3D dönüşüm uygulanarak sahneye yerleştirilir. translate3d
dönüşümü hakkında bilginiz yoksa bu dönüşüm için X, Y ve Z olmak üzere 3 parametre gerekir. X, öğeyi yatay bir çizgi boyunca hareket ettirir, Y öğeyi yukarı ve aşağı hareket ettirir, Z ise öğeyi yaklaştırır veya uzaklaştırır. Örneğin, transform: translate3d(100px, -200px, 300px)
uyguladığınızda öğe 100 piksel sağa, 200 piksel aşağı ve 300 piksel izleyiciye doğru taşınır.
Oditoryum oluşturma
Son sahneye ve nasıl oluşturulduğuna bakalım. Tüm sahneler üç birincil kapsayıcıya ayrılır: dünya kapsayıcısı, perspektif kapsayıcısı ve sahne. Dünya kapsayıcısı, izleyicinin kamerasını etkili bir şekilde kurar ve tarayıcıya izleyicinin öğeye nereden bakacağını söylemek için CSS perspective
mülkünü kullanır. #perspective-container
, 3D dönüşümler uygulayarak perspektifimizi değiştirmek için kullanılır. Son olarak sahne, ekranda görünecek gerçek set parçalarını içerir.
<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); % }
}
Sahneyi görselleştirme
Sahnede, son sahnede yedi öğe vardır. Arkadan öne doğru sırasıyla gökyüzü arka planı, sis katmanı, kapılar, su, yansımalar, ek sis katmanı ve son olarak öndeki uçurumlar yer alır.
Her öğe, 3D uzayda nereye sığdığını belirten bir transform: translate3d(x, y, z)
CSS özelliğiyle sahneye yerleştirilir. z değerini z-index
değerini kullandığımıza benzer bir şekilde kullandık ancak translate3d
mülküyle birlikte değere bir birim de sağlayabiliriz.

Şekil 1'de, farklı set parçalarının her birinin sahneye nasıl yerleştirildiğini görselleştirebilmeniz için sahnenin uzaklaştırılmış ve yaklaşık 90 derece döndürülmüş hali gösterilmektedir. Arka tarafta (en solda), arka planı, sisi, kapıları, suyu ve son olarak da uçurumları görebilirsiniz.
Arka planı sahneye yerleştirme
Arka plan resmiyle başlayalım. En arkada olduğu için perspektifimizde geriye itmek amacıyla Z ekseninde -990 piksellik bir dönüşüm uyguladık (bkz. Şekil 2).

Uzayda geriye doğru hareket ederken fizik kuralları gereği daha küçük hale gelmesi gerekir. Bu nedenle, görüntü alanına sığması için scale(3.3)
mülkü aracılığıyla yeniden boyutlandırılması ve y ekseninde bir translate3d
ile üst kenarının görüntü alanının üst kısmıyla hizalanması gerekir (bkz. Şekil 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>; % }
}

Sis, kapılar ve uçurumlar için de aynı şekilde, her birine uygun bir z konumu ve ölçek faktörü içeren bir translate3d
uygulayın (bkz. Şekil 4). Kapıların ve uçurumların arkasındaki sis birikimine dikkat edin.

Denizi ekleme
Mümkün olduğunca gerçekçi bir ortam oluşturmak için suyu dikey bir düzleme yerleştiremeyeceğimizi biliyorduk. Gerçek dünyada genellikle böyle bir durum söz konusu değildir. Suyu sahneye yerleştirmek için translate3d
'ü uygulamanın yanı sıra, düz ve dokulu görünmesi için 60 derecelik bir x ekseni (yatay) rotasyonu (rotateX(60deg)
) da uygularız.
Kapı yansımasına ve ikincil sislere, doğru düzlemde görünmeleri için benzer bir rotasyon eklendi (bkz. Şekil 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>; % }
}

Her sahne benzer bir şekilde oluşturuldu, öğeler bir sahnenin 3D alanında görselleştirildi ve her birine uygun bir dönüşüm uygulandı.