En kort introduktion till 3D: från hörn och polygoner till renderloop

En kort introduktion till 3D började som ett föredrag och ett bildspel av utvecklaren Einar Öberg. Det kom till när både Flash och webbläsare för första gången fick hårdvaruaccelererad 3D och många webbutvecklare behövde lära sig grunderna snabbt. Den här guiden tar upp samma frågor på nytt: hur en 3D-scen byggs upp, hur kameran ser den och hur allt till sist blir pixlar på skärmen.

Original

Föredrag och bildspel av Einar Öberg

År

Runt år 2011, när Molehill och WebGL var nya tekniker. Det exakta datumet är okänt.

Teknik

Molehill (Stage3D i Flash), WebGL och Unity som exempel

Status i dag

Bildspelet finns inte längre tillgängligt. Den tidigare adressen till filen pekar nu hit.

Den här sidan är en ny guide som redaktionen har skrivit. Föredraget och bildspelet var Einar Öbergs verk, men texten, exemplen och illustrationerna nedan är redaktionens egna.

Vad innehöll föredraget?

Bildspelet vände sig till utvecklare med bakgrund i Flash. Adobe arbetade då med Molehill, kodnamnet för det som lanserades som Stage3D i Flash Player 11 under 2011. Samtidigt publicerade Khronos Group den färdiga specifikationen för WebGL 1.0 den 3 mars 2011. För första gången kunde både Flash och vanliga webbläsare rendera 3D med grafikkortet utan insticksprogram.

Upplägget var en ordlista snarare än en kurs. Öberg valde ämnen ur en webbutvecklares perspektiv med Molehill, WebGL och Unity som grund och såg listan som en förrätt inför egna studier. Han bad också läsare som redan kunde 3D om synpunkter på bilderna.

Bildspelet länkades bland annat från SitePoint och Noupe. Dessa länkar fungerar fortfarande och leder i dag till den här guiden, som går igenom samma grundbegrepp i en lugnare takt.

Så fungerar 3D-grafik

Alla system för realtidsgrafik bygger på samma process. Du definierar objekt genom punkter i ett tredimensionellt rum, bestämmer varifrån de ska betraktas och låter grafikkortet beräkna färgen för varje pixel. Resten av avsnittet går igenom kedjan steg för steg, från koordinatsystemet till den loop som upprepar bildritningen.

Koordinater och rummet

En 3D-scen bygger på ett koordinatsystem med tre axlar. X-axeln går i sidled, Y-axeln pekar uppåt och Z-axeln går mot eller bort från betraktaren. Standardinställningen i three.js gör att kameran tittar längs den negativa Z-axeln, vilket innebär att objekt med negativt Z-värde hamnar framför den. Varje objekt har sin egen position, rotation och skala. Objekt kan även organiseras i en hierarki där ett barnobjekt följer med när föräldern flyttas.

Hörn, polygoner och mesh

Ett objekts form beskrivs med hörn, på engelska vertices. Ett sådant hörn motsvarar en punkt med tre koordinater. Tre hörn bildar tillsammans en triangel. Triangeln är den enklaste formen av polygon och WebGL ritar i grunden bara punkter, linjer och trianglar.

Många trianglar som delar hörn bildar ett nät som kallas mesh. För att bygga en kub krävs tolv trianglar, det vill säga två per sida. En rund form som en sfär byggs av hundratals eller tusentals små trianglar. Ju fler de är, desto mjukare ser ytan ut. I varje hörn kan mer än positionen lagras: en normal som visar ytans riktning, ett färgvärde och UV-koordinater som styr var texturinformationen hämtas från en bild.

Kamera och projektion

Kameran avgör vad som syns i scenen. En perspektivkamera styrs av fyra parametrar: synfältet i grader, bildens proportioner, ett närplan och ett fjärrplan. Tillsammans bildar de en stympad pyramid som på engelska kallas frustum. Allt inuti pyramiden ritas medan allt utanför hoppas över.

Projektionen är steget där 3D-data blir en 2D-bild. Varje hörn transformeras från rummets koordinater till en punkt på skärmen där objekt längre bort placeras närmare mitten och skalas ned. En ortografisk kamera utför samma transformation utan perspektiv, vilket passar bra för ritningar, kartor och vissa speltyper.

Ljus

Ljussättning i realtidsgrafik bygger på förenklingar. Omgivningsljus belyser alla objekt lika starkt och ger platta former. Ett riktat ljus efterliknar solen med parallella strålar. Ett punktljus sprider ljus åt alla håll som en glödlampa, medan en spotlight lyser i en kon. För att ljuset ska ge volym behövs normaler på ytan, eftersom vinkeln mellan normalen och ljuskällan avgör hur ljus varje punkt blir.

Material och shaders

Ett material beskriver hur en yta beter sig när ljus träffar den. MeshBasicMaterial i three.js ignorerar ljus helt medan fysiskt baserade material tar hänsyn till egenskaper som grovhet och metallighet. Bakom varje material ligger shaders, det vill säga små program som körs på grafikkortet.

En vertex shader körs en gång per hörn och räknar ut var hörnet hamnar på skärmen. En fragment shader körs för varje pixel som täcks av triangeln och avgör vilken färg pixeln ska ha. I WebGL skrivs båda typerna i språket GLSL. Genom att använda egna shaders kan man skapa nästan vad som helst, exempelvis eld som i Fireshader eller brus som bildar ett helt landskap.

