Fireshader: så sattes en sfär i brand med three.js

I september 2011 brann ett eldklot i webbläsaren. Fireshader var en WebGL-demo med rörlig eld och rök som skapades i realtid med three.js och egna shaders. Den svenska utvecklaren Einar Öberg låg bakom projektet, efter att ha gjort ett enklare Flash-experiment med eld året innan.

Original: Einar Öbergs egna experiment
Lansering: september 2011
Föregångare: en Flash-baserad eldeffekt cirka tolv månader tidigare
Teknik: Renderingstextur med WebGL, three.js, GLSL-shaders samt Perlinbrus
Status i dag: Inte längre tillgänglig online på den gamla adressen

Denna sida förklarar demon och dess teknik, men redaktionen har inte återskapat originalet. Beskrivningen bygger på Einar Öbergs eget blogginlägg och den samtida artikel som anges längst ner.

Vad var Fireshader?

Fireshader visade en sfär omsluten av lågor mot en mörk bakgrund. Ytan bubblade medan flammorna sträckte sig från klotet och rök blandades in vid kanterna. En inställningspanel gjorde det möjligt att justera effekterna medan klotet brann, bland annat en vridning som fick hela klotet att snurra.

Demon var nästa steg i en rad experiment med naturens element. Öberg hade tidigare experimenterat med eld i Flash. I ett äldre blogginlägg beskrev han hur han animerade Perlinbrus i en bitmapp på 80 gånger 80 pixlar med två oktaver. Genom WebGL kunde idén flyttas till grafikkortet för att få djup och högre upplösning.

Så fungerade det

Realtidsgrafik för eld är sällan en fysikalisk simulering. Det som visas är brus, ett mjukt slumpmönster som rör sig över tid och färgsätts med en skala från ljust till mörkt. Fireshader kombinerade tre delar som tillsammans skapade illusionen av lågor.

Brus ritas till en texturHörnen flyttas utåt efter brusetFärgskala, rök och dimma ger elden

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

Bruset i en dold scen

Beräkningen av bruset skedde i en fragmentshader, det program som bestämmer färgen för varje pixel. Shadern lades på ett plan i en osynlig scen, ritades till en textur och kopplades sedan till materialet på sfären. I varje bildruta fick bruset en ny tidsförskjutning så att mönstret rörde sig.

Att linda en platt textur runt ett klot leder ofta till att den kläms ihop vid polerna. Öberg löste problemet genom att omvandla varje texturkoordinat till en punkt på en tänkt sfär och hämta brusvärdet därifrån. Alla delar av ytan fick då samma detaljnivå. En radie i funktionen styrde tätheten i mönstrets upprepning.

Förskjutning i vertexshadern

En sfär med brustextur ser fortfarande platt ut. För att skapa flammor som sticker ut läste vertexshadern in brustexturen och flyttade varje hörn längs dess normal, vilket är riktningen som pekar rakt ut från ytan. Två värden som kunde justeras från JavaScript bestämde hur långt hörnen flyttades och var nollnivån låg.

Denna teknik kräver att vertexshadern kan läsa texturer, en funktion som inte fungerade i alla WebGL-miljöer 2011. Koden innehöll därför en reservlösning som visade sfären utan förskjutning när stödet saknades. Ovanpå förskjutningen animerades hörnen över tid, bland annat genom vridning som kunde styras via panelen.

Färgen i fragmentshadern

Det sista steget var en enkel fragmentshader. Två eldfärger mixades och multiplicerades med en kanal från brustexturen, varefter resultatet blandades med en rökfärg. Dimma fick kanterna att smälta samman med bakgrunden, vilket gjorde att klotet inte längre framstod som en sfär. Till sist lades ett glödfilter på hela bilden och några partiklar lades till, något som Paul Lewis enligt CreativeJS hade hjälpt till med.

Del	Var	Uppgift
Brus	fragmentshader på ett dolt plan	skapar ett rörligt mönster som lagras i en textur
Förskjutning	vertexshader på sfären	förflyttar hörnen utåt så att lågorna får sin form
Färgskala	fragmentshader på sfären	omvandlar brusvärden till eld, rök och dimma

Mottagandet

Seb Lee-Delisle publicerade den 20 september 2011 en artikel om demon på CreativeJS med rubriken Great balls of fire. Han nämnde att han hade mött Öberg veckan innan under konferensen Flash on the Beach och beskrev demon som imponerande. Texten betonade särskilt att Öberg redogjorde för hela sin arbetsprocess i ett eget blogginlägg.

