I oktober 2012 kunde du ställa dig mitt i en tornado utan att lämna skrivbordet. Demot Tornado visade en virvlande storm i WebGL, sedd inifrån, med ljud som förstärkte känslan av närvaro. Bakom projektet stod Einar Öberg, som då arbetade som utvecklare på den svenska byrån North Kingdom.
- Original
- Einar Öbergs eget experiment
- Lansering
- hösten 2012, uppmärksammat av Creative Bloq 19 oktober 2012
- Teknik
- WebGL, shader på ett nät med kameran inuti
- Status i dag
- Inte längre tillgänglig online på den gamla adressen
Den här sidan förklarar demot och tekniken bakom det, men redaktionen har inte byggt originalet. Uppgifterna bygger på Öbergs eget blogginlägg, arkiverade versioner av sidan och pressartikeln som listas längst ned.
Vad var Tornado?
Tornado var ett kort interaktivt demo där användaren befann sig i stormens öga. Med reglage uppe till vänster kunde man ändra åt vilket håll virveln drog. Creative Bloq beskrev demot som något som gav besökaren kontroll över stormen och jämförde effekten med tidstunneln i förtexterna till Doctor Who.
Kraven var en modern webbläsare och ett hyggligt grafikkort, helst den senaste versionen av Chrome. Detta var typiskt för WebGL-experimenten runt år 2012, då hårdvaruaccelererad 3D i webbläsaren fortfarande kändes nytt för de flesta användare.
Så fungerade det
Enligt Öbergs egen beskrivning var Tornado i grunden samma experiment som hans eldboll, Ball of Smoke and Fire från november 2011. Skillnaden var att kameran nu satt inne i nätet och att han hade gjort en del extra justeringar. Han kallade det själv en av de tidiga testprototyperna.
Ett nät i stället för tusentals partiklar
Många tänker på partikelsystem när det gäller rök och stormar. Ett sådant system består av tusentals små punkter där varje punkt har en position, en hastighet och en livslängd. I varje bildruta flyttas punkterna en bit och ritas som små bilder som alltid är vända mot kameran. Det ger luftiga effekter men kräver mycket resurser när punkterna blir många.
Tornado gick en annan väg. Ett 3D-nät ritades med en shader som rörde brus över ytan, ungefär som i eldbollen. När kameran placeras inne i formen ser du väggarna runt omkring dig. Brusets rörelse ger intrycket av luft som virvlar förbi.
Det som får en virvel att se ut som en virvel
Rörelsen i en tornado kan delas upp i två delar. Luften snurrar kring en lodrät axel och stiger samtidigt uppåt. När varje punkt får en vinkel som växer med tiden och en höjd som också ökar bildas en spiral. Resultatet blir mer trovärdigt om de innersta varven roterar snabbare än de yttre.
I en shader görs samma sak med texturkoordinater i stället för punkter. Bruset förskjuts runt formen med tiden och uppåt längs axeln. Om användaren ändrar riktning byts bara tecknet eller hastigheten i den förskjutningen.
Bildbehandling och ram
Öberg använde en egen variant av glfx.js, ett bibliotek för bildeffekter i WebGL, för att bearbeta den färdiga bilden. Ovanpå lade han en ram byggd med en så kallad 9-slice-teknik. Ett plan delas in i nio delar så att hörnen behåller sina proportioner även när planet sträcks ut till helskärm.
Mottagandet
Creative Bloq skrev om demot den 19 oktober 2012 under rubriken ”Enter the tornado! Amazing new WebGL demo”. Artikeln lyfte fram ljudeffekterna och möjligheten att styra stormens riktning. Öberg skrev själv om demot på sin blogg först i juli 2013 och konstaterade att han hade glömt att lägga upp det där tidigare.
Går det att göra likadant i 2026?
Ja. Det är i dag lättare än förr. WebGL stöds av alla moderna webbläsare och three.js har färdiga byggstenar för både nät och partiklar. Ingen källkod till originalet har hittats på Öbergs GitHub, så en egen version måste byggas från grunden.
Bygg något liknande
1. Formen
Skapa en cylinder eller ett rör som smalnar av nedtill och vänd ytorna inåt så att de syns inifrån.
2. Bruset
Skriv en shader som flyttar ett brusmönster runt formen och uppåt med hjälp av ett tidsvärde.
3. Kameran
Placera kameran nära axeln och låt den gunga lite så att rörelsen känns levande.
4. Partiklar
Lägg till lösa partiklar som snurrar i spiraler runt axeln och föreställer damm och skräp.
För formen räcker en vanlig geometri med en ShaderMaterial där du skriver bruset själv. Dammet görs med Points, där varje punkt får en vinkel, en radie och en höjd som räknas om varje bildruta. Läs gärna mer om eldbollen på Fireshader och om brus i Ridged Perlin noise.
Vad du kan lära dig av demot
Tornado visar hur långt en idé kan återanvändas. Eldbollen blev en storm när kameran flyttades in i formen och parametrarna justerades. Det är ett effektivt sätt att arbeta med shaders: man bygger en effekt ordentligt en gång och testar den sedan i nya sammanhang.
Känsla kommer inte bara från grafik. Ljudet var en del av upplevelsen och lyftes fram i pressen lika mycket som bilden.
Vanliga frågor om Tornado
Vem skapade Tornado?
Demot utvecklades av den svenska programmeraren Einar Öberg, som vid tillfället arbetade på byrån North Kingdom. Det var ett eget experiment.
Var Tornado ett partikelsystem?
Nej, enligt skaparens egen beskrivning byggde det på samma teknik som hans eldboll. Ett nät med en brusshader renderades med kameran placerad inuti formen.
Går det att prova Tornado i dag?
Originalet går inte längre att köra på den gamla adressen. En kopia av sidan finns sparad i Wayback Machine men det är oklart om demot går att köra där.
Hur får man en virvel att snurra i three.js?
Ge varje punkt en vinkel och en höjd som ökar med tiden. Rotationen kring axeln och stigningen uppåt bildar tillsammans en spiral.
Källor
- Creative Bloq: Enter the tornado! Amazing new WebGL demo, 19 oktober 2012
- Experiments with Google: Ball of Smoke and Fire
- Wayback Machine: inear.se/tornado/, 12 mars 2013
- Wayback Machine: blogginlägget om Tornado
- three.js: Points
- three.js: ShaderMaterial
Uppgifterna kontrollerades 20 oktober 2026.