Tworzenie cieniowania za pomocą cieniowania Projektant w programie Visual Studio

Z tego artykułu dowiesz się, jak używać cieniowania Projektant do tworzenia różnych rodzajów cieniowania.

Tworzenie podstawowych cieniowania kolorów płaskich

Aby utworzyć cieńszy cień, można użyć Projektant cieniowania wykresu skierowanego (DGSL). Ten cieniowanie ustawia ostateczny kolor na stałą wartość koloru RGB. Możesz zaimplementować cieńszy kolor płaski, zapisując wartość koloru RGB stałą do końcowego koloru wyjściowego.

Przed rozpoczęciem upewnij się, że zostanie wyświetlone okno Właściwości i przybornik .

  1. Utwórz moduł cieniowania DGSL do pracy. Aby uzyskać informacje na temat dodawania cieniowania DGSL do projektu, zobacz sekcję Wprowadzenie w narzędziu Shader Projektant.

  2. Usuń węzeł Kolor punktu. Użyj narzędzia Wybierz, aby wybrać węzeł Kolor punktu, a następnie na pasku menu wybierz pozycję Edytuj>usuń.

  3. Dodaj węzeł Stała koloru do grafu. W przyborniku w obszarze Stałe wybierz pozycję Stała koloru i przenieś ją na powierzchnię projektową.

  4. Określ wartość koloru dla węzła Stała koloru. Użyj narzędzia Wybierz, aby wybrać węzeł Stała koloru, a następnie w oknie Właściwości we właściwości Output określ wartość koloru. Dla pomarańczy określ wartość (1.0, 0.5, 0.2, 1.0).

  5. Połączenie stałą koloru końcowego. Aby utworzyć połączenia, przenieś terminal RGB węzła Stała koloru do terminalu RGB węzła Final Color, a następnie przenieś terminal Alfa węzła Stała koloru do terminalu Alfa węzła Kolor końcowy. Te połączenia ustawiają ostateczny kolor na stałą koloru zdefiniowaną w poprzednim kroku.

Na poniższej ilustracji przedstawiono ukończony wykres cieniowania i podgląd cieniowania zastosowany do modułu.

Uwaga

Na ilustracji określono kolor pomarańczowy, aby lepiej zademonstrować efekt cieniowania.

Shader graph and its result on a 3-D model

Niektóre kształty mogą zapewnić lepsze podglądy niektórych cieniowania. Aby uzyskać więcej informacji na temat wyświetlania podglądu cieniowania w Projektant cieniowania, zobacz Shader Projektant.

Tworzenie podstawowych cieniowania Lamberta

Możesz również użyć modułu cieniującego Projektant i języka cieniowania wykresu skierowanego (DGSL), aby utworzyć cieniowanie oświetlenia implementujące klasyczny model oświetlenia Lamberta.

Model oświetlenia Lamberta obejmuje oświetlenie otoczenia i kierunkowe do cieniowania obiektów w scenie 3D. Składniki otoczenia zapewniają podstawowy poziom oświetlenia w scenie 3D. Elementy kierunkowe zapewniają dodatkowe oświetlenie ze źródeł światła kierunkowego (dalekiego). Oświetlenie otoczenia wpływa na wszystkie powierzchnie w scenie w równym stopniu, niezależnie od ich orientacji. Dla danej powierzchni jest to produkt koloru otoczenia powierzchni oraz kolor i intensywność oświetlenia otoczenia na scenie. Oświetlenie kierunkowe wpływa na każdą powierzchnię w scenie inaczej, na podstawie orientacji powierzchni w odniesieniu do kierunku źródła światła. Jest to produkt rozproszonego koloru i orientacji powierzchni oraz koloru, intensywności i kierunku źródeł światła. Powierzchnie, które twarzą bezpośrednio w kierunku źródła światła otrzymują maksymalny wkład i powierzchnie, które twarz bezpośrednio nie otrzymują wkładu. W modelu oświetlenia Lambert składnik otoczenia i co najmniej jeden element kierunkowy są łączone w celu określenia całkowitego udziału koloru rozproszonego dla każdego punktu na obiekcie.