1. HörnenPositioner, normaler och UV-koordinater skickas till grafikkortet i buffertar.
2. Vertex shaderVarje hörn transformeras och projiceras till skärmens koordinater.
3. RastreringTrianglarna omvandlas till de pixlar de täcker.
4. Fragment shaderFärgen på varje pixel bestäms utifrån ljusförhållanden, materialegenskaper och texturer.
5. BildenEtt djuptest avgör vilket objekt som ligger närmast och den färdiga bilden ritas ut.

Renderloopen

Oftast räcker det inte med en stillbild. För att få rörelse ritas hela scenen om flera gånger per sekund i en loop. I webbläsaren används requestAnimationFrame för att be den anropa din kod precis före nästa skärmuppdatering. I varje varv flyttar du objekt, justerar kameran och ritar en ny bild.

Tiden mellan två varv varierar med datorns prestanda. Därför är det bättre att räkna ut rörelser utifrån förfluten tid i stället för att flytta ett objekt lika långt varje varv.

WebGL eller three.js?

WebGL är ett gränssnitt på låg nivå. Det ritar bara punkter, linjer och trianglar medan du själv hanterar shaders, buffertar och tillstånd. Det ger full kontroll men kräver mycket kod även för en enkel kub.

Biblioteket three.js lägger ett mellanlager ovanpå WebGL. Utvecklaren arbetar med scen, kamera, mesh, material och ljus i stället för buffertar medan biblioteket skapar de flesta shaders automatiskt. Mozillas dokumentation för utvecklare listar three.js som det främsta valet bland biblioteken för 3D på webben. För nybörjare är det den snabbaste vägen till en fungerande scen.

3D på webben i 2026

Av de tre tekniker som presenterades i det ursprungliga föredraget finns Molehill inte kvar. Adobe slutade stödja Flash Player den 31 december 2020 och från och med den 12 januari 2021 blockeras allt Flashinnehåll. WebGL används fortfarande och den nyare versionen WebGL 2 bygger på OpenGL ES 3.0.

WebGPU är nästa steg. three.js innehåller WebGPURenderer, som använder WebGPU där det är möjligt och annars faller tillbaka på WebGL 2. Där ingår också TSL, ett sätt att skriva shaders i JavaScript som översätts till WGSL eller GLSL. Grunderna i den här guiden gäller oavsett vilket gränssnitt som ritar: hörn, trianglar, kamera, ljus och shaders.

Bygg din första scen

En roterande kub i three.js är det snabbaste sättet att se allt detta på riktigt. Den officiella handboken för three.js går igenom exemplet rad för rad och förklarar varje begrepp längs vägen.

När kuben roterar kan du ersätta den med en egen geometri. Ett plan med många hörn som formas med brus blir ett landskap, vilket guiden om Perlin noise beskriver mer ingående. För att se vad som går att skapa med samma grundläggande kunskaper kan du läsa om Lathe och Urban Jungle Street View.

Slutsatser från presentationen

Det mesta inom 3D-grafik går att koka ner till några enkla begrepp. Geometrier består av trianglar, kameran utför matematiska transformationer och utseendet styrs av korta program på GPU:n. Den som behärskar kedjan från vertex till pixel kan felsöka nästan alla problem.

Verktygen byts ut oftare än grunderna. Molehill försvann efter några år medan begreppen i bildspelet fortfarande är aktuella även med WebGPU i dag. Lägg därför kraften på att förstå principerna och välj sedan det verktyg som passar projektet just nu. Ett bibliotek som three.js gör det möjligt att börja högt upp och gå ner till egna shaders vid behov.

Vanliga frågor om introduktionen till 3D

Vem höll föredraget A brief introduction to 3D?

Utvecklaren Einar Öberg stod bakom föredraget och bildspelet. Redaktionen har skrivit den här guiden, som tar upp samma ämnen på svenska.

Vad är skillnaden mellan polygon och mesh?

En polygon är en enskild yta som i realtidsgrafik nästan alltid är en triangel. En mesh består av många polygoner som delar hörn och tillsammans formar en figur.

Krävs matematikkunskaper för att lära sig 3D?

Enkla koordinater och vektorer räcker långt. Bibliotek som three.js sköter matriser och projektion åt dig, så att du kan börja bygga direkt och fördjupa dig senare.

Ska man börja med WebGL eller three.js?

För de flesta är three.js ett bättre val eftersom en scen visas inom några minuter. Det är värt att lära sig ren WebGL senare för den som vill förstå vad som sker under ytan.

Fungerar WebGL fortfarande i 2026?

Ja. WebGL och WebGL 2 används fortfarande och three.js kan rita med båda. WebGPU är en nyare teknik som three.js kan använda, med WebGL 2 som reservlösning.

Källor

• Khronos Group: Khronos Releases Final WebGL 1.0 Specification, 3 mars 2011
• MDN Web Docs: WebGL API
• Wikipedia: Stage3D (Molehill)
• Adobe: Flash Player end of life
• three.js manual: Fundamentals
• three.js manual: Materials
• three.js manual: Lights
• three.js manual: Custom BufferGeometry
• three.js manual: WebGPURenderer
• Einar Öberg: projektsida

Uppgifterna kontrollerades 20 oktober 2026.