Jenga na Chunguza Tokyo ya 3D Inayozalishwa Kiutaratibu Kwenye Kivinjari

Procedural Tokyo ni Nini?

Procedural Tokyo ni muundo wa 3D wa Tokyo unaofanya kazi kwa wakati halisi ndani ya kivinjari. Unachanganya majengo halisi, barabara, mandhari, reli na vipengele vya kijiografia pamoja na maelezo yanayotengenezwa kiutaratibu kama vile nyuso za majengo, madirisha, samani za barabarani, msongamano wa magari, mwangaza, maji, hali ya hewa na ndege.

Mradi huu hutumia data ya umma kutoka Project PLATEAU, OpenStreetMap na Mamlaka ya Taarifa za Kijiografia ya Japani. Kikompaili cha nje ya mtandao hubadilisha rekodi chanzi kuwa vigae vidogo vya binary, huku kivinjari kikisambaza na kuunda meshes za vigae vilivyo karibu na kamera.

Unaweza kujaribu toleo linalopangishwa kwenye jeantimex.github.io/tokyo. Uzoefu huu umeundwa kwa vivinjari vya kompyuta na haupendekezwi kwa vivinjari vya simu.

Chunguza Mandhari Zinazopatikana

Kila mandhari inashughulikia eneo la takriban kilomita 3.4 kwa 2.8. Maeneo yaliyojumuishwa ni:

• Tokyo: Stesheni ya Tokyo, Marunouchi na mifereji ya Jumba la Kifalme.
• Shiba: Mnara wa Tokyo, Zojo-ji na Bustani ya Shiba.
• Shibuya: Makutano ya Scramble, Stesheni ya Shibuya na barabara kuu ya mwendokasi.
• Shinjuku: Stesheni ya Shinjuku, wilaya ya majengo marefu, Kabukicho na Shinjuku Gyoen.
• Chiyoda: Akihabara, Kanda na Ochanomizu.
• Chuo: Tsukiji, Kachidoki, Tsukishima, Harumi, maeneo ya ufukweni na mifereji.
• Fujinomiya: Mji ulio karibu na Mlima Fuji wenye mandhari ya nyuma ya kilomita 60.

PLATEAU inashughulikia mamia ya miji ya Japani, ingawa kiwango cha maelezo kinachopatikana hutofautiana. Vituo vya miji vinaweza kujumuisha maumbo ya kina ya paa na maumbo ya picha za angani, huku miji midogo ikitumia miundo rahisi zaidi ya majengo.

Vipengele Muhimu

Majengo na Ardhi Halisi

Majengo hutumia mipaka, urefu, idadi ya ghorofa na taarifa za matumizi halisi. Pale PLATEAU inapotoa magamba ya kina ya majengo na picha za paa kutoka angani, rasilimali hizo hutumiwa moja kwa moja. Nyuso za majengo, madirisha, roshani, parapeti, vifaa vya paa na mikanda ya mabango ya maduka inayozalishwa huongeza maelezo ukiwa karibu.

Ardhi hutumia modeli ya mwinuko ya mita tano, picha za angani, nyuso za barabara, kingo za barabara, bustani, misitu na maji. Alama za barabarani zinajumuisha mistari ya njia, vivuko vya pundamilia, mistari ya kusimama, mishale, alama za Kijapani za 止まれ na vikomo vya mwendo vilivyopakwa.

Maisha ya Jiji Yanayohuishwa

Magari hufuata mtandao halisi wa barabara, huendesha upande wa kushoto, huzingatia barabara za mwelekeo mmoja na taa za kuongozea magari, hupanga foleni kwenye makutano na hutumia barabara kuu za mwendokasi pamoja na njia za kuingia na kutoka. Treni huenda kwenye njia halisi za reli. Mandhari hii pia inajumuisha nguzo za huduma, nyaya, taa za barabarani, taa za kuongozea magari, mashine za kuuza, torii, majukwaa ya stesheni, madaraja ya watembea kwa miguu, miti na magari yaliyoegeshwa.

