Thesis no: BGD-2016-05

Textrendering med kantlinjer i Direct3D 11

Erik Ståhlberg

Faculty of Computing Blekinge Institute of Technology SE–371 79 Karlskrona, Sweden This thesis is submitted to the Faculty of Computing at Blekinge Institute of Technology in partial fulfillment of the requirements for the Degree of Bachelor of Science in Digital Game Development. The thesis is equivalent to 10 weeks of full time studies.

Contact Information: Author: Erik Ståhlberg E-mail: [email protected]

University advisors: Lecturer Stefan Petersson Department of Creative Technologies

Lecturer Erik Wadstein Department of Creative Technologies

Faculty of Computing Internet : www.bth.se Blekinge Institute of Technology Phone : +46 455 38 50 00 SE–371 79 Karlskrona, Sweden Fax : +46 455 38 50 57 Abstract

Context. Text rendering is useful in different contexts, and usually needs to be as sharp as possible. DirectWrite and Direct2D is a good choice when rendering for a 2D environment and can be used with Direct3D. Objectives. This study addresses the problem of aliasing with a study on FXAA or SSAA to find which is the better option to correct jagginess on text. Methods. A number of photos were set up where 26 test subjects had to answer questions about the blurring and jagginess in the photos. Results. The results showed that FXAA and SSAA perform relatively sim- ilar in jagginess in how jaggy the pictures is perceived and was significantly better than no anti-aliasing at all. Conclusions. It depends on how the images are displayed on the screen to detect any kind of jagginess or blur.

Keywords: Direct2D, DirectWrite, Kantlinjer, Antivikningsfilter

i Innehållsförteckning

Abstract i

1 Introduktion 1 1.1 Syfte ...... 1 1.2 Frågeställning och Hypotes ...... 2 1.3 Metod ...... 2 1.4 Begränsningar ...... 3 1.5 Definitioner ...... 4

2 Relaterade Arbeten 5

3 Bakgrundsfakta 6 3.1 Typsnitt ...... 6 3.2 API:er ...... 8 3.2.1 DirectWrite ...... 8 3.2.2 Direct2D ...... 8 3.2.3 Direct3D ...... 9

4 Metod 10

5 Experimentuppställning 12

6 Utförande 15 6.1 Förberedelse ...... 15 6.2 Testgrupp ...... 15 6.3 Genomförande ...... 15

7 Resultat 18 7.1 Textbilder ...... 18 7.2 Kombinerade bilder ...... 20

8 Analys och Diskussion 22

9 Slutsats och Framtida Arbeten 24

ii Referenser 25

A Fullskaliga Bilder 27

B Bilduppsättning 35

C Användarens medgivande 43

D Delförklaringar 44

E Frågeformulär 45

iii Kapitel 1 Introduktion

I olika sammanhang kan det vara användbart att rendera text med Direct3D. Det kan vara till olika ändamål så som spel, film, reklam med mera. För att kunna få ett lyckat resultat behöver texten vara så pass skarp att inga visuella artefakter uppstår. Exempel på detta är vikningsproblem som gör texten svår att tyda. Det finns redan forsknin inom detta område där olika tekniker används för att rendera text så skarp som möjligt [15] [13] [16]. Det går att rendera till 2D-rymd med ett bra resultat men vad händer om detta 2D-renderat material appliceras i 3D-miljö?

DirectX är ett samlingsnamn för olika API:er där bland annat Direct2D, Di- rectWrite och Direct3D ingår. DirectWrite är ett speciellt anpassat system som tar hand om olika typer av typsnitt när det kommer till inläsning och tolkning. Tillsammans med Direct2D kan text representeras på skärmen där ett brett utbud av tecken kan tolkas med hjälp av Unicode-karaktärer. Direct2D har på senare tid byggts om till att bättre samarbeta med Direct3D för att kunna utnyttja olika resurser sinsemellan. Detta har medfört att textrendering i 3D-miljö med DirectWrite har blivit möjligt. Kan Direct3D representera text i en 3D-scen med minimal förlust av visuell kvalité med hjälp av metoder som reducera vikning?

Lottes statera följande mening i sitt papper: "FXAA bör användas före HUD eller UI.", översatt från engelska [8]. FXAA betyder Fast Approximate Anti-Aliasing och är en antivikningsfilter som finner kanter i en bild och jämna ut dem med bakgrunden. Eftersom Lottes staterar denna meningen skulle det varit intressant att göra en undersökning med textrendering som användes sig av FXAA. För att ha något jämföra med är Super Sampling Anti-Aliasing (SSAA), eller Full-Scene Anti-Aliasing som det ibland kallas, en annan metod som korrigerar vikning med hjälp av en större textur [10]. Denna textur skalas ner till att passa den valda storleken i renderingen och samplar därmed ifrån närliggande pixlar.

1.1 Syfte Detta arbetet riktar sig mot att jämföra olika resultat inom textrendering i en 3D scen. FXAA appliceras på en bild och SSAA på en annan för att avgöra vilken som

1 Kapitel 1. Introduktion 2 fungerar bäst för textrendering. En testgrupp kommer att jämföra olika bilder i flera scenarion där de ska gradera bilderna efter suddighet samt kantighet. Syftet är att undersöka om Lottes påstående stämmer och därför valdes SSAA som en referensmetod då den inte förlitar sig på approximeringar för att finna kanter, eller speciella uträkningar, utan istället sampla ifrån närliggande pixlar för att finna ett medelvärde.

1.2 Frågeställning och Hypotes Frågeställning för denna uppsats är följande:

• Varför sker det förlust av visuell kvalité vid användning av 2D-renderad text i en 3D-scen?

