Secium — brauzerdagi interaktiv 3D globus
Secium uchun brauzerdagi interaktiv 3D globus demosini yig'dik: sayyora relyefi, shaharlarning hajmli binolari, joy qidiruvi va xarita qatlamlari almashtirgichi. Sahna orbitadan Toshkent va Nyu-York kvartallarigacha 60 FPS ni ushlab turadi.
Vazifa
Secium — interaktiv globusda ma'lumotlarni fazoviy vizuallashtirish uchun mahsulot. Keys uning texnik demo-versiyasiga bag'ishlangan: u havola orqali ishga tushadi va hech narsa o'rnatmasdan relyef, shahar binolari va xarita qatlamlarini ko'rsatadi. Bu hozircha mijozlari va biznes ko'rsatkichlari bo'lmagan texnologiya namoyishi.
Jahon xaritasidagi ma'lumotlar haqiqiy hajmda — relyef, binolar balandligi va erkin kamera bilan — eng ishonarli ko'rinadi. Bunday brauzerdagi 3D globus oddiy havola orqali, plaginlar va dastur o'rnatishsiz ochilishi kerak edi. Qiyinchilik shundaki, uch o'lchamli sahna dvigatelining o'zi taxminan besh megabayt keladi va u yuklanayotganda odam bo'sh qora ekranga qarab qolmasligi lozim.
Sayyora miqyosi bitta yuklab olishga sig'maydi. Butun Yer relyefi, sun'iy yo'ldosh suratlari va shahar binolari geometriyasini oldindan yuklab bo'lmaydi: bu ma'lumotlar qismlarga bo'lib, aynan kamera turgan joy uchun keladi — xoh bu orbita, xoh tog' tizmasi, xoh alohida mahalla bo'lsin.
Bu yerda silliqlik effektlardan muhimroq. Aylantirish yoki yaqinlashtirishda tasvir silkinsa, jonli model hissi yo'qoladi va globus sekin rasmga aylanadi. Yangi relyef qismlari va binolar fonda yuklanayotganda ham sahna kadrlar chastotasini barqaror ushlab turishi kerak.
Boshqaruv esa geoaxborot tizimlari bilan hech qachon ishlamagan odamga ham tushunarli bo'lishi lozim edi. Kerakli shaharni topish, umumiy ko'rinishga qaytish, xarita asosini almashtirish va hajmdan tekis xaritaga o'tish yo'riqnomasiz va sahnani to'sib qo'yadigan panellarsiz ishlashi kerak edi.
Yechim
Xarita dvigatelini noldan yozmadik: demoni 3D globuslar uchun WebGL asosidagi ochiq kutubxona CesiumJS'da yig'dik. Sahnaga Cesium ion bulutidan ikki ma'lumot qatlamini uladik: sayyora relyefi Cesium World Terrain va OpenStreetMap'dan olingan hajmli binolar. Asosiy ish sahnani yig'ish, yuklash va boshqaruvga ketdi.
Foydalanuvchi havolani ochadi va Yerni koinotdan ko'radi. Qidiruv qatoriga, masalan, «Tashkent, Uzbekistan» deb yozish kifoya — kamera shaharga uchib boradi va uning ostida relyef hamda kvartallar hajmda ko'tariladi. «Uy» tugmasi umumiy ko'rinishga qaytaradi, qatlamlar almashtirgichi xarita asosini o'zgartiradi, qo'shni tugma sahnani tekis xaritaga o'tkazadi, pastda esa vaqt shkalasi bilan sahna soati ishlaydi.
Qobiq — Vite yordamida yig'ilgan va Vercel'da joylashtirilgan React 19 ilovasi. Og'ir sahna komponenti React.lazy va Suspense orqali kechiktirib yuklanadi: CesiumJS 1.127 ishga tushayotganda ekranda «Loading Maps» indikatori aylanib turadi. Relyef va binolar esa kamera harakatlanishi bilan Cesium ion'dan qismlab keladi.
Oddiy havola orqali 3D globus
Demo har qanday zamonaviy brauzerda plaginlar va o'rnatishsiz ochiladi: sahnani WebGL to'g'ridan-to'g'ri qurilma videokartasida chizadi. Yer koinotdan butunligicha ko'rinadi, sichqoncha g'ildiragi yoki tachpaddagi harakat esa kamerani alohida binolar darajasigacha yaqinlashtiradi.
Sayyora relyefi va 3D binolar
Cesium World Terrain tog'lar va daryo vodiylarini ko'taradi, OpenStreetMap Buildings qatlami esa kvartallarni binolar konturi va balandligi bo'yicha hajmga aylantiradi. Nyu-Yorkda Markaziy park atrofidagi Manxetten osmono'parlari, Toshkentda esa teleminora va uning atrofidagi turar-joy massivlari ko'rinadi.
Joy qidiruvi va kamera parvozi
Paneldagi qidiruv qatori shahar nomi yoki manzilni qabul qiladi va kamerani topilgan joyga silliq olib boradi. «Uy» tugmasi bir bosishda butun sayyora ko'rinishini qaytaradi, shuning uchun istalgan miqyosda yo'nalishni yo'qotish qiyin.
Xarita asosi va relyef almashtirgichi
CesiumJS'ning standart qatlamlar almashtirgichi 15 xil xarita asosini taklif qiladi — Bing va ArcGIS sun'iy yo'ldosh suratlari, yo'llar sxemasi, OpenStreetMap, Sentinel-2 suratlari, tungi Yer — hamda ikki xil relyef. Bitta joy vazifaga qarab turlicha ko'rinadi.
Uch rejim va vaqt shkalasi
Rejim tugmasi sahnani hajmli globusdan tekis xaritaga yoki oraliq Columbus View ko'rinishiga o'tkazadi. Ekran pastida ijro va pauza tugmalari bilan sahna soati hamda UTC vaqt shkalasi ishlaydi, «?» tugmasi esa sichqoncha va teginish bilan boshqarishni tushuntiradi.
Og'ir sahnaning tez starti
Avval «Loading Maps» indikatori bilan yengil React qobig'i yuklanadi, sahna komponenti esa dvigatel tayyor bo'lganda alohida fragment sifatida keladi. Yig'ishni Vite bajaradi, demo Vercel'da joylashgan, relyef va binolar esa kamera harakati bilan Cesium ion'dan qismlab keladi.
Natijalar
Loyihaning asosiy natijalari raqamlarda.
- 60 FPS3D sahna silliqligi
Globus koinotdagi ko'rinishdan shahar kvartallarigacha silkinishlarsiz aylanadi va yaqinlashadi.
- 15Xarita asosi variantlari
Sun'iy yo'ldosh suratlari, yo'llar sxemasi, OpenStreetMap, tungi Yer va boshqa qatlamlar bitta almashtirgichda.
- 3Ko'rsatish rejimlari
Hajmli globus, tekis xarita va oraliq Columbus View ko'rinishi bitta tugma bilan almashadi.
- 12 kunBoshlanishdan demogacha
Sahnani yig'ish, ma'lumotlarni ulash, yuklash ekrani va demoni e'lon qilishga o'n ikki kun sarflandi.
Dizayn va interfeyslar
Loyihaning asosiy ekranlari va interfeyslari.
Loyiha texnologiyalari
Mijozning vazifasi uchun yechimni qurganimiz stek.
- Vercel
- JavaScript
- React
- Vite
O'xshash keyslar
Keyingi keys bo'lishga tayyormisiz?
Vazifani ayting — menejer jamoa yig'adi, smeta hisoblaydi va so'rovingizdan keyingi birinchi soat ichida taklif yuboradi. Majburiyatlarsiz va xat tarqatishsiz.