Vytváření shaderů pomocí Návrháře shaderů v sadě Visual Studio

V tomto článku se dozvíte, jak pomocí Návrháře shaderu vytvořit různé druhy shaderů.

Vytvoření základních plochých barevných shaderů

Pomocí Návrháře shaderu a jazyka DGSL (Directed Graph Shader Language) můžete vytvořit plochý barevný shader. Tento shader nastaví konečnou barvu na konstantní hodnotu barvy RGB. Barevný shader s plochou barvou můžete implementovat tak, že do konečné výstupní barvy napíšete hodnotu barvy RGB.

Než začnete, ujistěte se, že se zobrazí okno Vlastnosti a sada nástrojů .

1. Vytvořte shader DGSL, se kterým budete pracovat. Informace o tom, jak do projektu přidat shader DGSL, najdete v části Začínáme v Návrháři shaderů.

2. Odstraňte uzel Barva bodu. Pomocí nástroje Vybrat vyberte uzel Barva bodu a potom na řádku nabídek zvolte Upravit>odstranění.

3. Přidejte do grafu uzel Konstanta barvy. V sadě nástrojů v části Konstanty vyberte Barevná konstanta a přesuňte ji na návrhovou plochu.

4. Zadejte hodnotu barvy pro uzel Konstanta barvy. Pomocí nástroje Vybrat vyberte uzel Barevná konstanta a potom v okně Vlastnosti ve vlastnosti Výstup zadejte hodnotu barvy. Pro oranžovou zadejte hodnotu (1,0, 0,5, 0,2, 1,0).

5. Připojení konstantu barvy k konečné barvě. Pokud chcete vytvořit připojení, přesuňte terminál RGB uzlu Barevné konstanty do terminálu RGB uzlu Konečná barva a pak přesuňte terminál Alfa uzlu Color Constant do terminálu Alfa uzlu Konečné barvy. Tato připojení nastavují konečnou barvu na barevnou konstantu definovanou v předchozím kroku.

Následující obrázek znázorňuje dokončený graf shaderu a náhled shaderu použitého u datové krychle.

Poznámka:

Na obrázku byla zadána oranžová barva, která lépe demonstruje efekt shaderu.

Některé obrazce můžou poskytovat lepší náhledy pro některé shadery. Další informace o náhledu shaderů v Návrháři shaderu naleznete v tématu Návrhář shader.

Vytváření základních shaderů Lambertu

Pomocí Návrháře shaderu a jazyka DGSL (Directed Graph Shader Language) můžete také vytvořit světelný shader, který implementuje klasický model osvětlení Lambert.

Model osvětlení Lambert zahrnuje okolní a směrové osvětlení pro stínování objektů ve 3D scéně. Okolní komponenty poskytují základní úroveň osvětlení ve 3D scéně. Směrové komponenty poskytují dodatečné osvětlení ze směrových (vzdálených) zdrojů světla. Okolní osvětlení ovlivňuje všechny plochy ve scéně stejně, bez ohledu na jejich orientaci. Pro danou plochu je to součin okolní barvy povrchu a barvy a intenzity okolního osvětlení ve scéně. Směrové osvětlení ovlivňuje každý povrch ve scéně odlišně podle orientace povrchu vzhledem ke směru zdroje světla. Je to součin difuzní barvy a orientace povrchu a barvy, intenzity a směru zdrojů světla. Povrchy, které tváří přímo směrem ke zdroji světla obdrží maximální příspěvek a povrchy, které jsou přímo pryč, nepřispívají. Pod modelem osvětlení Lambert se okolí a jedna nebo více směrových komponent zkombinují, aby bylo možné určit celkový příspěvek difuzní barvy pro každý bod objektu.

Než začnete, ujistěte se, že se zobrazí okno Vlastnosti a sada nástrojů .

1. Vytvořte shader DGSL, se kterým chcete pracovat. Informace o tom, jak do projektu přidat shader DGSL, najdete v části Začínáme v Návrháři shaderů.

2. Odpojte uzel Barva bodu od uzlu Konečná barva. Zvolte terminál RGB uzlu Barva bodu a pak zvolte Přerušení propojení. Nechte terminál Alfa připojený.

3. Přidejte do grafu uzel Lambert. V sadě nástrojů v části Utility vyberte Lambert a přesuňte ho na návrhovou plochu. Lambertový uzel vypočítá celkový příspěvek difuzní barvy pixelu na základě okolních a difuzních světelných parametrů.

4. PřipojeníNa bodový barevný uzel na uzel Lambert. V režimu výběru přesuňte terminál RGB uzlu Barva bodu do terminálu Difuzní barvy uzlu Lambert. Toto připojení poskytuje uzlu lambertu interpolovanou difuzní barvu pixelu.