• Är det FXAA eller SSAA som, ur en människas synpunkt, korrigerar vikning bättre av text renderad i en 3D-miljö än ingen alls?

Visuell kvalité menas i detta sammanhanget fri från vikning och oskärpa i bilderna. Troligtvis uppstår vikning och därmed behövs det någon form av korrigering till vikningen. Den första frågan kommer att diskuteras i kapitlet Bakgrundsfakta och därmed inte vara med i experimentet. Hypotesen lyder följande:

• SSAA kommer visa bättre resultat än FXAA vid textrendering.

Förmodligen visar sig SSAA prestera bättre i att behålla skärpan och minska kantigheten medans FXAA kommer göra bilden suddig men minska kantigheten. Detta antagande är baserad på Lottes papper om FXAA där det rekommenderas att FXAA appliceras före textrendering [8].

1.3 Metod DirectWrite kommer att kombineras med Direct2D för att kunna rendera texten som sedan Direct3D kan använda sig av i sin render pipeline. Det finns full doku- mentation om dessa system tillgänglig på Microsoft Developer Network (MSDN) [3]. För att kunna rendera en bild så skarp som möjligt kommer SSAA och FXAA appliceras på texten. FXAA är en lämplig metod då den riktar sig att finna kan- ter i en bild och jämna ut dem. SSAA har valts då den använder sig av en större textur för att sampla till en med mindre skala. Det finns andra metoder att införa korrigering av vikningsproblem men de är mestadels riktade på snabb hastighet samt mot själva geometri och inte texturer, vilket inte är syftet i denna uppsats. Målet är att jämföra bilder med hjälp av en undersökning där deltagare får svara på ett formulär med tillhörande bilder. Experimentet kommer att utföras vid Kapitel 1. Introduktion 3 en dator som deltagarna får sitta ner vid och svara på frågorna. Det finns an- dra metoder för att besvara andra frågan. Det skulle kunna gå jämföra bilderna per pixel och låta ett program utvärdera resultatet. Detta är visserligen en stark metod men säger ingenting om vad faktiska människor anser fungerar bra. Därför valdes en metod som använder sig av testpersoner.

1.4 Begränsningar Detta arbetet hävdar inte att det givna förslaget är det enda sättet att rendera text i 3D-miljö med DirectWrite. Arbetet visar på en undersökning om integra- tionen mellan de givna systemen kan producera ett resultat som har så pass lite förlust i kvalité att resultatet med FXAA kan ses som acceptabelt.

Anledningen till att just dessa tre system valdes är på grund av kompatibiliteten mellan dem. Fokuset är riktat mot DirectX och där i är just dessa som är ak- tuella. Det kan finnas andra system som har dessa integrationer men Microsoft föreslår att dessa API:er används ihop med Direct3D.

Detta arbete är en del i ett större projekt för att producera en film till Karlskrona HK. FXAA implementationen är uppbyggd av en annan medlem i detta projekt som undersöker olika antivikningsfilter som är baserad på befintlig implementa- tion.

Unity användes till att representera bilderna för testpersonerna [7]. Ingen påverkn- ing av bilderna las på i programmet som till exempel antivikningsfilter, ljussät- tning med mera. Det tas däremot ingen hänsyn till om Unity ändrade bilderna något inne i själva programmet.

Samarbete med en annan student skedde med experimentet. Experimentet sat- tes upp tillsammans med rendering av bilder. Den andre studenten hade hand om Unity samt formulerade frågorna medans författaren för denna uppsatsen tog hand om rendering av bilderna för pass 2 och 3 samt skapandet av formuläret. Det som skiljde arbetena åt var att textrendering var inte ett sådant pass fokuserat område i den andre studentens arbete. Där låg fokuset mer på jämförelse mellan FXAA och SSAA rent generellt sett.

För att fullt ut kunna förstå denna uppsatsen antas det att läsaren har grundlig kunskap inom 3D rendering och Direct3D. Grundläggande förståelse för begreppet antivikningsfilter är också nödvändig då uppsatsen undersöker FXAA och SSAA. Kapitel 1. Introduktion 4

1.5 Definitioner

Vikning: Kantig bild. Konturer och linjer blir kantiga på grund av pixlarna fyller inte ut området tillräckligt bra.

Antivikningsfilter: Motsats till vikning där korrigering av problemet som uppstår vid vikning sker.

Sampling: Menas i detta sammanhanget att ta färgvärdet från pixlar. Kapitel 2 Relaterade Arbeten

Studier inom textrendering har gjorts innan och olika typer av implementationer existerar. Triangulering av tecken är ett förslag beskrivet av Loop och Blinn [15]. Systemet använder bézierkurvor för att skapa triangulerade tecken som sedan kanterna görs mjukare via ett shaderprogram. Valve föreslog ett system som skapa skarpa konturer för text och tecken [13]. Istället för att använda typsnitt som basera sig på bézierkurvor användes signerad distansfält. Det hela fungerar genom att sampla från dessa distansfält och bestämma om värdet på färgen är inom ett visst område för att avgöra var kanten på tecknet är. Även andra har utforskat detta tillvägagångssättet till snabb textrendering [16]. Eftersom inläs- ning av tecken och inga direkta komplicerade uträkningar behövs så kan denna metod vara lämpad till spel där hastigheten är av stor vikt.

Det finns olika studier med antivikningsfilter där syftet ofta har legat på att hitta fördelaktiga och snabbare tillvägagångssätt till visuellt bättre kanter [8, 14]. Den sistnämnda referensen ger insikt till flera olika implementationer så som FXAA, MLAA och DLAA för att nämna några av dem.

