Så kommer du igång med WebGL

WebGL
Med hjälp av lite kreativ WebGL framtagen av Einar Öberg kan du svarva trä och metall direkt i webbläsaren. Detta och många andra demos finns på chromeexperiments.com.

WebGL öppnar möjligheten att visa interaktiva 3D-miljöer direkt i webbläsaren helt utan tilläggsprogram som Flash. Webben går verkligen en intressant framtid till mötes och vi har pratat med några utvecklare som tipsar om hur du kommer igång med det hela.

I vår tidigare artikel Så kommer du igång med HTML5 nämnde vi att utvecklare kan använda sig av WebGL för att visa 3D-grafik direkt i webbläsaren, utan några som helst tilläggsprogram installerade. HTML5 och WebGL blir därmed ett konkret alternativ till Adobes Flash-plugin som har varit rådande i många år, även om de flesta är överens om att övergången kommer att ta tid.

För den som direkt vill sätta tänderna i den nya tekniken tänkte vi därför ägna denna artikel åt just WebGL, eller Web-based Graphics Library som det egentligen heter. Interaktiv 3D direkt i webbläsaren

Interaktiv 3D direkt i webben

WebGL är en plattformsoberoende standard som med javascript kan anropa datorns grafikhårdvara för att producera interaktiv 3D-grafik direkt i webbläsaren. Rent konkret kan tekniken användas för att bland annat ge spel och grafiska produktioner nya dimensioner. Den uppmärksammade musikvideon Rome - 3 Dreams of Black som Skellefteåföretaget North Kingdom varit med och utvecklat är ett bra exempel på vad som går att göra med WebGL.

Ett annat exempel är det öga som Einar Öberg, utvecklare på North Kingdom, skapat och vars pupill går att styra med muspekaren. Se bilden nedan och pröva ögat här.

WebGL eye 

Vanliga applikationer på webben kan också dra nytta av tekniken för utökad funktionalitet. Den gör det till exempel möjligt att i webbläsaren ge användaren intryck av att svarva direkt i trä som bilden överst på denna sida visar, pröva själv här.

Ett annat exempel skulle kunna vara en möbelfirma som låter kunderna vända och vrida på möblerna inne på företagets hemsida för att komma närmare produkten. Ett ytterligare praktiskt exempel är Google Maps relativt färska läge MapsGL som låter användaren se 3D-byggnader i kartläget, men som också kan visa och rotera flygfoton i 45 graders vinkel. Övergångarna mellan olika kartlägen har dessutom gjorts betydligt mjukare tack vare WebGL.

För att kunna dra nytta av fördelarna med WebGL krävs dels hårdvara som kan sätta fart på koden och dels en webbläsare som har inkluderat stödet för tekniken. I dagsläget finns WebGL-stödet i Chrome, Firefox, Opera och Safari, men i Safari måste du själv aktivera stödet i inställningarna. En stor bromskloss när det gäller möjligheten för WebGL att sprida sig är att stödet fortfarande inte finns inbyggt i marknadens största webbläsare, Internet Explorer.

Uppstickare mot veteran

Någon som känner till en del om skillnaderna mellan WebGL och Flash är Einar Öberg. Han är erfaren utvecklare på North Kingdom och har arbetat med både Flash och WebGL.

– En fördel med HTML5 och WebGL är att man inte behöver kompilera koden, så det går snabbt att göra en prototyp och komma igång med ett experiment. Även shaders (kod som utförs direkt av grafikkretsen, reds anm) är lättare att skriva då man använder språket GLSL. Det finns även ramverk som Away3D, Alternativa3D, Flare3D med flera som har färdiga funktioner och shaders, precis som ramverken i Javascript/HTML5.

– En fördel med Flash är att du inte behöver tänka på cross-browser-problematiken på samma sätt. Flash har även en mjukvaru-renderare om man inte har hårdvarustöd, även om den har begränsad prestanda, säger Einar Öberg. Men det allra största argumentet för Flash är enligt Einar det faktum att det fungerar i Internet Explorer, förutom då alla extrafunktioner som följer med på köpet.

WebGL i mobilen

Med tanke på att vi i allt större utsträckning besöker webben genom surfplattor och mobiler är det naturligt att undra hur bra WebGL fungerar där. Särskilt då Flash är en komponent som inte stöds av Apples produkter.

– Tyvärr är stödet för WebGL fortfarande rätt begränsat på mobila plattformar och i dagsläget bara med de mobila versionerna av Firefox och Opera. Det fungerar hjälpligt och kräver gärna flera processorkärnor, men utvecklingen går ständigt framåt, menar Stefan Hedman, projektassistent på UMIT Research Lab.

