ANWB
Virtualni sprehodi za evropske kampe po naročilu ANWB — nizozemskega kraljevega avtomobilskega kluba, ~4M članov. 160+ kampov, 1000+ virtualnih sprehodov, 25.000+ zlepljenih panoramskih slik, na terenu po pol Evrope v dveh sezonah, vgrajeno v ANWB-jevo platformo za rezervacije kampov.
Pregled
ANWB — Algemene Nederlandse Wielrijdersbond, nizozemski kraljevi avtomobilski klub — je največja članska organizacija na Nizozemskem s približno 4 milijoni članov. Med drugim upravljajo tudi platformo za rezervacije kampov, na kateri je na seznamu več sto kampov po Evropi. ANWB je želel spletnim obiskovalcem ponuditi občutek dejanskega sprehoda po kampu pred rezervacijo — ne le diaprojekcije obdelanih fotografij.
Numen je dobil naročilo, da to izpelje v velikem obsegu. V dveh letih in dveh fotografskih sezonah je projekt zajel 160+ kampov po Franciji, Italiji, Španiji, Hrvaški, Sloveniji, Beneluksu, Nemčiji in Avstriji — zemljevid zgoraj prikazuje dejanske lokacije na terenu. Rezultat: 1000+ sprehodljivih virtualnih tur, zlepljenih iz več kot 25 000 surovih panoramskih posnetkov, postreženih prek prilagojenega Marzipano predvajalnika in vgrajenih v ANWB-jevo platformo za kampe kot drop-in widget.
Tri plasti v enem angažmaju: terenska fotografija (meseci na poti s kamerami), inženiring 360° predvajalnika (prilagojena izgradnja na Marzipanu z blagovni znamki prilagojenim UI, žarišči, minimapom) in logistika vdelave (widget v iframe peskovniku, ki ga je ANWB-jeva spletna ekipa lahko vstavila v katero koli stran s seznamom kampa, ne da bi se dotaknila naše kode).
Kaj smo zgradili
Terenska fotografija. Ekipa je potovala po več evropskih državah skozi celo sezono, da je posnela teren posameznega kampa: sprejem, skupne prostore, parcele, sanitarije, okoliško naravo. Vsak kamp je imel več panoramskih točk, tako da je uporabnik med njimi lahko klikal in se po kampu virtualno sprehajal — ne le rotiral pogled iz ene točke.
360° predvajalnik. Prilagojena integracija Marzipana z žarišči (točke zanimanja, ki vodijo do naslednje točke), prekrivnim minimapom in kontrolami za celozaslonski način. Privzeti Marzipano UI smo zamenjali z blagovni znamki prilagojenim videzom, da je predvajalnik deloval kot domač del ANWB platforme.
Zmogljivost. Vsak kamp predstavlja nekaj sto megabajtov surovega panoramskega gradiva; tudi tiled multires sredstva potrebujejo skrbno dostavo. Pakete sredstev po posameznem kampu smo paketirali na CDN, predvajalnik lenobno inicializirali na uporabnikovo potezo (tap za aktivacijo na mobilnem) in uporabili plosko poster fotografijo kot LCP element, da prvotno izrisovanje ni blokirano na WebGL.
Vgrajen widget. Dostavljen kot drop-in skripta, ki jo je ANWB-jeva spletna ekipa lahko vključila na stran s seznamom katerega koli kampa. Peskovnik v iframe za izolacijo CSS, s postMessage za nekaj UX podrobnosti med okvirji (preklop celozaslonskega načina, izhod, dogodki za analitiko).
Zakaj je to pomembno
Delo z mednarodnimi naročniki dokazuje posebno vrsto sposobnosti — ne le ali znaš kodirati, ampak ali znaš dostaviti čez meje, sezone in s spletno ekipo druge organizacije. Angažma ANWB-ja iz leta 2021 je primer, na katerega še vedno pokažemo, kadar neslovenski naročnik vpraša, ali lahko Numen vodi projekt, kjer se fotografiranje odvija na Hrvaškem, integracija z nizozemsko spletno ekipo, jezik poslovanja pa je angleščina.
Tudi če je površinska domena projekta kampiranje, so inženirski principi enaki tistim, ki jih uporabljamo pri reguliranem fintechu in večagentnih AI integracijah: fiksen obseg pred kakršnim koli izstavljanjem računa, logika vdelave izolirana od gostujoče platforme, predvidljivi proračuni zmogljivosti in dostava po dogovorjenem urniku.
Mednarodno delo redkokdaj govori o drugačnem jeziku v kodi. Govori o terenski logistiki — opremi, sezonah, dovoljenjih, carinski odobritvi za stativ. Koda je lažji del.
Šest stvari dostavljenih,
tri težke rešene.
Ključni prispevki
- Vodil celotno izvedbo komponente virtualnih sprehodov za 160+ kampov — arhitektura predvajalnika, strategija gostovanja, integracija vdelave v ANWB-jevo platformo za rezervacije kampov.
- Osebno posnel in zlepil več kot 25 000 surovih panoramskih posnetkov na terenu v dveh sezonah — Francija, Italija, Španija, Hrvaška, Slovenija, Beneluks, Nemčija, Avstrija — v 1000+ sprehodljivih virtualnih tur, z več povezanimi točkami na kamp.
- Zasnoval in zgradil prilagojen Marzipano predvajalnik z žarišči, ki povezujejo posamezne panorame z naslednjo, prekrivnim minimapom, da uporabnik vedno ve, kje na kampu se nahaja, in kontrolami za celozaslonski način — privzeti Marzipano UI sem zamenjal z blagovni znamki prilagojenim videzom, da je predvajalnik deloval kot domač del ANWB platforme.
- Koordiniral mednarodno logistiko terenske fotografije — večtedenska potovanja po regijah, prehod opreme čez meje, vremenska in sezonska okna, dovoljenja na terenu, dogovorjena z vodstvom posameznih kampov.
- Optimiziral dostavo slik za mobilni promet — Marzipano multires tiling, paketi sredstev po posameznem kampu na CDN, postopno nalaganje panoram, ploska poster slika kot LCP fallback, da prvotno izrisovanje ni blokirano na WebGL.
- Dostavil vgradljiv widget, da je ANWB-jeva spletna ekipa lahko predvajalnik vstavila na katero koli stran s seznamom kampa, ne da bi se dotaknila naše kode — peskovnik v iframe, postMessage za UX med okvirji (preklopi celozaslonskega načina, dogodki za analitiko).
Rešeni izzivi
- Terenska fotografija v takem obsegu — 160+ kampov po 8 državah v dveh sezonah — je pomenila, da je bila logistika obravnavana kot prvorazredni inženirski problem: načrtovanje poti, vremenska okna, redundanca opreme, dovoljenja po posameznih kampih, dnevna disciplina varnostnega kopiranja podatkov, da izgubljena SD kartica ni pomenila izgube cele države.
- Zmogljivost pri 25 000+ visokoločljivostnih panoramskih posnetkih, zlepljenih v 1000+ multires sredstev — rešeno z dostavo tiled slik (Marzipanov native multires format), CDN paketiranjem, lenobno inicializacijo po kampih in plosko poster sliko ob prvem izrisu.
- Vdelava znotraj ANWB-jeve obstoječe platforme za rezervacije, ne da bi prišlo v konflikt z njihovim CSS, analitiko ali postavitvijo — rešeno s peskovnikom predvajalnika v iframe, z postMessage za nekaj podrobnosti, ki morajo prečkati mejo okvirja (preklopi celozaslonskega načina, dogodki za analitiko, izhod).
Kaj poganja stvari.
Sorodni projekti
Pripravljeni popraviti, zgraditi
ali skalirati?
30 minut, z mano osebno. Preberem vaš sistem kot dnevniško datoteko in povem, kaj bi naredil najprej. Brez prezentacij, brez prodajnega lijaka.
— Davor Majc, ustanovitelj, Numen