Przed rozpoczęciem upewnij się, że zostanie wyświetlone okno Właściwości i przybornik .

  1. Utwórz moduł cieniowania DGSL, z którym chcesz pracować. Aby uzyskać informacje na temat dodawania cieniowania DGSL do projektu, zobacz sekcję Wprowadzenie w narzędziu Shader Projektant.

  2. Odłącz węzeł Kolor punktu od węzła Kolor końcowy. Wybierz terminal RGB węzła Kolor punktu, a następnie wybierz pozycję Przerwij łącza. Pozostaw połączony terminal Alpha.

  3. Dodaj węzeł Lamberta do grafu. W przyborniku w obszarze Narzędzie wybierz pozycję Lambert i przenieś go na powierzchnię projektową. Węzeł lamberta oblicza całkowity wkład koloru rozproszonego piksela na podstawie parametrów oświetlenia otoczenia i rozproszonego oświetlenia.

  4. PołączenieWskaż węzeł Kolor do węzła Lamberta. W trybie Wybierz przenieś terminal RGB węzła Kolor punktu do terminalu Kolor rozproszony węzła Lambert. To połączenie zapewnia węzeł lamberta z interpolowanym kolorem rozproszonym piksela.

  5. Połączenie obliczoną wartość koloru do koloru końcowego. Przenieś terminal Wyjściowy węzła Lamberta do terminalu RGB węzła Final Color.

    Na poniższej ilustracji przedstawiono ukończony wykres cieniowania i podgląd cieniowania zastosowany do modelu teapot.

Uwaga

Aby lepiej zademonstrować efekt cieniowania na tej ilustracji, kolor pomarańczowy został określony przy użyciu parametru MaterialDiffuse cieniowania. Gra lub aplikacja może użyć tego parametru, aby podać unikatową wartość koloru dla każdego obiektu. Aby uzyskać informacje o parametrach materiału, zobacz Shader Projektant.

The Lambert shader graph and a preview of its effect.

Poniższa ilustracja przedstawia cieniowanie opisane w tym dokumencie zastosowane do modelu 3D.

Lambert lighting applied to a model.

Tworzenie podstawowych cieniowania stringów

Możesz również użyć modułu cieniowania Projektant i języka cieniowania grafów skierowanych (DGSL), aby utworzyć cieniowanie oświetlenia implementujące klasyczny model oświetlenia Phong.

Model oświetlenia String rozszerza model oświetlenia Lamberta, aby zawierał wyróżnianie widmowe, które symuluje właściwości odbijające powierzchnię. Składnik widmowy zapewnia dodatkowe oświetlenie z tych samych źródeł światła kierunkowego, które są używane w modelu oświetlenia Lamberta, ale jego wkład w końcowy kolor jest przetwarzany inaczej. Wyróżnianie specularne wpływa na każdą powierzchnię w scenie inaczej, na podstawie relacji między kierunkiem widoku, kierunkiem źródeł światła i orientacją powierzchni. Jest to produkt koloru widmowego, mocy widmowej i orientacji powierzchni oraz koloru, intensywności i kierunku źródeł światła. Powierzchnie, które odzwierciedlają źródło światła bezpośrednio na widzu, otrzymują maksymalny wkład widmowy i powierzchnie, które odzwierciedlają źródło światła z dala od widza, nie otrzymują żadnego wkładu. W modelu oświetlenia Phong jeden lub więcej składników widmowych są łączone w celu określenia koloru i intensywności wyróżniania widmowego dla każdego punktu na obiekcie, a następnie są dodawane do wyniku modelu oświetlenia Lamberta w celu uzyskania końcowego koloru piksela.

Aby uzyskać więcej informacji na temat modelu oświetlenia Lamberta, zobacz How to: Create a basic Lambert shader (Instrukcje: tworzenie podstawowego cieniowania Lamberta).

Przed rozpoczęciem upewnij się, że zostanie wyświetlone okno Właściwości i przybornik .

  1. Utwórz cieniator Lamberta zgodnie z opisem w temacie How to: Create a basic Lambert shader (Tworzenie podstawowego cieniowania Lamberta).

  2. Odłącz węzeł Lambert od węzła Kolor końcowy. Wybierz terminal RGB węzła Lambert, a następnie wybierz pozycję Przerwij łącza. Dzięki temu miejsce dla węzła dodanego w następnym kroku.

  3. Dodaj węzeł do grafu. W przyborniku w obszarze Matematyka wybierz pozycję Dodaj i przenieś ją do powierzchni projektowej.

  4. Dodaj węzeł specular do grafu. W przyborniku w obszarze Narzędzie wybierz pozycję Specular i przenieś go na powierzchnię projektową.

  5. Dodaj współtworzenie specularne. Przenieś terminal Wyjściowy węzła Specular do terminalu X węzła Dodaj, a następnie przenieś terminal Wyjściowy węzła Lambert do terminalu Y węzła Dodaj. Te połączenia łączą łączny wkład kolorów rozproszonych i specularnych dla piksela.

  6. Połączenie obliczoną wartość koloru do koloru końcowego. Przenieś terminal Wyjściowy węzła Dodaj węzeł do terminalu RGB węzła Final Color.

    Na poniższej ilustracji przedstawiono ukończony wykres cieniowania i podgląd cieniowania zastosowany do modelu teapot.

