Streetlights: Einar Öbergs interaktiva julkort i WebGL

I december 2014 kunde besökare som öppnade Streetlights i webbläsaren pynta en mörk gata inför julen. Ljusslingor sträckte sig mellan byggnaderna och genom att klicka på en fasad flyttades fästpunkten dit, vilket fick slingan att svänga till sin nya position. Den svenska utvecklaren Einar Öberg låg bakom detta interaktiva julkort.

Original: Einar Öbergs egna experiment
Lansering: december 2014
Teknik: WebGL, three.js och fysikmotorn cannon.js
Samling: Chrome Experiments
Status i dag: Originaladressen är inte längre aktiv, men källkoden finns tillgänglig på GitHub.

Denna sida förklarar experimentet och tekniken som ligger bakom det, men redaktionen har inte utvecklat originalet. Uppgifterna om hur systemet fungerade kommer från källkoden på GitHub, från Einar Öbergs egna beskrivningar samt från de sidor som anges längst ner.

Vad var Streetlights?

Streetlights var ett julkort i form av en liten 3D-scen. Kameran visade en smal gata mellan två husrader under en vinterkväll med snöfall. Flera ljusslingor med glödlampor hängde över gatan och varje slinga hade en stjärna i mitten. Genom att klicka eller trycka på husväggarna valde man var slingorna skulle placeras.

I Googles samling Chrome Experiments beskrivs projektet som ett interaktivt julkort där användaren arrangerar ljusen och experimenterar med fysik och belysning. Sidan anger december 2014 som datum och WebGL som teknik. Källkoden publicerades på GitHub den 18 december samma år med beskrivningen ”An interactive Christmas card”.

Scenen innehöll även små detaljer att upptäcka. Ett klick på månen fick den att rotera ett halvt varv. Skyltar på husen länkade till three.js, till fysikmotorn cannon.js och till två av Öbergs tidigare julexperiment. En av skyltarna tände slingorna i ett slumpmässigt mönster.

Så fungerade det

Streetlights byggde på två bibliotek. Grafiken renderades med three.js medan rörelserna i slingorna beräknades av cannon.js, en fysikmotor för webben som Stefan Hedman hade utvecklat. Enligt Öberg skapades allt utom stjärnan och skylten direkt i koden med enkla former som lådor, plan och sfärer.

GatanFasader, mark och himmel byggs av enkla former medan texturer ger detaljer och glans.
Slingan32 små kulor binds samman med avståndsvillkor i fysikmotorn och skapar en hängande kedja.
KlicketEn osynlig stråle från kameran hittar punkten på fasaden där slingan ska fästas.
LjusetLampor, stjärnor och efterbehandling skapar glöd, blinkning och reflexer i gatan.

Fästpunkt med massan nollKulor med massa, länkade med fasta avståndKlicket flyttar fästet och kedjan svänger efter

Förenklad illustration av principen. Redaktionens egen bild, inte en skärmdump från originalet.

Ljusslingan som en kedja av kulor

Varje slinga bestod av en kedja med 32 små sfärer i fysikvärlden. Kulorna i mitten hade massa och drogs nedåt av gravitationen medan den första och den sista hade massan noll. En kropp utan massa påverkas inte av krafter i cannon.js, vilket gjorde att ändarna hängde kvar på fasaden. Mellan varje par av grannar fanns ett avståndsvillkor som höll kulorna på samma avstånd från varandra så att kedjan uppförde sig som ett rep.

Kabeln var en böjd tub som följde en mjuk kurva genom alla kulornas positioner. Glödlamporna flyttades tillsammans med sina kulor i varje bildruta. Dämpning på både fart och rotation gjorde att slingorna slutade gunga efter en tid.

Ett klick på fasaden

När du klickade skickade programmet en osynlig stråle från kameran genom muspekaren in i scenen. Strålen testades mot husfasaderna och den första träffen gav en punkt i rummet. Dit flyttades slingans fäste med en kort animation på en sekund. Fysiken fick sedan resten av kedjan att svänga efter medan en liten ljuspuls visade var klicket hade träffat.

Vind, snö och ljus

Vinden var inget eget system utan lades på som en liten kraft på varje glödlampa efter varje fysiksteg. Styrkan varierade långsamt med sinus och cosinus och lite slump så att slingorna aldrig rörde sig helt i takt. Samma vindkraft fick snöflingorna att driva. I mitten av varje slinga placerades en stjärna med en egen punktljuskälla som belyste de omgivande fasaderna.

Ovanpå bilden lades efterbehandling med bloom för glöden, ett filmfilter och kantutjämning. Slingorna kunde blinka i flera olika mönster och i olika takt. Ljuden spelades upp med biblioteket howler.js.

Gatans spegelbild

Markens reflexer skapades genom ett trick. Geometrin duplicerades och vändes upp och ned i en separat scen som renderades med oskärpa. Den vanliga scenen ritades sedan ovanpå utan att färgerna rensades, bara djupbufferten nollställdes. Ett halvtransparent lager vid marknivån gav ett blåaktigt skimmer.

Fler julprojekt

Streetlights var inte Öbergs första julexperiment. Två skyltar i scenen hänvisade till de tidigare projekten Xmas orange och Snowroller. Ett äldre snöprojekt utformat som en offpistsimulator finns även bland inläggen på sajten.

Experiment	År	Idé	Teknik
Xmas orange	senast januari 2012	Tryck kryddnejlikor i en apelsin och dela resultatet	JavaScript och 3D i webbläsaren
Snowroller	december 2013	Rulla snöbollar och bygg en snögubbe	WebGL och three.js
Off piste simulator	ej verifierat	En skidåkare i djup snö med partiklar	Flash och Away3D
Streetlights	december 2014	Pynta en gata med ljusslingor	WebGL, three.js och cannon.js

