Wizualizacje 3D — od siatki punktów do renderowanego obrazu

Po co się tego uczymy?

Postacie w grach komputerowych, efekty specjalne w filmach i wizualizacje architektoniczne mieszkań przed budową — wszystkie powstają w ten sam, matematyczny sposób: jako model 3D opisany współrzędnymi w przestrzeni, który komputer musi obliczeniowo PRZEKSZTAŁCIĆ w płaski obraz na ekranie. To ostatnia, najbardziej zaawansowana lekcja działu grafiki, łącząca wszystko, czego się już nauczyłeś, z dodatkowym wymiarem.

Teoria

Model 3D (siatka/mesh) — obiekt trójwymiarowy zapisany jako zbiór punktów w przestrzeni (wierzchołków, ang. vertices) o współrzędnych (x, y, z), połączonych w trójkąty (ściany, ang. faces) tworzące powierzchnię bryły. Im więcej trójkątów, tym gładsza i bardziej szczegółowa bryła — ale też więcej obliczeń potrzebnych do jej wyświetlenia.

Trzy współrzędne (x, y, z) — w grafice 2D (znanej z poprzednich lekcji) punkt opisują 2 współrzędne (x, y). W 3D dochodzi trzecia — z (głębia), pozwalająca opisać, jak DALEKO od obserwatora znajduje się dany punkt.

Tekstura (texture) — płaski obraz (zwykła grafika rastrowa, którą już znasz!) "owinięty" wokół powierzchni modelu 3D, nadający mu kolor i wzór (np. tekstura drewna na modelu stołu) bez konieczności modelowania każdego detalu jako osobnej geometrii.

Oświetlenie (lighting) — wirtualne źródła światła w scenie 3D, które określają, które fragmenty modelu są jasne, a które w cieniu — kluczowe dla realistycznego wyglądu, bo ludzki mózg wnioskuje o kształcie bryły głównie na podstawie gradientu światła i cienia.

Kamera i rzutowanie (projection) — scena 3D jest oglądana z punktu widzenia wirtualnej "kamery", która określa, JAK trójwymiarowa scena zostanie SPŁASZCZONA do dwuwymiarowego obrazu na ekranie (rzutowanie perspektywiczne — dalsze obiekty są mniejsze, jak w rzeczywistości, albo rzutowanie równoległe — bez perspektywy, częste w rysunkach technicznych).

Renderowanie — proces OBLICZENIOWY, w którym komputer na podstawie modelu, tekstur, oświetlenia i pozycji kamery generuje finalny, płaski obraz (klatka) — może trwać ułamek sekundy (gry komputerowe, "w czasie rzeczywistym") albo wiele godzin na klatkę (efekty specjalne w filmach, gdzie liczy się jakość, a nie szybkość).

Popularne programy do modelowania 3D — Blender (darmowy, otwartoźródłowy, coraz bardziej standard branżowy), oraz silniki do interaktywnych wizualizacji i gier — Unity, Unreal Engine.

Schemat

OD MODELU DO OBRAZU (proces renderowania):

  MODEL 3D              +TEKSTURA         +OŚWIETLENIE        RENDER (2D)
  (siatka trójkątów)     (owinięty obraz)  (cienie/blask)      (finalny obraz)

     /                    /                 /  ☀            ▲
    /          →         /🟫      →        / ▓    →        obraz
   /----                /----              /----           na ekranie
  (same krawędzie,      (drewnopodobna      (jedna strona      (płaski,
   brak koloru)          powierzchnia)       ciemniejsza)       gotowy JPG/PNG)

Przykład z życia

Architekt prezentujący klientowi projekt jeszcze niezbudowanego domu tworzy model 3D bryły budynku, nakłada tekstury (cegła, szkło, trawnik), ustawia oświetlenie odpowiadające porze dnia i renderuje finalny obraz — klient widzi realistyczną wizualizację domu, zanim jeszcze położono pierwszą cegłę.

szescian-opis-geometrii.txt

Uproszczony opis sześcianu jako modelu 3D (8 wierzchołków + 6 ścian):

