Movi.Kanti.Revo হল একটি নতুন সংবেদনশীল ক্রোম পরীক্ষা যা Cirque du Soleil দ্বারা তৈরি এবং Subatomic Systems দ্বারা তৈরি যা আধুনিক ওয়েব প্রযুক্তির মাধ্যমে ওয়েবে Cirque du Soleil-এর বিস্ময় নিয়ে আসে৷
3D বিশ্ব নির্মাণ
পরীক্ষাটি শুধুমাত্র HTML5 ব্যবহার করে তৈরি করা হয়েছে এবং পরিবেশটি সম্পূর্ণরূপে মার্কআপ এবং CSS দিয়ে তৈরি করা হয়েছে। স্টেজে সেট পিসগুলির মতো, div , img , ছোট video এবং অন্যান্য উপাদানগুলি সিএসএস ব্যবহার করে একটি 3D স্পেসে অবস্থান করে। নতুন getUserMedia API ব্যবহার করে কীবোর্ড বা মাউস ব্যবহার করার পরিবর্তে পরীক্ষার সাথে ইন্টারঅ্যাক্ট করার একটি সম্পূর্ণ নতুন উপায় সক্ষম করেছে, একটি জাভাস্ক্রিপ্ট ফেসিয়াল ডিটেকশন লাইব্রেরি আপনার মাথা ট্র্যাক করে এবং পরিবেশকে আপনার সাথে নিয়ে যায়।
সমস্ত ওয়েব একটি পর্যায়
এই পরীক্ষাটি তৈরি করতে, ব্রাউজারটিকে একটি স্টেজ হিসাবে কল্পনা করা এবং CSS ব্যবহার করে 3D স্পেসে সেট পিস হিসাবে <div> s, ছবি, ভিডিও এবং অন্যান্য উপাদানগুলিকে কল্পনা করা ভাল। প্রতিটি উপাদান, বা সেট পিস একটি 3D রূপান্তর প্রয়োগ করে মঞ্চে অবস্থান করা হয়। আপনি যদি translate3d রূপান্তরের সাথে অপরিচিত হন তবে এটি 3টি প্যারামিটার লাগে, 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); % }
}
স্টেজ ভিজ্যুয়ালাইজ করা
মঞ্চের মধ্যে, চূড়ান্ত দৃশ্যে সাতটি উপাদান রয়েছে। পিছন থেকে সামনের দিকে যাওয়া, তারা আকাশের পটভূমি, একটি কুয়াশার স্তর, দরজা, জল, প্রতিফলন, একটি অতিরিক্ত কুয়াশার স্তর এবং অবশেষে সামনের ক্লিফগুলি অন্তর্ভুক্ত করে। প্রতিটি আইটেম একটি transform: translate3d(x, y, z) CSS বৈশিষ্ট্য যা নির্দেশ করে যে এটি 3D স্পেসে কোথায় ফিট করে। আমরা z মানটি একইভাবে ব্যবহার করেছি যেভাবে আমরা z-index ব্যবহার করব, কিন্তু translate3d বৈশিষ্ট্যের সাথে, আমরা মান সহ একটি ইউনিটও প্রদান করতে পারি।
চিত্র 1 দেখায় যে দৃশ্যটি জুম করা হয়েছে এবং প্রায় 90 ডিগ্রি ঘোরানো হয়েছে যাতে আপনি স্টেজের মধ্যে প্রতিটি সেট পিস যেভাবে স্থাপন করা হয় তা কল্পনা করতে পারেন। পিছনে (বাম থেকে সবচেয়ে দূরে), আপনি পটভূমি, কুয়াশা, দরজা, জল এবং অবশেষে পাহাড় দেখতে পারেন।
মঞ্চে পটভূমি স্থাপন
ব্যাকগ্রাউন্ড ইমেজ দিয়ে শুরু করা যাক। যেহেতু এটি সবচেয়ে দূরে, তাই আমরা Z-অক্ষে একটি -990px ট্রান্সফর্ম প্রয়োগ করেছি যাতে এটিকে আমাদের দৃষ্টিভঙ্গিতে ফিরিয়ে দেওয়া যায় (চিত্র 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 প্রয়োগ করার পাশাপাশি, আমরা এটিকে সমতল এবং টেক্সচার দেখাতে 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 স্থানের মধ্যে কল্পনা করা হয়েছিল এবং প্রতিটিতে একটি উপযুক্ত রূপান্তর প্রয়োগ করা হয়েছিল।