Vad är parallaxmappning?

Parallaxmappning 101.

Vad är en parallaxmappning?

En parallaxmappning är en typ av textur som förklarar djup eller höjd på en ytas detaljer – det påminner om en topografisk karta.

Om du till exempel tittar på 3D-grafik av en tegelvägg ser den platt ut utan specialeffekter. Med parallaxmappning ser tegelväggen mer realistisk ut genom att infällda rader av murbruk läggs in på den platta bilden. Tekniken ”lurar” ögat genom att manipulera texturer så att de ser tredimensionella ut på en 2D-yta.

Tekniken har mängder av tillämpningsområden:

• Videospel
• Filmer och animeringar
• Virtuell verklighet och förstärkt verklighet
• Webbdesign

Grunderna i djupseende.

Ögon och hjärna samarbetar för att bearbeta den visuella informationen och uppfatta djupseende. Hjärnan fastställer djupet med binokulära ledtrådar som jämför respektive ögas bilder för att skapa en sammanhållen bild. På så sätt kan du göra en bedömning om djup.

Men det går också att bedöma djup med enbart ett öga tack vare monokulära ledtrådar. Perspektiv, skuggor, relativ storlek och texturövertoningar ger hjärnan viktig information om djupet.

Parallaxmappning fungerar tack vare det sätt på vilket den mänskliga hjärnan uppfattar djup. När man rör sig rör sig närliggande objekt mer än sådant som befinner sig längre bort. Parallaxmappning använder sig av den här principen och låter objektets texturer förändra sig beroende på din vinkel, vilket simulerar det djup hjärnan förväntar sig att se.

Exempel: när du åker bil verkar träd i närheten forsa förbi snabbt medan avlägsna berg rör sig långsamt. Denna skillnad i rörelse ger en känsla av djup. Parallaxmappning härmar den här upplevelsen genom att låta närliggande detaljer röra sig något mer och detta ger illusionen av djup på en plan yta.

Parallaxtexturer.

Parallaxtexturer kallas också höjdkartor eller förskjutningsmappning. Det är bilder i gråskala där de olika gråtonerna representerar höjden på ytdetaljerna. En ljusare ton avser upphöjda områden medan mörkare grått avser lägre områden.

Dessa texturer gör det möjligt att addera djup på annars platta ytor utan att addera fler polygoner. På så sätt blir bilderna mer realistiska utan att man behöver kompromissa med hastighet eller inläsningstid.

Parallaxmappning använder sig av texturer för att referera till hur varje del av huvudtexturen ska förändras beroende på betraktarens vinkel. Mappningsalgoritmen tolkar gråskalevärdena i parallaxtexturen för att skapa en mer realistisk bild.

Skapa parallaxtexturer.

Så här genererar du en parallaxtextur:

1. Börja med en grundbild. Det är en platt texturbild av den yta du vill replikera, till exempel tegelstenar, kakelplattor eller sten.
2. Fastställ höjden. Visualisera vilka delar av texturen som ska höjas respektive sänkas.
3. Gör om det till gråskala. Använd en grafikredigerare för att måla områdena med olika gråtoner – ljusgrått för upphöjda områden och mörkare grått för nedsänkta områden.
4. Förfina designen Skapa oskärpa och kontrast på texturen för att få mjukare övergångar mellan alla områden.

Du behöver inte göra detta manuellt heller. Adobe Photoshop har verktyg för att skapa och förfina gråskalebilder. Adobe Substance 3D är ett mer avancerat verktyg för att skapa parallaxtexturer med bara några få klick.

Parallaxmappningstekniker.

Så här fungerar parallaxmappning.

Parallaxmappning bygger på flera underliggande principer:

• Texturförskjutning. Parallaxmappning fungerar genom att olika texturkoordinater förskjuts i förhållande till varandra. Den förändras där texturdelarna är baserade i betraktarens perspektiv för att skapa illusionen av djup.
• Höjdkartor och förskjutningsmappning. Parallaxmappning använder sig av en gråskalekarta för att vägleda om graden av texturförskjutning.
• Betraktningsvinkel. Parallaxmappningseffekten förändras baserat på den vinkel varifrån man betraktar ytan. När vinkel ändras justeras förskjutningen för att simulera en 3D-yta.

Tänk dig att du tittar i en öppen bok. Varje sida representerar ett lager av djup i en textur. Du ser varje sida tydligt om du tittar rakt ned på boken i en 90-gradig vinkel. Men om du lutar boken kommer sidorna närmare dig att täcka över de sidor som är längre bort. Parallaxmappning simulerar den effekten på 2D-texturer med en höjdkarta för att fastställa vilka texturer som är närmare respektive längre bort från dig.

Stegvis guide till parallaxmappning.

Parallaxmappning är en avancerad teknik men verktyg som Substance 3D förenklar det hela. Följ dessa steg för att komma igång som nybörjare:

• Börja med en textur. Det kan vara en tegelvägg, en kullerstensgata eller ett klinkergolv.
• Skapa en höjdkarta. Använd program som Photoshop för att konvertera texturen till gråskala.
• Använd en grafikmotor. De flesta grafikmotorer, som Unity, har stöd för parallaxmappning. Importera huvudtexturen och höjdkartan.
• Tillämpa en parallaxmappnings-shader. Tilldela en shader eller material för att lägga till parallaxmappning på texturen och koppla den till höjdkartan.
• Justera parametrarna. Justera intensiteten på parallaxeffekten för att få önskad illusion av djup.
• Visa den från olika vinklar. Flytta runt kameran för att se hur texturen justeras beroende på dina vinklar.

Detta är snabba tips för att du ska komma igång men var inte rädd för att experimentera med parallaxmappning på egen hand.

Fördelar med parallaxmappning.

Det finns många fördelar med parallaxmappning:

• Förstärkt realism. Parallaxmappning ger bilderna en mer taktil look för att simulera verkliga användarupplevelser.
• Känslomässig fördjupning. Förstärkt realism påverkar berättandet i spel och animeringar och blåser liv i berättelsen.
• Optimerade prestanda. Parallaxmappning adderar djup genom att manipulera texturer istället för att lägga till fler polygoner. Detta renderas mycket snabbare, vilket är praktiskt i realtidstillämpningar som videospel.

Praktiska tillämpningar.

Parallaxmappning är användbart till en rad olika tillämpningar:

• Videospel, inklusive virtuell verklighet
• Arkitekturmodeller
• Produktvisualisering för tillverkare och återförsäljare

Från platt till 3D: parallaxmappning i Substance 3D.

Parallaxmappning har revolutionerat allt från videospel till webbdesign. Tekniken blåser liv i designen och adderar mycket mer detaljer till platta 2D-bilder.

Det bästa sättet att se hur kraftfull parallaxmappning är, är att prova det i din egen design. Prova Adobe Substance 3D och skapa enastående, intrikat grafik som hoppar rakt ut från skärmen.