Lathe: den virtuella svarven i WebGL från 2012

I februari 2012 gick det att svarva direkt i webbläsaren. I experimentet Lathe kunde användaren välja mellan trä, metall eller sten, sätta fart på arbetsstycket med mellanslagstangenten och forma det med musen. Bakom projektet stod den svenska utvecklaren Einar Öberg. Det togs även med i Googles samling Chrome Experiments.

Original: Einar Öbergs eget experiment
Lansering: februari 2012
Teknik: WebGL och procedurella shaders skrivna i GLSL
Samling: Chrome Experiments, under namnet Lathe Machine
Status i dag: Fungerar inte längre på den ursprungliga adressen

Den här sidan beskriver experimentet och tekniken bakom det, men redaktionen har inte byggt originalet. Beskrivningen av tekniken bygger på Einar Öbergs blogginlägg från 2012 och på källorna som listas längst ned.

Vad var Lathe?

Lathe var en virtuell svarv. På skärmen visades en cylinder och användaren valde först om den skulle vara av trä, metall eller sten. Cylindern började rotera när mellanslagstangenten hölls ner. Stålet flyttades längs arbetsstycket med musen och sänktes mot ytan med vänster musknapp.

Ur cylindern växte former som en erfaren svarvare känner igen, med avsatser, spår och smala halsar. Varje material betedde sig olika när ytan skars bort. Trä visade ränder och ringar medan metallen fick blanka spår och stenen ett oregelbundet mönster. Det fanns ingen knapp för att börja om, så för en ny cylinder fick man ladda om sidan.

I Googles katalog Experiments with Google heter projektet Lathe Machine och är märkt med 3D och WebGL. Där beskrivs det kort som en virtuell svarv där man väljer material, startar rotationen och formar cylindern med musen. På Öbergs egen blogg hette demon WebGL Lathe Workshop.

Förebilden: svarven och drejskivan

Svarven hör till de äldsta maskinerna som finns. Den håller fast ett arbetsstycke som roterar kring en axel medan ett skärande verktyg tar bort material. Allt som kommer ut ur en svarv blir symmetriskt kring axeln, oavsett om det rör sig om ett stolsben, en skål eller en ljusstake. Svarvaren styr bara hur djupt stålet går in på varje ställe.

När man svarvar trä sitter emnet fastklämt mellan spindeldockan som driver rotationen och dubbdockan i motsatt ände eller på en chuck. Svarvaren håller själv i verktyget och stöder det mot ett anhåll. I en metallsvarv är verktyget i stället fixerat och matas fram mekaniskt. Tidiga svarvar drevs med en båge eller en rem som drogs fram och tillbaka. Sådana modeller finns avbildade på egyptiska monument.

Krukmakarens drejskiva bygger på samma idé fast med lera. Leran centreras på den roterande skivan medan händerna formar väggarna. En drejskiva av sten som hittats i Ur i dagens Irak dateras till omkring 3129 före vår tideräkning. Både svarvaren och krukmakaren arbetar med en profil som rotationen gör till en hel kropp.

Samma tanke är grunden för rotationskroppar i 3D-grafik. Ett program behöver bara känna till konturen från axeln och utåt för att räkna fram hela föremålet. Hur det går till förklaras längre ned under rubriken Bygg något liknande.

Så fungerade det

Det mesta av magin i Lathe satt i ytan. Öberg beskrev demon som ett lekfullt sätt att visa en enkel procedurell shader, det vill säga ett litet program på grafikkortet som räknar fram mönster med matematik i stället för att läsa dem ur en bild. Varje snitt blottar en del av ett mönster som finns i hela volymen men som aldrig ritats som bild. Själv skrev han att resultatet inte var märkvärdigt jämfört med tidens avancerade fraktalshaders, men att det kändes lite magiskt att sätta upp några enkla regler och sedan resa runt i dem.

SkaletAvståndet till mittaxeln avgör om en punkt hör till ytterskiktet eller till kärnan.
MönstretTvå färger blandas efter positionen så att ränder och ringar uppstår.
BrusetTredimensionellt simplexbrus böjer mönstret så att det ser naturligt ut.
LjusetTre riktade ljus och en skuggkarta ger glans och djup.

Ytan vet var den är

En central poäng i Öbergs text är att shadern har tillgång till ytans position i 3D för varje pixel som ritas. Utan shaders måste man lägga ut en platt bild och vira den runt föremålet med så kallade UV-koordinater. Med positionen i rummet kan mönstret räknas fram precis där det syns. Därför ser ådringen rätt ut även på en yta som nyss skurits fram.

Skalet och kärnan