WIERZCHOŁKI (x, y, z):
V1 (0,0,0)   V2 (1,0,0)   V3 (1,1,0)   V4 (0,1,0)   <- dolna ściana
V5 (0,0,1)   V6 (1,0,1)   V7 (1,1,1)   V8 (0,1,1)   <- górna ściana

ŚCIANY (które wierzchołki tworzą każdy bok sześcianu):
Dół:   V1-V2-V3-V4
Góra:  V5-V6-V7-V8
Przód: V1-V2-V6-V5
Tył:   V4-V3-V7-V8
Lewo:  V1-V4-V8-V5
Prawo: V2-V3-V7-V6

(6 ścian x 4 wierzchołki = podstawa sześcianu;
 dodanie tekstury i oświetlenia do KAŻDEJ ściany
 tworzy finalny, renderowany obraz bryły)

Komentarz i wyjaśnienie kodu

To uproszczony, ale prawdziwy sposób opisu geometrii 3D — każdy, nawet najbardziej skomplikowany model (np. postać w grze) to w rzeczywistości OGROMNA lista takich wierzchołków i ścian, tylko o wiele bardziej rozbudowana (setki tysięcy trójkątów zamiast 6 kwadratowych ścian sześcianu). Program taki jak Blender pozwala manipulować tymi punktami WIZUALNIE, myszką, zamiast wpisywać współrzędne ręcznie — ale w tle zawsze operuje na tych samych liczbach (x, y, z).

Ćwiczenie samodzielne

Pobierz i otwórz darmowy program Blender (lub skorzystaj z wersji edukacyjnej online), wstaw domyślny sześcian (Cube) i użyj myszki, aby obrócić widok kamery wokół obiektu, obserwując, jak zmienia się widoczność poszczególnych ścian w zależności od kąta patrzenia.

Zadania do pracy własnej

Wyjaśnij własnymi słowami różnicę między modelem 3D (siatką wierzchołków) a wyrenderowanym obrazem 2D — dlaczego to nie to samo i dlaczego renderowanie wymaga obliczeń.
Na podstawie wzoru z lekcji (sześcian) narysuj na kartce (lub w prostym edytorze rysunkowym) własny prostopadłościan, zapisując explicite listę 8 wierzchołków (x,y,z) oraz 6 ścian, analogicznie do przykładu z kodu.
W Blenderze (lub podobnym darmowym programie) zbuduj prostą scenę złożoną z co najmniej 2 obiektów (np. sześcian i kula), dodaj jedno źródło światła i jedną prostą teksturę/kolor do każdego obiektu, a następnie wyrenderuj finalny obraz jako plik PNG. Opisz krótko, jak zmiana pozycji źródła światła wpłynęła na wygląd cieni w scenie.

Typowe błędy

Mylenie modelu 3D z gotowym obrazem — sam model (siatka wierzchołków) NIE jest jeszcze obrazem, który można zobaczyć jak zdjęcie — wymaga procesu renderowania z uwzględnieniem tekstur, oświetlenia i kamery.

Zbyt duża liczba trójkątów bez potrzeby (nadmierna szczegółowość) — model z milionami niepotrzebnych trójkątów znacznie spowalnia obliczenia renderowania, szczególnie w grach czy aplikacjach działających w czasie rzeczywistym, gdzie liczy się płynność (liczba klatek na sekundę).

Zapominanie o oświetleniu sceny — model 3D bez żadnego źródła światła renderuje się jako czarna, nieczytelna sylwetka — oświetlenie jest NIEZBĘDNE, by mózg widza mógł odczytać kształt bryły.

Nawiązanie do egzaminu zawodowego

To ostatnia lekcja działu "Grafika i multimedia" — od pikseli i wektorów, przez edycję zdjęć i kompresję, aż po trójwymiarowe modele i renderowanie. W kolejnym, ostatnim dziale całej Informatyki — "Bezpieczeństwo i prawo" — zajmiemy się tym, jak bezpiecznie i legalnie korzystać z technologii, którą poznałeś w tym kursie.