Brick street view

Brick street view

Karta

För att få kartan att se ut som en gigantisk bottenplatta användS ett rutat transparent texturöverlägg. När du flyttar mitten av kartan så uppdateras lagrets bakgrundsposition för att matcha kartans rörelse. När du zoomar in i på den så ändras storleken på bakgrunden. Utöver det läggs det först en gradientfyllning för lite glans, och sedan ”tree js” lagret ovanpå. Detta innehåller några träd och buskar, och även landmärken på fördefinierade platser (finns i genvägar-popupen markerad med en stjärnsymbol i toppmenyn). Varje objekt som placeras på kartan har en motsvarande google.maps.Marker. När det behövs (karta-center-ändring eller zoomning) omvandlas markörens position till 3D-utrymme för att uppdatera maskorna. Det är begränsat till skrivbordsanvändare, eftersom det finns en bugg på beröringsaktiverade enheter, som förhindrar att markörpositionerna uppdateras medan du drar (eller faktiskt projektionsinställningen på kartan som används internt för att beräkna behållarens position i pixlar). Resultatet är att maskorna hoppar till rätt position endast på touchend-event. För att få föremålen att se ännu mer fast ut på kartan lades det till mjuka skuggor.

För att placera träden på bra ställen används Google Places API som söker efter parker inom en radie av 1500 m. För att visa platsen där centret för närvarande är, frågas geokodarbiblioteket i Google Maps.

Scenen återges i två steg. Först bakgrunden, sedan resten av scenen i ett andra pass. Det görs för att se till att panorama-sfären alltid är sorterad mellan bakgrunden och legomodellerna. Det är låg extra kostnad för detta, både bakgrunden och panoraman är av mycket låg poly.

Brick street view 2

Konstruera LEGO-panorama

Detta är grundidén med hela experimentet. För att vara ärlig så sträcker sig resultaten från ”bra idé, men…” till ”WTF”. Det beror mycket på kvaliteten på djupdata och även färgen på himlen. Här är arbetsflödet för att skapa ett panorama:

– Ladda lågupplöst panorama med lågt zoomvärde. Det används GSVPano för detta, som stöder högupplöst plattsättning, men målet är att pixla det så att informationen inte behövs och returnerar resultatet på en arbetsyta.

– Fyll duken längs den övre kanten av texturen, där det förhoppningsvis är en klarblå himmel (eller smog för den delen).

– Skapa en högupplöst duk och rita in legoklossar i den baserat på färgvärdena för den mindre duken. För pixlar med färgen som definieras av floodfill, flagga dem som himmel och undvik att rita dessa klossar och alla klossar ovanför en upptäckt himmelpixel. På det sättet raderas också moln ovanför en upptäckt himmelpixel så att tegelstenar inte svävar i luften. För marken används djupdata för att utesluta dessa tegelstenar. För varje sten kontrolleras det om den tillhör grundplanet (i panoramadjupsdata) och hoppar över dem också.

– Det finns tre olika tegelstenar ritade för att göra det mindre upprepande. En platt, en med variabel rotation och en med en pinne på sidan. Den sista används oftare om färgen är närmare grönt, så träd och buskar får lite mer volym. Bygget är inte i närheten av att vara korrekt i någon mening, särskilt när det kommer till perspektiv, storlekar eller omslagsstrukturer på sfärer, så du behöver lite fantasi (eller scrolla runt väldigt snabbt) för att acceptera illusionen.

Brick street view 3

Sedan börjar det roliga, att leka med riktig LEGO

Legomodeller kommer som bilar, blommor och träd. Två typer av gatubottenplattor laddas för att användas för ett vägskäl i centrum och vägar. De kommer bara att vara synliga om det finns länkar i panoramametadata. Ibland i korsningar kan du se vägen i bilderna, men den är inte länkad förrän nästa panoreras framför dig, så den reflekterar inte visuella vägar korrekt. För 3d-modellerna används ett format som heter LDraw. En öppen standard för LEGO CAD-program som låter användaren skapa virtuella LEGO-modeller och scener. Alla delar lagras i en mapp och varje fil kan referera till andra delar i biblioteket. Till exempel så är varje enskild pinne på alla klossar bara en referens till samma fil som heter stud.dat. Med programvara som Bricksmith och LEGO Digital Designer kan du skapa modeller och exportera till detta format. Det finns också massor av modeller tillgängliga på internet, skapade av LEGO-communityt. Eftersom det bara är en textfil som innehåller referenser, färg, position och rotation, är det enkelt att analysera som geometri.

För att visa LDraw-modellerna används BRIGL, ett Javascript-bibliotek tillverkat av Nicola Lugato som laddar ldraw-filer till ”three js”. Det modifierades lite för att fungera med den senaste revideringen av three js och materialhantering.

Det tar lite CPU-kraft för att analysera och skapa mesh. Webben är kanske inte det bästa mediet för detta format, eftersom varje triangel i alla delar analyseras och återges, även de som inte är synliga, som insidan av en tegelsten.

För att undvika hundratals förfrågningar under körning när när modellens underdelar laddas så användes ett gulp-script för att slå upp alla aktiva modeller (.ldr, .mpd, .dat) som rekursivt omvandlar delar till JSON och lägger till dem i en bunt som cachade moduler så att de kan krävas istället för att laddas. Storleken jämfört med att lagra den slutgiltiga analyserade geometrin som JSON är betydligt mindre eftersom många delar återanvänds över modeller.

Lämna ett svar

Din e-postadress kommer inte publiceras.