Procedurell renderingsmotor i Javascript och HTML5

Transkript

1 Procedurell renderingsmotor i Javascript och HTML5 TNM084 Procedurella Metoder för bilder Gustav Strömberg - gusst250@student.liu.se

2 Syfte Syftet i detta projekt är att implementera en shadermotor i javascript. Shadermotorn ska kunna animera texturen och ge olika upplösning som resultat. Bakgrund Internet och dess språk utvecklas snabbt, nu är trenden att använda sig av html5 och javascript för att skapa dynamiska hemsidor och webbapplikationer. Eftersom utvecklingen av webbspråk går så fort hänger inte alla webbläsare med i utvecklingen. Sysslar man med webbutvecklingen som ligger på fronten av utvecklingen kan man så inte förvänta sig att det kommer fungera under alla webbläsare, vilket är något man snällt får informera sina användare om. canvas är ett element som nyligen introducerades i standarden html5. Canvas låter användaren rita ut och hantera grafik med hjälp av javascript. Canvas har likheter med OpenGL i och med att det fungerar som en state machine. För att ta sig runt på ett canvas använder man sig av transformationer och precis som med opengl används en view matrix för att minnas platsen där man står just för tillfället. Genomförande En grund som ofta används i procedurella material är perlin noise, därför startades arbetet kring shadermoton med att göra en javascript-implementation av perlin simplex noise, portad från Java. Shadermotorn stöder två sorters shaders, fragment shading och displacement shading. Principen för en shadermotor är att, för alla gällande pixlar anropa en funktion med information om pixelns position. Funktionen som anropas bestämmer därefter pixelns färg eller förflyttning beroende på var pixeln befinner sig. Något som också kan tas med i beräkningen är tiden, uppdaterar man renderingen tillräckligt ofta har man då skapat en animation. För att kunna använda bilder i textureringen har även stöd för s.k. texture lookup implementerats. För att påverka texturen extra i efterhand går det även att applicera shaders på en texturyta även efter att textur lagts på den. På test-implementationen av en shader görs displacement shading på den inlästa texturen.

3 Resultat Testande av shadermotorn har gjorts genom implementationer av brinnande papper, ett animerat och ett stillastående. Det animerade var tvunget att köras på så låg upplösning att en högupplöst men stillastående version var relevant att skapa också. De två implementationerna av shaders visas i Figur 1 och 2, eftersom javascript är ett såpass långsamt språk och även inte körs parallellt är det svårt att köra en högupplöst shader i lagom snabb bildfrekvens. Skärmdumpar Figur 1 - statisk bild.

4 Figur 2 - Animerad lågupplöst bild

5 Diskussion En renderingsmotor som ska gå i realtid bör inte programmeras seriellt utan parallellt. Dagens grafikkort är alldeles för kraftiga för att ignoreras av applikationer som använder mycket processorkraft och som har potential att programmeras parallellt. En fördel med att göra en webbapplikation är hur enkelt det är att låta användaren interagera med mus och tangentbord. Utan att behöva installera något kan en användare via webbläsare gå in på hemsidan i fråga och börja använda applikationen. Att behöva ladda ner och installera, kanske även ladda ner nya drivrutiner, är inget som lockar användare till att titta på ditt arbete, även om det kanske går ett par bilder per sekund snabbare. Något som redan finns är WebGL, där kan man skriva shaders med GLSL och använda vanliga 3D-modeller. Än så länge stöder dock inte så många webbläsare WebGL utan tekniken behöver mogna lite innan det kan förväntas att det stöds av alla. Även canvas som jag använt i projektet stöds inte av alla webbläsare men är en del av html5-standarden och bör så snart som möjligt stödas av alla webbläsare som vill hänga med i standarderna. Referenser