براؤزر میں ایک طریقہ کار سے تیار کردہ 3D ٹوکیو بنائیں اور دریافت کریں

Procedural Tokyo کیا ہے؟

Procedural Tokyo، Tokyo کا ایک حقیقی وقت میں چلنے والا 3D ماڈل ہے جو براؤزر میں چلتا ہے۔ یہ حقیقی عمارتوں، سڑکوں، زمین، ریلوے اور جغرافیائی خصوصیات کو طریقہ کار سے تیار کردہ تفصیلات، جیسے اگواڑے، کھڑکیاں، سڑک کا فرنیچر، ٹریفک، روشنی، پانی، موسم اور پرندوں کے ساتھ یکجا کرتا ہے۔

یہ منصوبہ 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 جاپان کے سینکڑوں شہروں کا احاطہ کرتا ہے، اگرچہ دستیاب تفصیل کی سطح مختلف ہوتی ہے۔ شہری مراکز میں چھتوں کی تفصیلی شکلیں اور فضائی تصاویر کی ساختیں شامل ہو سکتی ہیں، جبکہ چھوٹے قصبوں میں عمارتوں کے سادہ بلاکس استعمال کیے جا سکتے ہیں۔

اہم خصوصیات

حقیقت سے قریب عمارتیں اور زمین

عمارتوں میں حقیقی نقشے، اونچائیاں، منزلوں کی تعداد اور استعمال سے متعلق معلومات استعمال ہوتی ہیں۔ جہاں PLATEAU تفصیلی خول اور چھتوں کی تصاویر فراہم کرتا ہے، وہاں ان اثاثوں کو براہ راست استعمال کیا جاتا ہے۔ تیار کردہ اگواڑے، کھڑکیاں، بالکونیاں، منڈیریں، چھتوں کا سامان اور دکانوں کے سائن بورڈ قریب سے دیکھنے پر مزید تفصیل فراہم کرتے ہیں۔

زمین کے لیے پانچ میٹر کا بلندی ماڈل، فضائی تصاویر، سڑکوں کی سطحیں، فٹ پاتھ کے کنارے، پارک، جنگلات اور پانی استعمال ہوتے ہیں۔ سڑک کی نشانات میں لین کی لکیریں، زیبرا کراسنگ، اسٹاپ لائنیں، تیر، جاپانی 止まれ کے نشانات اور پینٹ کی گئی رفتار کی حدود شامل ہیں۔

متحرک شہری زندگی

ٹریفک حقیقی سڑکوں کے گراف کی پیروی کرتی ہے، بائیں جانب چلتی ہے، یک طرفہ سڑکوں اور سگنلز کی پابندی کرتی ہے، چوراہوں پر قطار بناتی ہے اور ایکسپریس ویز اور ریمپس استعمال کرتی ہے۔ ٹرینیں حقیقی ریلوے لائنوں پر چلتی ہیں۔ منظر میں بجلی کے کھمبے، تاریں، اسٹریٹ لائٹس، ٹریفک سگنلز، وینڈنگ مشینیں، توری، اسٹیشن پلیٹ فارم، پیدل پل، درخت اور کھڑی ہوئی گاڑیاں بھی شامل ہیں۔

وقت، موسم اور انعکاسات

وقت کا سلائیڈر یا Tokyo کی لائیو گھڑی سورج، چاند، آسمان، سائے اور ایکسپوژر کو کنٹرول کرتی ہے۔ شام ہوتے ہی شہر کی روشنیاں فعال ہو جاتی ہیں، پھر شفق کے دوران اندھیرا چھا جاتا ہے۔ رینڈرر حجمی بادلوں، فضائی تناظر، لہردار پانی، کھڑکیوں کے انعکاسات، روشن سائن بورڈز، ہیڈلائٹس اور Tokyo Tower کی روشنی کو بھی سپورٹ کرتا ہے۔

پرندوں کے غول درختوں پر اتر سکتے ہیں اور دوبارہ اڑ سکتے ہیں۔ Fujinomiya کے منظر میں اختیاری کم تفصیل والا زمینی پس منظر Mount Fuji کو قصبے کے پیچھے دکھاتا ہے اور اس میں فضائی تصاویر اور برف سے ڈھکی چوٹی شامل ہے۔

منصوبہ انسٹال اور چلائیں

