Návod: Vytvoření realistické trojrozměrné kulečníkové koule

Tento návod ukazuje, jak vytvořit realistický 3D míč pomocí návrháře shaderu a editoru obrázků v Visual Studio. 3D vzhledu míče se dosahuje kombinováním několika technik shaderu s odpovídajícími prostředky textury.

Požadavky

K dokončení tohoto návodu potřebujete následující komponenty a dovednosti:

  • Nástroj pro sestavení textur do mapy datové krychle, například nástroj Textura rozhraní DirectX, který je součástí sady DirectX SDK z června 2010.

  • Znalost editoru obrázků v Visual Studio

  • Znalost návrháře shaderu v Visual Studio.

Vytvoření základního vzhledu s tvarem a texturou

V počítačové grafice jsou nejzákladnějšími prvky vzhledu tvar a barva. V počítačové simulaci se běžně používá 3D model k reprezentaci tvaru reálného objektu. Podrobnosti o barvě se pak použijí na povrch modelu pomocí mapy textury.

Obvykle budete muset požádat autora, aby vytvořil 3D model, který můžete použít, ale vzhledem k tomu, že míč je běžný tvar (kouli), návrhář shaderu už má integrovaný vhodný model.

sphere je výchozí tvar náhledu v Návrháři shaderu. Pokud k náhledu shaderu aktuálně používáte jiný tvar, přepněte zpět na sphere.

Zobrazení náhledu shaderu pomocí kouli

  • Na panelu nástrojů Návrhář shaderu zvolte Náhled s sphere.

V dalším kroku vytvoříte program shaderu, který na model použije texturu, ale nejprve musíte vytvořit texturu, kterou můžete použít. Tento názorný postup ukazuje, jak vytvořit texturu pomocí editoru obrázků, který je součástí Visual Studio, ale můžete použít libovolný editor obrázků, který dokáže texturu uložit ve vhodném formátu.

Ujistěte se, že se zobrazuje okno Vlastnosti a panel nástrojů.

Vytvoření textury míče pomocí editoru obrázků

  1. Vytvořte texturu, se které chcete pracovat. Informace o tom, jak přidat texturu do projektu, najdete v části Začínáme v Editoru obrázků.

  2. Nastavte velikost obrázku tak, aby jeho šířka byla dvakrát větší. To je nezbytné kvůli způsobu, jakým je textura namapovaná na sférický povrch míče. Pokud chcete změnit velikost obrázku, zadejte v okně Vlastnosti nové hodnoty vlastností Width (Šířka) a Height (Výška). Například nastavte šířku na 512 a výšku na 256.

  3. Nakreslete texturu pro balonový míč a zamyslete se, jak je textura namapovaná na kouli.

    Textura by měla vypadat podobně jako tato:

    Textura pro balon

  4. Volitelně můžete chtít snížit požadavky na úložiště této textury. Můžete to udělat tak, že zmenšíte šířku textury tak, aby odpovídala její výšce. Tím se zkomprimuje textura podél její šířky, ale vzhledem ke způsobu, jakým je textura namapovaná na kouli, bude při vykreslení koulí rozbalena. Po provedení velikosti by textura měla vypadat podobně jako tato:

    Textura zkomprimovaná do čtverce

    Teď můžete vytvořit shader, který tuto texturu použije na model.

Vytvoření shaderu základní textury

  1. Vytvořte shader DGSL, se kterým bude fungovat. Informace o tom, jak do projektu přidat shader DGSL, najdete v Začínáme v návrháři shaderu.

    Graf shaderu ve výchozím nastavení vypadá takhle:

    Výchozí graf shaderu

  2. Upravte výchozí shader tak, aby na aktuální pixel aplikuje hodnotu vzorku textury. Graf shaderu by měl vypadat takhle:

    Graf shaderu, který aplikuje texturu na objekt

  3. Nakonfigurujte vlastnosti textury a použijte texturu, kterou jste vytvořili v předchozím postupu. Nastavte hodnotu vlastnosti Texture uzlu Texture Sample na Texture1 a pak pomocí vlastnosti Filename skupiny vlastností Texture1 ve stejném okně vlastností určete soubor textury.

    Další informace o tom, jak použít texturu v shaderu, najdete v tématu Postupy: Vytvoření shaderu základní textury.

    Váš míč by teď měl vypadat podobně jako tento:

    Detail texturované balíonové míče

Vytvoření hloubky s modelem osvětlení v Rgb