Det som skiljer detta arbetet från ovanstående artiklar är användningen av redan befintliga system till manipulering av text och tecken. Förslaget är att rendera text till en textur som sedan Direct3D kan använda till att applicera på olika ytor i 3D-miljö. Detta kommer att åstadkommas genom utnyttjandet av DirectWrite som renderar till Direct2D vilket spara ut till en textur som Direct3D kan använda sig av [18].

5 Kapitel 3 Bakgrundsfakta

I detta kapitlet tas det upp bakgrundsfakta om hur typsnitt, som är relaterade till detta arbetet, fungerar samt vad som skiljer dem åt. Den första frågan ämnas att besvaras i detta kapitel. Efter typsnitten tas det upp vad Direct2D, DirectWrite samt Direct3D står för och vad de specialiseras på.

3.1 Typsnitt Det finns flera sorters typsnittssystem som fungerar olika men i detta arbetet är kvalitén viktig och därmed har TrueType valts. Detta typsnitt är bland den vanligaste som används för närvarande då TrueType är standard både för Apple och Microsoft [4, 9]. Även om den använder sig av bézierkurvor så uppstår ibland vikning. Bild 3.1 visar tydligt skillnaden mellan vikning och antivikningsfilter. Anledningen till att TrueType inte får en mjuk kant utan antivikningsfilter är att bézierkurvorna täcker ett visst antal pixlar som sedan färgläggs fullt ut, vilket kan ses på Bild 3.1b. Det finns olika typer av antivikningsfilter som korrigerar detta problem genom att fylla ut områdena runt omkring så att övergång mot bakgrunden sker så pass mjukt att pixlarna inte blir enskilt synliga för ögat. Direct2D har antivikningsfilter inbyggt vid rendering och kan slås på och av beroende på vad det ska användas till.

6 Kapitel 3. Bakgrundsfakta 7

(a) Korregering av vikning. (b) Vikning.

Bild 3.1: TrueType vikningsproblem.

Vikning hos text kan uppstå med olika typer av typsnitt. Det är inte bara hos TryeType detta problem uppstår utan även vid andra typer av renderingar också. Rougier förklara att typsnitten bör ta hänsyn till hur pixlarna är utlagda [17]. Detta är dock tänkt att användas i 2D-miljö och tar inte hänsyn till en textur i 3D-miljö. Bild 3.2b visar på vad som menas med att pixlarna inte räcker till att representera en skepnad fullt ut med pixlarna. För att kunna rätta till detta problem används ofta någon form av antivikningsfilter som kan beskådas i Bild 3.2a.

(a) Korrigering av vikning. (b) Vikning.

Bild 3.2: Linje som går tvärs över pixlarna. Kapitel 3. Bakgrundsfakta 8

Eftersom texten i detta projektet renderas till en textur kommer det att behandlas likadant som en normal textur på olika saker. För att bättre kunna anpassa en textur till mindre vikningsproblem kan förstoring eller förminskning användas [11]. Detta betyder då att texturen fördubblas respektive halveras med jämna steg som sedan kan användas till renderingen. SSAA kan förknippas förminskning av textur då den använder sig av en större skala för att kunna interpolera mellan samplade pixlar till att representera slutresultatet i en pixel.

3.2 API:er DirectWrite, Direct2D och Direct3D är system som hanterar olika saker och beroende på vilket resultat och användningsområde passar de olika bra in. Dessa tre API:er tillhör familjen DirectX vilket är samlingsnamn till olika API:er som kan användas till att skapa spel, film, reklam med mera. Det nämndes i intro- duktionen att full dokumentation om dessa system finns tillgänglig på Microsoft Developer Network (MSDN) [3].

3.2.1 DirectWrite DirectWrite har hand om tolkning av olika typsnitt. Det går bland annat att läsa in Bitmap, TrueType, OpenType med mera. Det möjliggör ett brett an- vändningsområde för detta API. Det finns möjligheter att koppla samman andra system för utökad användning, Direct2D och Microsoft Windows Graphics Device Interface (GDI) är några av dem. Cleartype är en antivikningsfilter utvecklat av Microsoft själva som är speciellt anpassat till textrendering. Det fungera genom att ändra styrkan på sub-pixlarna vilket är rgb färgerna för en pixel [5]. En stor fördel är att ClearType kan användas vilket ger en ökad läshastighet än inget antivikningsfilter alls [12]. Eftersom texten ska appliceras i 3D-miljö kan därmed inte ClearType används. Anledningen till detta är att texten renderas till en tex- tur som sedan appliceras i 3D-miljö. ClearType har ingen kontroll över vikningen på en textur i Direct3D.

3.2.2 Direct2D Direct2D är specialiserat på att rendera i 2D och har stöd för att kunna förbinda samman med Direct3D. Det kan ses som en brygga mellan DirectWrite och Direct2D där data från DirectWrite kan renderas i 2D för att sedan kunna skickas vidare till Direct3D. En av de största fördelarna med systemet är att grafiken kan skalas. Detta innebär att det som ritas ut är oberoende av upplösningen eftersom det kan skalas till att passa i olika upplösningar. Kapitel 3. Bakgrundsfakta 9

3.2.3 Direct3D Direct3D efterliknar Direct2D då systemet har hand om rendering. Det som skiljer dem avsevärt åt är att en tredje axel kan representeras i en scen som ger djup i bilden. Systemet används i en mängd olika applikationer som sträcker sig allt mellan spel till film. API:et har genom åren öppnats upp mer vilket tillåter bättre användarvänlighet samt större frihet att skapa nya tekniker. Kapitel 4 Metod