Xmas orange bygger på den svenska julapelsinen där kryddnejlikor sticks in i en apelsin som sedan hängs upp med sidenband. I experimentet fästes kryddnejlikorna digitalt och användaren kunde spara apelsinen som bild eller dela en 3D-version via en unik adress. Sidan fanns redan i Internet Archive i januari 2012 men det exakta lanseringsdatumet har redaktionen inte kunnat verifiera.

Öberg medverkade i adventskalendern Christmas Experiments 2013 med Snowroller i lucka 21. Användaren rullade snöbollar över ett fält och formade dem till en snögubbe. Spåren som uppstod i snön ritades på en canvas som sedan fungerade som höjdkarta för markens shader. En inspelning av skärmen publicerades på Vimeo den 19 december 2013.

Offpistsimulatorn är äldre och utvecklades i Flash med 3D-motorn Away3D. Terrängen genererades med perlinbrus och innehöll en riggad skidåkare samt snöpartiklar som flög längre vid djup snö. Exakt år kan inte fastställas men inläggen skrevs medan Flash ännu väntade på sitt kommande 3D-gränssnitt Molehill.

Mottagandet

Streetlights ingick i Googles samling Chrome Experiments som presenterar kreativa projekt skapade med webbteknik. Designsajten Codrops tog med experimentet i sin veckosammanställning Collective #147 den 22 december 2014 och beskrev det som en fantastisk demo av julbelysning på gatan. Redaktionen har inte hittat fler pressartiklar. Länkarna från både Googles samling och Codrops finns kvar i dag.

Går det att göra likadant i 2026?

Ja. Allt som Streetlights erbjöd går i dag att bygga i en vanlig webbläsare och mycket av arbetet finns redan klart i biblioteken. Fysikmotorn cannon.js finns fortfarande och projektet cannon-es beskriver sig själv som en underhållen fork av den, optimerad för moderna byggverktyg. Båda licensieras under MIT.

Den ursprungliga versionen går inte längre att köra på sin gamla adress. Den som vill gå på djupet med detaljerna måste läsa källkoden, vilken använder en äldre version av three.js med klasser som har bytt namn sedan dess.

Om källkoden. Originalkoden till både Streetlights och Snowroller är publikt tillgänglig på GitHub men arkiven saknar licens. Det innebär att rättigheterna kvarstår hos upphovspersonen. Läs gärna koden för att förstå idéerna men kopiera den inte in i egna projekt utan tillstånd. Uppgiften kontrollerades den 20 oktober 2026.

Bygg något liknande

Det enklaste sättet att förstå tekniken är att bygga en enda slinga mellan två väggar. Du behöver three.js för grafiken och cannon-es för fysiken. Stegen nedan räcker för att skapa en första version.

1. Kedjan

Skapa mellan 20 och 30 sfärer med hjälp av cannon-es. Ge ändarna massan noll och bind ihop grannarna med ett avståndsvillkor.

2. Kabeln

Låt en mjuk kurva gå genom kulornas positioner och rendera den som en tub. Kurvan måste uppdateras i varje bildruta.

3. Klicket

Skicka en stråle mot fasaderna och flytta det valda fästet till träffpunkten. En kort animation gör att rörelsen blir mjuk.

4. Ljuset

Ge glödlamporna ett självlysande material och lägg på bloom. Spara riktiga ljuskällor till några få stjärnor.

Klassen Raycaster i three.js omvandlar muspositionen till en stråle och returnerar träffarna sorterade efter avstånd. För fysiken finns exempel och API-beskrivning i dokumentationen för cannon-es. Vill du se fler experiment av samma upphovsperson kan du läsa om Urban Jungle Street View och om Lathe.

Vad du kan lära dig av Streetlights

Streetlights demonstrerar hur långt några få fysikregler räcker. Slingorna består enbart av kulor, avstånd och gravitation men tillsammans skapar de en rörelse som känns levande. Ett enkelt fusk som vinden ger mer liv än en exakt simulering skulle ha gjort.

Projektet visar även att interaktion inte kräver avancerade lösningar. Ett enda klick på husväggen räckte för att gatan skulle upplevas som besökarens egen.

Reflexerna i gatan visar att gamla knep fortfarande fungerar. En spegelvänd kopia av scenen med viss oskärpa ger nästan samma effekt som dyr reflektionsteknik.

Vanliga frågor om Streetlights

Vem skapade Streetlights?

Den svenska utvecklaren Einar Öberg skapade experimentet och publicerade det i december 2014. Det saknas information om vem som beställde arbetet.

Går det att prova Streetlights i dag?

Nej, inte på den ursprungliga adressen. Källkoden ligger kvar på GitHub och kan läsas av den som vill förstå tekniken.

Hur fungerade fysiken i ljusslingorna?

Varje slinga bestod i fysikmotorn cannon.js av en kedja med 32 kulor. Ändarna hade noll massa och var fästa vid fasaden medan de mellanliggande kulorna drogs nedåt av gravitationen och hölls samman av fasta avstånd.

Vilka andra julexperiment gjorde Einar Öberg?

Han skapade bland annat Xmas orange där man tryckte in kryddnejlikor i en apelsin. Snowroller utvecklades till Christmas Experiments 2013 och innebar att man byggde en snögubbe av snöbollar.

Är det tillåtet att använda originalkoden?

Källkoden finns tillgänglig på GitHub men saknar licens. Utan licens behåller upphovspersonen rättigheterna, vilket innebär att koden inte får kopieras in i egna projekt utan tillstånd.

Källor

Uppgifterna kontrollerades 20 oktober 2026.