InfoTech Umeå

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.

Så kommer du igång med WebGL

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/

Text: Anders Magnusson

Text avMikael Hansson
Publicerad

Fler nyheter om North Kingdom

  • Skellefteå
    2 November 2015

    Entreprenörer kan vinna aktiebolag

    Tredje upplagan av Vinn ett aktiebolag går nu igång i Skellefteå där den som har en företagsdröm kan vinna ett aktiebolag och få starthjälp av erfarna företagare.

  • Skellefteå Digital
    10 September 2015

    Skellefteå visar upp sin digitala industri

    I Skellefteå finns flera framgångsrika företag som satsar på digitala kreativa produkter. I en nyproducerad film lyfter nu Skellefteå kommun fram denna växande industri.

  • Roger Stighäll
    14 Augusti 2015

    North Kingdom blir partner med Lego

    Skellefteåföretaget North Kingdom blir officiell partner med danska Lego för att utveckla leksaksföretagets digitala produkter.

Se alla relaterade nyheter