Portals কী?
Portals হলো ৪৭১টি তৈরি করা 3D জগতের মধ্য দিয়ে পরিচালনাহীন একটি ব্রাউজার-ভিত্তিক ভ্রমণ। ক্যামেরা পূর্বনির্ধারিত পথে চলে, একটি পোর্টালে পৌঁছায় এবং কোনো কাট বা ফেড ছাড়াই সরাসরি পরের চলমান জগতে প্রবেশ করে। আপনি ভ্রমণের দিক নিয়ন্ত্রণ করতে পারবেন না, তবে এর গতি, উপস্থাপনা, শব্দ, গ্রাফিক্স এবং জগত নির্বাচন নিয়ন্ত্রণ করতে পারবেন।
প্রকল্পটি JavaScript এবং three.js দিয়ে তৈরি। প্রতিটি জগত ব্রাউজারেই তার জ্যামিতি ও টেক্সচার তৈরি করে, আর প্লেব্যাকের সময় অডিও সংশ্লেষিত হয়। জগতগুলো কোনো বাহ্যিক 3D মডেল, টেক্সচার ছবি বা সাউন্ড ফাইল লোড করে না। প্রকল্পটি একটি স্ট্যাটিক সাইটও: এতে কোনো অ্যাকাউন্ট, অ্যাপ্লিকেশন সার্ভার বা ট্র্যাকিং সেবা প্রয়োজন হয় না।
৯ নভেম্বর ২০২৬ অনুযায়ী রিপোজিটরিটি
s8fরিলিজকে উপস্থাপন করে। ওই রিলিজে প্রায় ১.৪ মিলিয়ন লাইন JavaScript এবং ৪৭১টি জগত রয়েছে।
প্রধান বৈশিষ্ট্য
- ৪৭১টি তৈরি করা জগত: এই সংগ্রহে রয়েছে বন্যপ্রকৃতি, শহর, মহাসাগর, অভ্যন্তরীণ স্থান, আকাশ, ভিনগ্রহের পরিবেশ, প্রাগৈতিহাসিক দৃশ্য, শিল্প-অনুপ্রাণিত স্থান, সাহিত্যিক জগত, চলচ্চিত্র ও টেলিভিশন-অনুপ্রাণিত পরিবেশ, প্রাচীন বিস্ময় এবং AI-নির্ভর অভ্যন্তরীণ রসিকতা।
- নিরবচ্ছিন্ন পোর্টাল: বর্তমান জগত এবং পোর্টালের ওপারের জগত একই সঙ্গে চলে, ফলে কোনো ট্রানজিশন স্ক্রিন ছাড়াই ক্যামেরা এক জগত থেকে অন্য জগতে যেতে পারে।
- প্রসিডিউরাল অ্যাসেট: প্রচলিত জগতের অ্যাসেট হিসেবে লোড করার বদলে জ্যামিতি, টেক্সচার ও শব্দ ব্রাউজারেই তৈরি হয়।
- স্বয়ংক্রিয় ভ্রমণ: প্রতিটি জগত ক্যামেরার পথ ও স্থায়িত্ব নির্ধারণ করে। অধিকাংশ ভ্রমণ প্রায় ৪০ থেকে ৫০ সেকেন্ড স্থায়ী হয়।
- অভিযোজিত গ্রাফিক্স: Auto মোড গ্রাফিক্স কার্ডের ক্ষমতা থেকে একটি মান নির্ধারণ করে এবং মসৃণ গতি বজায় রাখতে রেন্ডারিং রেজোলিউশন সামঞ্জস্য করে।
- স্থানীয় পছন্দ: দেখা জগত, প্রিয় তালিকা এবং সেটিংস ব্রাউজার স্টোরেজে সংরক্ষিত থাকে।
- গ্যালারি ও যাত্রা: গ্যালারিতে সব জগত দেখা যায়, আর ২০টি বাছাই করা যাত্রা নির্দিষ্ট ক্রমে নির্বাচিত জগতগুলো চালায়।
- স্ট্যাটিক ডিপ্লয়মেন্ট: প্রোডাকশন বিল্ড
dist-এ সাধারণ ফাইল তৈরি করে, যা স্ট্যাটিক ওয়েব হোস্টে পরিবেশন করা যায়।
পূর্বশর্ত
আপনার Node.js ১৮ বা পরবর্তী সংস্করণ এবং Git প্রয়োজন। সরাসরি সোর্স প্রিভিউ চালাতে কোনো ইনস্টলেশন বা বিল্ড ধাপের প্রয়োজন নেই। আলাদা গ্রাফিক্স কার্ড থাকা ভালো, যদিও ফোন ও পুরোনো ল্যাপটপেও কম মানে প্রকল্পটি চালানো যায়।
আপনার Node.js সংস্করণ নিশ্চিত করুন:
node --versionফলাফল ১৮-এর আগের কোনো সংস্করণ হলে এগিয়ে যাওয়ার আগে Node.js আপডেট করুন।
সরাসরি সোর্স থেকে Portals চালান
১. রিপোজিটরি ক্লোন করুন
git clone https://github.com/emollick/ai-portals.git
cd ai-portals২. স্থানীয় সোর্স সার্ভার চালু করুন
npm startব্রাউজারে http://localhost:8000 খুলুন। এতে আগে কোনো প্যাকেজ ইনস্টল বা কম্পাইল না করেই বর্তমান সোর্স ট্রি পরিবেশন করা হবে।
সোর্স প্রিভিউতে দুটি প্রত্যাশিত সীমাবদ্ধতা রয়েছে। এর গ্যালারি নতুন যোগ করা জগত শনাক্ত করতে বা তৈরি করা বর্ণনার পৃষ্ঠা দেখাতে পারে না। প্রথমবার পরিদর্শনের সময় ব্রাউজার কনসোলে অনুপস্থিত atlas.json ফাইলের কথাও দেখাবে, কারণ এই ফাইলটি কেবল বিল্ড প্রক্রিয়ায় তৈরি হয়।
প্রোডাকশন বিল্ড তৈরি ও প্রিভিউ করুন
বিল্ডের নির্ভরতা ইনস্টল করুন, ডিপ্লয়মেন্ট প্যাকেজ তৈরি করুন এবং এর প্রিভিউ সার্ভার চালু করুন:
npm install
npm run build
npm run previewতৈরি হওয়া স্ট্যাটিক সাইটটি dist-এ লেখা হবে। এটি পরীক্ষা করতে http://localhost:8001 খুলুন।
বিল্ডটি esbuild দিয়ে প্রকল্পের স্ক্রিপ্ট মিনিফাই করে এবং ডিপ্লয়মেন্টের জন্য নির্দিষ্ট রিসোর্স তৈরি করে, যার মধ্যে রয়েছে:
- প্রতিটি জগত ও যাত্রার জন্য একটি ছোট শেয়ার-প্রিভিউ পৃষ্ঠা।
- প্রতিটি জগত ও তার বর্ণনার তালিকা থাকা একটি সাধারণ পৃষ্ঠা।
- কোন জগতগুলো নতুন তা নথিবদ্ধ করা গ্যালারি ডেটা।
- হোস্টিং কনফিগারেশন ফাইল।
s8f রিলিজ পুনরায় তৈরি করুন
বিল্ডে একটি রিলিজ স্ট্যাম্প গ্রহণ করা যায়। রিপোজিটরির নথি অনুযায়ী, ৯ নভেম্বর ২০২৬-এ নিচের কমান্ডটি চলমান s8f রিলিজের ফাইল ও বাইট হুবহু পুনরায় তৈরি করেছিল:
npm run build -- --stamp s8fডেভেলপ করার সময় সাধারণ বিল্ড ব্যবহার করুন। নির্দিষ্টভাবে রিলিজের মেটাডেটা প্রয়োজন হলে বা নথিভুক্ত রিলিজ পুনরায় তৈরি করতে চাইলে স্ট্যাম্প ব্যবহার করুন।
মৌলিক নিয়ন্ত্রণ ও ব্যবহার
Portals স্বয়ংক্রিয়ভাবে উড়ে চলা শুরু করে। শব্দ শুরুতে বন্ধ থাকে, তাই সংশ্লেষিত সাউন্ডট্র্যাক শুনতে চাইলে S চাপুন। কীবোর্ড নিয়ন্ত্রণগুলো হলো:
- Space: ভ্রমণ থামান বা আবার চালু করুন।
- Right Arrow: পরের পোর্টালের দিকে দ্রুত এগিয়ে যান।
- S: শব্দ চালু বা বন্ধ করুন।
- G: আরও স্থির ক্যামেরা ও সমতল দিগন্তের জন্য Gentle মোড চালু করুন।
- H: বর্তমান জগতটি প্রিয় হিসেবে সংরক্ষণ করুন।
- P: একটি ছবি সংরক্ষণ করুন।
- I: গ্যালারি, যাত্রা ও অনুসন্ধান ইন্টারফেস খুলুন।
- O: গ্রাফিক্স, ক্যামেরা, শিল্পশৈলী, ভ্রমণ, সঙ্গী ও দিনের সময়ের বিকল্প খুলুন।
- F: ফুলস্ক্রিন মোড চালু বা বন্ধ করুন।
মাউস সরালে স্ক্রিনের নিচে একটি নিয়ন্ত্রণ বার দেখা যায়। এতে কিবোর্ড নিয়ন্ত্রণের সঙ্গে সম্পর্কিত বোতাম, একটি Pace স্লাইডার এবং একটি Earthly to Strange স্লাইডার থাকে। সরু উইন্ডোতে স্লাইডারগুলো অপশন ইন্টারফেসে স্থানান্তরিত হয়।
প্রথমবার অনুসন্ধানের একটি কার্যকর পদ্ধতি
- সোর্স বা প্রোডাকশন প্রিভিউ চালু করুন।
- অডিও চালু করতে
Sচাপুন। - একটি সম্পূর্ণ বিশ্ব চলতে দিন, যাতে স্বাভাবিক পোর্টাল পারাপার পর্যবেক্ষণ করতে পারেন।
- ক্যামেরার নড়াচড়া অস্বস্তিকর হলে
Gচাপুন। Iদিয়ে গ্যালারি খুলে সম্পূর্ণ সংগ্রহে অনুসন্ধান বা ব্রাউজ করুন।- অস্বাভাবিক বিশ্ব কত ঘন ঘন নির্বাচিত হবে তা প্রভাবিত করতে Earthly to Strange সমন্বয় করুন।
- পছন্দের হিসেবে রাখতে চান এমন কোনো বিশ্বে পৌঁছালে
Hচাপুন।
নিরবচ্ছিন্ন পোর্টাল কীভাবে কাজ করে
একটি পারাপারের প্রায় এক সেকেন্ড পরে ইঞ্জিন পরবর্তী বিশ্ব নির্বাচন করে। রেন্ডার করা ফ্রেমগুলোর মধ্যবর্তী সময়ে এটি কয়েক মিলিসেকেন্ড করে সেই বিশ্ব তৈরি করে, তারপর সেটি দৃশ্যের বাইরে থাকা অবস্থায় তার শেডার ও টেক্সচার প্রস্তুত করে।
গন্তব্যটি কোনো স্থির প্রিভিউ নয়। একটি দ্বিতীয় ক্যামেরা প্রতি ফ্রেমে পোর্টালের খোলার মধ্যে পরবর্তী চলমান বিশ্বটি রেন্ডার করে। ক্যামেরা গেটে পৌঁছানোর কিছুক্ষণ আগে ইঞ্জিন গন্তব্যটিকে বর্তমান বিশ্বে পরিণত করে এবং উড়ে চলা অব্যাহত রাখে। প্রস্তুতি শেষ না হলে বর্তমান উড়ান ধীর হয়ে পোর্টালের সামনে অপেক্ষা করে।
বিশ্ব কীভাবে নির্বাচিত হয়
নির্বাচক সেই বিশ্বগুলোকে অগ্রাধিকার দেয় যেগুলো দর্শক এখনো দেখেননি। কোনো ভিজিটের প্রথম ডজনখানেক বিশ্বে এটি প্রকল্পের বিচারকারী এজেন্টদের কাছ থেকে সর্বোচ্চ রেটিং পাওয়া বিশ্বগুলোকে বেশি পছন্দ করে। প্রতিটি বিশ্বের 1 থেকে 5 পর্যন্ত একটি মানের স্তর রয়েছে, আর কোন অভিজ্ঞতাগুলো শুরুতে দেখা যাবে তা নির্ধারণে এই স্তরগুলো সাহায্য করে।
নির্বাচক বৈপরীত্যও খোঁজে। এটি বর্তমান পরিবেশের ধরন, উজ্জ্বলতা বা তাপমাত্রার দিক থেকে ভিন্ন কোনো গন্তব্য বেছে নেওয়ার প্রবণতা রাখে। Earthly to Strange সেটিং নির্ধারণ করে তুলনামূলক অস্বাভাবিক এন্ট্রিগুলো কত ঘন ঘন দেখা যাবে।
প্রকল্পের বিন্যাস বুঝুন
সবচেয়ে গুরুত্বপূর্ণ ফাইল ও ডিরেক্টরিগুলো হলো:
index.html: অ্যাপ্লিকেশনের পৃষ্ঠা।src/main.js: কিবোর্ড নিয়ন্ত্রণ, অপশন এবং নিচের নিয়ন্ত্রণ বার।src/core: উড়ান, পোর্টাল, বিশ্ব নির্বাচন, শব্দ এবং গ্রাফিক্স-মানের সিস্টেম।src/kit: আকাশ, পানি, ভূখণ্ড, উদ্ভিদ, প্রাণী, ভবন ও অভ্যন্তরীণ অংশের মতো পুনর্ব্যবহারযোগ্য বিশ্ব-নির্মাণ উপাদান।src/worlds: প্রতি বিশ্বের জন্য একটি মডিউল, বিশ্ব রেজিস্ট্রি এবং উদ্বোধনী হল।src/parts: পৃথক বিশ্বে ব্যবহৃত প্রধান সেট পিস।src/extras.js: রাইড, সঙ্গী এবং শিল্পশৈলীর তালিকা।src/rides,src/companionsএবংsrc/styles: ওই অতিরিক্ত উপাদানগুলোর বাস্তবায়ন।src/ui: গ্যালারি ও শেয়ারিং কোড, পাশাপাশিui.css, যা সাইটের একমাত্র স্টাইল শিট।vendor/three: বান্ডেল করা three.js লাইব্রেরি।thumbs: গ্যালারির থাম্বনেইল ছবি।design: বিল্ডে পড়া বিশ্ব-সংক্রান্ত টেক্সট এবং রিলিজ-আগমনের টেবিল।tools: বিল্ড স্ক্রিপ্ট এবং স্থানীয় সার্ভার।
বিশ্বের মডিউল কীভাবে সাজানো হয়
একটি বিশ্ব src/worlds-এর অধীনে থাকা একটি ফাইল। এর ডিফল্ট এক্সপোর্ট হলো এমন একটি অবজেক্ট, যাতে একটি build ফাংশন থাকে। বিশ্বটিকে src/worlds/index.js-এ তার শিরোনাম, ধরন এবং ক্যাপশনসহ নিবন্ধিতও করতে হবে, কারণ নির্বাচক ও গ্যালারি উভয়ই ওই তালিকা পড়ে।
build ফাংশন তিনটি অপরিহার্য উপাদান ফেরত দেয়:
- একটি three.js দৃশ্য।
- একটি ক্যামেরা পথ।
- একটি উড়ানের সময়কাল।
বেশিরভাগ বিশ্ব তাদের প্রধান সেট পিস src/parts-এর অধীনে থাকা আলাদা ফাইলে রাখে। src/kit-এর শেয়ার করা সুবিধাগুলো পুনর্ব্যবহারযোগ্য উপাদান সরবরাহ করে, ফলে প্রতিটি বিশ্বকে সাধারণ দৃশ্যপট আলাদাভাবে বাস্তবায়ন করতে হয় না।
বিশ্ব অধ্যয়ন বা সম্প্রসারণের নিরাপদ কর্মপদ্ধতি
src/worlds-এর অধীনে এমন একটি বিদ্যমান বিশ্ব বেছে নিন, যা আপনি বুঝতে চান এমন পরিবেশের ধরনের সঙ্গে সাদৃশ্যপূর্ণ।- দৃশ্যটি কীভাবে তৈরি করা হয়েছে তা দেখতে এর ইমপোর্টগুলো অনুসরণ করে
src/partsএবংsrc/kit-এ যান। - রিপোজিটরির প্রকৃত অবজেক্টের গঠন ও ক্যামেরা-পথের নিয়মাবলি জানতে এর ডিফল্ট এক্সপোর্ট এবং
buildফাংশন পরীক্ষা করুন। - প্রয়োজনীয় শিরোনাম, ধরন এবং ক্যাপশন মেটাডাটার জন্য
src/worlds/index.js-এ সংশ্লিষ্ট নিবন্ধন পরীক্ষা করুন। - দ্রুত সোর্স পরীক্ষা করতে
npm startচালান। - উৎপন্ন গ্যালারি ও শেয়ারিং রিসোর্স যাচাই করতে একটি প্রোডাকশন বিল্ড তৈরি করুন।
এই রিপোজিটরিটি অস্বাভাবিকভাবে বড়, তাই নথিবিহীন API অনুমান করা বা শূন্য থেকে একটি মডিউল তৈরি করার চেয়ে কাছাকাছি কোনো বিশ্বকে মানিয়ে নেওয়া বেশি নিরাপদ।
শব্দ ও গ্রাফিক্সের আচরণ
শব্দ সংশ্লেষণ
প্রতিটি বিশ্ব একটি ধীর কর্ড এবং কয়েকটি ঘণ্টাধ্বনি পায়। বেশিরভাগ বিশ্বে বাতাস, পানি, ঘরের আবহ বা মহাশূন্যের স্থির গুঞ্জনের মতো শান্ত পরিবেশগত শব্দও থাকে। একটি বিশ্ব উনিশটি উপলব্ধ প্রভাবের মধ্য থেকে সর্বোচ্চ তিনটি স্তর যোগ করতে পারে, যার মধ্যে বৃষ্টি, ঢেউ, পাখি এবং দূরের ঘণ্টাধ্বনি রয়েছে। ব্রাউজারের অডিও ইঞ্জিন অডিও ফাইল লোড না করে এসব শব্দ সংশ্লেষণ করে।
স্বয়ংক্রিয় গ্রাফিক্সের মান
গ্রাফিক্স Auto-তে সেট করা থাকলে Portals গ্রাফিক্স কার্ডের ভিত্তিতে উপযুক্ত মানের স্তর অনুমান করে। এরপর মসৃণ উড়ান বজায় রাখতে এটি ড্রয়িং রেজোলিউশন বাড়ায় বা কমায়। পুরোনো ল্যাপটপ বা ফোনে বেশি চাহিদাসম্পন্ন সেটিং চেষ্টা করার আগে Auto চালু রাখুন।
উন্নত পরামর্শ
অ্যাক্সেসিবিলিটির জন্য Gentle মোড ব্যবহার করুন
আরও স্থির ক্যামেরা ও সমতল দিগন্ত বজায় রাখতে G চাপুন। স্বাভাবিক ফ্লাইটে অস্বস্তি হলে এটিই প্রথম চেষ্টা করার সেটিং।
সোর্স ও বিল্ড—দুটিই পরীক্ষা করুন
দ্রুত পরিবর্তন যাচাইয়ের জন্য সোর্স সার্ভার ব্যবহার করুন, তবে ডেপ্লয় করার আগে সবসময় dist বিল্ড পরীক্ষা করুন। কিছু গ্যালারি ডেটা, বর্ণনা পৃষ্ঠা, শেয়ার প্রিভিউ এবং হোস্টিং সেটিং শুধু বিল্ড করার পরই পাওয়া যায়।
শুধু দৃশ্যের চেহারা নয়, পোর্টালের প্রস্তুতিও পরীক্ষা করুন
একটি জগত পারাপারের আগে প্রস্তুত থাকতে হবে। জগতের কোড পরিবর্তন করার সময় গন্তব্য দৃশ্যের পাশাপাশি তার পোর্টালের দিকে এগিয়ে যাওয়ার অংশটিও লক্ষ্য করুন। ভারী জেনারেশন বা শেডার প্রস্তুতির কারণে অপেক্ষার সময় ফ্লাইট ধীর হয়ে যেতে পারে।
পুনরাবৃত্তিযোগ্য ধারার জন্য জার্নি ব্যবহার করুন
Portals-এ 20টি জার্নি আছে, যেগুলো নির্দিষ্ট ক্রমে জগতগুলো চালায়। উদাহরণের মধ্যে রয়েছে One Drop of Water, যেখানে শিলাবৃষ্টি থেকে গভীর সমুদ্র পর্যন্ত যাত্রা করা হয়, এবং Zooming Out, যার শুরু একটি জীবন্ত কোষের ভেতরে। স্বাভাবিক পিকার যতটা নির্দেশিত অভিজ্ঞতা দেয়, তার চেয়ে বেশি নিয়ন্ত্রিত অভিজ্ঞতা চাইলে নির্দিষ্ট ধারাগুলো উপযোগী।
স্টোরেজ ও গোপনীয়তার সীমারেখা মেনে চলুন
অ্যাপ্লিকেশনটির কোনো ব্যাকএন্ড নেই এবং এটি কোনো অ্যাকাউন্ট, ট্র্যাকিং, পছন্দের তালিকা বা সেটিংস ডেটা সার্ভারে পাঠায় না। পছন্দের তালিকা বা দেখা-জগতের আচরণ ডিবাগ করার সময় মনে রাখবেন, এই মানগুলো ব্রাউজারেই সংরক্ষিত থাকে।
পরিবর্তন প্রকাশের আগে লাইসেন্স পর্যালোচনা করুন
রিপোজিটরিটি CC BY-NC-SA 4.0-এর অধীনে বিতরণ করা হয়। এতে স্বীকৃতি ও একই লাইসেন্স বজায় রেখে অবাণিজ্যিকভাবে শেয়ার ও পরিবর্তনের অনুমতি রয়েছে। three.js এবং কিছু সংক্ষিপ্ত ফাংশনের ক্ষেত্রে পৃথক শর্ত প্রযোজ্য। পরিবর্তিত বিল্ড পুনরায় বিতরণের আগে LICENSE এবং THIRD-PARTY-NOTICES.txt পড়ুন, বিশেষ করে README-তে অতিরিক্ত শেডার ও ইউটিলিটি-ফাংশনের উৎসের উল্লেখ রয়েছে।
উপসংহার
Portals প্রক্রিয়াগত three.js দৃশ্য, সংশ্লেষিত অডিও, অভিযোজিত গ্রাফিক্স, ব্যাকগ্রাউন্ডে জগত তৈরি এবং দ্বৈত-জগত রেন্ডারিং একত্র করে একটি নিরবচ্ছিন্ন ব্রাউজার যাত্রা তৈরি করে। npm start দিয়ে আপনি সঙ্গে সঙ্গে সোর্স অন্বেষণ করতে পারেন, npm run build দিয়ে সম্পূর্ণ ডেপ্লয়যোগ্য সাইট তৈরি করতে পারেন, এবং এর আর্কিটেকচার অধ্যয়ন বা সম্প্রসারণের সময় প্রকল্পের বিন্যাস ও বিদ্যমান জগত মডিউলগুলোকে নির্দেশিকা হিসেবে ব্যবহার করতে পারেন।