Cylindern har ett yttre skikt som ska synas innan svarvningen börjar. Öberg prövade först idén att rita på en separat duk utanför scenen och blanda in den, men valde sedan en enklare lösning. Shadern mäter avståndet från mittaxeln och jämför det med cylinderns största radie. Om punkten ligger nära ytterkanten får den skalets färg, annars kärnans. Funktionen smoothstep ger en mjuk övergång ungefär mellan 91 och 98 procent av radien, så att kanten inte blir knivskarp.

I trämaterialet har skalet en egen textur medan metallens skal är enfärgat. Så fort stålet tagit bort lite material hamnar ytan innanför gränsen och kärnans mönster tar över. Tricket kostar nästan ingenting att räkna ut men ger en stark känsla av att materialet har ett inre.

Ränder, ringar och brus

Mönstren inuti bygger på två färger som blandas beroende på positionen. Med decimaldelen av en koordinat går det att färga en viss del av varje intervall annorlunda och få jämna ränder. En sinuskurva ger samma effekt med mjukare övergångar. Skalar man värdena blir ränderna tätare eller glesare.

Raka ränder ser stela ut. Därför lade Öberg till tredimensionellt simplexbrus, en vidareutveckling av Perlinbrus, som läses av på ytans position. Bruset ger ett enda tal per pixel och det talet förskjuter blandningen mellan de två färgerna. Effekten liknar att trycka mönstret åt olika håll, ungefär som när årsringarna böljar i ett riktigt trästycke. Stenen fick ett enklare procedurellt Perlinbrus utan ränder.

Ljus och skuggor

För att metallen skulle glänsa utan en miljökarta användes Phong-belysning med tre riktade ljuskällor. De syns som tre vågräta reflexer längs cylindern, där den mittersta är starkast. Skuggorna byggde på skuggkoden ur filen WebGLShaders.js i three.js, som kopierades in i demons egen shader.

Ett riktat ljus kastar skuggor genom att scenen ritas från ljusets håll till en skuggkarta med fast storlek. Öberg påpekade att ju snävare ram ljusets kamera har runt föremålen, desto skarpare blir skuggorna. Om scenen är liten och kartan stor men skuggorna ändå ser grova ut är inställningarna troligen fel. Han varnade också för modeller som exporterats i fel skala, eftersom förhållandet till kamerorna då blir helt fel.

Hur formen ändrades

Blogginlägget beskriver inte hur geometrin ändrades när stålet skar. Källkoden finns inte heller bland de publika arkiven under användaren inear på GitHub. Principen bakom en svarvad form går ändå att förklara och visas steg för steg längre ned.

Mottagandet

Lathe hamnade bland Googles Chrome Experiments i februari 2012, en samling kreativa webbexperiment. Flera år senare fick svarven ett andra liv. Bloggaren Jason Kottke tipsade den 14 maj 2018 om svarven på kottke.org och kallade den rolig. Han förklarade kort att mellanslagstangenten snurrar träet medan ett klick skär i materialet.

Den 9 juni 2018 publicerade spanska Genbeta en artikel om sidan under namnet WebGL Lathe Workshop, några veckor efter Kottkes inlägg. Skribenten Santi Araújo förklarade reglagen, räknade upp de tre materialen och berömde att allt flöt på utan problem. Rubriken varnade läsarna för att man lätt förlorar mycket tid på experimentet. Han påpekade också att det saknades en knapp för att börja om.

Spåren finns kvar i dag. Både kottke.org och Genbeta länkar fortfarande till experimentets gamla adress inear.se/lathe/ och flera andra webbplatser gör likadant.

Går det att bygga detta i 2026?

Ja. Det är enklare i dag än år 2012. WebGL är en självklar del av moderna webbläsare och three.js har färdiga byggstenar för mycket av det som Lathe fick lösa för hand. Skuggor ställs i dag in direkt på ljuset via egenskapen shadow, där ett riktat ljus har en ortografisk kamera med inställningar för vänster, höger, topp och botten. Det är samma ram som Öberg justerade 2012, fast på en ny plats i koden.

Den stora skillnaden ligger i hur formen tas fram. I stället för att deformera en färdig cylinder kan du beskriva konturen som en lista med punkter och låta three.js rotera den till en kropp. Varje gång stålet tar bort material ändrar du några punkter och bygger om geometrin. Procedurella mönster skrivs fortfarande som shaders och idéerna från Lathe fungerar lika bra som då.

Om källkoden. Originalkoden till Lathe finns inte bland de publika arkiven under användaren inear på GitHub. Det som finns kvar är Öbergs beskrivning av shaderteknikerna. Läs den gärna för idéerna men skriv din egen kod. Uppgiften kontrollerades den 20 oktober 2026.

