játékfejlesztés.hu
FórumGarázsprojectekCikkekSegédletekJf.hu versenyekKapcsolatokEgyebek
Legaktívabb fórumozók:
Asylum:    5467
FZoli:    4892
Kuz:    4455
gaborlabor:    4449
kicsy:    4304
TPG:    3402
monostoria:    3284
DMG:    3172
HomeGnome:    2919
Matzi:    2524

Pretender:    2498
szeki:    2440
Seeting:    2306
Geri:    2192
Orphy:    1893
Joga:    1791
Bacce:    1783
MaNiAc:    1735
ddbwo:    1654
syam:    1491
Textúra készítés bump/ normal/ parallax mappinghoz Gimpben 2007.02.24 04:04


Hogy mi az a bump, normal vagy parallax mapping, annak az elmagyarázására azt hiszem nem én vagyok a legalkalmasabb, inkább ezt a részt a google-re bízom, csapjátok fel bátran, angol nyelven igen korrekt és részletes ismertetéseket, tanulmányokat találhattok róluk (ez mellett úgy érzem sok magyarázatra napjainkban már egyik sem szorul, ezek a kifejezések igencsak beépültek már a gamer/ developer szlengbe…:))

Lássuk csak, melyik shaderhez mire van szükségünk: a bump mapping szürkeárnyalatos képet használ a térhatású felületek kialakításához (a kép fehér pontjai a kiemelkedőbbek, a sötétebbek a beljebb levők a felületen), a normal mapping egy RGB képet használ egyfajta részletesség kialakításához (a képek pontjai a felület normálvektorának információját tartalmazzák). A parallax mapping pedig ezek kombinációja, tehát használatához egyaránt szükség lesz a szürkeárnyalatos heightmapokra és az RGB normal mapokra is.

Mindkettő elkészítéséhez csupán az eredeti textúrára és egy normal map generáló plugin-ra lesz szükségünk. Ez a plugin elérhető mind Gimp, mind Photoshop alá. Én most Gimpben fogok alkotni, de a dolog ugyanúgy történik Photoshopban is.

Töltsük le a normal map plugint,

Gimphez: http://nifelheim.dyndns.org/~cocidius/normalmap/
Photoshophoz: http://developer.nvidia.com/object/nv_texture_tools.html

Telepítsük, majd jöhet a móka. Én ezzel a textúrával dolgoztam, használhattok másikat is, vagy most gyakorlásképp ezt, majdnem teljesen mindegy.


Lássuk a készítés menetét Gimpben. Én most a heightmap előállításával fogok kezdeni.

Elsőként tegyük telítetlenné a textúránkat (Jobb gomb -> réteg -> színek -> telítetlenné tevés)
A most kapott képünkön még vannak olyan világosabb foltok, melyeket el kell tüntetnünk. Ezt „folttalanítással” érhetjük el (Jobb gomb -> szűrők -> Kiemelés -> Folttalanítás). A feugró ablakban játszhatunk a szűrő paramétereivel, de alap beállításokkal is jó lehet. Ezek után én még tettem rá egy „maszk életlenítése” szűrőt, (Jobb gomb -> szűrők -> Kiemelés -> maszk életlenítése).


A textúrám jelenleg így néz ki:


Hogy milyen szűrőket teszünk rá, és milyen paraméterekkel, sokszor textúra függő a lényeg hogy arra figyeljünk, a világosabb képpontok a leendő felületünk kiálló részeit, így a sötétebb pontok a bemélyedéseket képviselik, tehát ezt szem előtt tartva készítsük el a heightmapot.

Következő lépésként nekiugorhatunk a normal map készítésnek, ez még az előzőnél is egyszerűbb lesz. Kiindulásként használhatjuk az eredeti textúrát is, de a heightmapot is, én most a heightmapból indultam ki. Ha megfelelően telepítve van a normal map plugin, akkor a „leképezések” között lennie kell egy olyannak, hogy „normal map…” (Jobb gomb -> szűrők -> Leképezések -> Normal map…) Ha rákattintottunk, egy előnézeti kép és sok paraméter fogad minket. Ízlés és textúra függő, milyen beállításokat használjunk, egyedül a „wrap” kapcsolóra hívnám fel a figyelmet, ez felelős a folytonosságért (ismétlődő textúrához feltétlen kapcsoljuk be).


Készen is lennénk. A következő képen DarkBASIC Pro alatt láthatjátok a parallax mapping működését, a cikk során készített textúrával.


FZoli.

Értékelés: 7.50

Új hozzászólás
yohoo          2007.03.06 10:41
Kössz Kicsy!
kicsy          2007.03.03 05:18
PS: Ctrl+Shift+U deszaturál, utána Levels (Ctrl+L)-lel lehet a játszani, vagy esetleg Image->Adjustment->Brightness/Contrast.
FZoli          2007.03.02 15:27
hát, nincs előttem PS, de majd utánanézek...a desaturate után despecle-t keress, utána valamiféle színszinteket/kontraszot, unsharp mask, stb. beállító filtert...

