Introduktion
Urban Jungle Street View är ett experiment för att leka med djupdata i Google Steet View.
Det är så enkelt och kraftfullt att använda Google Maps API. Så mycket data i dina händer. För stilen på kartan används guiden Styled Maps för att se vilka olika typer av inställningar det finns och exportera inställningarna som JSON. Ett tips är att stänga av alla funktioner först med
{”stylers”: [
{ ”synlighet”: ”av” },
]},
och efter det slå på de saker man vill visa och styla.
Street view täckningslager
Det användes StreetViewCoverageLayer medan man drar den lilla killen för att visa alla tillgängliga vägar i Street View. Det är inte bara vägar utan också inomhusplatser och speciella platser som Taj Mahal. Effekten i Google Maps när man håller Pegman över en väg och han knäpps fast vid vägen med en riktningspil som riktar in sig på vägen. Men den funktionen finns för närvarande bara på Google Maps-webbplatsen och inte i API-version 3.
Street View
Det används ett bibliotek som heter GSVPano, skapat av Jaume Sanchez, för att visa panoramabilderna i WebGL och three.js. För att komma åt djupet och normala data används ett annat bibliotek.
Data för varje panorama är inte en djupkarta direkt (från API) utan istället lagrad i en Base64-kodad sträng för att spara bandbredd och förfrågningar på ett sätt som gör det snabbt att analysera för det faktiska syftet med det; för att hitta normalen (riktningen på en yta) och avståndet på en punkt i panoramat för att underlätta navigeringsgränssnittet. Om du svävar över marken med muspekaren i Google Streetview så får du cirkelmarkören och om du pekar på en byggnad får du en rektangel i linje med byggnadens yta.
I demon tar normalkartan hand om att göra marken genomskinlig i skuggan, så att man kan placera ett plan under panorama-sfären. Jordplanet kommer att vara synligt genom det genomskinliga ”hålet” (kan kanske skapa geometri istället på något sätt). Djupkartan används för att göra en interpolation från transparent till ogenomskinlig mark. Djupdata har ett begränsat intervall (det synliga intervallet), så det kommer att se konstigt ut annars med en hård kant.
Man kan också lägga till lite dimma till miljön. Planen på kartan matchar inte exakt den verkliga geometrin så det bör inte vara för mycket dimma, eftersom kanterna kommer att synas runt byggnaderna.
Lövverk
Lövverk är sprites (platta skyltar) eller en enkel geometri som är placerad i 3d-rymden. För att placera dem tittar man på slumpmässiga positioner i ett fördefinierat område av texturen. Först, för att få en känsla av hur en platt bild lindas runt en sfär.
När du väljer en punkt i texturen får du positionen på en sfär så här:
var lat = u * 180-90;
var lon = v * 360-180;
var r = Math.cos(DEG_TO_RAD * lat);
//range between 0-1
var pos = new THREE.Vector3();
pos.x = (r * Math.cos(DEG_TO_RAD * lon) );
pos.y = (Math.sin(DEG_TO_RAD * lat));
pos.z = (r * Math.sin(DEG_TO_RAD * lon));
Men om alla objekt placeras på ett fast avstånd så kommer de att skalas samma, så avståndet från kameran är viktigt, som att trycka bort objektet från kameran i samma vinkel.
Det värdet lagras i djupdata så här:
pos.multiplyScalar(pointData.distance);
Om man vill att objektet ska peka mot kameran, som träden, är det bara att ställa in:
myPlantObject.lookAt(kamera).
Men om objektet skulle rikta in ytan som det antas hålla sig till, bör vi använda normalvärdet, den riktning som väggen är vänd mot:
var v = pos.clone();
v.add( pointData.normal );
myPlantObject.lookAt(v);
För att få ett riktigt 3d-perspektiv kan spriten ersättas med riktig geometri, men bladen är ganska förlåtande för perspektivproblem och sprites är mycket mer presterande. Om vinkeln mot kameran är för stor ser det dock väldigt konstigt ut.
Om du klickar eller trycker på scenen så kan du lägga till mer löv i den. Sedan är det bara samma process men omvänt. Få kollisionspunkten på sfären, konvertera den till UV-utrymme (0-1) på texturen. Testa mot data och få önskad anläggning för den positionen om någon.
Finjustering
Varje gång du besöker en plats så genereras den slumpmässigt. Om den beräknade riktningen pekar uppåt, få gräset att växa på marken. Om det är vinkelrätt mot marken kan vi sätta några väggbladsprites där. För att dölja sömmen mellan marken och väggarna gör finns det ett knep för att hitta den kanten. Marken har alltid samma normala position, som du kan se som den rosa färgen ovan. Man itererar pixlarna i texturen nerifrån och upp för att hitta den första pixeln i en annan färg än marken. Det är där kanten är.
Sätt en grässprite där och gå till nästa kolumn med pixlar för att göra detsamma. För att förstärka känslan av väggar ytterligare kan man introducera en annan typ av växt: vinstockar. Dessa har stjälkar gjorda av 3d-geometri (en modifierad ExtrudeGeometry extruderad längs en bezier-bana, eller ”spline”) med sprite-baserade löv.
För att upptäcka en bra plats för dem att växa gör man en ny uppslagning i normalkartan där man upptäckte kanten tidigare. Cirka 50 pixlar upp från dessa punkter testar man om värdet fortfarande är detsamma som väggen man hittade först. Om det är en annan färg så är det förmodligen en liten vägg och inte en optimal plats för en vinstock att växa, annars kan man placera den där men inte för många så testa för ett minsta avstånd mellan dem. Det är buggigt ibland, men det är tillräckligt nära för den här demon. Ett par träd är också insatta som sprites som pekar mot kameran. De skulle kunna vara mer procedurmässiga för ett mer intressant resultat.
Navigering
Länken till närliggande panoramabilder ingår i API-resultatet så det är bara att lägga till pilarna och upptäcka interaktioner med THREE.RayCaster. Effekten mellan platserna är en del av posteffektpasset, man ställer bara in mängden oskärpa i ett oskärpepass…
Eftereffekter
Återigen, Jaume Sanchez har mer värdefull källkod i form av Wagner, en post-effekt kompositör för three.js. För att få panoramalagret och 3D-lagret att smälta samman läggs ett par effekter till i slutresultatet. Först ett Bloom-filter, som ger lyster till ljusa områden. Och ett smutspass, som lägger till damm och regndroppar till kompositionen. Den sista touchen är en liten rörelse för kameran så att scenen ser mer levande ut och mindre som en stillbild. Det finns definitivt utrymme för förbättringar, särskilt med färgbalansen i scenen, och en mer avancerad geometri och procedurgenererade växter.