Zatím jste vytvořili snadno rozpoznatelný koulí v šátku. Zdá se ale, že je plochá a neinterinterní – spíš se jedná o fotku s balíčkem vousů než o repliku. Plochý vzhled je výsledkem zjednodušené shaderu, který se chová, jako by každý pixel na povrchu míče obdržel stejné množství světla.

Ve skutečném světě se světlo jeví nejjasnější na povrchu, které přímo čelí světlému zdroji a jeví se méně jasným na površích, které jsou v šikmém úhlu ke zdroji světla. Je to proto, že energie ve světlých paprskech je distribuována na nejmenší povrch, když povrch přímo směřuje ke zdroji světla. Vzhledem k tomu, že se povrch odlehčí od světlého zdroje, je stejné množství energie distribuováno na stále větší povrch. Povrch, který směřuje od světlého zdroje, vůbec nemá žádnou světlou energii, což vede k úplně tmavému vzhledu. Tato odchylka zjasněná na povrchu objektu je důležitým vizuálním upozorněním, které pomáhá indikovat tvar objektu. bez něj se objekt jeví jako plochý.

V počítačové grafice se modely osvětlení (zjednodušené aproximace složitých reálných interakcí osvětlení) používají k replikaci vzhledu skutečného osvětlení. Model osvětleníMítky mění množství syceně promítaého světla na povrchu objektu, jak je popsáno v předchozím odstavci. Do shaderu můžete přidat model osvětlení Oděsa, který dá míči do 3D vzhledu lepší vzhled.

Přidání osvětlení Dodova do shaderu

  • Upravte shader tak, aby hodnotu vzorku textury modulátoru moduluje podle hodnoty osvětlení Rgb. Graf shaderu by měl vypadat takhle:

    Graf shaderu s přidanou osvětlením v Rgb

  • Volitelně můžete nastavit chování osvětlení nakonfigurováním vlastnosti MaterialDiffuse grafu shaderu. Pokud chcete získat přístup k vlastnostem grafu shaderu, zvolte prázdnou oblast návrhové plochy a pak v okně Vlastnosti vyhledejte vlastnost, ke které chcete získat přístup.

Další informace o tom, jak použít Rgbovo osvětlení ve vašem shaderu, najdete v tématu Postupy: Vytvoření základního Shaderu v Postup.

Když se použije Osvětlení Nasvítí, měl by váš míč vypadat podobně jako tento:

Detail texturované a odhořené míče

Vylepšení základního vzhledu pomocí odlesků

Přístupový model osvětlení poskytuje smysl pro tvar a dimenzi, které chyběly v shaderu pouze s texturou. Stále má ale poněkud choulí vzhled míče.

Skutečný koulí má obvykle glosový povrch, který odráží část světla, která na něj spadá. Některé z těchto odrazů světla mají za výsledek odlesky, které simulují odrazové vlastnosti povrchu. V závislosti na vlastnostech dokončení mohou být zvýraznění lokalizována nebo široká, intenzivní nebo jemná. Tyto spekulativní odrazy jsou modelovány pomocí vztahu mezi zdrojem světla, orientací povrchu a pozicí fotoaparátu – to znamená, že zvýraznění je nejvýraznější, když orientace povrchu odráží zdroj světla přímo do fotoaparátu a je méně intenzivní, když je reflexe méně přímá.

Model osvětlení P phonu vychází z modelu Osvětlení v Phonu, který zahrnuje odlesky, jak je popsáno v předchozím odstavci. Do shaderu můžete přidat model osvětlení P ball, abyste mu mohli dát simulovaný povrch, který bude mít zachyt tím zajímavější vzhled.

Přidání spekulativních zvýraznění do shaderu

  1. Upravte shader tak, aby zahrnoval spekulativní příspěvek, pomocí aditivního blendingu. Graf shaderu by měl vypadat takhle:

    Graf shaderu s přidanou odlesknou osvětlení

  2. Volitelně můžete upravit způsob, jakým se spekulativní zvýraznění chová, konfigurací spekulativních vlastností (MaterialSpecular a MaterialSpecularPower) grafu shaderu. Pokud chcete získat přístup k vlastnostem grafu shaderu, zvolte prázdnou oblast návrhové plochy a pak v okně Vlastnosti vyhledejte vlastnost, ke které chcete získat přístup.

    Další informace o použití odlesků ve shaderu najdete v tématu Postupy: Vytvoření základního P shaderu.

    Když použijete spekulativní zvýraznění, měl by váš míč vypadat podobně jako tento:

    Detailní zákoutí míče s přidaným odleskem

Vytvoření smyslu prostoru odrazem prostředí