Detta kapitel förklarar hur uppsättning mellan DirectWrite, Direct2D och Direct3D integrerades för att rendera text. Själva experimentet är relaterad till detta genom rendering av textur innehållande text som sedan kan appliceras på ytor i 3D-miljö.

För att kunna rendera text med DirectWrite mot Direct3D behöver systemen kunna tolka varandras delarna de skapar. DirectWrite har hand om själva tolknin- gen av olika typsnittssystem medans Direct3D används till 3D-rendering. Direct2D kan liknas vid en brygga där systemet har hand om data som DirectWrite pro- ducerar och skickar sedan vidare det till Direct3D. Direct3D kan sedan använda denna data till att rendera till sin egen backbuffer. Bild 4.1 visar vad som måste skapas för att kunna binda samman systemen som hanterar renderingen. Tanken är att Direct2D renderar till en textur som Direct3D sedan kan använda för att renderar ut på ett plan som kan kontrolleras i 3D-miljö.

Direct3D använder sig av ID3D11ShaderResourceView som resurs till texturer. Målet är att rendera till en sådan resurs för att kunna representera 2D-texturer i 3D-miljö. Anledningen till rendering mot en ID3D11ShaderResourceView är användarvänligheten till förflyttning i 3D-miljön då Direct2D inte stöder detta. Med denna metod kan text renderas på olika ytor som till exempel en skylt i ett spel.

DirectWrite kommer att användas ihop med Direct2D för att rendera ut text och tecken till ett 2D-plan. Den metod som kommer användas är rendering av faktisk geometri via DrawGeometry vilket renderar kantlinje med en specificerad ID2D1Geometry vilket är själva kantlinjen tillsammans med FillGeometry som fyller tecknen. Det finns en annan metod som använder sig av DrawText men den har inte stöd för kantlinjer runt om texten och därför kommer första förslaget att användas istället. Anledningen till att kantlinjer används är för ökad användning av textrendering. Vid använding av DrawText kan inte kantlinjen ändras. Detta menas att till exempel valet av färgen inte går att ändra. Andra aspekter som till exempel rundheten och om det ska vara en streckad kantlinjer runt om varje tecken, går inte heller att ändra på med den inbyggda metoden.

10 Kapitel 4. Metod 11

Bild 4.1: Diagram över hur Direct2D och Direct3D samnyttjas [2]. Kapitel 5 Experimentuppställning

Här beskrivs hur själva uppsättningen av experimentet utfördes, vilka bilder som användes och hur deltagarna fick besvara frågorna till varje bild. Information om valet av bilder tas upp samt hur det kan ha påverkat resultatet.

Valet av bilder var en avgörande faktor då hela experimentet kretsade kring dem. Bilderna sattes upp likadant i jämförelsen för att ge testpersonen mest fördelak- tiga möjlighet att besvara frågorna. Hade de inte varit uppsatta likadant kan det ha försvårat för testpersonen att besvara frågorna. Experimentet bestod av tre delar med bilder vilket två av dem användes till denna uppsats. Första delen bestod av bilder på geometri, andra på enbart text, se Bild 5.1, och sista bestod av en kombination, se Bild 5.2. Andra och tredje valdes att inkluderas då den första inte innehöll någon form av text. Den andra delen använde sig av två olika typsnitt, vid namn Arial och Comic Sans MS. Arial är rät i formen med tydliga kanter medans Comic är rund, samt har inga uppenbara hörn. Det kan vara lättare att upptäcka skillnader beroende på vilket typsnitt som används, och hur mycket den påverkas av vikning, beroende på formen.

Uppsättningen av bilderna var uppdelade i tre olika antivikningsfilter samt en utan. Följande delar användes i enbart textuppsättningen:

• Utan antivikningsfilter

• FXAA

• SSAA

• SSAA och FXAA

I den sista delen användes följande uppsättning:

• Text: inget antivikningsfilter och bakgrund: inget antivikningsfilter

• Text: FXAA och bakgrund: SSAA

• Text: SSAA och bakgrund: SSAA

12 Kapitel 5. Experimentuppställning 13

• Text: FXAA och bakgrund: SSAA samt FXAA

Ordning för antivikningsfilter varierade för varje bild som deltagaren, även kallad testperson, skulle svara på. Detta gjorde att testpersonen kunde få svårare att jämföra med föregående bild då de skiftade plats. De stora bilderna slumpades också ut för att få en så slumpmässig blandning som möjligt. Till exempel om första bilden använde FXAA kunde nästa använda sig av SSAA istället på samma plats. De mindre bilderna var satta permanent i samma ordning medans de större slumpades fram varje gång.

Bild 5.1: Exempel på bild som användes i experimentet för text delen. Korrekt storlek på bilderna finns i Bilaga A Kapitel 5. Experimentuppställning 14

Bild 5.2: Exempel på bild som användes i experimentet för den kombinerade delen. Korrekt storlek på bilderna finns i Bilaga A

För att slumpmässigt rendera en bild användes Unity till att representerar bilderna [7]. För själva frågorna till bilderna användes Google Forms [1]. Anledning är att Google Forms inte kunde slumpa fram bilder samt att bilderna blev nedskalade till att passa in i formuläret. Unity valdes då en snabb uppsättning kunde sättas upp och experimentet kunde därmed utföras utan att allt för mycket tid skulle gå till spillo. Alla bilder som användes till den här uppsatsen kan ses i Bilaga B. De är inte i fullskalig storlek utan visar istället hur bilduppsättningen bestod i experimentet. Kapitel 6 Utförande