ریپوزٹری کلون کریں اور npm کے ذریعے اس کی انحصاری پیکیجز انسٹال کریں:

npm install

منصوبے میں استعمال ہونے والی CC0 ساختیں ڈاؤن لوڈ کریں۔ یہ مرحلہ ایک بار ضروری ہے اور تقریباً 14 MB ڈیٹا public/textures/ میں محفوظ کرتا ہے:

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 پیرامیٹرز کے ساتھ کھولا گیا صفحہ براؤزر میں محفوظ ترتیبات کو اوور رائٹ نہیں کرتا۔

Compiled Tiles کیسے کام کرتے ہیں

کلائنٹ مقامی میٹر کوآرڈینیٹ سسٹم استعمال کرتا ہے، جس کا نقطۂ آغاز علاقے کا مرکز ہے۔ x-axis مشرق، y-axis اوپر، اور z-axis جنوب کی سمت ہوتا ہے۔ ٹائلیں 256 میٹر کے مربع ہیں اور Web Workers میں ان کا mesh تیار کیا جاتا ہے، جبکہ سائٹ موجودہ منظر کے قریب ٹائلیں stream کرتی ہے۔

ایک compiled area میں درج ذیل فائلیں شامل ہوتی ہیں:

• manifest.json نقطۂ آغاز، حدود، ٹائلوں کی فہرست، terrain grid، پلوں کے ڈیک اور attribution محفوظ کرتا ہے۔
• t_<x>_<z>.bin عمارتوں، زمینی سطحوں، سڑک کے رنگ، اشیا، تاروں اور سائنز کی ایک ٹائل محفوظ کرتا ہے۔
• terrain.bin پانچ میٹر کے وقفے پر Float32 terrain height grid محفوظ کرتا ہے۔
• roads.json سڑکوں کا گراف، پوائنٹ لیولز اور سگنل والے چوراہے محفوظ کرتا ہے۔
• rails.json اور structures.json ریلوے لائنیں، پلیٹ فارم، چھتریاں اور پیدل پل محفوظ کرتے ہیں۔
• backdrop.bin کسی علاقے کے گرد موجود اختیاری کم تفصیلی terrain محفوظ کرتا ہے۔

علاقہ شامل یا ترتیب دیں

کسی دوسرے PLATEAU-covered شہر کو شامل کرنے کے لیے tools/pipeline/config.mjs میں ایک اندراج متعین کریں۔ ایک علاقے میں مرکزی نقطہ اور process کرنے کے لیے PLATEAU grid squares متعین کیے جاتے ہیں۔ اس میں اختیاری backdrop size اور ابتدائی camera view بھی شامل کیے جا سکتے ہیں۔

تمام pipeline scripts ایک ہی area option قبول کرتی ہیں:

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

PLATEAU فائلیں PLATEAU data catalogue API کے ذریعے حاصل کی جاتی ہیں۔ pipeline ریکارڈز کو gml:id کے ذریعے منفرد بناتی ہے، جو اس وقت اہم ہے جب Tokyo dataset square ایک سے زیادہ ward کے تحت ظاہر ہو۔ شہروں کے درمیان coverage مختلف ہوتی ہے، اس لیے تفصیلی shells، photo textures یا street furniture دستیاب نہ ہونے پر کلائنٹ generated detail استعمال کرتا ہے۔

اعلیٰ تکنیکی تفصیلات

Terrain، سڑکیں اور پل

PLATEAU، OpenStreetMap اور GSI ڈیٹا کو ایک ہی مقامی میٹر grid میں project کیا جاتا ہے۔ پانچ میٹر کا مشترکہ elevation grid پڑوسی ٹائلوں کے کناروں پر یکساں بلندی فراہم کرتا ہے۔ compilation کے دوران عمارتوں کی بنیادوں کو terrain کے مقابل جانچا جاتا ہے اور فرق log کیا جاتا ہے۔

جن سڑکوں کے outlines میں تفصیل موجود نہ ہو، انہیں OpenStreetMap centrelines استعمال کرتے ہوئے carriageways اور sidewalks میں تقسیم کیا جاتا ہے۔ پلوں اور flyovers کو الگ profiles دیے جاتے ہیں: street bridges کو ایک کنارے سے دوسرے کنارے تک level کیا جاتا ہے، expressways کو layer کے مطابق بلند کیا جاتا ہے، اور ramps کو درست طور پر ملانے کے لیے graded کیا جاتا ہے۔

