Kom igång och rita med WebGL på en Canvas

Du har en sandbox för att testa dina JavaScript-program och du kan rita på en canvas. Låt oss nu introducera WebGL och uppgradera din sandbox-miljö för att jobba med WebGL och 3D.

Så här kan en sandbox se ut när den är klar. Inte mycket till 3D kanske, men man måste börja någonstans. Det är iallafall WebGL och det är en bra start.

#Förutsättning

Artikeln är en del av kursen webgl och förutsätter att du har jobbat igenom artikeln “Kom i gång med HTML, CSS, JavaScript och Canvas”.

Artikeln förutsätter också att du är bekant med de begrepp, och kodexempel, som tas upp i de två första kapitlen i boken WebGL Programming Guide. Denna artikeln förklarar inte de koncept som visar hur man ritar med WebGL, det görs i boken.

#En sandbox för exempelprogram

Du har sedan tidigare en sandbox där du kan rita i ett 2D kontext. Du kan utgå från det exemplet och kopiera till en ny katalog.

# Gå till kursrepot
cd me/kmom01
cp -i sandbox/* sandbox2/

Då ska vi se vad som behövs för att rita i ett 3D kontext med WebGL.

#Följ bokens exempelkod

Det finns olika sätt att strukturera sin kod och eftersom vi kommer följa boken i denna kursen så börjar vi med att inkludera de libb som följer med boken. Efterhand kommer du märka att det kräver en hel del kodrader för att skriva WebGL och förr eller senare så väljer man att samla den koden i ett eget libb, eller så använder man något av de libben som är färdiga.

Men vi börjar från start och därför väljer vi att använda bokens libb som finns inkluderade i kursrepot under example/libs. Som du kan se så finns det många filer i denna katalogen. Till att börja med så kommer vi använda webgl-utils.js, webgl-debug.js och cuon-utils.js.

Du får en bra struktur på dina exempelprogram om du väljer att kopiera de filerna till katalogen me/libs. Så här gör du.

# Gå till kursrepot
cp -i example/libs/{webgl-*,cuon-utils.js} me/libs/

Du får nu uppdatera din sandbox2/index.html så den inkluderar de tre libben. Det gör du i slutet av filen med följande kod.

<script type="text/javascript" src="../../libs/webgl-utils.js"></script>
<script type="text/javascript" src="../../libs/webgl-debug.js"></script>
<script type="text/javascript" src="../../libs/cuon-utils.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>

Fint, nu har du dessa helpers tillgängliga, nu kan vi börja testa de exempel som följer med boken.

#Färglägg canvasen

Ett av bokens första exempel handlar om att färglägga canvasen. Det exemplet finns i kursrepot under example/webgl/theBook/Chapter2/ex2 och du kan själv testa det.

Ta nu koden från exemplet och lägg in i din egen sandbox och testa om du kan få fram samma bakgrundsfärg som jag visar i följande bild.

#Rita punkt med shaders

I bokens nästa exempel så införs shaders och man ritar en punkt. Det exemplet finns i kursrepot under example/webgl/theBook/Chapter2/ex3 och du kan själv testa det.

Ta nu koden från det exemplet och testa det i din egen sandbox så att det fungerar. Se om du kan justera färgerna, inte nödvändigtvis de färger som jag använder, men testa. Som du ser så har jag även ändrat storleken på punkten som ritas ut.

#Skicka variabler till vertex shader

I bokens följande exempel så visar man hur man skickar variabler till vertex shader och man fortsätter rita sin punkt, men nu kan man ändra storlek och position på punkten via JavaScript. Exemplet finns i kursrepot under example/webgl/theBook/Chapter2/ex4 och du kan själv testa det.

Ta nu koden från det exemplet och testa det i din egen sandbox så att det fungerar. Försök nu justera JavaScript-koden så att punkten placeras ut på en annan position och med en annan storlek.

#Klicka och placera ut punkter

Boken fortsätter på samma tema men nu lägger de till en eventhanterare i JavaScript som låter oss rita ut en ny punkt varje gång vi klickar med musen i canvasen. Exemplet finns i kursrepot under example/webgl/theBook/Chapter2/ex5 och du kan själv testa det.

Ta nu koden från det exemplet och testa det i din egen sandbox så att det fungerar. Försök nu justera JavaScript-koden så att punkten placeras ut med en annan storlek och en annan färg.

En leende gubbe, en bra start.

#Klicka och placera ut punkter

I det avslutande exemplet så lägger boken till logik i JavaScript-koden som ritar ut punkter med olika färger beroende av vad man klickar. Exemplet finns i kursrepot under example/webgl/theBook/Chapter2/ex6 och du kan själv testa det.

Pröva så du kan få det exemplet att fungera i din egen sandbox. Försök att justera JavaScript-koden så att punkten får en annan färg och storlek. Du kanske till och med kan lägga till fler ytor så det blir fler färger än fyra.

Ren och skär konst med WebGL.

#Avslutningsvis

Detta var en genomgång av de exempelprogrammen som finns i kapitel 2 i boken och du har nu en grund att stå på för att skriva ditt egna första enkla program i WebGL där du kan klicka och rita ut punkter.

Om du stöter på problem så kan du alltid fråga direkt i kursens forum.

#Revision history