Denna del beskriver hur experimentet genomfördes för varje deltagare. Det nämns vilken typ av testgrupp som användes samt hur utförande för varje person gick till.

6.1 Förberedelse För att experimentet skulle kunna utföras behövdes ett tyst och lugnt rum med en dator. Datorn hade två tillhörande skärmar där den vänstra renderade bilderna med Unity och den högra visade frågeformuläret. Bilden fick inte bytas till nästa förrän frågorna var ifyllda. Detta löstes genom att testpersonen enbart fick an- vända musen och tangentbordet användes av den som övervakade i experimentet.

6.2 Testgrupp Deltagarna bestod till mestadels av studenter inom spel- och programutveck- ling. Experimentet utfördes på Blekinge Tekniska Högskola (BTH), Sverige, Karl- skrona. Ett frågeformulär besvarades under experimentets gång där sista delen innehöll frågor om ålder och hur mycket kunskap inom spelutveckling personen hade. Majoriteten svarade 3–4 i en femgradig skala där fem stod för professionell och lägsta innebar ingen kunskap alls. Åldern varierade allt mellan 21–29 år. Totalt var det 26 deltagare som utförde experimentet.

6.3 Genomförande Följande steg utfördes för varje deltagare:

1. Användarens medgivande fylldes i.

2. Frågor besvarades angående vad personen skulle göra.

3. Experimentet genomfördes.

15 Kapitel 6. Utförande 16

4. Frågeformulär fylldes i under tiden experimentet fortlöpte.

5. Eventuella frågor om syftet till experimentet besvarades efter utförandet.

Testpersonens medgivande: Innan deltagaren utförde experimentet fick han/hon fylla i ett formulär där testet har utförts med deras medgivande, se Bilaga C. I formuläret förklaras det att testpersonerna inte får ställa några frågor under själva testet och att ingen information får ges till utomstående under följande 48 tim- mar. Anledningen till detta är att inte andra deltagare skulle kunna ta del av viktigt information som kunde påverka resultatet.

Testpersonens uppgift: Beskrivning kunde läsas i början av formuläret för varje delmoment där information vad testpersonen skulle leta efter samt besvara. Bilaga D visar de tre avsnitten efter varandra. Det fanns ingen tidsbegränsning vilket innebar att personen kunde granska varje bild noggrant och dra en slutsats därefter. Uppgiften var för de första två delarna att besvara frågor om hur suddig och kantig varje bild var, se Bild 6.1. Anledningen till att just 3 olika val gavs var för att kunna ge större val än bara ja eller nej. Valdes mitten betydde det antigen personen såg en antydan till suddighet respektive kantighet men inte att det fullt ut är helt synligt. Hade fler val givits kan det ha varit svårare att tyda resultaten.

Bild 6.1: Frågor om suddighet samt om hur kantiga bilderna var.

Sista delen innehöll en extra fråga om hur enhetlig texten var med bilden, se bild 6.2. Denna fråga syftade på hur bra texten smälte samman med bakgrunden. Kapitel 6. Utförande 17

Anledningen till denna specifika fråga är att ett annat upplägg på antivikningsfil- terna användes där de applicerades i olika steg. Den som antogs kunde särskiljas mest var applicering av SSAA på bakgrunden och FXAA på texten. Bakgrunden borde då inte ha blivit suddig men mindre kantigt, medans texten borde ha blivit suddigare i förhållande till bakgrunden.

Bild 6.2: Fråga om enhetlighet i bilderna.

Frågeformulär: Efter att testet var genomfört blev testpersonen tillfrågad att fylla i några frågor angående ålder, kunskaper inom spelutveckling, hur mycket spel som spelas med mera, se bilaga E. Detta för att kunna fastställa om personen var kapabel till att jämföra bilderna så pass noga som krävdes. Kapitel 7 Resultat

Detta kapitel presenterar data som blev insamlad från experimentet. Resultatet är uppdelat i två delar vilket första presenterar resultaten på enbart textbilderna medans andra innehåller bilderna med geometri i bakgrunden. Resultaten per bild är ett medelvärde från varje teknik som användes. Felmarginalen som kan uppstå i den insamlade data baseras på Niles metod [6]. Varje graf innehåller tre pelare per metod och det summeras upp till antal deltagare, vilket är 26, som kan ses i andra uträkningen.

1 1 Felmarginal = = 19.6% √Antal deltagare √26 ≈

Antal frågor Antal deltagare Medelvärde av svaren = Antal· bilder

7.1 Textbilder Ingen suddighet Ingen suddighet Antydan till suddighet Antydan till suddighet Suddigt Suddigt 21 20 . 5 20 20 17 . 5 15 . 5 14 13 . 5 12 . 5 12 10 . 5 10

10 8 . 5 10 7 . 5 7 7 7 5 . 5 . Deltagare 5 3 . 5 1 . 5 1 . 5 1 0 0 . 5 0 0 Vikning FXAA SSAA Båda Vikning FXAA SSAA Båda

Bild 7.1: Suddighet i bilderna. Vänster: Ingen lutning. Höger: Med lutning.

18 Kapitel 7. Resultat 19

Bild 7.1 visar resultaten med lutning på texten samt ingen lutning. Något som inte fanns i åtanke vid experimentet var att resultaten skulle skilja sig ifrån varan- dra så pass mycket. Till exempel visar valet Suddig 7 i den vänstra grafen medans resultatet blev 1 i den högra med både SSAA och FXAA applicerat. Testperson- erna verkade ha svårt att särskilja suddigheten på de olika bilderna. Lutning och icke lutning var tydligen en avgörande faktor för suddighetens resultat.

