ব্রাউজারে একটি প্রক্রিয়াগত ৩ডি টোকিও তৈরি ও অন্বেষণ করুন

Procedural Tokyo কী?

Procedural Tokyo হলো ব্রাউজারে চলা Tokyo-এর একটি রিয়েল-টাইম 3D মডেল। এতে বাস্তব ভবন, রাস্তা, ভূখণ্ড, রেলপথ ও ভৌগোলিক বৈশিষ্ট্যের সঙ্গে ফ্যাসাড, জানালা, রাস্তার সরঞ্জাম, যানবাহন, আলো, পানি, আবহাওয়া ও পাখির মতো procedural বিবরণ যুক্ত করা হয়েছে।

প্রকল্পটি Project PLATEAU, OpenStreetMap এবং Geospatial Information Authority of Japan-এর উন্মুক্ত ডেটা ব্যবহার করে। একটি অফলাইন কম্পাইলার উৎস রেকর্ডগুলোকে সংক্ষিপ্ত বাইনারি টাইলসে রূপান্তর করে, আর ব্রাউজার ক্যামেরার কাছাকাছি টাইলগুলো স্ট্রিম ও মেশ করে।

হোস্ট করা সংস্করণটি jeantimex.github.io/tokyo-তে ব্যবহার করে দেখতে পারেন। অভিজ্ঞতাটি ডেস্কটপ ব্রাউজারের জন্য তৈরি এবং মোবাইল ব্রাউজারের জন্য প্রস্তাবিত নয়।

উপলভ্য দৃশ্যগুলো ঘুরে দেখুন

প্রতিটি দৃশ্য আনুমানিক 3.4 বাই 2.8 কিলোমিটার এলাকা জুড়ে। অন্তর্ভুক্ত এলাকাগুলো হলো:

• Tokyo: Tokyo Station, Marunouchi এবং Imperial Palace-এর পরিখাগুলো।
• Shiba: Tokyo Tower, Zojo-ji এবং Shiba Park।
• Shibuya: Scramble Crossing, Shibuya Station এবং এক্সপ্রেসওয়ে।
• Shinjuku: Shinjuku Station, আকাশচুম্বী ভবনের এলাকা, Kabukicho এবং Shinjuku Gyoen।
• Chiyoda: Akihabara, Kanda এবং Ochanomizu।
• Chuo: Tsukiji, Kachidoki, Tsukishima, Harumi, জলতীরবর্তী এলাকা ও খাল।
• Fujinomiya: Mount Fuji-এর কাছের একটি শহর, যার পটভূমিতে 60 কিলোমিটার বিস্তৃত ভূখণ্ড রয়েছে।

PLATEAU জাপানের শত শত শহর কভার করে, যদিও উপলভ্য বিস্তারিততার মাত্রা ভিন্ন। শহরের কেন্দ্রগুলোতে ছাদের বিস্তারিত আকৃতি ও আকাশচিত্রের টেক্সচার থাকতে পারে, আর ছোট শহরগুলোতে সরল ভবন ব্লক ব্যবহার করা হতে পারে।

প্রধান বৈশিষ্ট্য

বাস্তবসম্মত ভবন ও ভূমি

ভবনগুলোতে বাস্তব footprint, উচ্চতা, তলা ও ব্যবহারের তথ্য ব্যবহার করা হয়েছে। PLATEAU-তে বিস্তারিত ভবন কাঠামো ও ছাদের ছবি থাকলে সেগুলো সরাসরি ব্যবহার করা হয়। কাছ থেকে দেখার সময় তৈরি করা ফ্যাসাড, জানালা, বারান্দা, প্যারাপেট, ছাদের সরঞ্জাম ও দোকানের সাইন ব্যান্ড অতিরিক্ত বিস্তারিত যোগ করে।

ভূমিতে পাঁচ-মিটার উচ্চতা মডেল, আকাশচিত্র, রাস্তার পৃষ্ঠ, কার্ব, পার্ক, বন ও পানি ব্যবহার করা হয়েছে। রাস্তার চিহ্নের মধ্যে লেন লাইন, জেব্রা ক্রসিং, থামার লাইন, তীর, জাপানি 止まれ চিহ্ন এবং আঁকা গতিসীমা রয়েছে।

সজীব শহরের জীবন