Muda, Hali ya Hewa na Mwangaza wa Tafakari

Kitelezi cha muda au saa ya moja kwa moja ya Tokyo hudhibiti jua, mwezi, anga, vivuli na mwangaza wa picha. Jioni inapowadia, taa za jiji huwashwa kabla ya giza kuingia kupitia machweo. Kiunda picha pia kinaunga mkono mawingu yenye ujazo, mwonekano wa angahewa, maji yenye mawimbi, tafakari kwenye madirisha, mabango yanayong'aa, taa za mbele za magari na mwangaza wa Mnara wa Tokyo.

Makundi ya ndege yanaweza kutua kwenye miti na kuruka tena. Katika mandhari ya Fujinomiya, mandhari ya nyuma ya ardhi yenye maelezo ya wastani huweka Mlima Fuji nyuma ya mji na inajumuisha picha za angani pamoja na kilele chenye theluji.

Sakinisha na Endesha Mradi

Fanya kloni ya hazina na usakinishe vitegemezi vyake kwa kutumia npm:

npm install

Pakua maumbo ya CC0 yanayotumiwa na mradi. Hatua hii inahitajika mara moja na huhifadhi takriban MB 14 kwenye public/textures/:

node tools/assets/fetch_textures.mjs

Kisha, leta data ghafi ya eneo. Mfano unaofuata hupakua data chanzi ya Tokyo:

npm run fetch -- --area=tokyo

Kompaila rekodi zilizopakuliwa kuwa vigae vilivyo tayari kwa kivinjari:

npm run compile -- --area=tokyo

Hatimaye, anzisha seva ya usanidi:

npm run dev

Fungua http://localhost:5280 katika kivinjari cha kompyuta. Faili za jiji zilizokompailiwa hazijahifadhiwa kwenye hazina, kwa hiyo kila eneo lazima lijengwe upya kutoka kwenye data yake chanzi.

Elewa Mchakato wa Data

Mchakato huu una hatua kuu mbili. Amri ya fetch hupakua faili chanzi kwenye data/raw/<area>/ na picha za angani kwenye public/ortho/<area>/. Amri ya compile hubadilisha rekodi hizo kuwa vigae vinavyosambazwa kwenye public/tiles/<area>/.

Endesha mchakato kamili kwa eneo lililochaguliwa kwa:

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

Upakuaji ghafi unaweza kuwa mkubwa kwa sababu picha za majengo za PLATEAU zimejumuishwa. README inaorodhesha takriban GB 3.6 kwa Tokyo, GB 3.0 kwa Shiba, GB 1.3 kwa Shibuya na GB 0.2 kwa Fujinomiya. Ukusanyaji huchukua kutoka sekunde chache hadi dakika kadhaa kulingana na eneo.

Kagua na Jaribu Data Iliyokompailiwa

Unda mwonekano wa eneo kutoka juu kwa:

npm run preview -- --area=tokyo

Endesha majaribio ya mradi ili kukagua mizunguko ya vigae na uwazi wa alama za barabarani:

npm test

Ukaguzi huu ni muhimu hasa kwa upangaji wa ardhi. Nyuso za barabara, alama za njia na ishara hugawanywa kando ya pembetatu za mesh ya ardhi ili zibaki juu ya ardhi yenye mteremko na zisisaidie ndani ya mipaka ya vigae.

Tumia Vidhibiti vya Kivinjari

• Buruta ili kusogeza mwonekano.
• Buruta kwa kitufe cha kulia ili kuzungusha.
• Tumia gurudumu la kipanya kukuza.
• Tumia WASD kusogea.
• Shikilia Shift unaposogea ili kusafiri kwa kasi zaidi.
• Bonyeza N kubadilisha kati ya mchana na usiku.
• Bofya jengo kulikagua.

Kidirisha cha Mipangilio katika kona ya juu kulia hukuruhusu kubadilisha maeneo na kurekebisha muda, msongamano wa magari, mawingu, mwangaza na ubora wa uonyeshaji. Mipangilio huhifadhiwa kwenye kivinjari.

