কোনও ওয়েবসাইটে 3D মডেল যোগ করা কঠিন হতে পারে; <model-viewer> ব্যবহার করা HTML লেখার মতোই সহজ।
ওয়েবসাইটে 3D মডেল যোগ করা কঠিন। 3D মডেল সাধারণত এমন ভিউয়ারে দেখানো হয় যা স্মার্টফোন, ডেস্কটপ বা এমনকি নতুন হেড-মাউন্টেড ডিসপ্লে সহ সব ব্রাউজারে রেসপন্সিভভাবে কাজ করতে পারে। পারফর্ম্যান্স ও রেন্ডারিং কোয়ালিটির জন্য ভিউয়ারে প্রোগ্রেসিভ এনহ্যান্সমেন্ট কাজ করতে হবে। এটি পুরনো, কম-পাওয়ারের স্মার্টফোন থেকে শুরু করে অগমেন্টেড রিয়েলিটি কাজ করে এমন নতুন ডিভাইস পর্যন্ত সব ডিভাইসে ব্যবহারের ক্ষেত্রে কাজ করা উচিত। এটি যেন বর্তমান প্রযুক্তির সাথে আপ-টু-ডেট থাকে। এটি যেন পারফর্ম্যান্স-ভিত্তিক এবং অ্যাক্সেসযোগ্য হয়। তবে, এই ধরনের ভিউয়ার তৈরি করতে বিশেষ 3D প্রোগ্রামিং দক্ষতা প্রয়োজন এবং থার্ড-পার্টি হোস্টিং পরিষেবা ব্যবহার করার পরিবর্তে নিজেদের মডেল হোস্ট করতে চান এমন ওয়েব ডেভেলপারদের জন্য এটি চ্যালেঞ্জিং হতে পারে।
তবে, <model-viewer> ওয়েব কম্পোনেন্ট
আপনাকে নিজের সাইটে মডেল হোস্ট করার সময়
ওয়েব পেজে 3D মডেল ডিক্লেরেটিভভাবে যোগ করতে দেয়।
এই কম্পোনেন্টের লক্ষ্য হল, অন্তর্নিহিত প্রযুক্তি এবং প্ল্যাটফর্ম না বুঝেই আপনার ওয়েবসাইটে 3D মডেল যোগ করার সুবিধা প্রদান করা।
ওয়েব কম্পোনেন্ট রেসপন্সিভ ডিজাইন সাপোর্ট করে,
এবং কিছু ডিভাইসে অগমেন্টেড রিয়েলিটির মতো ব্যবহারিক ক্ষেত্রেও কাজ করে।
এতে অ্যাক্সেসিবিলিটি, রেন্ডারিং কোয়ালিটি ও ইন্টারঅ্যাক্টিভিটির জন্য
ফিচার অন্তর্ভুক্ত আছে।
ওয়েব কম্পোনেন্ট কী?
ওয়েব কম্পোনেন্ট হল স্ট্যান্ডার্ড ওয়েব প্ল্যাটফর্ম ফিচার থেকে তৈরি কাস্টম HTML এলিমেন্ট। একটি ওয়েব কম্পোনেন্ট সব উদ্দেশ্য ও লক্ষ্যের জন্য একটি স্ট্যান্ডার্ড এলিমেন্টের
মতো আচরণ করে। এটির একটি অনন্য ট্যাগ আছে, এটির প্রপার্টি ও পদ্ধতি থাকতে পারে এবং এটি
ইভেন্ট ট্রিগার করতে ও তার উত্তর দিতে পারে। সংক্ষেপে, কোনও ওয়েব কম্পোনেন্ট ব্যবহার করার জন্য আপনাকে বিশেষ কিছু জানতে হবে না, <model-viewer>-এর ক্ষেত্রে তো আরও কম।
এই নিবন্ধে <model-viewer>-এর জন্য নির্দিষ্ট ফিচারগুলি কভার করা হয়েছে।
আপনি ওয়েব কম্পোনেন্ট সম্পর্কে আরও জানতে আগ্রহী হলে,
webcomponents.org থেকে শুরু করতে পারেন।
<model-viewer> অ্যাপটি কী কী করতে পারবে?
নিম্নলিখিত উদাহরণগুলি <model-viewer>-এর কিছু ক্ষমতা প্রদর্শন করে।
বেসিক 3D মডেল
3D মডেল এম্বেড করা নিচে উল্লেখ করা মার্কআপের মতোই সহজ। glb ফাইল ব্যবহার করার মাধ্যমে, এই কম্পোনেন্ট যেকোনও প্রধান ব্রাউজারে কাজ করবে।
<!-- Import the component -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
<!-- Use it like any other HTML element -->
<model-viewer
id="mv-shark"
src="shark.glb"
camera-controls
></model-viewer>
এই কোডটি এইভাবে রেন্ডার করে:
মোশন ও ইন্টার্যাক্টিভিটি যোগ করুন
auto-rotate এবং camera-controls অ্যাট্রিবিউট মোশন এবং ব্যবহারকারীর
কন্ট্রোল প্রদান করে। শুধু এই অ্যাট্রিবিউটগুলিই যে সম্ভব তা নয়। অ্যাট্রিবিউটের সম্পূর্ণ তালিকা
দেখতে ডকুমেন্টেশন দেখুন।
<model-viewer src="shark.glb" auto-rotate camera-controls>
পোস্টার ইমেজ সহ লোড হতে দেরি হচ্ছে
সব 3D মডেল লোড হতে সময় নেয়, poster অ্যাট্রিবিউট যোগ করার
অর্থ হল মডেলটি ব্যবহার করার জন্য প্রস্তুত না হওয়া পর্যন্ত একটি ছবি দেখানো হবে।
এডিটর ব্যবহার করে এমন একটি পোস্টার ইমেজ তৈরি করা যেতে পারে
যা 3D রেন্ডারের মতো দেখতে হবে।
<model-viewer src="shark.glb" controls auto-rotate
poster="shark.jpg">
প্রতিক্রিয়াশীল ডিজাইন
এই কম্পোনেন্ট কিছু ধরনের রেসপন্সিভ ডিজাইন ম্যানেজ করে, মোবাইল ও ডেস্কটপ উভয়ের জন্য স্কেল করে। এটি কোনও পৃষ্ঠায় একাধিক ইনস্ট্যান্স ম্যানেজ করতে পারে এবং কোনও মডেল দেখা না গেলে ব্যাটারি পাওয়ার ও GPU সাইকেল সাশ্রয় করতে Intersection Observer ব্যবহার করে।
পোস্টার ইমেজ তৈরি করার জন্য আগে বর্ণনা করা এডিটর ব্যবহার করলে, <model-viewer>-এর অ্যাস্পেক্ট রেশিও বিভিন্ন স্ক্রিন সাইজের সাথে মানানসই হলেও,
সেই একটি ইমেজ 3D রেন্ডারের সাথে ম্যাচ করে।
আরও ফিচার
আরও উন্নত ফিচারের ডেমো দেখতে
<model-viewer> ডকুমেন্টেশন এক্সপ্লোর করুন।
এর মধ্যে
গ্রাউন্ড-প্রোজেক্টেড স্কাইবক্স
যোগ করা এবং
অ্যানিমেটেড টেক্সচার
ও হটস্পট
তৈরি করার সুবিধা অন্তর্ভুক্ত।