Brauzerda protseduraviy 3D Tokio shahrini yarating va o‘rganing

Procedural Tokyo nima?

Procedural Tokyo brauzerda ishlaydigan Tokioning real vaqt rejimidagi 3D modelidir. U haqiqiy binolar, yo‘llar, relyef, temiryo‘llar va geografik xususiyatlarni fasadlar, derazalar, ko‘cha jihozlari, transport, yoritish, suv, ob-havo va qushlar kabi protseduraviy detallar bilan birlashtiradi.

Loyiha Project PLATEAU, OpenStreetMap va Yaponiyaning Geofazoviy axborot boshqarmasining ochiq ma’lumotlaridan foydalanadi. Oflayn kompilyator manba yozuvlarini ixcham ikkilik tile’lar­ga aylantiradi, brauzer esa kamera yaqinidagi tile’larni oqim orqali yuklab, ularni meshga aylantiradi.

Joylashtirilgan versiyani jeantimex.github.io/tokyo manzilida sinab ko‘rishingiz mumkin. Tajriba desktop brauzerlar uchun mo‘ljallangan va mobil brauzerlarda foydalanish tavsiya etilmaydi.

Mavjud sahnalarni o‘rganing

Har bir sahna taxminan 3.4 ga 2.8 kilometr maydonni qamrab oladi. Kiritilgan hududlar:

• Tokyo: Tokyo vokzali, Marunouchi va Imperator saroyi xandaqlari.
• Shiba: Tokyo minorasi, Zojo-ji va Shiba bog‘i.
• Shibuya: Scramble chorrahasi, Shibuya vokzali va avtomagistral.
• Shinjuku: Shinjuku vokzali, osmono‘par binolar tumani, Kabukicho va Shinjuku Gyoen.
• Chiyoda: Akihabara, Kanda va Ochanomizu.
• Chuo: Tsukiji, Kachidoki, Tsukishima, Harumi, sohilbo‘yi hududlari va kanallar.
• Fujinomiya: Fuji tog‘i yaqinidagi shaharcha va 60 kilometrlik relyef foni.

PLATEAU Yaponiyaning yuzlab shaharlarini qamrab oladi, biroq mavjud tafsilot darajasi turlicha. Shahar markazlarida batafsil tom shakllari va aerofotosurat teksturalari bo‘lishi mumkin, kichik shaharchalarda esa soddaroq bino bloklaridan foydalanilishi mumkin.

Asosiy imkoniyatlar

Haqiqiy binolar va yer yuzasi

Binolarda haqiqiy konturlar, balandlik, qavatlar soni va foydalanish ma’lumotlaridan foydalaniladi. PLATEAU batafsil konstruksiyalar va tom suratlarini taqdim etgan joylarda ushbu materiallar bevosita ishlatiladi. Yaratilgan fasadlar, derazalar, balkonlar, parapetlar, tom usti jihozlari va do‘kon peshlavha tasmalari yaqin masofada qo‘shimcha tafsilot beradi.

Yer yuzasi besh metrlik balandlik modeli, aerofotosuratlar, yo‘l qoplamalari, bordyurlar, bog‘lar, o‘rmonlar va suv obyektlaridan foydalanadi. Yo‘l belgilari qator chiziqlari, zebra yo‘laklari, to‘xtash chiziqlari, strelkalar, yaponcha 止まれ yozuvlari va bo‘yalgan tezlik cheklovlarini o‘z ichiga oladi.

Jonli shahar hayoti

Transport haqiqiy yo‘l grafigi bo‘ylab harakatlanadi, chap tomondan yuradi, bir tomonlama ko‘chalar va svetoforlarga amal qiladi, chorrahalarda navbat hosil qiladi hamda avtomagistrallar va rampalardan foydalanadi. Poyezdlar haqiqiy temiryo‘l liniyalari bo‘ylab yuradi. Sahna shuningdek elektr ustunlari, simlar, ko‘cha chiroqlari, svetoforlar, avtomatlar, torii darvozalari, vokzal platformalari, piyodalar ko‘priklari, daraxtlar va to‘xtab turgan avtomobillarni o‘z ichiga oladi.

Vaqt, ob-havo va akslar

Vaqt slayderi yoki Tokioning jonli soati quyosh, oy, osmon, soyalar va ekspozitsiyani boshqaradi. Kech kirishi bilan shahar chiroqlari qorong‘ilik tushishidan oldin, shafaq paytida yoqiladi. Renderlash tizimi hajmiy bulutlar, atmosfera perspektivasi, to‘lqinlanayotgan suv, deraza akslari, yorqin peshlavhalar, faralar va Tokyo minorasi yoritilishini ham qo‘llab-quvvatlaydi.

Qushlar galasi daraxtlarga qo‘nishi va yana uchib ketishi mumkin. Fujinomiya sahnasida ixtiyoriy qo‘pol relyef foni shahar ortiga Fuji tog‘ini joylashtiradi hamda aerotasvirlar va qor qalpog‘ini o‘z ichiga oladi.

Loyihani o‘rnating va ishga tushiring

Repozitoriyni klonlang va npm yordamida bog‘liqliklarni o‘rnating:

npm install

Loyiha foydalanadigan CC0 teksturalarini yuklab oling. Bu amal bir marta bajariladi va taxminan 14 MB ma’lumotni public/textures/ ichida saqlaydi:

node tools/assets/fetch_textures.mjs

Keyin hudud uchun xom ma’lumotlarni yuklab oling. Quyidagi misol Tokyo manba ma’lumotlarini yuklab oladi:

npm run fetch -- --area=tokyo

Yuklab olingan yozuvlarni brauzer uchun tayyor tile’larga kompilyatsiya qiling:

npm run compile -- --area=tokyo

Nihoyat, ishlab chiqish serverini ishga tushiring:

npm run dev

Desktop brauzerda http://localhost:5280 manzilini oching. Kompilyatsiya qilingan shahar fayllari repozitoriyga kiritilmagan, shuning uchun har bir hudud manba ma’lumotlaridan qayta qurilishi kerak.

Ma’lumotlar quvurini tushuning

Quvur ikki asosiy bosqichdan iborat. fetch buyrug‘i manba fayllarini data/raw/<area>/ ichiga, aerotasvirlarni esa public/ortho/<area>/ ichiga yuklab oladi. compile buyrug‘i ushbu yozuvlarni public/tiles/<area>/ ichidagi oqim orqali yuklanadigan tile’larga aylantiradi.

Tanlangan hudud uchun to‘liq quvurni quyidagicha ishga tushiring:

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

Xom yuklamalar katta bo‘lishi mumkin, chunki PLATEAU bino fotosuratlarini ham o‘z ichiga oladi. README faylida Tokyo uchun taxminan 3.6 GB, Shiba uchun 3.0 GB, Shibuya uchun 1.3 GB va Fujinomiya uchun 0.2 GB ko‘rsatilgan. Kompilyatsiya hududga qarab bir necha soniyadan bir necha daqiqagacha davom etadi.

Kompilyatsiya qilingan ma’lumotlarni tekshirish va sinash

Hududning yuqoridan ko‘rinadigan oldindan ko‘rish tasvirini quyidagicha yarating:

npm run preview -- --area=tokyo

Tile’larning qayta aylanishi va yo‘l belgilaridagi bo‘shliqni tekshirish uchun loyiha testlarini ishga tushiring:

npm test

Bu tekshiruvlar, ayniqsa, relyef bilan moslashuv uchun foydalidir. Yo‘l qoplamalari, yo‘l chiziqlari va belgilar relyef mesh uchburchaklari bo‘ylab bo‘linadi, shuning uchun ular qiya yer yuzasidan yuqorida qoladi va tile chegaralaridan ichkariga botib ketmaydi.

Brauzer boshqaruvlaridan foydalaning

• Panorama qilish uchun sudrang.
• Aylantirish uchun o‘ng tugma bilan sudrang.
• Kattalashtirish yoki kichraytirish uchun sichqoncha g‘ildiragidan foydalaning.
• Harakatlanish uchun WASD tugmalaridan foydalaning.
• Tezroq harakatlanish uchun harakat paytida Shift tugmasini bosib turing.
• Kunduz va tun o‘rtasida almashish uchun N tugmasini bosing.
• Binoni ko‘rish uchun uning ustiga bosing.

Yuqori o‘ng burchakdagi Sozlamalar paneli hududlarni almashtirish hamda vaqt, transport, bulutlar, yoritish va render sifatini sozlash imkonini beradi. Sozlamalar brauzerda saqlanadi.

URL parametrlari yordamida sahna ochish

URL parametrlari muayyan ko‘rinishni ulashish yoki render konfiguratsiyasini sinash uchun foydalidir. Masalan:

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

Qo‘llab-quvvatlanadigan parametrlar:

• area=tokyo|shiba|shibuya|shinjuku|chiyoda|chuo|fujinomiya hududni tanlaydi.
• time=18.5 Tokio mahalliy vaqtini soat sifatida belgilaydi.
• night=1 tungi rejimga o‘tkazadi.
• cam=x,z,distance,azimuth,elevation kamerani belgilaydi.
• radius=900 faol ko‘rish radiusini boshqaradi.
• traffic=0 transportni o‘chiradi.
• cars=600 avtomobillar sonini o‘zgartiradi.
• birds=150 qushlar sonini o‘zgartiradi.
• clouds=0.25 bulutlar qamrovini boshqaradi.
• ortho=0 ortografik rejimni o‘chiradi.

URL parametrlari bilan ochilgan sahifa brauzerda saqlangan sozlamalarni almashtirmaydi.

Kompilyatsiya qilingan tilelar qanday ishlaydi

Mijoz hudud markazida joylashgan boshlang‘ich nuqtaga ega mahalliy metr koordinatalar tizimidan foydalanadi. X o‘qi sharqqa, y o‘qi yuqoriga, z o‘qi esa janubga yo‘nalgan. Tilelar 256 metrlik kvadratlardan iborat bo‘lib, sayt joriy ko‘rinish yaqinidagi tilelarni oqimli yuklayotganda Web Worker’larda mesh qilinadi.

Kompilyatsiya qilingan hudud quyidagi fayllarni o‘z ichiga oladi:

• manifest.json boshlang‘ich nuqta, chegaralar, tilelar ro‘yxati, relyef panjarasi, ko‘prik qoplamalari va atributsiyani saqlaydi.
• t_<x>_<z>.bin binolar, yer sirtlari, yo‘l belgilari, obyektlar, simlar va belgilar joylashgan bitta tile ma’lumotlarini saqlaydi.
• terrain.bin besh metr oraliqdagi Float32 relyef balandliklari panjarasini saqlaydi.
• roads.json yo‘l grafigi, nuqta sathlari va svetoforli chorrahalarni saqlaydi.
• rails.json va structures.json temiryo‘l liniyalari, platformalar, bostirmalar va piyodalar ko‘priklarini saqlaydi.
• backdrop.bin hudud atrofidagi ixtiyoriy qo‘pol relyefni saqlaydi.

Hudud qo‘shish yoki sozlash

PLATEAU qamrab olgan boshqa shaharni qo‘shish uchun tools/pipeline/config.mjs faylida yozuv belgilang. Hudud qayta ishlanishi kerak bo‘lgan markaziy nuqta va PLATEAU panjara kvadratlarini ko‘rsatadi. Shuningdek, u ixtiyoriy fon o‘lchami va boshlang‘ich kamera ko‘rinishini belgilashi mumkin.

Barcha pipeline skriptlari bir xil hudud parametrini qabul qiladi:

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

PLATEAU fayllari PLATEAU ma’lumotlar katalogi API’si orqali yuklanadi. Pipeline yozuvlarni gml:id bo‘yicha takrorlanishdan tozalaydi; bu Tokio datasetidagi bitta kvadrat bir nechta tuman ostida ko‘ringanda muhimdir. Shaharlar bo‘yicha qamrov farq qiladi, shu sababli batafsil qobiqlar, foto teksturalar yoki ko‘cha jihozlari mavjud bo‘lmaganda mijoz generatsiya qilingan detallar zaxira variantiga o‘tadi.

Ilg‘or texnik tafsilotlar

Relyef, yo‘llar va ko‘priklar

PLATEAU, OpenStreetMap va GSI ma’lumotlari yagona mahalliy metr panjarasiga proyeksiyalanadi. Umumiy besh metrlik balandlik panjarasi qo‘shni tilelarning chetlarida bir xil balandlikka ega bo‘lishini ta’minlaydi. Kompilyatsiya vaqtida bino asoslari relyefga nisbatan tekshiriladi va farq qayd etiladi.

Yetarli tafsilotga ega bo‘lmagan yo‘l konturlari OpenStreetMap markaziy chiziqlaridan foydalanib qatnov qismlari va trotuarlarga ajratiladi. Ko‘priklar va estakadalar alohida profillarga ega: ko‘cha ko‘priklari qirg‘oqdan qirg‘oqqacha tekislanadi, tezyurar yo‘llar qatlam bo‘yicha ko‘tariladi, rampalar esa to‘g‘ri ulanish uchun qiyalik bilan quriladi.

Yoritish va akslar

Har bir chiroq uchun alohida dinamik yorug‘lik yaratish o‘rniga ko‘cha chiroqlari va faralar yorug‘lik xaritasiga chiziladi. Ustma-ust tushgan manbalarda yorqinroq qiymat saqlanadi, chiroq balandligi haqidagi ma’lumotlar esa estakada ostidagi chiroqlar uning qoplamasini yoritib yubormasligini ta’minlaydi.

Suv akslari shaharni suv sathining pastida ikkinchi marta chizadi. To‘lqinlar natijani buzadi, bulut akslari esa ob-havo xaritasidan namuna oladi. Deraza oynalari rang buferining alpha kanalida belgilanadi va ekran fazosidagi akslar bosqichida qayta ishlanadi.

Render va unumdorlik

Renderer pmndrs postprocessing kompozitori bilan three.js’dan foydalanadi. Uning effektlariga n8ao ambient occlusion, akslar, atmosfera, bulutlar, bloom va tone mapping kiradi. Qushlar vertex shader’da joylashtiriladi, bu katta galalarga juda kam CPU vaqtini sarflash imkonini beradi.

Unumdorlikni yaxshilash uchun faol radiusni me’yorida saqlang, avtomobillar va qushlar sonini kamaytiring, bulutlarni o‘chiring yoki Sozlamalar panelida render sifatini pasaytiring. Standart oqimli rejim yaqin tilelarni yuklaydi; whole city opsiyasi mavjud barcha tilelarni yuklaydi va ancha ko‘proq xotira talab qilishi mumkin.

Kompilyatsiya qilingan saytni joylashtirish

Nashr qilmoqchi bo‘lgan hududlarni kompilyatsiya qilgach, quyidagini ishga tushiring:

npm run deploy

Bu distributivni yaratadi va dist/ katalogini repository’ning origin manbaidagi gh-pages branch’iga bitta commit sifatida majburan yuboradi. Joylashtirish ushbu kompyuterda kompilyatsiya qilingan shaharlarni o‘z ichiga oladi. README’da yettita kiritilgan hudud uchun taxminan 650 MB kerak bo‘lishi ko‘rsatilgan.

Ma’lumotlar atributsiyasi va litsenziyalash

Kod MIT litsenziyasi asosida chiqarilgan, biroq shahar ma’lumotlari asl manbalarining shartlariga bo‘ysunadi. Project PLATEAU 3D shahar modellarini, tom fotosuratlarini, ko‘priklar va ko‘cha jihozlarini taqdim etadi. GSI balandlik ma’lumotlari va aerofotosuratlarni taqdim etadi. OpenStreetMap hissadorlari ODbL asosida yo‘llar, temiryo‘llar va joylar ma’lumotlarini taqdim etadi. Poly Haven teksturalari CC0 litsenziyasiga ega, daraxtlarda MIT litsenziyasi asosidagi ez-tree ishlatiladi, atmosfera va bulut komponentlari esa MIT litsenziyasi asosidagi three-geospatial loyihasidan olingan.

Xulosa

Procedural Tokyo ommaviy geofazoviy ma’lumotlar to‘plamlari qanday qilib boy animatsiyaga ega brauzer tajribasiga aylanishi mumkinligini namoyish etadi. U bilan ishlash uchun bog‘liqliklarni o‘rnating, teksturalar va hudud ma’lumotlarini yuklab oling, ma’lumotlarni tile’lar shaklida kompilyatsiya qiling va ishlab chiqish serverini ishga tushiring. Shundan so‘ng URL parametrlari, pipeline konfiguratsiyasi, testlar va deploy buyruqlari loyihani o‘rganish hamda kengaytirishning amaliy usullarini taqdim etadi.