5. Připojení vypočítanou hodnotu barvy na konečnou barvu. Přesuňte výstupní terminál uzlu Lambert do terminálu RGB uzlu Konečná barva.

   Následující obrázek znázorňuje hotový graf shaderu a náhled shaderu použitého u modelu čajového skladu.

Poznámka:

Pro lepší předvedení efektu shaderu na tomto obrázku byla pomocí parametru MaterialDiffuse shaderu určena oranžová barva. Tento parametr může použít hra nebo aplikace k zadání jedinečné hodnoty barvy pro každý objekt. Informace o parametrech materiálu naleznete v tématu Shader Designer.

Následující obrázek znázorňuje shader popsaný v tomto dokumentu použitý na 3D model.

Vytváření základních shaderů Phong

Pomocí Návrháře shaderu a jazyka DGSL (Directed Graph Shader Language) můžete také vytvořit světelný shader, který implementuje klasický model phongového osvětlení.

Model osvětlení Phong rozšiřuje model lambertového osvětlení tak, aby zahrnoval specifikované zvýraznění, které simuluje reflexní vlastnosti povrchu. Specifikační komponenta poskytuje dodatečné osvětlení ze stejných směrových zdrojů světla, které se používají v modelu osvětlení Lambert, ale jeho příspěvek k konečné barvě je zpracován odlišně. Specifika zvýraznění ovlivňuje každý povrch ve scéně odlišně, na základě vztahu mezi směrem zobrazení, směrem zdroje světla a orientací povrchu. Je to součin specifikární barvy, specifikární síly a orientace povrchu a barvy, intenzity a směru zdrojů světla. Povrchy, které odrážejí zdroj světla přímo v prohlížeči, obdrží maximální spekulární příspěvek a povrchy, které odrážejí zdroj světla od diváka, neobdrží žádný příspěvek. Pod modelem osvětlení Phong se jedna nebo více specifikátorů zkombinují, aby se určila barva a intenzita specifika zvýraznění pro každý bod objektu, a pak se přidají k výsledku modelu lambert osvětlení, aby vznikla konečná barva pixelu.

Další informace o modelu lambert osvětlení naleznete v tématu Postupy: Vytvoření základního lambert shaderu.

Než začnete, ujistěte se, že se zobrazí okno Vlastnosti a sada nástrojů .

1. Vytvořte lambert shader, jak je popsáno v tématu Postupy: Vytvoření základního lambertova shaderu.

2. Odpojte uzel Lambert od uzlu Konečná barva. Zvolte terminál RGB uzlu Lambert a pak zvolte Přerušení propojení. Tím se vytvoří místo pro uzel, který je přidaný v dalším kroku.

3. Přidejte do grafu uzel Přidat. V sadě nástrojů v části Matematika vyberte Přidat a přesuňte ji na návrhovou plochu.

4. Přidejte do grafu specularový uzel. V sadě nástrojů v části Utility vyberte Specular a přesuňte ho na návrhovou plochu.

5. Přidejte spekulární příspěvek. Přesuňte výstupní terminál specularového uzlu do terminálu X uzlu Přidat a pak přesuňte výstupní terminál uzlu Lambert do terminálu Y Y uzlu Přidat. Tato spojení kombinují celkový difuzní a specifikační barevný příspěvek pixelu.

6. Připojení vypočítanou hodnotu barvy na konečnou barvu. Přesuňte výstupní terminál uzlu Přidat do terminálu RGB uzlu Konečné barvy.

   Následující obrázek znázorňuje hotový graf shaderu a náhled shaderu použitého u modelu čajového skladu.

Poznámka:

Abychom lépe ukázali účinek shaderu na tomto obrázku, byla pomocí parametru MaterialDiffuse shaderu určena oranžová barva a kovová povrchová úprava byla určena pomocí parametrů MaterialSpecular a MaterialSpecularPower. Informace o parametrech materiálu naleznete v tématu Shader Designer.

Některé obrazce můžou poskytovat lepší náhledy pro některé shadery. Další informace o zobrazení náhledu shaderů najdete v tématu Návrhář shaderů.

Následující obrázek znázorňuje shader popsaný v tomto dokumentu použitý na 3D model. MaterialSpecular vlastnost je nastavena na (1.00, 0.50, 0.20, 0.00) a jeho MaterialSpecularPower vlastnost je nastavena na 16.

Poznámka:

Vlastnost MaterialSpecular určuje zjevné dokončení povrchového materiálu. Vysoce lesklý povrch, jako je sklo nebo plast, má tendenci mít specularovou barvu, která je světlý odstín bílé. Kovový povrch má tendenci mít specular barvu, která je blízko k jeho difuzní barvě. Saténový povrch má tendenci mít specularovou barvu, která je tmavý odstín šedé.

MaterialSpecularPower vlastnost určuje, jak intenzivní jsou specifikátory. Vysoké specifikátory simulují duller, více lokalizované zvýraznění. Velmi nízké specifikační schopnosti simulují intenzivní, uklidující zvýraznění, které může překryt a skrýt barvu celého povrchu.

Vytváření shaderů základní textury

Pomocí Návrháře shaderu a jazyka DGSL (Directed Graph Shader Language) vytvořte shader s jednou texturou. Tento shader nastaví konečnou barvu přímo na hodnoty RGB a alfa, které jsou vzorkovány z textury.

Základní shader s jednou texturou můžete implementovat tak, že přímo do konečné výstupní barvy napíšete barvy a alfa hodnoty vzorku textury.

Než začnete, ujistěte se, že se zobrazí okno Vlastnosti a sada nástrojů .

1. Vytvořte shader DGSL, se kterým budete pracovat. Informace o tom, jak do projektu přidat shader DGSL, najdete v části Začínáme v Návrháři shaderů.

2. Odstraňte uzel Barva bodu. V režimu výběru vyberte uzel Barva bodu a potom na řádku nabídek zvolte Upravit>odstranění. Tím se vytvoří místo pro uzel, který je přidaný v dalším kroku.

3. Přidejte do grafu uzel Sample textury. V sadě nástrojů v části Textura vyberte Vzorky textury a přesuňte ho na návrhovou plochu.

4. Přidejte do grafu uzel Souřadnice textury. V sadě nástrojů v části Textura vyberte Souřadnice textury a přesuňte ji na návrhovou plochu.

5. Zvolte texturu, která se má použít. V režimu výběru vyberte uzel Textura Ukázka a potom v okně Vlastnosti zadejte texturu, kterou chcete použít pomocí vlastnosti Název souboru .

6. Zpřístupnit texturu veřejně. Vyberte uzel Sample textury a potom v okně Vlastnosti nastavte vlastnost Access na Public. Teď můžete texturu nastavit z jiného nástroje, například editoru modelů.

7. Připojení souřadnice textury k vzorku textury. V režimu výběru přesuňte výstupní terminál uzlu Souřadnice textury douv terminálu uzlu Vzorkování textury. Toto připojení vzorkuje texturu na zadaných souřadnicích.

8. Připojení vzorku textury na konečnou barvu. Přesuňte terminál RGB uzlu Vzorková textura do terminálu RGB uzlu Konečná barva a pak přesuňte terminál Alfa uzlu Vzorková textura do terminálu Alfa konečné barvy uzlu.

Následující obrázek znázorňuje dokončený graf shaderu a náhled shaderu použitého u datové krychle.

Poznámka:

Na tomto obrázku se rovina používá jako obrazec náhledu a byla zadána textura, která lépe demonstruje efekt shaderu.

Některé obrazce můžou poskytovat lepší náhledy pro některé shadery. Další informace o zobrazení náhledu shaderů v Návrháři shaderů naleznete v tématu Návrhář shaderu

Vytváření shaderů textur ve stupních šedé

Pomocí Návrháře shaderů a jazyka DGSL (Directed Graph Shader Language) vytvořte shader textury ve stupních šedé. Tento shader upraví hodnotu barvy RGB vzorku textury a pak ji použije společně s neupravenou alfa hodnotou k nastavení konečné barvy.

Shader textury ve stupních šedé můžete implementovat tak, že před zápisem do konečné výstupní barvy upravíte hodnotu barvy vzorku textury.

Než začnete, ujistěte se, že se zobrazí okno Vlastnosti a sada nástrojů .

1. Vytvořte shader základní textury, jak je popsáno v tématu Postupy: Vytvoření shaderu základní textury.

2. Odpojte terminál RGB uzlu Sample textury od terminálu RGB uzlu Konečná barva. V režimu výběru zvolte terminál RGB uzlu Ukázka textury a pak zvolte Přerušení propojení. Tím se vytvoří místo pro uzel, který je přidaný v dalším kroku.

3. Přidejte do grafu desaturate uzel. Na panelu nástrojů v části Filtry vyberte Desaturate a přesuňte ho na návrhovou plochu.

4. Vypočítejte hodnotu stupně šedé pomocí uzlu Desaturate . V režimu výběru přesuňte terminál RGB uzlu Sample textury do terminálu RGB uzlu Desaturate.

   Poznámka:

   Ve výchozím nastavení desaturate uzel plně desaturuje vstupní barvu a používá standardní hmotnosti světelnosti pro převod stupně šedé. Způsob chování uzlu Desaturate můžete změnit změnou hodnoty vlastnosti Luminance nebo pouze částečnou desaturací vstupní barvy. Pokud chcete částečně desaturovat vstupní barvu, zadejte skalární hodnotu v rozsahu [0,1) do terminálu Procent uzlu Desaturate.

5. Připojení hodnotu barvy ve stupních šedé na konečnou barvu. Přesuňte výstupní terminál uzlu Desaturate do terminálu RGB uzlu Konečná barva.