যানবাহন বাস্তব সড়ক-গ্রাফ অনুসরণ করে, বাম দিকে চলে, একমুখী রাস্তা ও সংকেত মেনে চলে, মোড়ে সারিবদ্ধ হয় এবং এক্সপ্রেসওয়ে ও র‍্যাম্প ব্যবহার করে। ট্রেনগুলো বাস্তব রেলপথ ধরে চলে। দৃশ্যে ইউটিলিটি পোল, তার, রাস্তার আলো, ট্রাফিক সংকেত, ভেন্ডিং মেশিন, তোরি, স্টেশনের প্ল্যাটফর্ম, পদচারী সেতু, গাছ ও পার্ক করা গাড়িও রয়েছে।

সময়, আবহাওয়া ও প্রতিফলন

সময়ের স্লাইডার বা Tokyo-এর লাইভ ঘড়ি সূর্য, চাঁদ, আকাশ, ছায়া ও এক্সপোজার নিয়ন্ত্রণ করে। সন্ধ্যা নামলে অন্ধকার ঘনিয়ে আসার আগেই শহরের আলো জ্বলে ওঠে। রেন্ডারারটি ভলিউমেট্রিক মেঘ, বায়ুমণ্ডলীয় দৃষ্টিকোণ, ঢেউখেলানো পানি, জানালার প্রতিফলন, জ্বলজ্বলে সাইন, হেডলাইট ও Tokyo Tower-এর আলোও সমর্থন করে।

পাখির ঝাঁক গাছে বসতে পারে এবং আবার উড়ে যেতে পারে। Fujinomiya দৃশ্যে ঐচ্ছিক মোটা ভূখণ্ডের পটভূমি শহরের পেছনে Mount Fuji স্থাপন করে এবং আকাশচিত্র ও তুষারের চূড়া অন্তর্ভুক্ত করে।

প্রকল্প ইনস্টল ও চালান

রিপোজিটরি ক্লোন করে npm দিয়ে নির্ভরতাগুলো ইনস্টল করুন:

npm install

প্রকল্পে ব্যবহৃত CC0 টেক্সচার ডাউনলোড করুন। এই ধাপটি একবার প্রয়োজন এবং public/textures/-এ আনুমানিক 14 MB সংরক্ষণ করে:

node tools/assets/fetch_textures.mjs

এরপর কোনো এলাকার কাঁচা ডেটা আনুন। নিচের উদাহরণটি Tokyo-এর উৎস ডেটা ডাউনলোড করে:

npm run fetch -- --area=tokyo

ডাউনলোড করা রেকর্ডগুলোকে ব্রাউজার-উপযোগী টাইলসে কম্পাইল করুন:

npm run compile -- --area=tokyo

সবশেষে ডেভেলপমেন্ট সার্ভার চালু করুন:

npm run dev

ডেস্কটপ ব্রাউজারে http://localhost:5280 খুলুন। কম্পাইল করা শহরের ফাইলগুলো রিপোজিটরিতে কমিট করা হয় না, তাই প্রতিটি এলাকাকে তার উৎস ডেটা থেকে পুনর্নির্মাণ করতে হবে।

ডেটা পাইপলাইন বুঝুন

পাইপলাইনে দুটি প্রধান ধাপ রয়েছে। fetch কমান্ড উৎস ফাইলগুলো data/raw/<area>/-এ এবং আকাশচিত্র public/ortho/<area>/-এ ডাউনলোড করে। compile কমান্ড সেই রেকর্ডগুলোকে public/tiles/<area>/-এর অধীনে স্ট্রিমযোগ্য টাইলসে রূপান্তর করে।

নির্বাচিত এলাকার সম্পূর্ণ পাইপলাইন চালান:

npm run fetch -- --area=shibuya
npm run compile -- --area=shibuya

কাঁচা ডাউনলোড বড় হতে পারে, কারণ এতে PLATEAU ভবনের ছবি অন্তর্ভুক্ত থাকে। README-তে Tokyo-এর জন্য আনুমানিক 3.6 GB, Shiba-এর জন্য 3.0 GB, Shibuya-এর জন্য 1.3 GB এবং Fujinomiya-এর জন্য 0.2 GB উল্লেখ করা হয়েছে। এলাকা অনুযায়ী কম্পাইল করতে কয়েক সেকেন্ড থেকে কয়েক মিনিট সময় লাগে।

কম্পাইল করা ডেটা পরীক্ষা ও যাচাই করুন

কোনো এলাকার উপর থেকে দেখা প্রিভিউ তৈরি করুন:

npm run preview -- --area=tokyo

টাইল রাউন্ড ট্রিপ ও রাস্তার চিহ্নের ফাঁক যাচাই করতে প্রকল্পের পরীক্ষা চালান:

npm test

ভূখণ্ডের সামঞ্জস্য যাচাইয়ে এই পরীক্ষাগুলো বিশেষভাবে কার্যকর। রাস্তার পৃষ্ঠ, লেনের চিহ্ন ও প্রতীকগুলো ভূখণ্ডের মেশ ত্রিভুজ বরাবর ভাগ করা হয়, যাতে এগুলো ঢালু ভূমির ওপর থাকে এবং টাইলের সীমানা দিয়ে নিচে ডুবে না যায়।

ব্রাউজার নিয়ন্ত্রণ ব্যবহার করুন

• প্যান করতে টেনে আনুন।
• ঘোরাতে ডান বোতাম চেপে টেনে আনুন।
• জুম করতে মাউসের চাকা ব্যবহার করুন।
• চলাফেরা করতে WASD ব্যবহার করুন।
• দ্রুত চলার জন্য চলাফেরার সময় Shift চেপে ধরে রাখুন।
• দিন ও রাতের মধ্যে পরিবর্তন করতে N চাপুন।
• কোনো ভবন পরিদর্শন করতে সেটিতে ক্লিক করুন।

উপরের ডান কোণের Settings প্যানেল থেকে এলাকা পরিবর্তন এবং সময়, যানবাহন চলাচল, মেঘ, আলো ও রেন্ডারিংয়ের মান সমন্বয় করা যায়। সেটিংস ব্রাউজারে সংরক্ষিত হয়।

URL প্যারামিটার দিয়ে একটি দৃশ্য খুলুন

কোনো নির্দিষ্ট দৃশ্য শেয়ার করতে বা রেন্ডারিং কনফিগারেশন পরীক্ষা করতে URL প্যারামিটার উপযোগী। উদাহরণ:

https://jeantimex.github.io/tokyo/?area=shibuya&time=18.5&traffic=0

সমর্থিত প্যারামিটারগুলোর মধ্যে রয়েছে:

• area=tokyo|shiba|shibuya|shinjuku|chiyoda|chuo|fujinomiya একটি এলাকা নির্বাচন করে।
• time=18.5 টোকিওর স্থানীয় সময়ের ঘণ্টা নির্ধারণ করে।
• night=1 রাতের মোড চালু করে।
• cam=x,z,distance,azimuth,elevation ক্যামেরা নির্ধারণ করে।
• radius=900 সক্রিয় দৃশ্যের ব্যাসার্ধ নিয়ন্ত্রণ করে।
• traffic=0 যানবাহন চলাচল বন্ধ করে।
• cars=600 গাড়ির সংখ্যা পরিবর্তন করে।
• birds=150 পাখির সংখ্যা পরিবর্তন করে।
• clouds=0.25 মেঘের আচ্ছাদন নিয়ন্ত্রণ করে।
• ortho=0 অরথোগ্রাফিক মোড বন্ধ করে।

URL প্যারামিটার দিয়ে খোলা কোনো পৃষ্ঠা সংরক্ষিত ব্রাউজার সেটিংসের ওপর লিখে দেয় না।

কম্পাইল করা টাইল কীভাবে কাজ করে

ক্লায়েন্টটি এলাকার কেন্দ্রকে মূলবিন্দু ধরে স্থানীয় মিটার-ভিত্তিক স্থানাঙ্ক ব্যবস্থা ব্যবহার করে। x-অক্ষ পূর্বদিকে, y-অক্ষ ওপরের দিকে এবং z-অক্ষ দক্ষিণদিকে নির্দেশ করে। টাইলগুলো ২৫৬ মিটারের বর্গক্ষেত্র এবং সাইটটি বর্তমান দৃশ্যের কাছাকাছি টাইল স্ট্রিম করার সময় Web Worker-এ এগুলো মেশ করা হয়।

একটি কম্পাইল করা এলাকায় নিম্নলিখিত ফাইল থাকে:

• manifest.json-এ মূলবিন্দু, সীমা, টাইলের তালিকা, ভূখণ্ডের গ্রিড, সেতুর ডেক এবং অ্যাট্রিবিউশন সংরক্ষিত থাকে।
• t_<x>_<z>.bin-এ ভবন, ভূমির পৃষ্ঠ, সড়কের চিহ্ন, বিভিন্ন উপকরণ, তার এবং সাইনবোর্ডের একটি টাইল সংরক্ষিত থাকে।
• terrain.bin-এ পাঁচ মিটার ব্যবধানে Float32 ভূখণ্ডের উচ্চতার গ্রিড সংরক্ষিত থাকে।
• roads.json-এ সড়কের গ্রাফ, বিন্দুর উচ্চতা এবং সিগন্যালযুক্ত সংযোগস্থল সংরক্ষিত থাকে।
• rails.json এবং structures.json-এ রেলপথ, প্ল্যাটফর্ম, ছাউনি এবং পদচারী সেতু সংরক্ষিত থাকে।
• backdrop.bin-এ একটি এলাকাকে ঘিরে থাকা ঐচ্ছিক মোটা-রেজোলিউশনের ভূখণ্ড সংরক্ষিত থাকে।

একটি এলাকা যোগ বা কনফিগার করুন

আরেকটি PLATEAU-আচ্ছাদিত শহর যোগ করতে tools/pipeline/config.mjs-এ একটি এন্ট্রি সংজ্ঞায়িত করুন। একটি এলাকায় কেন্দ্রবিন্দু এবং প্রক্রিয়াকরণের জন্য PLATEAU গ্রিডের বর্গগুলো নির্দিষ্ট করা হয়। এতে ঐচ্ছিক ব্যাকড্রপের আকার এবং প্রারম্ভিক ক্যামেরা দৃশ্যও নির্ধারণ করা যায়।

সব পাইপলাইন স্ক্রিপ্ট একই এলাকার অপশন গ্রহণ করে:

npm run fetch -- --area=my-area
npm run compile -- --area=my-area
npm run preview -- --area=my-area

PLATEAU ফাইলগুলো PLATEAU ডেটা ক্যাটালগ API-এর মাধ্যমে সংগ্রহ করা হয়। পাইপলাইনটি gml:id অনুযায়ী রেকর্ডের ডুপ্লিকেট বাদ দেয়, যা গুরুত্বপূর্ণ, কারণ টোকিওর কোনো ডেটাসেটের বর্গ একাধিক ওয়ার্ডের অধীনে থাকতে পারে। শহরভেদে কভারেজ আলাদা, তাই বিস্তারিত শেল, ছবির টেক্সচার বা রাস্তার আসবাব পাওয়া না গেলে ক্লায়েন্টটি তৈরি করা ডিটেইলে ফিরে যায়।

উন্নত প্রযুক্তিগত বিবরণ

ভূখণ্ড, সড়ক ও সেতু

PLATEAU, OpenStreetMap এবং GSI-এর ডেটা একটি স্থানীয় মিটার-ভিত্তিক গ্রিডে প্রজেক্ট করা হয়। একটি অভিন্ন পাঁচ মিটারের উচ্চতা গ্রিড প্রতিবেশী টাইলগুলোর প্রান্তে একই উচ্চতা নিশ্চিত করে। কম্পাইল করার সময় ভবনের ভিত্তি ভূখণ্ডের সঙ্গে মিলিয়ে দেখা হয় এবং পার্থক্যটি লগ করা হয়।

যেসব সড়কের আউটলাইনে বিস্তারিত তথ্য নেই, সেগুলো OpenStreetMap-এর কেন্দ্ররেখা ব্যবহার করে গাড়ি চলাচলের পথ ও ফুটপাথে ভাগ করা হয়। সেতু ও উড়ালপথ আলাদা প্রোফাইল পায়: সড়ক সেতুগুলো দুই পাড়ের মধ্যে সমতল করা হয়, এক্সপ্রেসওয়েগুলো স্তর অনুযায়ী উঁচু করা হয় এবং সংযোগ সঠিকভাবে স্থাপনের জন্য র‌্যাম্পের ঢাল নির্ধারণ করা হয়।

আলো ও প্রতিফলন

প্রতিটি বাতির জন্য আলাদা ডায়নামিক আলো তৈরি না করে, রাস্তার বাতি ও হেডলাইটগুলো একটি লাইট ম্যাপে আঁকা হয়। একাধিক উৎসের ওভারল্যাপে উজ্জ্বল মানটি রাখা হয়, আর বাতির উচ্চতার তথ্য উড়ালপথের নিচের আলো যাতে তার ডেক আলোকিত না করে তা নিশ্চিত করে।