روشنی اور انعکاسات

ہر lamp کے لیے الگ dynamic light بنانے کے بجائے street lamps اور headlights کو light map میں draw کیا جاتا ہے۔ ایک دوسرے پر آنے والے sources میں زیادہ روشن value برقرار رہتی ہے، جبکہ lamp height data flyover کے نیچے کی lights کو اس کے deck کو روشن کرنے سے روکتا ہے۔

Water reflections شہر کو پانی کی سطح کے نیچے دوسری مرتبہ draw کرتے ہیں۔ لہریں نتیجے کو distort کرتی ہیں، اور cloud reflections weather map سے sample کیے جاتے ہیں۔ Window panes کو colour buffer کے alpha channel میں نشان زد کیا جاتا ہے اور screen-space reflection pass میں process کیا جاتا ہے۔

رینڈرنگ اور کارکردگی

Renderer تین.js کو pmndrs postprocessing composer کے ساتھ استعمال کرتا ہے۔ اس کے effects میں n8ao ambient occlusion، reflections، atmosphere، clouds، bloom اور tone mapping شامل ہیں۔ Birds کو vertex shader میں position کیا جاتا ہے، جس سے بڑے جھنڈ بہت کم CPU time استعمال کرتے ہیں۔

بہتر کارکردگی کے لیے active radius کو معتدل رکھیں، گاڑیوں اور پرندوں کی تعداد کم کریں، clouds غیر فعال کریں، یا Settings پینل میں rendering quality کم کریں۔ پہلے سے طے شدہ streaming mode قریبی ٹائلیں load کرتا ہے؛ whole city option تمام دستیاب ٹائلیں load کرتا ہے اور اس کے لیے نمایاں طور پر زیادہ memory درکار ہو سکتی ہے۔

Compiled Site تعینات کریں

جن علاقوں کو publish کرنا ہو انہیں compile کرنے کے بعد چلائیں:

npm run deploy

یہ distribution build کرتا ہے اور repository کے origin کی gh-pages branch پر dist/ کو single commit کے طور پر force-push کرتا ہے۔ deployment میں وہی شہر شامل ہوتے ہیں جو اس machine پر compile کیے گئے ہوں۔ README میں سات شامل علاقوں کے لیے تقریباً 650 MB کا اندازہ دیا گیا ہے۔

Data Attribution اور Licensing

کوڈ MIT لائسنس کے تحت جاری کیا گیا ہے، لیکن شہر کا ڈیٹا اب بھی اس کے اصل ذرائع کی شرائط کے تابع ہے۔ Project PLATEAU تھری ڈی سٹی ماڈلز، چھتوں کی تصاویر، پل اور سڑکوں کا فرنیچر فراہم کرتا ہے۔ GSI بلندی کا ڈیٹا اور فضائی فوٹوگرافی فراہم کرتا ہے۔ OpenStreetMap کے معاونین ODbL کے تحت سڑکیں، ریلوے اور مقامات فراہم کرتے ہیں۔ Poly Haven کی ٹیکسچرز CC0 کے تحت ہیں، درخت MIT کے تحت ez-tree استعمال کرتے ہیں، جبکہ فضا اور بادلوں کے اجزا MIT کے تحت three-geospatial سے حاصل کیے گئے ہیں۔

نتیجہ

Procedural Tokyo یہ دکھاتا ہے کہ عوامی جغرافیائی ڈیٹا سیٹس کس طرح براؤزر میں ایک بھرپور متحرک تجربے میں تبدیل ہو سکتے ہیں۔ اسے استعمال کرنے کے لیے انحصارات انسٹال کریں، ٹیکسچرز اور علاقے کا ڈیٹا ڈاؤن لوڈ کریں، ڈیٹا کو ٹائلز میں مرتب کریں، اور ڈیولپمنٹ سرور شروع کریں۔ اس کے بعد URL پیرامیٹرز، پائپ لائن کی تشکیل، ٹیسٹس اور تعیناتی کے کمانڈز پروجیکٹ کو دریافت کرنے اور وسعت دینے کے عملی طریقے فراہم کرتے ہیں۔