Následující obrázek znázorňuje dokončený graf shaderu a náhled shaderu použitého u datové krychle.

Na tomto obrázku se rovina používá jako obrazec náhledu a byla zadána textura, která lépe demonstruje efekt shaderu. Některé obrazce můžou poskytovat lepší náhledy pro některé shadery. Další informace o zobrazení náhledu shaderů najdete v tématu Návrhář shaderů.

Vytváření gradientových shaderů založených na geometrii

Pomocí Návrháře shaderu a jazyka shaderu řízeného grafu můžete vytvořit gradientní shader založený na geometrii. Tento shader škáluje konstantní hodnotu barvy RGB podle výšky každého bodu objektu ve světovém prostoru.

Shader založený na geometrii můžete implementovat tak, že do shaderu začleníte pozici pixelu. V jazycích stínování obsahuje pixel více informací než jenom barvu a umístění na 2D obrazovce. Pixel – známý jako fragment v některých systémech – je kolekce hodnot, které popisují povrch, který odpovídá pixelu. Shader popsaný v tomto dokumentu využívá výšku každého pixelu 3D objektu ve světovém prostoru, aby ovlivnil konečnou výstupní barvu fragmentu.

Než začnete, ujistěte se, že se zobrazí okno Vlastnosti a sada nástrojů .

1. Vytvořte shader DGSL, se kterým chcete pracovat. Informace o tom, jak do projektu přidat shader DGSL, naleznete v části Začínáme v tématu O návrháři shaderů.

2. Odpojte uzel Barva bodu od uzlu Konečná barva. Zvolte terminál RGB uzlu Barva bodu a pak zvolte Přerušení propojení. Tím se vytvoří místo pro uzel, který je přidaný v dalším kroku.

3. Přidejte do grafu uzel násobení. V sadě nástrojů v části Matematika vyberte Násobit a přesuňte ho na návrhovou plochu.

4. Přidejte do grafu uzel Mask Vector. V sadě nástrojů v části Utility vyberte Mask Vector (Vektor masky) a přesuňte ho na návrhovou plochu.

5. Zadejte hodnoty masky pro uzel Mask Vector . V režimu Vybrat vyberte uzel Mask Vector a pak v okně Vlastnosti nastavte vlastnost Green / Y na Hodnotu True a pak nastavte vlastnosti Red / X, Blue / Z a Alpha / W na False. V tomto příkladu vlastnosti Red / X, Green / Y a Blue / Z odpovídají komponentám x, y a z uzlu Světové pozice a Alfa / W se nepouží. Vzhledem k tomu, že pouze Zelená / Y je nastavena na Hodnotu True, zůstane po maskování pouze komponenta y vstupního vektoru.

6. Přidejte do grafu uzel Pozice světa. V sadě nástrojů v části Konstanty vyberte Umístění světa a přesuňte ji na návrhovou plochu.

7. Zamaskujte světovou pozici prostoru fragmentu. V režimu výběru přesuňte výstupní terminál uzlu Pozice světa do vektorového terminálu uzlu Mask Vector. Toto připojení maskuje pozici fragmentu tak, aby ignorovala součásti x a z.

8. Vynásobte barevnou konstantu RGB umístěním maskovaného prostoru světa. Přesuňte terminál RGB uzlu Barva bodu do terminálu Y y uzlu Násobit a pak přesuňte výstupní terminál uzlu Mask Vector do terminálu X násobení uzlu. Toto připojení škáluje hodnotu barvy podle výšky pixelu ve světovém prostoru.

9. Připojení škálovaná hodnota barvy na konečnou barvu. Přesuňte výstupní terminál uzlu Násobení do terminálu RGB uzlu Konečné barvy.

Následující obrázek znázorňuje dokončený graf shaderu a náhled shaderu použitého na kouli.

Poznámka:

Na tomto obrázku je určena oranžová barva, která lépe demonstruje efekt shaderu, ale protože obrazec náhledu nemá žádnou pozici ve světě, shader nemůže být v Návrháři shaderu plně náhledován. Shader musí být zobrazený v reálné scéně, aby bylo možné předvést celý efekt.

Některé obrazce můžou poskytovat lepší náhledy pro některé shadery. Další informace o zobrazení náhledu shaderů najdete v tématu Návrhář shaderů.

Následující obrázek znázorňuje shader popsaný v tomto dokumentu použitý na 3D scénu, která je ukázaná v tématu Postupy: Modelování 3D terénu. Intenzita barvy se zvyšuje o výšku bodu na světě.

Další informace o použití shaderu u 3D modelu najdete v tématu Postupy: Použití shaderu na 3D model.

Související obsah

• Postupy: Použití shaderu na 3D model
• Postupy: Export shaderu
• Uzly Návrháře shaderu
• Editor obrázků