Ingen kantighet Ingen kantighet Antydan till kantighet Antydan till kantighet Kantighet Kantighet

20 18 . 5 20 16 14 13 12 . 5 11 . 5 11 11 . 5 11

10 9 . 5 Deltagare 7 . 5 10 8 8 7 . 5 6 7 5 . 4 . 5 5 . 4 5 3 . 5 4 . 5 3

Vikning FXAA SSAA Båda Vikning FXAA SSAA Båda

Bild 7.2: Kantighet i bilderna. Vänster: Ingen lutning. Höger: Med lutning.

25 Ingen kantighet Antydan till kantighet Kantighet 20 16.25 15 12.75 11.25 10.5

Deltagare 10 10 9 7.75 6 5.75 5.5 5.5 5 3.75

Vikning FXAA SSAA Båda

Bild 7.3: Hopslaget resultat med kantighet i textbilderna.

Till skillnad från resultatet till suddighet så visas här en skiljaktighet i de olika teknikerna, se Bild 7.2 och Bild 7.3. FXAA och SSAA ligger på en relativt jämn nivå medans de är betydligt bättre än utan någon som helst antivikningsfilter. När Kapitel 7. Resultat 20 både FXAA och SSAA användes ihop gav det resultatet 10.5 i ingen antydning till kantighet och 10 i antydan till kantighet. Vikning gav däremot 16.25 i kantighet vilket betyder att testpersonerna såg en skillnad i bilderna.

7.2 Kombinerade bilder I kapitlet Experimentuppställning gavs det en punktlista med de olika bildupp- sättningarna som användes. Följande grafer använder samma sorts uppsättning som kan även beskådas i följande punktlista.

• Vikning: Text: inget antivikningsfilter och bakgrund: inget antiviknings- filter

• FXAA SSAA: Text: FXAA och bakgrund: SSAA

• SSAA SSAA: Text: SSAA och bakgrund: SSAA

• SSAA FXAA: Text: FXAA och bakgrund: SSAA samt FXAA

25 Ingen suddighet 22 Antydan till suddighet 20 Suddigt 16.25 16.25 15.25 rågor

F 15 · 9.75 10 9 6 Deltagare 5 3.25 3.75 0.75 1 0.75 0 Vikning FXAA SSAA SSAA SSAA SSAA FXAA

Bild 7.4: Kombinerad suddighet.

Precis som med texten visar detta resultatet att testpersonerna hade svårt att urskilja markanta skillnader i bilderna, se Bild 7.4. Det som sticker ut i stapeldia- grammet är användningen av FXAA på både texten och bakgrunden. Här visar det på att när väl FXAA används ihop med bakgrunden så steg suddigheten ända upp till 16.25 från 1, vilket är närmaste värdet. Kapitel 7. Resultat 21

25 Ingen kantighet Antydan till kantighet 20 Kantighet 20

15.25 15 13.25 12.75 10.25 10.5

Deltagare 10 7.5

5 2.753.25 3.25 2.5 2.75

Vikning FXAA SSAA SSAA SSAA SSAA FXAA

Bild 7.5: Kombinerad kantighet.

Precis som resultatet med bara text så är den bild som har vikning i sig väldigt kantig för testpersonerna med 20 personer som ansåg det. Använding av SSAA ihop med FXAA på både bakgrunden samt bilden verkar ge bäst resultat för att minska kantigheten men eftersom det inte är någon stor skillnad mellan de andra kan detta vara en ren tillfällighet.

25 Ja Nej Vet ej 20 18.75 18 16.25 16.5 15

10 8.5 8.5 Deltagare 6.5 7.25 5 1.25 1 0.75 0.75 0 Vikning FXAA SSAA SSAA SSAA SSAA FXAA

Bild 7.6: Enhetlighet mellan bakgrund och text.

Enhetligheten i bilden verka vara densamma för alla metoder. Testpersonerna verkade har svårt att se skillnad mellan de olika antivikningsfilterna som användes. Kapitel 8 Analys och Diskussion

Resultatet utvärderas genom att tolka antalet som svarade på de olika valen. Eftersom resultaten var väldigt lika varandra i vissa fall är det svårt att kunna dra någon slutsats om dem. Målet med detta examensarbete var att svara på två frågor angående visuell kvalité på text renderad i 3D miljö.

• Varför sker det förlust av visuell kvalité vid användning av 2D-renderad text i en 3D-scen?

• Är det FXAA eller SSAA som, ur en människas synpunkt, korrigerar vikning bättre av text renderad i en 3D-miljö än ingen alls?

Den första frågan beror på hur texten renderas och appliceras i 3D-miljö. Anled- ning till att vikning uppstår är att pixlarna räcker inte till att representera en bild fullt ut. Det är därför oftast någon form av antivikningsfilter bör användas för att minska på problemet. I Direct3D kan förstoring eller förminskning användas för att bilden ska passa in bättre i förhållandet till storleken.

Testet med enbart text visade på att suddigheten i bilderna var väldigt svåra att urskilja och gav därmed ett spritt resultat. Det kan bero på hur bilderna sattes upp. Lutade texten ifrån testpersonen hade han/hon lättare att upptäcka sud- dighet i bilden jämfört med texten som renderades direkt riktad mot skärmen. Detta kan ha resulterat i större vikning med texten som lutade. Baserat på första frågan är inte bilderna anpassat mot denna rendering och därmed kan vikning uppstå. Resultaten med de kombinerade bilderna gav också värden som låg på liknande nivåer som textbilderna. Undantaget här är resultatet på SSAA FXAA där suddigheten steg från 1 till hela 16.25. Det verka som FXAA har en stor betydelse på bakgrunden gällande suddigheten.