Uwaga

Aby lepiej zademonstrować efekt cieniowania na tej ilustracji, kolor pomarańczowy został określony przy użyciu parametru MaterialDiffuse cieniowania, a wykończenie metaliczne zostało określone przy użyciu parametrów MaterialSpecular i MaterialSpecularPower . Aby uzyskać informacje o parametrach materiału, zobacz Shader Projektant.

Phong Shader graph and a preview of its effect.

Niektóre kształty mogą zapewnić lepsze podglądy niektórych cieniowania. Aby dowiedzieć się więcej na temat wyświetlania podglądu cieniowania, zobacz Shader Projektant.

Poniższa ilustracja przedstawia cieniowanie opisane w tym dokumencie zastosowane do modelu 3D. Właściwość MaterialSpecular jest ustawiona na wartość (1.00, 0.50, 0.20, 0.00), a właściwość MaterialSpecularPower jest ustawiona na 16.

Uwaga

Właściwość MaterialSpecular określa pozorne wykończenie materiału powierzchniowego. Powierzchnia o wysokim połysku, taka jak szkło lub plastik, ma kolor widmowy, który jest jasnym odcieniem bieli. Powierzchnia metaliczna ma tendencję do koloru widmowego, który jest zbliżony do jego rozproszonego koloru. Powierzchnia satynowa ma tendencję do koloru specularnego, który jest ciemnym odcieniem szarości.

Właściwość MaterialSpecularPower określa, jak intensywne są wyróżnienia widmowe. Wysokie moce widmowe symulują duller, bardziej zlokalizowane wyróżnienia. Bardzo niskie moce widmowe symulują intensywne, zamiatanie podkreśla, które mogą przesatuować i ukrywać kolor całej powierzchni.

Phong lighting applied to a model

Tworzenie cieniowania tekstury podstawowej

Użyj cieniowania Projektant i języka cieniowania wykresu skierowanego (DGSL), aby utworzyć cieniowanie z jedną teksturą. Ten cieniowanie ustawia ostateczny kolor bezpośrednio na wartości RGB i alfa, które są próbkowane z tekstury.

Możesz zaimplementować podstawowy cieniowanie z jedną teksturą, zapisując kolor i wartości alfa próbki tekstury bezpośrednio do końcowego koloru wyjściowego.

Przed rozpoczęciem upewnij się, że zostanie wyświetlone okno Właściwości i przybornik .

  1. Utwórz moduł cieniowania DGSL do pracy. Aby uzyskać informacje na temat dodawania cieniowania DGSL do projektu, zobacz sekcję Wprowadzenie w narzędziu Shader Projektant.

  2. Usuń węzeł Kolor punktu. W obszarze Wybierz tryb wybierz węzeł Kolor punktu, a następnie na pasku menu wybierz pozycję Edytuj>usuń. Dzięki temu miejsce dla węzła dodanego w następnym kroku.

  3. Dodaj węzeł Przykład tekstury do grafu. W przyborniku w obszarze Tekstura wybierz pozycję Przykład tekstury i przenieś ją na powierzchnię projektową.

  4. Dodaj węzeł Współrzędna tekstury do grafu. W przyborniku w obszarze Tekstura wybierz pozycję Współrzędna tekstury i przenieś ją na powierzchnię projektową.

  5. Wybierz teksturę do zastosowania. W obszarze Wybierz tryb wybierz węzeł Przykład tekstury, a następnie w oknie Właściwości określ teksturę, której chcesz użyć za pomocą właściwości Nazwa pliku .

  6. Udostępnij teksturę publicznie. Wybierz węzeł Przykład tekstury, a następnie w oknie Właściwości ustaw właściwość Access na Publiczny. Teraz możesz ustawić teksturę z innego narzędzia, takiego jak Edytor modeli.

  7. Połączenie współrzędne tekstury do próbki tekstury. W trybie Wybierz przenieś terminal wyjściowy węzła Współrzędna tekstury do terminalu UV węzła Próbka tekstury. To połączenie próbkuje teksturę na określonych współrzędnych.

  8. Połączenie próbkę tekstury do ostatniego koloru. Przenieś terminal RGB węzła Próbka tekstury do terminalu RGB węzła Final Color, a następnie przenieś terminal Alfa węzła Przykład tekstury do terminalu Alfa węzła Final Color.

