Bevezetés a shader programozás kezdőknek
Ismerje meg, hogyan kell írni shader, akkor maximálisan kihasználja az összes feldolgozási teljesítmény a modern grafikus chipek, több ezer magot, amely párhuzamosan működik egy szál, mert minden shader számításokat végzett a GPU, nem a CPU. Shader programozás igényel más gondolkodásmód és megközelítés kód írása, hanem írásban a hagyományos programok, de ezek szinte korlátlan lehetőségei, több mint fizet minden problémát a kezdeti szakaszban.
Ma szinte bármilyen vizuális hatásokat játékok és hasonló programok futnak GPU-kód, kezdve reális világítás AAA játékok és befejező utófeldolgozás hatások 2D grafika, és a folyadék szimuláció.
A célkitűzések a lecke
Sokan látják shader programozást, mint valami érthetetlen a területen a fekete mágia. A Web megtalálja a nagy számú minta kódot létrehozni izgalmas hatást, de kevés vagy nincs magyarázat, hogy ne. Ez a lecke csak a célja, hogy leküzdeni ezeket az akadályokat, és hogy eloszlassa a tévhiteket shader. A fő hangsúly a lecke -, hogy elérje megértéséhez, hogyan kell írni és megérteni a shader kódot, kezdve az alapokat, az olvasó könnyen írni shader a semmiből, össze és módosíthatja a meglévőket.
Ez egy általános osztály, így képes lesz arra, hogy tudásukat bármely platform, amely támogatja shader.
Szóval, mi az általános shader?
Shader - egy olyan program, amely fut a grafikus renderelés ciklust, és utasítja a számítógépet, hogy miként kell feldolgozni és megjeleníteni minden pixel. Ezek a programok shaders mert gyakran használják őket, hogy ellenőrizzék a fényhatások és valósághű árnyékok (az angol árnyékban - árnyék), de nincs ok, és nincs korlátozás, hogy használja őket, hogy hozzon létre más különleges hatásokat.
Shaderek vannak írva egy adott programozási nyelv. De ne aggódj. Nem kell tanulni a semmiből egy teljesen új nyelvet, mert írni, shaderek fogjuk használni GLSL, a szintaxis nagyon hasonlít a többi C-szerű nyelven. (Tény, hogy van elég, több nyelven írásra shaderek. Mivel azonban az a tény, hogy arra tervezték, hogy a GPU, hogy közel azonos)
Vágjunk bele!
Mert ez a bemutató fogjuk használni ShaderToy. Ez az erőforrás írhatunk shader közvetlenül a böngészőben, nem törődve a szükséges beállításokat. (Azonban, hogy használni ShaderToy szüksége van egy böngésző, amely támogatja a WebGL, mert a renderelés.) A regisztráció nem kötelező, de ez fogja meg a kódot a jövőben a profilban.
Megjegyzés.: Abban az időben az írás, az erőforrás a béta fázisban. Ezért lehetséges, hogy abban az időben a elolvasni a cikket, a felület / szintaktikai elem lesz kicsit más.
Ha rákattint a New Shader. Most látnunk kell az ablakot:
Szóval, mi folyik itt?
Most fogom elmagyarázni egy mondatban hogyan shaderek működik. Kész vagy? Menjünk!
A fő cél a shader -, hogy négy kimenet szám kifejező bukvamir. g. b. a.
Nézzük Mindezeket figyelembe véve, és próbálja meg kitölteni a képernyőn piros. Értékek RGBA (piros - piros, zöld - zöld, kék - kék és alfa - alfa csatornát, illetve az átláthatóság, nagyon egyszerűen fogalmazva) változhat 0-ról 1 Ezért minden meg kell tennie, hogy visszatérjen az értéke R, G, B , a = 1, 0, 0, 1 ezekben ShaderToy adatok rögzítésre változó fragColor.
Gratulálunk! Így írja meg az első shader működik!
Feladat. Meg lehet változtatni a színét szürkére?
vec4 - egy adattípust (négy-vektor), így írhatnánk a szín egy változó típusú vec4 és közvetítik annak jelentőségét fragColor:
Persze, hogy kitöltse a teljes képernyőt egy szín nem túl izgalmas. Mi lehet futtatni a kódot több százezer pixelek egy időben, és mi csak fesse át őket egy színt.
Próbáljuk, hogy kitöltse a képernyőt egy színátmenet. Nem kaptunk erre, ha nem tudjuk, hogy a koordinátákat a pixel színét, hogy akarjuk befolyásolni.
Shader bemeneti adatok.
Pixel shader nyújt számos beépített változó. amelyeket fel lehet használni a munkában. Ki lesz hasznos, változtatható fragCoord számunkra. amely információkat tartalmaz az aktuális koordinátái pixel a képernyőn. Próbáljuk átfesteni minden pixel a bal fele a fekete képernyő, és a jobb oldalon - piros:
Kb. A komponensek bármely változó típusú vec4 lehet hozzáférni obj.x. obj.y. obj.z és obj.w. vagy obj.r. obj.g. obj.b. obj.a. Ezek a reagensek nem más - csak különböző módon reprezentáló ugyanazokat az adatokat, hogy javítsa az olvashatóság a kód (például ha egy változó vec4 obj utalni a színek, mások lásd a kódot megjelölés obj.r. azonnal meg fogja érteni).
Lát problémát a kódot, amit csak írtam? Próbálja váltás teljes képernyős módban. kattintson a megfelelő gombra a jobb alsó sarokban.
Része a képernyőn, festett vörös színű, függ a képernyő mérete. Annak érdekében, hogy biztos, hogy pontosan a fele a képernyő piros színű, tudnunk kell, hogy a méretek. Képernyő mérete nem rögzítik a beépített változó, például a helyzet az aktuális képpont, mert általában a programozó határozza meg a méret a munkaterületet a shader. Esetünkben ShaderToy platform a fejlesztők állítsa ezeket a méreteket.
Ha kell használni valamilyen információt kívülről, ami nem egy beépített változó, akkor áthelyezi a CPU-t (a főprogram) a GPU (a shader). ShaderToy már vigyáztak mindenre számunkra. Az értékek az összes változót, hogy átadja az shader kívülről látható, a Shader Bemenetek lapra. A változók továbbítja a CPU a GPU, így a nyelvi GLSL jelölt szó egységes.
Nézzük javítsuk kódot úgy, hogy helyes-e felismerni, ha a képernyő közepén. Mi kell egy változót iResolution fülek Shader bemenetek:
Ha megy teljes képernyőn ebben az időben, de most a képernyő van osztva pontosan fele színekben.
Azt viszont, hogy a lejtőt.
Kapcsolja színrebontott világosan ketté egy sima színátmenet nem nagyon nehéz. Color értékek között változhat 0 és 1, valamint a koordinátákat a képernyő 0-ról 1 Mi ezt.
Feladat. ha tudod, hogy a vertikális gradiens helyett vízszintes? És mi a helyzet az átlós? És mi a helyzet a gradiens több színben?
Ha fizet a módosításokat és tesztelése a kód elég időt, akkor kell kitalálni, hogy a bal felső sarokban a koordinátái (0,1) helyett a várható (0,0). Fontos, hogy tartsa ezt szem előtt, amikor írásban shaderek.
rajzolni
Játssz a színekkel, persze, jó szórakozást, de ha azt akarjuk, hogy valami igazán látványos, a shader képesnek kell lennie arra, hogy feldolgozza az információkat a képek. Így lehetővé válik, hogy egy shader, hogy bármely, a teljes képernyőt (például szín vagy hatása a víz alatti világ), vagy csak egyedi tárgyakat, attól függően, hogy a beérkező információkat (például a világítási rendszer).
Kattintson iChannel0 és válassza ki a textúra, vagy képet, hogy tetszik.
Most tájékoztatás a kép átkerül a shader. Van azonban egy probléma - nincs beépített shader DrawImage () függvényt. Emlékezzünk, hogy az egyetlen dolog, ami lehet, hogy shader -, hogy változtatni a színét a képpontok.
Tehát, ha tudunk visszatérni a szín értékét minden egyes pixel, hogyan felhívni a textúra? Meg kell valamilyen módon kapcsolódnak a koordinátákat a pixel feldolgozás alatt a megfelelő pixel textúra:
Ezt meg lehet tenni a beépített texture2D funkció (textúra, koordináták). hogy veszi paraméterek és textúra koordináta pár (x, y). és visszaadja a textúra színe ezen a ponton a változó típusa vec4.
Korrelál a textúra koordinátákat a képernyő koordináták lehetnek bármilyen kényelmes módon. Tudod felhívni a teljes textúra csak a negyede a képernyőn (kihagyás pixel - azaz, hogy csökkentsék a skála), vagy felhívni egy része a textúra.
Most az a fontos, hogy csak látni a képet a képernyőn, így korrelációban összes pixelek 1-1:
Tehát ez az első shader egy képet!
Most, hogy tudjuk, hogyan kell helyesen kivonat az információt a textúra, akkor módosíthatja azt, amit szeretnék! Meg lehet nyúlik, zoom, vagy változtatni a színét értékeket.
Próbáljuk felvenni gradiens, mint mi fent:
Gratulálunk, csak létrehozta az első postprotsessingovy hatás!
Feladat. ha levelet shader, ami minden kép fekete-fehér?
Mi átélni a shader
Ezt megelőzően, minden hatása, hogy hoztunk létre, már a statikus. Tény, hogy az adatok, hogy megadja ShaderToy, akkor létrehozhat egy sokkal érdekesebb dolgokat. iGlobalTime - egy változó, növekvő idővel. Ezt fel lehet használni, mint a paraméter létrehozása periodikus hatásokat. Próbáljuk játszani a színekkel:
A GLSL van egy beépített függvények a szinusz és koszinusz, valamint sok más hasznos funkciók, mint például a hossza a vektor, vagy a távolságot a vektorok. Szín nem tud negatív értéket, így meg kell, hogy használja a beépített abs függvény, amely visszaadja az abszolút érték (modulus) számokat, tekintet nélkül a jel.
Feladat. Tud levelet shader, amely megváltoztatja a kép fekete-fehér és színes, majd vissza?
Egy rövid megjegyzés a hibakeresés shaderek
Bizonyára arra használják, hogy figyelemmel kíséri a kódot szinte sorról sorra, és kimenet a konzol az összes szükséges paramétert, és használja töréspont parancsot, hogy mi történik a program végrehajtása során. Sajnos, így a shaderek nem lehet megtenni. Bizonyára megtalálja néhány eszköz a hibakeresés shader a kiválasztott platform, de alapvetően a legjobb megoldás az lenne, hogy a változók értékét, amit szeretne ellenőrizni, úgy, hogy az eredmény látható.
következtetés
Az összes fenti - csak az alapokat a dolgozó shader, de ez a megértés ezen elvek lehetővé teszi, hogy elérni sokkal több. Lásd hatásokat létrehozni ShaderToy más felhasználóknak, és megpróbálja kitalálni, hogy saját, vagy játszani néhány közülük.
Van egy dolog, ami nem szerepel ebben a cikkben - a vertex shaderek. Azt írják ugyanazon a nyelven, az egyetlen különbség az, hogy nem végzik pixelenként, és (mint a neve is mutatja) az egyes csomópontokon, és vissza nem csak színes, hanem a helyzet a csúcs. Vertex shader általában felelős a vetítés és renderelő 3D-jelenet a képernyőn (vozmzhonost beépítve a legtöbb grafikus motorok). Pixel shader felelős létre speciális vizuális hatásokat, ezért nagy hangsúlyt fektetünk rájuk.