Däremot frågan om kantighet gav ett jämnare resultat. Ingen användning av an- tivikningsfilter gjorde bilden tydligt kantig som även visades i resultatet. FXAA gav 5.75 i ingen antydan till kantighet och 11.25 i mellersta valet. SSAA gav snarlikt resultat men användes de ihop steg det från 5.75 till 10.5 vilket är en för- bättring med nästan dubbla. Dessa värden är hämtade från alla textbilderna.

22 Kapitel 8. Analys och Diskussion 23

Precis som suddigheten gav värdena på kantigheten liknande resultat mellan textbilderna och de kombinerade bilderna. Det var ingen lika stor förändring här gällande Ingen kantighet utan sträckte sig enbart mellan 10.25 – 12.75.

Angående enhetligheten i bilderna gav det ett väldigt jämt resultat med att bilderna såg enhetliga ut. Värdet varierade mellan 16.25 – 18.75 gällande ja sidan och 6.5 – 8.5 gällande nej sidan. Testpersonerna kunde inte avgöra någon direkt skillnad mellan text och bakgrund när olika antivikningsfilter användes.

Testpersonerna ansåg att med ingen antivikningsfilter så uppstår det vikning som är synligt. Däremot om SSAA är bättre än FXAA är väldigt svårt att dra en slutsats om då värderna varierar svagt fram och tillbaka. SSAA kombinerat med FXAA gav det bästa resultatet ansåg testpersonerna då kantutjämningen ligger bra till i både de bilder som renderades lutande och rakt mot skärmen. Kapitel 9 Slutsats och Framtida Arbeten

Hypotesen kan ej besvaras med säkerhet då resultaten är för likartade. Dock kan slutsatsen dras vid att någon av de givna antivikningsfilterna är bättre än inget alls. Resultaten visade på att testpersonerna hade lätt för att peka ut den bild där ingen antivikningsfilter hade använts. Lottes påstående är svårt att besvara men det verka som FXAA går att använda även på text då SSAA och FXAA ger likartade resultat.

Detta arbete skulle kunna utvidgas med en implementation av eye-tracker som registrerar vad testpersonen granska i bilderna. Testet hade i så fall riktat sig mer åt att undersöka faktorer som påverka hur synligt vikning är i olika scenarion. Detta tillvägagångssätt hade varit intressant då data kan tas direkt från använ- daren utan några frågor. Testpersonen hade förmodligen varit mer intresserad då testet kan ha utförts snabbare utan reparativa frågor.

Med tanke på att varje bild ställde en fråga om suddighet och kantighet kan det har ändrats till direkt jämföra de fyra olika bilderna för att avgöra vilken som är mest, respektive minst, suddig och kantig. Detta skulle kunna ge annat resultat som kan jämföras med den givna resultatet i denna uppsats. Eftersom ingen tidsbegränsning användes kan det ha påverkat resultatet då olika testpersoner koncentrerar sig olika länge för att finna utstickande artefakter. Det skulle varit intressant om en given tidsgräns använts samt en eye-tracker, vilket diskuterades innan.

24 References

[1] Google Formulär. https://www.google.se/intl/sv/forms/about/ Besökte senast (2016-05-15).

[2] How to render by using a direct2d device context (windows). https://i- msdn.sec.s-msft.com/dynimg/IC666007.png Besökte senast (2016-04-20).

[3] Learn to develop with microsoft developer network | msdn. https://msdn.microsoft.com Besökte senast (2016-04-21).

[4] Microsoft typography. https://www.microsoft.com/en-us/Typography Besökte senast (2016-04-20).

[5] Microsoft Typography - What is ClearType? https://www.microsoft.com/typography/WhatIsClearType.mspx.

[6] Survey Sample Sizes and Margin of Error. http://www.robertniles.com/stats/margin.shtml Besökte senast (2016- 06-11).

[7] Unity - Game Engine. https://unity3d.com Besökte senast (2016-05-15).

[8] Fxaa, 2009. http://developer.download.nvidia.com/assets/gamedev/files/sdk /11/FXAA_WhitePaper.pdf Besökte senast (2016-04-11).

[9] Truetype reference manual, 2016. https://developer.apple.com/fonts/TrueType- Reference-Manual Besökte senast (2016-04-11).

[10] Tomas Akenine-Môller, Eric Haines, and Naty Hoffman. 5.6.2 screen-based antialiasing. In Real-Time Rendering Third Edition, chapter Visual Appear- ance. A K Peters/CRC Press, 2008.

[11] Tomas Akenine-Môller, Eric Haines, and Naty Hoffman. 6.2 image texturing. In Real-Time Rendering Third Edition, chapter Texturing. A K Peters/CRC Press, 2008.

[12] Andrew Dillon, Lisa Kleinman, Gil Ok Choi, and Randolph Bias. Visual Search and Reading Tasks Using ClearType and Regular Displays: Two Experiments. In Proceedings of the SIGCHI Conference on Human Factors

25 References 26

in Computing Systems, CHI ’06, pages 503–511, New York, NY, USA, 2006. ACM.

[13] Chris Green. Improved Alpha-tested Magnification for Vector Textures and Special Effects. In ACM SIGGRAPH 2007 Courses, SIGGRAPH ’07, pages 9–18, New York, NY, USA, 2007. ACM.