জলের প্রতিফলনে শহরটিকে জলপৃষ্ঠের নিচে দ্বিতীয়বার আঁকা হয়। ঢেউয়ের কারণে ফলাফল বিকৃত হয় এবং মেঘের প্রতিফলন আবহাওয়ার ম্যাপ থেকে নমুনা নেয়। জানালার কাচের ফলকগুলো কালার বাফারের alpha চ্যানেলে চিহ্নিত করা হয় এবং screen-space reflection পাসে প্রক্রিয়া করা হয়।

রেন্ডারিং ও পারফরম্যান্স

রেন্ডারারটি pmndrs-এর postprocessing কম্পোজারের সঙ্গে three.js ব্যবহার করে। এর প্রভাবগুলোর মধ্যে রয়েছে n8ao ambient occlusion, প্রতিফলন, বায়ুমণ্ডল, মেঘ, bloom এবং tone mapping। ভার্টেক্স শেডারে পাখিদের অবস্থান নির্ধারণ করা হয়, ফলে খুব কম CPU সময়ে বড় ঝাঁক ব্যবহার করা যায়।

আরও ভালো পারফরম্যান্সের জন্য সক্রিয় ব্যাসার্ধ মাঝারি রাখুন, গাড়ি ও পাখির সংখ্যা কমান, মেঘ বন্ধ করুন অথবা Settings প্যানেলে রেন্ডারিংয়ের মান কমান। ডিফল্ট স্ট্রিমিং মোড কাছাকাছি টাইল লোড করে; whole city অপশনটি সব উপলভ্য টাইল লোড করে এবং উল্লেখযোগ্যভাবে বেশি মেমরি প্রয়োজন হতে পারে।

কম্পাইল করা সাইট ডিপ্লয় করুন

প্রকাশ করতে চান এমন এলাকাগুলো কম্পাইল করার পর চালান:

npm run deploy

এটি ডিস্ট্রিবিউশন তৈরি করে এবং রিপোজিটরির origin-এর gh-pages ব্রাঞ্চে dist/-কে একক কমিট হিসেবে force-push করে। ওই মেশিনে কম্পাইল করা শহরগুলোই ডিপ্লয়মেন্টে অন্তর্ভুক্ত হবে। README-তে অন্তর্ভুক্ত সাতটি এলাকার জন্য আনুমানিক ৬৫০ MB স্থান লাগবে বলে উল্লেখ করা হয়েছে।

ডেটা অ্যাট্রিবিউশন ও লাইসেন্সিং

কোডটি MIT লাইসেন্সের অধীনে প্রকাশিত, তবে শহরের ডেটা এখনো এর মূল উৎসগুলোর শর্তাধীন। Project PLATEAU 3D শহর মডেল, ছাদের ছবি, সেতু এবং রাস্তার আসবাব সরবরাহ করে। GSI উচ্চতা-সংক্রান্ত ডেটা ও আকাশচিত্র সরবরাহ করে। OpenStreetMap-এর অবদানকারীরা ODbL-এর অধীনে রাস্তা, রেলপথ ও স্থানসমূহের ডেটা সরবরাহ করেন। Poly Haven-এর টেক্সচারগুলো CC0 লাইসেন্সের অধীনে, গাছগুলো MIT লাইসেন্সের অধীনে ez-tree ব্যবহার করে, এবং বায়ুমণ্ডল ও মেঘের উপাদানগুলো MIT লাইসেন্সের অধীনে three-geospatial থেকে এসেছে।

উপসংহার

Procedural Tokyo দেখায়, কীভাবে উন্মুক্ত জিওস্পেশিয়াল ডেটাসেটকে সমৃদ্ধ অ্যানিমেশনসমৃদ্ধ ব্রাউজার অভিজ্ঞতায় রূপ দেওয়া যায়। এটি ব্যবহার করতে নির্ভরতাগুলো ইনস্টল করুন, টেক্সচার ও এলাকার ডেটা ডাউনলোড করুন, ডেটাকে টাইলসে কম্পাইল করুন এবং ডেভেলপমেন্ট সার্ভার চালু করুন। এরপর URL প্যারামিটার, পাইপলাইন কনফিগারেশন, পরীক্ষা এবং ডিপ্লয়মেন্ট কমান্ডগুলো প্রকল্পটি অন্বেষণ ও সম্প্রসারণের বাস্তব উপায় প্রদান করে।