Einar Öberg på North Kingdom tror också att det kommer att hända mycket på det området.

– Se bara på vad man kan göra i vanliga appar på mobiler. Det är samma hårdvara som kan användas, det handlar bara om att exponera den i browsern. Kommer man väl "in" i GPU:n, alltså grafikkretsen, så är de grafiska beräkningarna likadana. Flaskhalsen är i stället hastigheten i själva browsern, alltså exekveringen och prestanda i javascript, förklarar Einar Öberg.

Förkunskaper krävs

Visst går det att med tjurighet och hårt arbete kasta sig in i nästan vilket projekt som helst utan tidigare erfarenheter, men för den som tänker börja med WebGL blir det betydligt enklare om du läst på en del innan. Vad är det då som är bra att kunna?

– Javascript och viss HTML/CSS. Sen är det bra om man kan något 3D-program som 3D Studio max, Maya eller Blender för att skapa och exportera modeller. Kan man Flash/AS3 har man mycket gratis då språk och problemlösning är väldigt likartade, tipsar Einar Öberg.

Sen då, hur kommer man enklast igång?

– Det svåra kan vara att veta VAD man kan göra, speciellt om man inte kommer från en 3D-bakgrund. Man kan snabbt göra en roterande kub, men utmaningen kan ofta vara att komma på vad man vill skapa. Där finns massor av inspiration på diverse sajter och bloggar. Har man inte programmerat javascript alls så bör man nog börja med det. Börja sedan med att kolla in ett ramverk, exempelvis three.js.

Einar Öberg tipsar också om att det fina med HTML5 och WebGL är att du alltid har tillgång till källkoden. På så sätt är det enkelt att ta en titt på andras arbeten och se hur de är uppbyggda. Ordet shader, som Einar tidigare nämnde i detta sammanhang är ett koncept som också är viktigt att få grepp om.

– Det är små program som man kör på grafikkretsen för att snabbt manipulera och rita upp modeller och material, förklarar Einar Öberg och tipsar om en bra start för den nyfikne i en tvådelade guide på An introduction to shaders, del I och del II.

– På webbplatsen GLSL Sandbox finns även en online-editor som låter dig leka med shaders i realtid samt se andras exempel, säger Einar.

– När man blivit varm i kläderna är det dags att engagera sig i communityt. Kolla forum som Github eller Stackoverflow. Följ nyckelpersoner på twitter och lägg till bloggar i rss-feeden. Publicera gärna dina experiment. Ju mer man delar med sig av desto mer får man tillbaka, är Einar Öbergs avslutande råd.


Länkar för den experimentlystne

Undrar du över vilken webbläsare som kan hantera WebGL?
http://caniuse.com/webgl

Med WebGL är det ingen konst att köra Formel 1-bil direkt i webbläsaren.
http://helloracer.com/webgl/

Learning WebGL är en sajt som både rymmer inspirationslänkar och tutorials för att sätta igång med rå WebGL. Här går det att förkovra sig länge.
http://learningwebgl.com/blog/

Pixelnerve och Opera har var sin tutorial för den som på mer teknisk nivå vill ge sig på de verkliga grunderna inom WebGL.
http://www.pixelnerve.com/v/2011/05/27/first-steps-with-webgl/
http://dev.opera.com/articles/view/raw-webgl-part1-getting-started/

Three.js är ett så kallat high-level bibliotek ovanpå WebGL som gör det betydligt enklare att faktiskt åstadkomma konkreta resultat. Här finns många exempel som visar vad som går att göra.
https://github.com/mrdoob/three.js/

Einar Öbergs blogg hittar du här
http://www.inear.se/

Relaterade nyheter

  • Så kommer du igång med HTML5

    Webbens värld är i ständig förändring och det senaste tillskottet stavas HTML5. Vilka är fördelarna och hur kommer man enklast igång? Infotech Umeå har pratat med några experter på området som ger någ...

  • Expertpanel: Så fungerar HTML5

    Intresset för HTML5 för utveckling av webbsidor exploderar och mer än 400 har sökt till årets sommarkurs vid Umeå universitet. Valet av HTML5 som ämne för InfoTech Umeås första webbtv-avsnitt med expe...

  • North Kingdom och Google skapar framtidens webb

    Google Research Lab har tagit hjälp av North Kingdom från Skellefteå för att skapa framtidens webbupplevelse. Det som tidigare enbart kunnat göras i datorspel kan nu göras direkt på en webbsida.

Dela |
Skriv utKommentera artikel Tipsa en vän

Tipsa en vän

Om Så kommer du igång med WebGL

Det finns 0 kommentarer till artikeln

Inga nya kommentarer kan postas