FZoli.
yohoo          2007.03.02 06:00
Tetszik a tutoriál , elkezdtem csinálni , csak nekem angol photosop cs2-m van és abban egy kicsit máshogy van , az 1 . lépés még ment , a többinél elakadtam , tudna valaki segíteni? előre is kössz.
FZoli          2007.02.28 21:03
igazán nincs mit

FZoli.
beast          2007.02.26 15:53
Thx!
FZoli          2007.02.26 15:45
Amúgy meg nem kötelező (sem Gimpben, sem P.NET-ben) a heightmapból csinálni a normalmapot, néha kifejezetten szép, ha az eredeti textúrából készül... (ízlés dolga)


(szintén Paint.NET-es mapok, kicsit erősebb intenzitású normal map, és az eredeti textúrára tettem rá)

FZoli.
FZoli          2007.02.26 15:38
Hát, eddig még nem használtam a Paint.NET-et, ezért most le is töltöttem, és igen kellemes csalódást okozott, sok okosságot tud...

Így első ránézésre:
1.) Adjustments --> Hue/ Saturation => itt a szaturációt levettem 0-ra (ezt csináljuk gimpben is)
2.) Effects --> Valameilyen blurt tegyünk rá, én nekem az unfocus tetszett meg, asszem 3as értékkel csináltam
3.) Effects --> Glow => Kicsi sugárral, erősebb fényerővel és mégerősebb kontraszttal csináltam

Kb. Gimpben is ilyesmit csináltunk, picit a blur miatt ugyen más lett az eredmény de sztem tűrhető (a blur simasága miatt tettem rá egy nagyon gyenge noise-t még a végén...)

Amúgy a cikkben lévő textúra viszonylag könnyű, de van amikor azért komolyan rá kell dolgozni a képre, eltüntetni, átfesteni dolgokat...

Paint.NET-es mapokkal:


Bevallom majdnem jobb lett mint Gimpben, tény hogy kicsit másabb, de használható a cucc

FZoli.
beast          2007.02.26 14:47
Azt nem tudod véletlen, hogy paint.net-ben, hogyan lehet a heightmap-et elkésziteni? Normal plugin itt található hozzá: http://paintdotnet.12.forumer.com/viewtopic.php?t=2973
FZoli          2007.02.26 07:55
Köszi és használd egészséggel...

FZoli.
ShAdeVampirE          2007.02.26 07:51
Grat, nagyon jó cikk lett! Azthiszem még hasznát fogom venni
syam          2007.02.26 04:31
jaja, firestrom rulez
beast          2007.02.26 03:38
Az a kép, amit beszúrtál firestormos kép, ugye?
http://www.firestorm.go.ro/case16.html
syam          2007.02.26 03:04
azért jó tudni, h több normal map "fazon" is van...
blender website

Normal maps in Blender store a normal as follows:

Red maps from (0-255) to X (-1.0 - 1.0)
Green maps from (0-255) to Y (-1.0 - 1.0)
Blue maps from (0-255) to Z (0.0 - 1.0)
Since normals all point towards a viewer, negative Z-values are not stored (they would be invisible anyway). In Blender we store a full blue range, although some other implementations also map blue colors (128-255) to (0.0 - 1.0). The latter convention is used in "Doom 3" for example.



mindenesetre én a konvencionális GL_ARB_texture_dot3 elvét használom
ezt a denormálást azért nem vállalnám be( már igy is sokat számolok per-fragment) inkább tömörítetlenül hagyom texturát

ja a közeli képeimet meg töröltem; mindig csak a legujabbakat hagyom fenn
Jedi          2007.02.25 16:51
FZoli
Van ennek köze ahhoz h a relief mappinghoz pl. RGBA képet használnak, ahol a normal mapra alphacsatornaként ráteszik a heightmapot?


Van köze, de a relief map esetében más jelentése van a magasságtérképnek.
A klasszikus parallax mapping esetében vizuálisan csak annyi történik, h a felület nagyobb magasságértékkel rendelkező pontai a szemtől távolabb, az alacsonyabb pontjai a szemhez közelebb kerülnek. Azaz ez csak egy 2D-s torzítás a textúrán.

A relief mapping esetében a magasságtérkép azt jelenti, h mennyire vannak a felület _alatt_ az egyes pontok. Ez lehetővé teszi, h nézőpontból/fényforrásból gyorsan és elég pontosan metszéspontokat számoljunk a magasságtérképpel. Ebben az a jó, h lehetővé válik az ön-takarás és az ön-árnyalás megjelenítése. Persze ez is tipikusan olyan technika, ami felezi / negyedeli az fps-t.
Jedi          2007.02.25 16:49
syam
nézd meg a shotokat a projectemnél, azon épp ilyen parallax mapping van
+ http://users.atw.hu/syam/gallery/old/bump2a.jpg ezen is
szóval fel lehet használni, de mint írtam az eredmény csak hasonló és nem ugyanaz...



Hmm, egy nagyobb / közelebbi képet tudsz csinálni esetleg? Furcsállom kicsit a dolgot, h egyáltalán hasonló eredményt kaptál, hiszen a normálvektor Z komponense teljesen máshogy változik mint a magasságérték.

Pl. ha veszünk egy olyan magasságtérképet, ahol a magasság mondjuk balról jobbra lineárisan növekszik (tehát egy ilyen ferde felület), ott a normálvektorok Z komponense konstans az egész felületen. Azaz semmilyen parallax hatás nem érvényesülne, ha ezt használnánk.

Érdekel ez a dolog, mivel a parallax nagyon érzékeny a magasságtérképre amúgy is. Így elsőre arra tippelek, h a nagyon buckás felületeken lehet hasonló a hatása.
Jedi          2007.02.25 16:49
syam
DP3 diffuse,bumpVector,lightVector;

ez egy kétkomponensű vektorral + magasság értékkel érdekes eredményt adna...


Természetesen nem kétkomponensű vektorral kell dolgoznod, a shaderben még előtte kiszámolod a hiányzó komponenst, de-normálod a vektort. Ezt meg lehet csinálni, mivel érintő térben (a háromszögek lokális terében) definiált normal map-ről van szó (szóval csak egy féltérben dolgozunk, tudjuk milyen irányba kell mutatnia a normálvektornak).

Ha olyan normál map-el dolgoznánk, ahol a normálvektorok objektum v. világ-koordinátarendszerben vannak definiálva, akkor ezt nem lehetne megcsinálni. Ezek nem ilyen világoskék színű map-ek mint ebben a tutorialban, hanem "szivárványszínűek", mivel ezeknél a Z koordináta az ellenkező irányba is mutathat.

Marha sok normál-map formátum van egyébként, ez a 8+8 bites kétkomponensű is elterjedt (DX-ben is van). Persze manapság már célszerű a normál-map-et is tömöríteni. Pl. DXT5-ös tömörítést is lehet "trükkösen" használni, itt is csak a tangens+binormál irányú komponenst szoktak tárolni, azokat is a zöld és az alfa csatornában, a többi csatornát kinullázzák. Így a legnagyobb a tömörítés mértéke, és a DXT5-nél így a legkisebb a veszteség. Ha meg kell még magasságtérkép is, az meg mehet mondjuk a vörös csatornába, persze ez rontja a tömörítést.
syam          2007.02.25 09:04
Idézet
normal map-ben tárolt értékekből leginkább a tangent+binormál irányú értékek a meghatározóak, így csak ezt a kettőt tárolják.


DP3 diffuse,bumpVector,lightVector;

ez egy kétkomponensű vektorral + magasság értékkel érdekes eredményt adna...

Idézet
magasságértékek a parallaxhoz, az eredeti normál map "up" értékeit nem lehet ehhez felhasználni,


nézd meg a shotokat a projectemnél, azon épp ilyen parallax mapping van
+ http://users.atw.hu/syam/gallery/old/bump2a.jpg ezen is
szóval fel lehet használni, de mint írtam az eredmény csak hasonló és nem ugyanaz...

Idézet
Van ennek köze ahhoz h a relief mappinghoz pl. RGBA képet használnak, ahol a normal mapra alphacsatornaként ráteszik a heightmapot?



pontosan a relief mappinghoz is igy érdemes használni a depth mapet
FZoli          2007.02.24 22:37
Van ennek köze ahhoz h a relief mappinghoz pl. RGBA képet használnak, ahol a normal mapra alphacsatornaként ráteszik a heightmapot?

FZoli.
Jedi          2007.02.24 15:21
egy kis trükk programozóknak: parallax mappinghoz nem feltétlen szükséges height map - a bump map UP komponense is megteszi és az eredmény majdnem ugyanaz

Hmm, ez igaz, de szvsz egy kicsit félreérthető lett a megfogalmazás. Gondolom arra gondolsz, h mivel a normal map-ben tárolt értékekből leginkább a tangent+binormál irányú értékek a meghatározóak, így csak ezt a kettőt tárolják. Ekkor a normál irányú komponens (az "up" irány, DX stílusú normál map-ben a kék komponens) helyére pakolják be a magasságtérképet, így elég lesz egy map is. Szóval kellenek azért a magasságértékek a parallaxhoz, az eredeti normál map "up" értékeit nem lehet ehhez felhasználni, mert azok csak lokális információt reprezentálnak.
syam          2007.02.24 07:52
rövid, tömör + frankó
egy kis trükk programozóknak: parallax mappinghoz nem feltétlen szükséges height map - a bump map UP komponense is megteszi és az eredmény majdnem ugyanaz
~Cre@tine~>          2007.02.24 06:54
Jó kis tutor. Nem is tudtam, hogy Gimp-el is lehet ilyet csinálni. Persze ez még csak a map, az oroszlán része a shader programozásnál kezdődik.
FZoli          2007.02.24 04:14
Előre elnézést szeretnék kérni, ha valahol valami orbitális baromságot írtam (akár az elmélettel, akár a gyakorlattal kapcsolatban), még énis csak pedzegetem a témát...

FZoli.