tutorial_skybox.pdf

(3069 KB) Pobierz
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Tutorial: Stworzenie
własnego Skyboxa do
Unity3D.
Specyfikacja tutoriala:
Programy: Unity3D, PTGui, Adobe
Photoshop (może się przydać, ale
nie musi).
Poziom: Średni
Czas wykonania: 1h~
Pliki załączone do tutoriala:
Materiał wraz z podzielonymi
teksturam. download
Przykładowa tekstura:
panoramiczna download
zwykła download
Produkt końcowy
To co będziesz robił
FLIP
873142174.045.png 873142174.046.png 873142174.047.png 873142174.048.png 873142174.001.png 873142174.002.png 873142174.003.png 873142174.004.png 873142174.005.png 873142174.006.png 873142174.007.png 873142174.008.png 873142174.009.png 873142174.010.png
 
Unity3D można wykorzystywać na wiele sposobów ale jedną z funkcji jest używanie tła
(background) w postaci skyboxa. Jeżeli spojrzymy na gry, wizualizacje lub inne rzecz prawie
wszędzie używane są skyboxy, są one bardzo przydatne ponieważ działają dynamicznie nie
zmieniając swojego położenia zawsze wędrują razem z głównym widokiem. Możemy je generować
na wiele sposobów Unity3D posiada technikę kubiczną (cubic projection), która polega na
podzieleniu naszej głównej tekstury panoramicznej na 6 odseparowanych tekstur które reprezentują
sześć kierunków góra, dol, lewo, prawo, przód tył, tak gotowe tekstury możemy wykorzystać w
Unity3D do stworzenie własnego skyboxa, oczywiście przypomnę że w przypadku Unity cubic
oznacza sześcian z odwróconymi normalnymi czyli my znajdujemy się w jego środku.
W tutorialu tym postaram się przybliżyć jak takie tekstury przygotować i osadzić w Unity3D
Krok 1
Na początku musimy wybrać jakaś teksturę która mogła by się nadawać do naszego
projektu. W tutorialu przedstawię dwa sposoby:
A) stworzenie skyboxa z tekstury panoramicznej 360x180 jest to najdokładniejsza metoda
lecz takich tekstur jest mało i żeby samemu stworzyć trzeba mieć odpowiedni sprzęt
fotograficzny;
B) stworzenie skyboxa ze zwykłej tekstury. Co oznacza zwykła? oznacza tylko tyle że nie
jest ona panoramiczną (360x180) i po zwinięciu mieli byśmy błędy w postaci nie
pasującego do siebie lewego i prawego boku oraz górnego, dolnego (zwijany cylinder).
w dalszej części postaram się pokazać jak takie błędy zniwelować;
UWAGA: Pamiętajmy że tekstura musi mieć proporcje szerokość dwa razy większą od
wysokości (np. 1000x500, 2000x1000 itd.).
Przykłady takich tekstur
A)
B)
873142174.011.png 873142174.012.png 873142174.013.png 873142174.014.png 873142174.015.png 873142174.016.png 873142174.017.png
 
Krok 2 (krok 2-4 dotyczy używania tekstury panoramicznej)
Ściągnijmy najpierw PTGui program do „sklejania panoram” dostępny jest po system Mac
oraz Windowsa. Posłuży on nam do wygenerowania 6 odseparowanych zdjęć z naszej
tekstury. Można to zrobić innymi programami lecz ten jest jeden z prostszych. Pełna
wersja programu jest płatna lecz do naszego przykładu wystarczy nam wersja trialowa
która jest za darmo. download
Po ściągnięciu otwórzmy program wejdźmy z paska menu w zakładkę Tools -> Convert to
QVTR / Cubic
Zarówno pod Windowsem jak i Maciem wszystko robi się tak samo.
Krok 3
Po otwarciu okna robimy wszystko jak na zdjęciu poniżej, czyli kolejno
dodajemy naszą teksturę, projekcja najlepsza będzie taka jak jest domyślna czyli
equirectangural. Następnie w output w pozycji Convert to: rozwijamy listę i wybieramy
Cube faces, 6 seperate files czyli technika odseparowania 6 tekstur. Idąc dalej mogli
byśmy już kliknąć convert lecz jest jedna mała niezgodność nie wiem z czego to wynika
ale prawdopodobnie od innych proporcji między PtGui a Unity3D. Chodzi tutaj o teksturę
lewą i prawą, która w Unity3D interpretuję błędnie tak że prawą czyta jak lewą a lewą jak
prawą dlatego najlepiej jak w PtGui od razu zmienimy sobie nazwy plików wyjściowych
żeby potem się nie pomylić. Kliknijmy przycisk Cube Face Name.. i zmienimy nazwę w
right -> .left a w Left -> na .right. OK -> Klikamy Convert.
873142174.018.png 873142174.019.png 873142174.020.png 873142174.021.png 873142174.022.png
 