Na poniższej ilustracji przedstawiono ukończony wykres cieniowania i podgląd cieniowania zastosowany do modułu.

Uwaga

Na tej ilustracji płaszczyzna jest używana jako kształt podglądu, a tekstura została określona, aby lepiej zademonstrować efekt cieniowania.

Texture shader graph and a preview of its effect

Niektóre kształty mogą zapewnić lepsze podglądy niektórych cieniowania. Aby uzyskać więcej informacji na temat wyświetlania podglądu cieniowania w Projektant cieniowania, zobacz Shader Projektant

Tworzenie cieniowania tekstur w skali szarości

Użyj cieniowania Projektant i języka DGSL (Directed Graph Shader Language), aby utworzyć cieniowanie tekstury w skali szarej. Ten cieniowanie modyfikuje wartość koloru RGB próbki tekstury, a następnie używa jej razem z niezmodyfikowaną wartością alfa w celu ustawienia koloru końcowego.

Cieniowanie tekstury w skali szarości można zaimplementować, modyfikując wartość koloru próbki tekstury przed zapisaniem jej w ostatnim kolorze danych wyjściowych.

Przed rozpoczęciem upewnij się, że zostanie wyświetlone okno Właściwości i przybornik .

  1. Utwórz cieniowanie tekstury podstawowej zgodnie z opisem w temacie Instrukcje: tworzenie cieniowania tekstury podstawowej.

  2. Odłącz terminal RGB węzła Próbka tekstury od terminalu RGB węzła Final Color. W obszarze Wybierz tryb wybierz terminal RGB węzła Przykład tekstury, a następnie wybierz pozycję Przerwij łącza. Dzięki temu miejsce dla węzła dodanego w następnym kroku.

  3. Dodaj węzeł Desaturate do grafu. W przyborniku w obszarze Filtry wybierz pozycję Desaturate i przenieś ją na powierzchnię projektową.

  4. Oblicz wartość skali szarości przy użyciu węzła Desaturate . W obszarze Wybierz tryb przenieś terminal RGB węzła Próbka tekstury do terminalu RGB węzła Desaturate.

    Uwaga

    Domyślnie węzeł Desaturate w pełni odsunia kolor wejściowy i używa standardowych wag luminance do konwersji skali szarej. Możesz zmienić sposób działania węzła Desaturate , zmieniając wartość właściwości Luminance lub tylko częściowo odsłaniając kolor wejściowy. Aby częściowo usunąć kolor wejściowy, podaj wartość skalarną w zakresie [0,1) do terminalu Percent węzła Desaturate .

  5. Połączenie wartość koloru skali szarości na kolor końcowy. Przenieś terminal wyjściowy węzła Desaturate do terminalu RGB węzła Final Color.

Na poniższej ilustracji przedstawiono ukończony wykres cieniowania i podgląd cieniowania zastosowany do modułu.

Na tej ilustracji płaszczyzna jest używana jako kształt podglądu, a tekstura została określona, aby lepiej zademonstrować efekt cieniowania. Niektóre kształty mogą zapewnić lepsze podglądy niektórych cieniowania. Aby dowiedzieć się więcej na temat wyświetlania podglądu cieniowania, zobacz Shader Projektant.

Grayscale texture shader graph and a preview of its effect

Tworzenie cieniowania gradientu opartego na geometrii

Użyj cieniowania Projektant i języka cieniowania wykresu skierowanego, aby utworzyć cieniowanie gradientu opartego na geometrii. Ten cieniowanie skaluje stałą wartość koloru RGB według wysokości każdego punktu obiektu w przestrzeni światowej.