Fungua Mandhari kwa kutumia Vigezo vya URL

Vigezo vya URL vinafaa kwa kushiriki mwonekano fulani au kujaribu usanidi wa uonyeshaji. Kwa mfano:

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

Vigezo vinavyotumika ni pamoja na:

• area=tokyo|shiba|shibuya|shinjuku|chiyoda|chuo|fujinomiya huchagua eneo.
• time=18.5 huweka saa ya eneo la Tokyo.
• night=1 hubadilisha hadi hali ya usiku.
• cam=x,z,distance,azimuth,elevation huweka kamera.
• radius=900 hudhibiti eneo la mwonekano linalotumika.
• traffic=0 huzima msongamano wa magari.
• cars=600 hubadilisha idadi ya magari.
• birds=150 hubadilisha idadi ya ndege.
• clouds=0.25 hudhibiti kiwango cha mawingu.
• ortho=0 huzima hali ya orthografia.

Ukurasa uliofunguliwa kwa kutumia vigezo vya URL hauandiki upya mipangilio iliyohifadhiwa kwenye kivinjari.

Jinsi Vigae Vilivyokusanywa Vinavyofanya Kazi

Mteja hutumia mfumo wa ndani wa kuratibu kwa mita, wenye asili katikati ya eneo. Mhimili wa x unaelekea mashariki, mhimili wa y unaelekea juu, na mhimili wa z unaelekea kusini. Vigae ni miraba ya mita 256 na huunganishwa katika Web Workers wakati tovuti inatiririsha vigae vilivyo karibu na mwonekano wa sasa.

Eneo lililokusanywa lina faili zifuatazo:

• manifest.json huhifadhi asili, mipaka, orodha ya vigae, gridi ya ardhi, sitaha za madaraja na maelezo ya chanzo.
• t_<x>_<z>.bin huhifadhi kigae kimoja cha majengo, nyuso za ardhi, rangi za barabara, vitu, nyaya na alama.
• terrain.bin huhifadhi gridi ya urefu wa ardhi ya Float32 yenye nafasi ya mita tano.
• roads.json huhifadhi grafu ya barabara, viwango vya pointi na makutano yenye taa za kuongozea.
• rails.json na structures.json huhifadhi njia za reli, majukwaa, mapaa na madaraja ya waenda kwa miguu.
• backdrop.bin huhifadhi ardhi ya hiari yenye maelezo ya jumla inayozunguka eneo.

Ongeza au Sanidi Eneo

Ili kuongeza jiji lingine lililofunikwa na PLATEAU, fafanua ingizo katika tools/pipeline/config.mjs. Eneo hutaja sehemu ya katikati na miraba ya gridi ya PLATEAU ya kuchakatwa. Pia linaweza kufafanua ukubwa wa hiari wa mandharinyuma na mwonekano wa kamera wa kuanzia.

Hati zote za pipeline zinakubali chaguo lilelile la eneo:

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

Faili za PLATEAU hupakuliwa kupitia API ya katalogi ya data ya PLATEAU. Pipeline huondoa nakala kwa kutumia gml:id, jambo muhimu wakati mraba wa seti ya data ya Tokyo unaonekana chini ya kata zaidi ya moja. Ufunikaji hutofautiana kati ya miji, hivyo mteja hutumia maelezo yaliyotengenezwa wakati maganda yenye maelezo, maumbo ya picha au samani za barabarani hayapatikani.

Maelezo ya Kina ya Kiufundi

Ardhi, Barabara na Madaraja

Data ya PLATEAU, OpenStreetMap na GSI huonyeshwa katika gridi moja ya ndani ya mita. Gridi ya pamoja ya mwinuko yenye nafasi ya mita tano huipa vigae vinavyopakana urefu unaofanana kwenye kingo zake. Misingi ya majengo hukaguliwa dhidi ya ardhi wakati wa ukusanyaji, na tofauti huandikwa kwenye kumbukumbu.

Miainisho ya barabara isiyo na maelezo hugawanywa kuwa njia za magari na njia za waenda kwa miguu kwa kutumia mistari ya katikati ya OpenStreetMap. Madaraja na barabara za juu hupokea wasifu tofauti: madaraja ya barabarani husawazishwa kutoka ukingo mmoja hadi mwingine, barabara kuu huinuliwa kulingana na tabaka, na njia za kuingilia hutengenezwa kwa mteremko unaounganisha kwa usahihi.

Mwangaza na Miakisi

Badala ya kuunda mwanga unaobadilika kwa kila taa, taa za barabarani na za mbele za magari huchorwa kwenye ramani ya mwanga. Vyanzo vinavyopishana huhifadhi thamani yenye mwangaza zaidi, huku data ya urefu wa taa ikizuia mwanga ulio chini ya barabara ya juu kuangaza sitaha yake.

Miakisi ya maji huchora jiji mara ya pili chini ya uso wa maji. Mawimbi madogo hupotosha matokeo, na miakisi ya mawingu huchukua sampuli kutoka kwenye ramani ya hali ya hewa. Vioo vya madirisha huwekewa alama katika kituo cha rangi cha alpha na kuchakatwa katika hatua ya miakisi ya nafasi ya skrini.

Uonyeshaji na Utendaji

Kiendeshi cha uonyeshaji hutumia three.js pamoja na composer ya postprocessing ya pmndrs. Athari zake zinajumuisha uzuiaji wa mwangaza wa mazingira wa n8ao, miakisi, angahewa, mawingu, mwanga unaotapakaa na upangaji wa toni. Ndege huwekwa katika vertex shader, hivyo makundi makubwa yanaweza kutumia muda mchache sana wa CPU.

Kwa utendaji bora, weka eneo linalotumika katika kiwango cha wastani, punguza idadi ya magari na ndege, zima mawingu, au punguza ubora wa uonyeshaji katika kidirisha cha Mipangilio. Hali chaguomsingi ya utiririshaji hupakia vigae vilivyo karibu; chaguo la jiji lote hupakia vigae vyote vinavyopatikana na linaweza kuhitaji kumbukumbu kubwa zaidi.

Chapisha Tovuti Iliyokusanywa

Baada ya kukusanya maeneo unayotaka kuchapisha, endesha:

npm run deploy

Hii huunda usambazaji na kulazimisha kusukuma dist/ kama commit moja kwenye tawi la gh-pages la origin ya hazina. Uchapishaji unajumuisha miji iliyokusanywa kwenye mashine hiyo. README inakadiria takriban MB 650 kwa maeneo saba yaliyojumuishwa.

Utambuzi wa Chanzo cha Data na Leseni

Msimbo umetolewa chini ya Leseni ya MIT, lakini data ya jiji bado iko chini ya masharti ya vyanzo vyake vya awali. Project PLATEAU hutoa modeli za 3D za jiji, picha za paa, madaraja na vifaa vya barabarani. GSI hutoa data ya mwinuko na picha za angani. Wachangiaji wa OpenStreetMap hutoa barabara, reli na maeneo chini ya ODbL. Miundo ya Poly Haven ni CC0, miti inatumia ez-tree chini ya MIT, na vipengele vya angahewa na mawingu vinatoka three-geospatial chini ya MIT.

Hitimisho

Tokyo ya kiutaratibu inaonyesha jinsi seti za data za kijiografia za umma zinavyoweza kubadilishwa kuwa matumizi ya kivinjari yenye uhuishaji mwingi. Ili kuitumia, sakinisha vitegemezi, pakua miundo na data ya maeneo, kusanya data hiyo kuwa vigae, kisha anzisha seva ya usanidi. Kuanzia hapo, vigezo vya URL, usanidi wa mchakato, majaribio na amri za uwekaji hutoa njia za vitendo za kuchunguza na kupanua mradi.