Heatmaps i 3D

Detta är ett exempel på en artikel i kategorin visualisering under vår sektion byggstenar. Har du fler idéer på bra artiklar kring olika sätt att visualisera data i digitala tvillingar så hör av dig till kontakt@digivis.se

Klassiska heatmaps kan bli lite av ett problem när de ska göras i 3D modeller. Från att bara färglägga ytor genom att tex lägga en transparent platt yta över så måste ska vi helt plötsligt färglägga komplicerade geometrier. I den här artikeln så beskriver vi hur vi gör detta i bland annat prototypen Greenovation twin men som också används vissa kommersiella lösningar.

Lösningen är ett volymobjekt som inte syns men som påverkar det som finns inuti volymen tex genom att ändra dess färg. Detta göra med en speciell shader som det heter i spelvärlden. Dvs den funktionen som är ansvarig för hur våran 3D värld ombildas till en 2D bild. Detta kanske låter komplext men vi behöver egentligen inte veta detaljerna kring detta utan bara hur vi bygger upp det i vår modell.

Detta görs i 3D men för enkelhetens skulls så illustrerar vi det i 2D i filmen nedan. Det hela börjar vet att vi skapar en massa volymer över det område vi vill visualisera data i. I vissa fall vill vi dela in en stad i ett rutnät. Då generar vi lika stora kuber staplade bredvid varandra. I andra fall så ska volymerna följa områden eller objekt tex statiska områden, fastighetsgränser eller byggnader. Ofta finns data lätt tillgängligt för dessa områden i 2D men för att sätta vart volymen ska starta och sluta i höjdled kan det bli lite mera komplicerat. Vi behöver då någon form av höjd data för vad högsta och längsta punkten är inom ett område tex lantmäteriets laserdata eller den 3D modell över staden som vi kommer att visualisera heatmappen på.

Nästa steg är att ställa in volymen att använda den speciella shadern. I realiteten använder vi här två olika shaders en som ritar ut en linje där våran volyms ytor korsar andra objekts ytor för att visualisera en gränslinje och en som färgar upp allt som finns inne i volymen. Systemet används också för att visualisera vilka delar av kartan som är klickbara dvs utgör ett objekt det stämmer också väl överens med vår filosofi om att vi måste dela in världen i lagom stora bitare i en digital tvilling.

När vi har volym-indelningen behöver vi nu ett system som bestämmer hur färgen av olika objekt ska sättas. Det kan vara som i exemplet nedan att de sätts utifrån en excelfil som vi laddar in eller att vi väljer en av de existerande egenskaperna på objekten för att färga volymerna. Vi vill som i exemplet ovan ofta också indikera om någonting är klickbart. I exempelt nedan så färgar vi inte ramen utan bara innehållet för att att gränsindelningen ska vara tydlig.

Färgen som sätts är en kombination av om objektet är valt eller om användaren valt att någon viss data ska visualiseras av färgen. Vi tänker oss också att användaren ska kunna sätta färgen manuellt på olika objekt för att göra ett bokmärke eller en skärmdump för att att förklara en skillnad mellan olika objekt i bilden.

I en framtida version av denna artikel kommer vi även att bidra med kodexempel i python för hur man kan generera volymerna i tex QGIS och exportera in dem i den digitala tvillingen som glb-filer. Skriv i artikelns kommentarsfält om du vill se en ett sånt exempel så kanske vi lägger in en extra växel eller kolla tillbaka senare.