Spaning - 3D på webben

Nu finns äntligen tekniken att använda 3D på webben mer professionellt

När jag fortfarande var ett barn myntade Jeff Atwood det som idag kallas Atwood’s Law: “Any application that can be written in JavaScript, will eventually be written in JavaScript”. Trots att JavaScript genom åren fått mycket kritik så har denna lag visat sig mer sann än många kunde föreställa sig för snart 15 år sedan. Javascript har ett så dominerande grepp på webbutveckling att det nästan är otänkbart att det inte skulle vara så. Genom hela stacken, främst i frontend men även mycket backend, används JavaScript, ett språk som ursprungligen togs fram på bara 10 dagar.

Med ett sådant enormt utbud av hemsidor som vi har idag och där många bygger på nya coola tekniker så är det svårt att sticka ut från mängden. Ett något nischat sätt att bli sedd har därför varit att integrera interaktiva 3D element på sin sida.

Tekniken bakom 3D på webben har funnits länge och jag programmerade själv enkla spel för flera år sedan, men det var ganska dålig prestanda på mobila enheter och dessutom så var det svårt att se hur det skulle kunna användas inom mer kommersiella områden. Det är framför allt WebGL, som är ett JavaSript API för bl a 3D-element, som har gjort detta möjligt. https://en.wikipedia.org/wiki/WebGL

Användning av 3D i konstprojekt

Prestandaproblematik och det enkla faktum att det saknas programmerare med kompetens att bygga dessa lite ovanligare applikationer har gjort att 3D-element på sidor inte riktigt fått ta en större plats på kommersiella webbplatser och har istället kanske använts till mindre projekt. Ofta för personliga hemsidor för utvecklare som vill sticka ut med unika animationer eller mindre studios för konstprojekt. En av mina favoriter, som kom ut redan 2014 är det interaktiva konstnärliga skogsäventyret av Vincent Morisset som går att hitta på http://a-way-to-go.com/

Nu har större företag upptäckt fördelen med 3D

På senare tid har vi sett mer av interaktiva 3D-element även i väletablerade forum. Github lanserade den så kallade “GitHub globe” https://github.com/home i slutet på 2020, ett stilrent sätt att presentera deras världsomspännande användning av GitHub i form av en interaktiv jordglob. GitHub globe visar dels var man själv befinner sig men också på GitHubs projekt i Svalbard och ett par upplysta repos världen över.

Det är snyggt, så snyggt att det tog mig månader att inse att det var något speciellt som pågick över huvud taget, och att det inte bara var en vanlig film i headern. Jag hade inte insett att det var ett interaktivt element på sidan, trots att det tydligt presenteras högst upp på startsidan.

GitHub Globe är ett tydligt exempel på hur 3D-inslag inte bara kan användas som en gimmick för att skapa en “wow-faktor”, utan även för att effektivt presentera information på ett sätt som är roligt och nytt utan att bryta mot väletablerade webbstandarder.

Jag ser tre anledningar till den ökade användningen av 3D på webben:

• Dels har three.js blivit så pass bra och funnits tillräckligt länge så att fler utvecklare väljer att använda det i sina projekt.
• Men det beror också på att vi för några år sedan såg integrationen av WebGL 2.0 i Chromium, något som förbättrade prestandan och möjliga användningsområden avsevärt. Chromium är den öppna källkod som de moderna webbläsarna använder sig av.
• Slutligen har jag sett att spridningen av snygga 3D-projekt i sociala medier har ökat. Både Reddit och Youtube har inlägg om nya användningsområden, men också guider på hur man själv går tillväga för att komma igång med 3D.

Jag välkomnar denna utveckling. För mig som utvecklare så är det roligt med nya tekniker och användningsområden, som ger mig nya utmaningar men också nya möjligheter. Hoppas det även ger lite nya tankar och idéer även hos er.

P.S Nedan finns ett litet exempel jag satte ihop på några minuter som en enkel interaktiv demo.