
Movi.Kanti.Revo, Chrome पर एक नया प्रयोग है. इसे Cirque du Soleil ने बनाया है और Subatomic Systems ने डेवलप किया है. यह प्रयोग, आधुनिक वेब टेक्नोलॉजी की मदद से, Cirque du Soleil के शानदार शो को वेब पर उपलब्ध कराता है.
3D वर्ल्ड बनाना
इस प्रयोग को सिर्फ़ HTML5 का इस्तेमाल करके बनाया गया है. साथ ही, यह एनवायरमेंट पूरी तरह से मार्कअप और सीएसएस से बना है. सीएसएस का इस्तेमाल करके, div
, img
, छोटे video
, और अन्य एलिमेंट को 3D स्पेस में रखा जाता है. जैसे, मंच पर सेट किए गए आइटम. getUserMedia
एपीआई के नए वर्शन का इस्तेमाल करके, प्रयोग के साथ इंटरैक्ट करने का एक नया तरीका उपलब्ध कराया गया है. इसमें कीबोर्ड या माउस का इस्तेमाल करने के बजाय, JavaScript की चेहरे की पहचान करने वाली लाइब्रेरी आपके सिर को ट्रैक करती है और आपके साथ-साथ एनवायरमेंट को भी मूव करती है.
पूरा वेब एक स्टेज है
इस एक्सपेरिमेंट को बनाने के लिए, ब्राउज़र को एक स्टेज के तौर पर और <div>
, इमेज, वीडियो, और दूसरे एलिमेंट को सीएसएस का इस्तेमाल करके 3D स्पेस में पोज़िशन किए गए सेट के तौर पर देखें. हर एलिमेंट या सेट पीस को 3D ट्रांसफ़ॉर्म लागू करके, स्टेज पर पोज़िशन किया जाता है. अगर आपको translate3d
ट्रांसफ़ॉर्म के बारे में जानकारी नहीं है, तो आपको बता दें कि इसमें तीन पैरामीटर होते हैं: X, Y, और Z. X, एलिमेंट को हॉरिज़ॉन्टल लाइन के साथ-साथ घुमाता है, Y एलिमेंट को ऊपर और नीचे ले जाता है, और Z एलिमेंट को ज़ूम इन या ज़ूम आउट करता है. उदाहरण के लिए, transform: translate3d(100px, -200px, 300px)
लागू करने पर, एलिमेंट को दाईं ओर 100 पिक्सल, नीचे 200 पिक्सल, और दर्शक के करीब 300 पिक्सल ले जाया जाएगा.
ऑडिटोरियम बनाना
आइए, आखिरी सीन पर नज़र डालते हैं और देखते हैं कि इसे कैसे बनाया गया है. सभी सीन को तीन मुख्य कंटेनर में बांटा गया है: वर्ल्ड कंटेनर, पर्सपेक्टिव कंटेनर, और स्टेज. वर्ल्ड कंटेनर, दर्शकों के कैमरे को असरदार तरीके से सेट अप करता है. साथ ही, ब्राउज़र को यह बताने के लिए सीएसएस 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); % }
}
स्टेज को विज़ुअलाइज़ करना
इस स्टेज में, आखिरी सीन में सात एलिमेंट हैं. पीछे से आगे की ओर बढ़ते हुए, इनमें आसमान का बैकग्राउंड, धुंध की एक लेयर, दरवाज़े, पानी, प्रतिबिंब, धुंध की एक और लेयर, और आखिर में सामने की चट्टानें शामिल हैं.
हर आइटम को transform: translate3d(x, y, z)
सीएसएस प्रॉपर्टी के साथ स्टेज पर रखा जाता है. इससे पता चलता है कि वह 3D स्पेस में कहां फ़िट होता है. हमने z वैल्यू का इस्तेमाल उसी तरह किया है जिस तरह z-index
का इस्तेमाल किया जाता है. हालांकि, translate3d
प्रॉपर्टी की मदद से, वैल्यू के साथ यूनिट भी दी जा सकती है.

पहले इमेज में, ज़ूम आउट किए गए सीन को 90 डिग्री तक घुमाया गया है, ताकि आप यह देख सकें कि स्टेज पर अलग-अलग सेट पीस कैसे रखे गए हैं. सबसे पीछे (सबसे बाईं ओर), आपको बैकग्राउंड, धुंध, दरवाज़े, पानी, और आखिर में चट्टानें दिख सकती हैं.
स्टेज पर बैकग्राउंड डालना
चलिए, बैकग्राउंड इमेज से शुरुआत करते हैं. यह सबसे पीछे है, इसलिए हमने इसे अपने पर्सपेक्टिव में पीछे धकेलने के लिए, Z-ऐक्सिस पर -990 पिक्सल का ट्रांसफ़ॉर्म लागू किया है (दूसरी इमेज देखें).

अंतरिक्ष में वापस जाते समय, यह छोटा हो जाता है. इसलिए, इसे व्यूपोर्ट में फ़िट करने के लिए, scale(3.3)
प्रॉपर्टी की मदद से इसका साइज़ बदलना होगा. साथ ही, इसके ऊपरी हिस्से को y-ऐक्सिस पर translate3d
की मदद से, व्यूपोर्ट के ऊपरी हिस्से के साथ अलाइन करना होगा (तीसरा चित्र देखें).
.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
का इस्तेमाल करने के साथ-साथ, हम इसे सपाट और टेक्सचर वाला दिखाने के लिए, 60 डिग्री (rotateX(60deg)
) के x-ऐक्सिस (हॉरिज़ॉन्टल) रोटेशन भी लागू करते हैं.
दरवाज़े के रेफ़्लेक्शन और सेकंडरी फ़ॉग में भी इसी तरह का रोटेशन जोड़ा गया, ताकि यह सही प्लैन में दिखे (चित्र 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 स्पेस में विज़ुअलाइज़ किया गया था और हर सीन पर सही ट्रांसफ़ॉर्म लागू किया गया था.