CreativeJS hade bara några veckor tidigare rapporterat om hans Beanstalk. Båda projekten släpptes under samma sommar och höst när three.js fortfarande var ett ungt bibliotek och få hade sett eld av det här slaget i en webbläsare.

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

Ja. Det är lättare i dag än år 2011. WebGL stöds av alla stora webbläsare och three.js erbjuder inbyggt stöd för egna shaders via ShaderMaterial. Du anger en vertexshader, en fragmentshader samt ett objekt med uniforms där tiden ingår.

Vägen genom en dold scen behövs sällan längre. Ett vanligt sätt i dag är att beräkna tredimensionellt brus direkt i vertexshadern baserat på hörnets position. På så sätt undviker du både extra renderingssteg och problem vid polerna, eftersom bruset hämtas från rummet i stället för en platt bild.

Om källkoden. Redaktionen har inte kunnat hitta något publikt kodarkiv för Fireshader. Kodsnuttarna i Öbergs blogginlägg går att läsa för att förstå konceptet, men det saknas en licens som tillåter kopiering. Informationen verifierades den 20 oktober 2026.

Bygg något liknande

Med three.js och några dussin rader GLSL kan du skapa en egen brinnande sfär under en eftermiddag. Stegen nedan följer samma grundprincip som originalet men använder dagens enklare upplägg.

SfärenSkapa en sfär med många segment, gärna över hundra åt varje håll, så att förskjutningen blir mjuk.
TidenGe materialet en uniform för tiden och öka värdet i varje bildruta med klockan i three.js.
BrusetLägg in en funktion för 3D-brus i vertexshadern och anropa den med hörnets position och tiden.
FörskjutningenFlytta hörnet längs normalen baserat på brusvärdet och skicka värdet till fragmentshadern.
FärgskalanBlanda mörkrött, orange och gult baserat på brusvärdet och låt de lägsta värdena övergå till rök.
GlödenLägg på dimma och ett glödfilter i efterbehandlingen för att mjuka upp kanterna.

Elden stiger

Se till att bruset rör sig snabbare uppåt än nedåt så att lågorna framstår som stigande.

Flera oktaver

Kombinera två eller tre lager brus med olika skalor för att skapa både stora tungor och fina detaljer.

Ryggar i bruset

Vänd negativa brusvärden till positiva för att få skarpa kanter som liknar flammor.

Additiv blandning

Använd additiv blandning för att rita det yttersta lagret. På så sätt blir överlappande lågor ljusare.

Tricket med ryggar användes redan i Öbergs Flashversion. Mer information finns i Ridged Perlin noise.

Vad du kan lära dig av Fireshader

Fireshader visar att trovärdig eld sällan kräver fysiksimulering. Rörligt brus, en välvald färgskala och lite dimma räcker långt. Resten är finjustering av siffror tills resultatet känns rätt.

Demon är också ett bra exempel på hur man formar bruset innan det används. Genom att beräkna om koordinaterna för sfären uppnådde Öberg jämn detalj över hela klotet, vilket är en fördel med brus som genereras i koden i stället för att läsas från en bild. Samma princip gäller för terräng, moln och vatten.

Vanliga frågor om Fireshader

Vem skapade Fireshader?

Den svenska utvecklaren Einar Öberg skapade Fireshader och publicerade den i september 2011. Han beskrev själv tekniken i ett blogginlägg under samma månad.

Vilken teknik användes i Fireshader?

Demon byggdes med WebGL och biblioteket three.js. Elden genererades genom Perlinbrus i en fragmentshader och genom hörnförskjutning i en vertexshader.

Varför kläms texturer ihop på en sfär?

En platt bild som lindas runt ett klot får för många pixlar nära polerna. Detaljen blir jämn över hela ytan om bruset i stället hämtas från en punkt i rummet.

Vad gör uniformen för tid?

Den skickar in den tid som har gått till shadern i varje bildruta. Eftersom bruset läses med tiden som en extra koordinat rör sig mönstret.

Går det att se originalet i dag?

Demon finns inte kvar på sin tidigare adress. Det går att återskapa tekniken med three.js och egna shaders.

Källor

Uppgifterna kontrollerades 20 oktober 2026.