Movi Kanti Revo - 1. Bölüm - 3D Dünyayı İnşa Etme

Movi Kanti Revo logosu.

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: Sahne yan taraftan
Şekil 1: Sahne yan taraftan.

Ş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).

-990 piksel yerine yalnızca arka planın yerleştirildiği sahne
Şekil 2: Yalnızca arka planın -990 piksel olarak yerleştirildiği sahne

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>; % }
}
Şekil 3: Arka planın yerleştirildiği ve ölçeklendirildiği sahne.
Şekil 3: Yalnızca arka planın konumlandırılıp ölçeklendirildiği sahne.

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.

Şekil 4: Sis, kapılar ve uçurumun konumlandırılıp ölçeklendirildiği sahne
Şekil 4: Sis, kapılar ve uçurumun konumlandırılıp ölçeklendirildiği sahne.

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>; % }
}
Şekil 5: Tüm öğelerin konumlandırılıp ölçeklendirildiği sahne.
Şekil 5: Tüm öğelerin konumlandırılıp ölçeklendirildiği sahne.
>

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ı.

Daha fazla bilgi