Cieniowanie oparte na geometrii można zaimplementować, włączając położenie piksela do cieniowania. W językach cieniowania piksel zawiera więcej informacji niż tylko jego kolor i lokalizację na ekranie 2D. Piksel — znany jako fragment w niektórych systemach — to kolekcja wartości opisujących powierzchnię odpowiadającą pikselowi. Cieniowanie opisane w tym dokumencie wykorzystuje wysokość każdego piksela obiektu 3D w przestrzeni światowej, aby wpłynąć na ostateczny kolor wyjściowy fragmentu.

Przed rozpoczęciem upewnij się, że zostanie wyświetlone okno Właściwości i przybornik .

  1. Utwórz moduł cieniowania DGSL, z którym chcesz pracować. Aby uzyskać informacje na temat dodawania cieniowania DGSL do projektu, zobacz sekcję Wprowadzenie w temacie About the Shader Projektant (Informacje o cieniowaniu Projektant).

  2. Odłącz węzeł Kolor punktu od węzła Kolor końcowy. Wybierz terminal RGB węzła Kolor punktu, a następnie wybierz pozycję Przerwij łącza. Dzięki temu miejsce dla węzła dodanego w następnym kroku.

  3. Dodaj węzeł Pomnóż do grafu. W przyborniku w obszarze Matematyka wybierz pozycję Pomnóż i przenieś go na powierzchnię projektową.

  4. Dodaj węzeł Mask Vector do grafu. W przyborniku w obszarze Narzędzie wybierz pozycję Maskuj wektor i przenieś go do powierzchni projektowej.

  5. Określ wartości maski dla węzła Mask Vector . W obszarze Wybierz tryb wybierz węzeł Wektor maski, a następnie w oknie Właściwości ustaw właściwość Zielony/Y na wartość True, a następnie ustaw właściwości Red/X, Blue/ Z i Alpha/W na wartość False. W tym przykładzie właściwości Red / X, Green / Y i Blue / Z odpowiadają składnikom x, y i z węzła Położenie świata, a Alfa / W jest nieużywany. Ponieważ tylko zielony / Y jest ustawiony na Wartość True, tylko składnik y wektora wejściowego pozostaje po jego zamaskowany.

  6. Dodaj węzeł Położenie świata do grafu. W przyborniku w obszarze Stałe wybierz pozycję Położenie świata i przenieś ją na powierzchnię projektową.

  7. Maskuj położenie obszaru świata fragmentu. W obszarze Wybierz tryb przenieś terminal Wyjściowy węzła Położenie świata do terminalu wektorowego węzła Mask Vector. To połączenie maskuje położenie fragmentu w celu ignorowania składników x i z.

  8. Mnożenie stałej koloru RGB przez zamaskowaną pozycję przestrzeni świata. Przenieś terminal RGB węzła Kolor punktu do terminalu Y węzła Mnożenie, a następnie przenieś terminal wyjściowy węzła Mask Vector do terminalu X węzła Mnożenie. To połączenie skaluje wartość koloru według wysokości piksela w przestrzeni światowej.

  9. Połączenie skalowaną wartość koloru do koloru końcowego. Przenieś terminal wyjściowy węzła Mnożenie do terminalu RGB węzła Final Color.

Na poniższej ilustracji przedstawiono ukończony wykres cieniowania i podgląd cieniowania zastosowanego do sfery.

Uwaga

Na tej ilustracji określono kolor pomarańczowy, aby lepiej zademonstrować efekt cieniowania, ale ponieważ kształt podglądu nie ma pozycji w przestrzeni światowej, cieniowanie nie może być w pełni podglądu w cieniowania Projektant. Cieniowanie musi być podgląd w rzeczywistej scenie, aby zademonstrować pełny efekt.

Gradient Shader graph and a preview of its effect

Niektóre kształty mogą zapewnić lepsze podglądy niektórych cieniowania. Aby dowiedzieć się więcej na temat wyświetlania podglądu cieniowania, zobacz Shader Projektant.

Na poniższej ilustracji przedstawiono cieniowanie opisane w tym dokumencie zastosowane do sceny 3D przedstawionej w temacie How to: Model 3D terrain (Jak modelować teren 3D). Intensywność koloru wzrasta wraz ze wzrostem punktu na świecie.

Gradient effect applied to a 3-D terrain model

Aby uzyskać więcej informacji na temat sposobu stosowania cieniowania do modelu 3D, zobacz How to: Apply a shader to a 3D model (Instrukcje: stosowanie cieniowania do modelu 3D).