Když použijete spekulativní zvýraznění, vypadá váš koulí dost přesvědčivě. Má správný tvar, správnou úlohu malování a pravou dokončení. Stále ale existuje ještě jedna technika, díky které bude váš míč vypadat spíše jako součást jeho prostředí.

Při detailním prozkoumání skutečného míče můžete vidět, že jeho glosář nejenže vykazuje spekulativní zvýraznění, ale také obrázek světa kolem něj. Tento odraz můžete simulovat použitím obrázku prostředí jako textury a jeho kombinováním s vlastní texturou modelu, abyste určili konečnou barvu každého pixelu. V závislosti na typu dokončení můžete zkombinovat více nebo méně textury reflexe společně se zbytkem shaderu. Například shader, který simuluje vysoce odrazový povrch, jako je zrcadlový, může používat pouze texturu reflexe, ale shader, který simuluje jemnější odraz, jako je ten nalezený na koulích, může kombinovat jen malou část hodnoty textury reflexe společně se zbytkem výpočtu shaderu.

Samozřejmě nemůžete jen použít promítovaný obrázek na model stejným způsobem, jakým použijete mapu textur modelu. Pokud ano, odraz světa by se pohyboval s balíkem, jako by k tomu byl reflexe přichycený. Vzhledem k tomu, že reflexe může poít z libovolného směru, potřebujete způsob, jak zadat hodnotu mapy reflexe pro libovolný úhel a způsob, jak zachovat orientaci mapy reflexe podle světa. K splnění těchto požadavků můžete použít speciální druh mapy textury nazývaný mapa datové krychle, která poskytuje šest textur uspořádaných tak, aby tvoří strany datové krychle. V rámci této krychle můžete Ukázat libovolným směrem, abyste našli hodnotu textury. Pokud textury na každé straně krychle obsahují obrázky prostředí, můžete simulovat jakýkoli odraz vzorkováním správného umístění na povrchu krychle. Udržováním krychle zarovnané na světě získáte přesný odraz prostředí. Chcete-li určit, kde by měla být datová krychle Navzorkovaná, stačí vypočítat odraz vektoru kamery mimo povrch objektu a pak ho použít jako 3D souřadnice textury. Použití map krychle tímto způsobem je běžnou technikou, která se označuje jako mapování prostředí.

Mapování prostředí poskytuje efektivní aproximaci skutečných odrazů, jak je popsáno v předchozích odstavcích. Odrazy namapované do prostředí můžete prolnout do svého shaderu, aby kulečníkové míč bylo simulované dokončení, které povede k většímu rozmístění kuličky kulečníkové na scéně.

Prvním krokem je vytvoření textury mapy krychle. V mnoha typech aplikací nemusí být obsah mapy krychle účinný, zejména v případě, že je odraz nekvalitní nebo na obrazovce nezaujímají výrazné místo. Mnoho her například používá předem vypočtené mapy krychlí pro mapování prostředí a stačí použít nejbližší objekt, který je nejblíže každému odrážející objekt, i když to znamená, že odraz není správný. I hrubá aproximace je často dostatečně dobrá pro přepřesvědčivý účinek.

Vytvoření textur pro mapu prostředí pomocí editoru obrázků

  1. Vytvořte texturu, se kterou chcete pracovat. Informace o tom, jak přidat texturu do projektu, naleznete v části Začínáme v editoru obrázků.

  2. Nastavte velikost obrázku tak, aby se jeho šířka rovnala výšce, a má velikost mocniny dvě. To je nezbytné z důvodu způsobu, jakým je mapa krychle indexována. Chcete-li změnit velikost obrázku, v okně vlastnosti zadejte nové hodnoty vlastností Width a Height . Například nastavte hodnotu vlastnosti Width a Height na 256.

  3. K vyplnění textury použijte plnou barvu. Tato textura bude dolní část mapy krychle, která odpovídá povrchu tabulky kulečníkové. Mějte na paměti, že na další texturu jste použili barvu.

  4. Vytvořte druhou texturu, která má stejnou velikost jako první. Tato textura se bude opakovat na čtyřech stranách mapy krychle, která odpovídá povrchu a stěnám tabulky kulečníkové a oblasti kolem tabulky kulečníkové. Nezapomeňte nakreslit plochu tabulky kulečníkové v této textuře pomocí stejné barvy jako v dolní textuře. Textura by měla vypadat nějak takto:

    Textura pro strany cubemap

    Pamatujte, že mapa odrazů nemusí být fotorealistické, aby byla účinná; Například mapa krychle použitá k vytvoření imagí v tomto článku obsahuje pouze čtyři kapsy místo šesti.

  5. Vytvořte třetí texturu, která má stejnou velikost jako ostatní. Tato textura bude horní částí mapy krychle, která odpovídá hornímu hranici nad tabulkou kulečníkové. Chcete-li tuto část reflexe udělat zajímavější, můžete vykreslit režijní světlo, abyste posílili odlesky, které jste přidali do shaderu v předchozím postupu. Textura by měla vypadat nějak takto:

    Textura horní části cubemap

    Nyní, když jste vytvořili jednotlivé textury pro strany mapy krychle, můžete použít nástroj k jejich sestavení do mapy krychle, která může být uložena v jedné textuře . dds . Můžete použít libovolný program, který chcete vytvořit mapa krychle, pokud je možné uložit mapu krychle ve formátu. DDS Texture. Tento návod ukazuje, jak vytvořit texturu pomocí nástroje DirectX textur, který je součástí června 2010 SDK pro DirectX.

Sestavení mapy krychle pomocí nástroje DirectX textur Tool

  1. V nástroji pro texturu DirectX v hlavní nabídce vyberte možnost soubor > Nová textura. Zobrazí se dialogové okno Nová textura .

  2. Ve skupině Typ textury vyberte cubemap textura.

  3. Ve skupině dimenze zadejte správnou hodnotu pro šířku a výšku a pak zvolte OK. Zobrazí se nový dokument textury. Ve výchozím nastavení textura zobrazená jako první v dokumentu textury odpovídá pozitivní ploše krychle X .

  4. Načtěte texturu, kterou jste vytvořili pro stranu datové krychle textury, na plochu krychle. V hlavní nabídce zvolte soubor > otevřít na tuto cubemap plochu, vyberte texturu, kterou jste vytvořili pro stranu datové krychle, a pak zvolte otevřít.

  5. Opakujte krok 4 pro plošky krychlí záporné X, kladné Z a záporné . K tomu je třeba zobrazit plošku, kterou chcete načíst. Chcete-li zobrazit jinou plošku mapy krychle, zvolte v hlavní nabídce možnost Zobrazit > mapu krychle a potom vyberte plošku, kterou chcete zobrazit.

  6. Pro plošku pozitivní osy Y načtěte texturu, kterou jste vytvořili pro začátek datové krychle textury.

  7. Pro obličej záporné krychle Y načtěte texturu, kterou jste vytvořili pro dolní část datové krychle textury.

  8. Uložte texturu.

    Můžete si představit, jak vypadá rozvržení krychle:

    Rozložení mapy krychle prostředí

    Obrázek v horní části je pozitivní obličej krychle Y (+ Y); uprostřed zleva doprava jsou plošky krychle-X, + Z, + X a-Z. v dolní části je vzhled datové krychle-Y.

    Nyní můžete upravit shader tak, aby byl vzorek mapy krychle smíchán do zbytku shaderu.

Přidání mapování prostředí do shaderu

  1. Upravte svůj shader tak, aby zahrnoval příspěvek mapování prostředí pomocí doplňkového míchání. Váš graf shaderu by měl vypadat takto:

    Closeup druhu odrážejících uzlů shaderu

    Všimněte si, že k zjednodušení grafu shaderu můžete použít uzel násobný přidat .

    Zde je podrobnější zobrazení uzlů shaderu, které implementují mapování prostředí:

    Graf shaderu s přidaným mapováním prostředí

  2. Použijte texturu, kterou jste vytvořili v předchozím postupu konfigurací vlastností textury mapy krychle. Nastavte hodnotu vlastnosti Textura cubemap uzlu Sample na Texture2 a pak zadejte soubor textury pomocí vlastnosti filename skupiny vlastností Texture2 .

  3. Volitelně můžete upravit odrazivost kuličky kulečníkové tak, že nakonfigurujete vlastnost Output pro konstantní uzel. Chcete-li získat přístup k vlastnostem uzlu, vyberte jej a potom v okně vlastnosti vyhledejte vlastnost, ke které chcete získat přístup.

    Po použití mapování prostředí by vaše kulečníkovéová kulička měla vypadat nějak takto:

    Closeup prostředí mapované kulečníkovéé kuličky

    V tomto finálním obrázku si všimněte, jak přidávané efekty společně vytvářejí kulečníkové míč. Tvar, textura a osvětlení vytvoří základní vzhled 3D objektu a zrcadlové světla a odrazy usnadňují kulečníkové míč zajímavější a vypadají jako součást svého prostředí.

Viz také