Del	Lathe 2012	Med three.js i dag
Formen	Inte beskrivet i källorna	LatheGeometry baserad på en lista med punkter
Mönstret	Egen shader som använder position och simplexbrus	Egen shader enligt samma princip
Ljuset	Phong med tre riktade ljuskällor	Färdiga material och ljus
Skuggorna	Skuggkod kopierad in i shadern	Inställningar via light.shadow

Bygg något liknande

Rotationskroppen är kärnan i en digital svarv. Du ritar halva tvärsnittet som en profil från mittaxeln och utåt. Sedan låter du datorn rotera profilen ett helt varv. Vid varje vinkel placeras en kopia av profilens punkter och kopiorna fogas ihop till trianglar. På samma sätt formar svarvaren bara en kontur medan rotationen gör resten.

Profilen: punkter med radie och höjdProfilen roteras runt Y-axelnKopiorna fogas ihop till en yta

Förenklad illustration av principen bakom en rotationskropp. Detta är redaktionens egen bild och inte en skärmdump från originalet.

I three.js heter klassen LatheGeometry. Den tar en lista med punkter där x anger avståndet från axeln och y höjden. Värdet x måste vara större än noll och rotationen sker alltid runt Y-axeln.

Utöver punkterna finns tre valfria värden. Det första värdet, segments, anger hur många steg varvet delas i och är 12 som standard. Fler steg ger en rundare yta men också fler trianglar. Värdena phiStart och phiLength anger i radianer var rotationen börjar och hur stor del av varvet som tas med. Med ett halvt varv ser du rakt in i tvärsnittet, något som passar bra för att visa hur ett svarvat föremål ser ut inuti.

1. Profilen

Bygg en lista med Vector2 där varje punkt anger radie och höjd längs arbetsstycket. Använder du samma radie överallt får du en cylinder.

2. Rotationen

Skapa en LatheGeometry av listan med 48 till 64 segment och lägg den i ett Mesh med ett material som reagerar på ljus.

3. Stålet

Räkna om musens läge till en höjd längs axeln. Minska radien för punkterna nära stålet medan cylindern roterar och bygg om geometrin.

4. Ytan

Skriv en egen shader som läser positionen och avståndet till axeln. Blanda skal och kärna med smoothstep och lägg på brus för ådring.

Låt aldrig radien bli noll eller negativ, eftersom klassen kräver positiva x-värden. Sätt en minsta radie så att arbetsstycket inte går av. Ju fler punkter profilen har på höjden, desto finare spår kan stålet göra. Två hundra punkter räcker långt för en mjuk kontur.

Är 3D nytt för dig är introduktionen till 3D en bra start. Mer om brus som byggsten finns i artikeln om Ridged Perlin noise och ett annat experiment av samma skapare beskrivs på sidan om Urban Jungle Street View.

Vad du kan lära dig av Lathe

Lathe visar hur långt en enkel regel räcker. Avståndet till en axel räcker för att skilja skal från kärna och en position i rummet räcker för att rita ådring. Inga texturer behövde målas för hand för de inre mönstren.

En annan lärdom gäller lek. Öberg skrev att man inte ska underskatta vad som händer när man ändrar värden på måfå, eftersom slumpen ibland ger något bättre än planen. Detta gäller allt shaderarbete, där en liten ändring av en konstant kan ge ett helt annat material. Han föredrog att skriva shaderkoden för hand i egna filer för att förstå den bättre.

Den sista lärdomen kommer från verkstaden. Svarvare och krukmakare har i tusentals år format föremål genom att styra en enda profil. När ett digitalt experiment lånar ett så tydligt fysiskt verktyg behövs nästan inga instruktioner. Kanske förklarar det varför bloggar tipsade om svarven sex år efter lanseringen.

Vanliga frågor om Lathe

Vem skapade Lathe?

Einar Öberg, en svensk utvecklare, skapade Lathe och lanserade det i februari 2012. Experimentet finns i Googles samling Chrome Experiments under namnet Lathe Machine.

Hur styrde man svarven?

Användaren valde material och höll ned mellanslagstangenten för att få cylindern att snurra. Musen flyttade stålet och vänster musknapp sänkte det mot ytan.

Vilka material fanns att välja på?

Det fanns tre material: trä, metall och sten. Varje material hade en egen procedurell shader med ett eget mönster i kärnan.

Går det att prova Lathe i dag?

Originalet körs inte längre på den gamla adressen och källkoden finns inte publicerad på GitHub. Idén går ändå att återskapa med three.js och en rotationskropp.

Vad är LatheGeometry?

Det är en klass i three.js som skapar en kropp genom att rotera en lista med punkter runt Y-axeln. Den passar för föremål som är rotationssymmetriska kring en axel, till exempel vaser, flaskor och svarvade ben.

Källor

Uppgifterna kontrollerades 20 oktober 2026.