Krok 4
Otwieramy Unity, tworzymy nowy projekt bądź korzystamy z własnego. Nie będą nam tu
potrzebne żadne assety więc projekt może być „czysty”. Następnie tworzymy nowy
materiał: Okno Project -> rozwijamy create i wybieramy material, albo w głównym pasku
menu w asssets -> create -> material.
TIP: Window (wszystkie okna można otworzyć w głównym pasku menu -> Window)
Dalej w oknie inspector po zaznaczeniu naszego materiału
widzimy widok w postaci zdjęcia obok. W zakładce
shader (domyślnie diffuse) rozwijamy listę klikamy
RenderFx -> Skybox. W oknie inspector powinna nam
się ukazać duża lista, w której jak się można domyśleć
możemy wstawić naszych 6 odseparowanych tekstur.
Teraz musimy zaimportować nasze
tekstury robimy to po prostu
przeciągając je do okna Project, albo
w Zakładce assets -> import new
assets i zaznaczamy 6 tekstur.
Po zaimportowaniu wzorując się na
wcześniej utworzonych nazwach
plików przeciągamy z okna Project
wszystkie tekstury do naszego
materiału. Front do front, left do left
itd. OK nasz materiał jest gotowy.
Jeżeli chcemy go wyświetlić w naszej scenie musimy
wejść w głównym pasku menu w Edit -> Render
Settings. W oknie Inspector interesuje nas linijka
Skybox Material gdzie przeciągamy nasz stworzony
materiał skyboxa bądź wybieramy z listy. W oknie
sceny powinien wyświetlić się nasz skybox.
Jednak gdy się przyjrzymy dokładnie
widać kilka niedoskonałości takich
jak widoczne cienkie „łączenia”
między teksturami można to łatwo
ukryć za pomocą techniki
blendowania.
873142174.023.png 873142174.024.png 873142174.025.png 873142174.026.png 873142174.027.png 873142174.028.png 873142174.029.png 873142174.030.png 873142174.031.png 873142174.032.png 873142174.033.png 873142174.034.png
Musimy tutaj zmienić blendowanie dla wszystkich 6 naszych tekstur, aby to zrobić w oknie
Project klikamy kolejno nasze tekstury i zmieniamy w oknie Inspector technikę Wrap Mode
z Reapt na Clamp. Można tutaj także zmienić inne rzeczy takie jak np. kompresję naszej
tekstury w przypadku jak by się okazało że nasz skybox zabiera za dużo miejsca.
OK Nasz skybox jest gotowy
Krok 5 (opcjonalnie)
W kroku 5 weźmiemy pod uwagę wspomniany w kroku 1 podpunkcie B temat związany z
stworzeniem skyboxa ze „zwykłej” tekstury której po zwinięciu będziemy mieć błędy (patrz
tekstury poniżej) w postaci niepasujących krawędzi górnej, dolnej i prawej z lewą. Weźmy
tutaj jakąkolwiek teksturę może to być kosmos, chmury najlepsza będzie taka która ma w
miarę mało różnych kolorów i obiektów - można będzie później łatwo poprawić w
photoshopie. Wziąłem tutaj dla przykładu teksturę chmur na tle nieba.
873142174.035.png 873142174.036.png 873142174.037.png 873142174.038.png 873142174.039.png 873142174.040.png 873142174.041.png 873142174.042.png 873142174.043.png 873142174.044.png

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin