Plasmaball i WebGL: blixtar med vertex shader

Hösten 2011 fick en klassisk 80-talsprodukt nytt liv i webbläsaren. Plasmaball var en plasmalampa byggd i WebGL, där blixtar ringlade från en glödande kärna ut mot glaset. Experimentet gjordes av den svenska utvecklaren Einar Öberg.

Original: Einar Öbergs eget experiment
År: 2011, blogginlägget publicerades i oktober 2011
Teknik: WebGL, blixtar som rör förskjutna i vertex shadern
Status i dag: Inte längre tillgänglig online på den gamla adressen

Den här sidan beskriver experimentet och tekniken bakom det, men redaktionen har inte byggt originalet. Beskrivningen bygger på Öbergs eget blogginlägg och på arkiverade versioner av sidan.

Vad var Plasmaball?

En plasmalampa består av en glaskula fylld med ädelgas och med en elektrod i mitten. Högfrekvent växelström ger lysande trådar som sträcker sig ut mot glaset och följer fingret när man rör vid ytan. Enligt Wikipedia blev dessa lampor populära prylar under 1980-talet.

Öberg skrev att han aldrig själv hade ägt en plasmalampa och att det kanske var därför han var så fascinerad av dem. Han hade burit på idén länge innan han till sist byggde en ganska enkel version med glödande kärna och blixtar som rörde sig hela tiden.

Så fungerade det

Varje blixt var ett rör, en lång och smal 3D-form. Röret ritades inte om från grunden i varje bildruta. I stället flyttades dess hörn av vertex shadern, det lilla program på grafikkortet som avgör var varje punkt i en modell hamnar.

Blixtarna styrs av brus

Kärnan i mitten hade redan en procedurellt skapad brustextur. Samma textur återanvändes för blixtarna. För varje punkt längs röret lästes ett värde ur bruset. Det värdet avgjorde hur mycket punkten skulle flyttas i sidled. Eftersom bruset rör sig med tiden ringlar blixten hela tiden.

Rakt rör från kärnanBrusvärde gånger en faktor som växer utåtBlixt som rör sig mest vid glaset

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

Minskad rörelse nära mitten

Förskjutningen var liten nära kärnan men ökade mot kanterna. Det liknar en riktig plasmalampa där trådarna är fästa vid elektroden men fladdrar mer längre ut. För att skapa en naturlig rörelse lade Öberg en easingfunktion på faktorn så att ökningen blev mjuk i stället för linjär.

Samma grepp med rör som flyttas i vertex shadern hade han använt i andra experiment. Tekniken är billig för datorn, eftersom formen bara skickas till grafikkortet en gång och sedan animeras där.

Idén om styrning med mobilen

Öberg ville ta nästa steg och låta besökare styra blixten med flera fingrar via en mobil webbläsare. Planen var en websocket-anslutning mellan telefonen och datorn med node.js på servern. Han noterade själv att en pekskärm direkt mot lampan hade varit ännu trevligare. Redaktionen har inte kunnat hitta någon färdig version av styrningen.

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

Ja. Vertex shaders, brus och rörformer hör i dag till grundverktygen i three.js. Pekhändelser fungerar också direkt i mobilens webbläsare, så den styrning Öberg drömde om kräver ingen server längre. Någon källkod till originalet har inte hittats på hans GitHub.

Bygg något liknande

1. Kärnan

Rita en liten sfär med en brustextur som rör sig långsamt och lägg en genomskinlig sfär av glas runt den.

2. Rören

Skapa några tunna rör från mitten ut mot glaset med TubeGeometry.

3. Shadern

Flytta varje punkt i sidled med ett brusvärde multiplicerat med en faktor som ökar med avståndet från mitten.

4. Glöden

Använd additiv blandning och en ljus lila ton så att blixtarna lyser upp varandra.

Formen till blixtarna finns färdig som TubeGeometry och förskjutningen skrivs i ett eget ShaderMaterial. Samma typ av brus används i eldbollen på Fireshader.

Vad du kan lära dig av experimentet

Plasmaball visar värdet av att återanvända det man redan har. Bruset som färgade kärnan fick även styra blixtarna och rörtekniken hade använts i tidigare projekt. Små byggstenar som går att kombinera räcker långt.

Det visar också att trovärdig rörelse ofta kommer från en enkel kurva. Genom att låta rörelsen växa mjukt utåt blev blixtarna mer lika riktiga plasmatrådar än om alla punkter hade rört sig lika mycket.

Vanliga frågor om Plasmaball

Vem skapade Plasmaball?

Experimentet gjordes av den svenska utvecklaren Einar Öberg och beskrevs på hans blogg i oktober 2011.

Hur gjordes blixtarna?

Varje blixt var ett rör vars punkter flyttades i vertex shadern. Ett brusvärde avgjorde hur långt varje punkt flyttades och rörelsen ökade ju längre ut mot glaset punkten kom.

Kunde man styra blixten med mobilen?

Skaparen beskrev idén att använda websockets och node.js för kommunikation mellan mobil och dator. Ingen färdig version av den styrningen är känd.

Går det att prova Plasmaball i dag?

Nej, originalet finns inte kvar på den gamla adressen. Sidan finns sparad i Wayback Machine men det är oklart om demot går att köra där.

Källor

Uppgifterna kontrollerades 20 oktober 2026.