[14] Jorge Jimenez, Diego Gutierrez, Jason Yang, Alexander Reshetov, Pete De- moreuille, Tobias Berghoff, Cedric Perthuis, Henry Yu, Morgan McGuire, Timothy Lottes, Hugh Malan, Emil Persson, Dmitry Andreev, and Tiago Sousa. Filtering Approaches for Real-time Anti-aliasing. In ACM SIG- GRAPH 2011 Courses, SIGGRAPH ’11, pages 6:1–6:329, New York, NY, USA, 2011. ACM.

[15] Charles Loop and Jim Blinn. Resolution Independent Curve Rendering Us- ing Programmable Graphics Hardware. In ACM SIGGRAPH 2005 Papers, SIGGRAPH ’05, pages 1000–1009, New York, NY, USA, 2005. ACM.

[16] Zheng Qin, Michael D. McCool, and Craig S. Kaplan. Real-time Texture- mapped Vector Glyphs. In Proceedings of the 2006 Symposium on Interactive 3D Graphics and Games, I3D ’06, pages 125–132, New York, NY, USA, 2006. ACM.

[17] Nicolas P. Rougier. Higher Quality 2d Text Rendering. Journal of Computer Graphics Techniques, 2(1):50–64, April 2013.

[18] Jason Zink, Matt Pettineo, and Jack Hoxley. Practical Rendering & Com- putation with Direct3D 11, chapter Direct3D 11 Resources, pages 27–116. A K Peters/CRC Press, 2011. Bilaga A Fullskaliga Bilder

Bild A.1: Text: inget antivikningsfilter

27 Bilaga A. Fullskaliga Bilder 28

Bild A.2: Text: FXAA Bilaga A. Fullskaliga Bilder 29

Bild A.3: Text: SSAA Bilaga A. Fullskaliga Bilder 30

Bild A.4: Text: SSAA och FXAA Bilaga A. Fullskaliga Bilder 31

Bild A.5: Text: inget antivikningsfilter. Bakgrund: ingen antivikningsfilter Bilaga A. Fullskaliga Bilder 32

Bild A.6: Text: FXAA. Bakgrund: SSAA Bilaga A. Fullskaliga Bilder 33

Bild A.7: Text: SSAA. Bakgrund: SSAA Bilaga A. Fullskaliga Bilder 34

Bild A.8: Text: FXAA. Bakgrund: SSAA och FXAA Bilaga B Bilduppsättning

Bild B.1: Arial inget lutning. 1: Inget antivikningsfilter. 2: SSAA. 3: FXAA. 4: SSAA och FXAA.

35 Bilaga B. Bilduppsättning 36

Bild B.2: Arial med lutning. 1: FXAA. 2: SSAA. 3: SSAA och FXAA. 4: Inget antivikningsfilter. Bilaga B. Bilduppsättning 37

Bild B.3: Comic Sans MS utan lutning. 1: Inget antivikningsfilter. 2: SSAA och FXAA. 3: SSAA. 4: FXAA. Bilaga B. Bilduppsättning 38

Bild B.4: Comic Sans MS med lutning. 1: SSAA och FXAA. 2: Inget antivikningsfilter. 3: SSAA.4: FXAA. Bilaga B. Bilduppsättning 39

Bild B.5: Skalbagge med text. 1: Bakgrund SSAA, text FXAA. 2: Både bakgrund och text SSAA. 3: Inget antivikningsfilter alls. 4: Först SSAA på både bakgrund och text, sedan FXAA på båda. Bilaga B. Bilduppsättning 40

Bild B.6: Inomhus med text. 1: Både bakgrund och text SSAA. 2: Inget antiviknings- filter alls. 3: Bakgrund SSAA, text FXAA. 4: Först SSAA på både bakgrund och text, sedan FXAA på båda. Bilaga B. Bilduppsättning 41

Bild B.7: Robotar med text. 1: Först SSAA på både bakgrund och text, sedan FXAA på båda. 2: Bakgrund SSAA, text FXAA. 3: Inget antivikningsfilter alls. 4: Både bakgrund och text SSAA. Bilaga B. Bilduppsättning 42

Bild B.8: Svärd med text. 1: Bakgrund SSAA, text FXAA. 2: Först SSAA på både bakgrund och text, sedan FXAA på båda. 3: Både bakgrund och text SSAA. 4: Inget antivikningsfilter alls. Bilaga C Användarens medgivande

Please read this document carefully before you decide to participate in this study.

The purpose of this research project is to find a way for rendering clear edges. This is a re- search project being conducted by students at Blekinge Tekniska Högskola.

What you will do: Your participation in this research study is voluntary. You may choose not to participate. If you decide to participate in this research survey, you may withdraw at any time. If you decide not to participate in this study or if you withdraw from participating at any time, you will not be penalized.

Estimated time: The procedure involves filling an online survey that is expected to take 10-15 minutes.

Rules: During the experiment you will not be able to ask questions. If you leave the computer during experiment the session will be terminated. After the experiment is finished are you not allowed to discuss details about this study with anyone in the next 48 hours.

Confidentiality: Your identity will be kept confidential. Data from other participants will be linked with yours, analyzed and compared to find a result to the theses this study is part in. The data will later be presented. Your name or other personal information will never be linked to this study in any way.

Aim: Questions about the purpose of this study will be answered after the participant are fin- ished. You have read the above information. • You understand that your participation is completely voluntary. • You understand that your identity will remain confidential. • You will not discuss details or content of this study in the next following 48 hours with • other persons. You voluntarily agree to participate. • You are at least 18 years of age. •

Date:

Participant name:

Signature:

Contact: Name: Simon Hyltegård Name: Erik Ståhlberg E-mail: [email protected] E-mail: [email protected]

43 Bilaga D Delförklaringar

44 Bilaga E Frågeformulär

45