Prezentuj, Konfiguruj, Zachwycaj! Jak zbudować interaktywną prezentację produktową w Unreal Engine 5 cz.2

Unreal Engine kojarzy się przede wszystkim z grami video. Prawda, tworzenie gier wpisane jest w jego istnienie. Nic nie stoi jednak na przeszkodzie, aby wykorzystać silnik do innych celów. Zdają sobie z tego sprawę filmowcy, architekci oraz wszelkiego rodzaju designerzy.

Co zatem z zagadnieniem prezentacji produktowej? Okazuje się, że Unreal jest bardzo dobrym narzędziem do tworzenia interaktywnych konfiguratorów, wirtualnych spacerów czy wizualizacji. Dzięki silnikowi i jego potencjałowi jesteśmy w stanie tworzyć piękne, a zarazem praktyczne aplikacje pozwalające zapoznać się z prezentowanym produktem.

Dziś właśnie, chciałbym zabrać Was na taką przejażdżkę. Spróbujemy stworzyć podwaliny pod prosty konfigurator. Pochylimy się nad kilkoma aspektami, omówimy narzędzia i pomyślimy, jak taką aplikację można rozwinąć. Zapraszam!

Co będziemy tworzyć?

Konfigurator / prezenter mikrofonu. W pierwszej kolejności scenę 3D.

Przeglądając Internet, szczególnie sklepy producentów, możemy trafić na konfiguratory produktów 3D. O co w tym chodzi? W takiej aplikacji oprócz tego, że przedmiot możemy zobaczyć z każdej strony, to również jesteśmy w stanie dobrać interesujące nas kolory lub materiały czy rodzaj wykończenia. W przypadku segmentu Automotive konfigurujemy kolor lakieru, rozmiar felg czy nawet rodzaj ściegu przy wykończeniu foteli.

Dlaczego Unreal? Silnik oferuje bardzo dobrą — wręcz fotorealistyczną jakość grafiki realtime oraz masę narzędzi, dzięki którym można zbudować taką aplikację. Technologie takie jak NVidia RTX oraz Pixelstreaming pozwalają osadzić fotorealistyczną aplikację w Internecie, tak aby każdy użytkownik mógł konfigurować produkty nawet na smartfonie.

Dodatkowo skorzystamy z Epic Marketplace, gdzie umieszczona została masa darmowych, wysokojakościowych assetów, którymi możemy wspomóc się w naszym prototypie.

Podczas procesu poruszymy zagadnienia takie jak animacja kamery w Sequencer, budowanie UI w Unreal Motion Graphics czy oświetlenie sceny poprzez Lumen i Raytracing. No właśnie. Mimo iż aplikacja skomplikowana nie będzie, muszę założyć, że podstawy Unreal Engine są nam znane. Lecimy dalej!

Założenia aplikacji

Przyjmijmy jakieś podstawowe założenia. Nasza aplikacja prezentować będzie produkt studyjnym ujęciem filmowym, które w każdej chwili będziemy mogli pauzować lub wznowić. Poprzez UI będziemy zmieniać główny kolor mikrofonu oraz warunki oświetleniowe. Aplikacja Desktop dedykowana kartom RTX.

Nowy projekt Unreal Engine 5

Zatem jesteśmy. Rozpoczynamy przygodę! Po uruchomieniu Unreal Engine 5 z Epic Games Launcher wybieramy nowy pusty projekt. W naszym przypadku nie potrzebujemy korzystać z żadnej templatki, a nawet jeśli — to zawsze można dodać ją później. Wybieramy miejsce docelowe, nazwę (PDM_ProductShowcase — bez polskich znaków i spacji, always :) oraz włączamy Raytracing (dla fotorealistycznego realtimeowego oświetlenia) i Starter Content (startowe przykładowe assety). Projekt oprzemy o Blueprinty.

Założenie nowego projektu UE5. Źródło własne

 

Naszym oczom ukaże się startowy, przykładowy level. Nie potrzebujemy go. Będziemy tworzyć swój własny od totalnego zera. Wszystko, co stworzymy własnymi siłami w tym projekcie, wrzucimy bezpośrednio do katalogu Content. Ułatwi nam to poruszanie się po Content Browser. Zatem klikamy PPM (prawy przycisk myszy) w puste miejsce Content Browser i tworzymy nowy level.

Utworzenie nowego levelu w Content Browser. Źródło własne

Level nazywamy PDM_ProductShowcaseMap. Z racji tego, że cała nasza aplikacja będzie tylko i wyłącznie jednym levelem (nie robimy gry czy złożonej aplikacji, gdzie takowych map może być o wiele więcej) chcemy, aby był to level domyślny / startowy. Ustawmy to w ustawieniach projektu. W prawym górnym rogu wybieramy Settings > Project Settings. Następnie w oknie ustawień projektu w sekcji Maps and Modes ustawiamy pola Editor Startup Map oraz Game Default Map na nasz utworzony level.

Podpięcie levelu jako domyślny. Źródło własne

 

Możemy na chwilę projekt zamknąć. Po ponownym uruchomieniu startowym levelem będzie nasza pusta mapa.

Assety Twinmotion

Nie czas i miejsce na modelowanie mikrofonu. Nie dziś. Do zbudowania naszej aplikacji użyjemy gotowych, wysokiej jakości modeli Twinmotion. Assety te dostępne są za darmo, do użycia z projektami Unreal Engine. Twinmotion, w skrócie to taki Lumion. Narzędzie realtime 3D przeznaczone dla architektów, dzięki któremu mogą oni w szybki sposób zwizualizować swój projekt. Twinmotion oparty jest o Unreal Engine i należy do rodziny Epic Games, dlatego bez większych problemów możemy wymieniać się wręcz całymi scenami z Unreal Engine 5. Jak te assety dodać do projektu? W Epic Games Launcher w sekcji Unreal Engine > Rynek (Marketplace) wystarczy przeszukać po nazwie Twinmotion. Ukaże się tam kilka tematycznych paczek. My wykorzystamy dwie. Paczka High Tech (tu między innymi bohater — mikrofon) oraz Paczka Chairs and Tables. Klikamy, dodaj do projektu i wskazujemy nasz projekt. Chwilę czekamy na pobranie (te dwie paczki to około 4 giga).

Assety Twinmotion w Marketplace. Źródło własne

Po dodaniu do projektu każda z paczek jest osobnym niezależnym katalogiem w Content Browser.

Układamy scenę

Nasz konfigurator mógłby dziać się w pustce (wiele tak ma — to nie problem). Moglibyśmy skupić się na samym produkcie. Chcemy jednak, aby scena w naszej aplikacji była równie atrakcyjna co sam produkt. Doda to trochę wiarygodności i polotu. Projekt mamy założony, assety dodane, a przed nami pusty level. Pora wypełnić tę przestrzeń modelami 3D. Budujemy studio. Zaczynamy od podłoża.

Przeszukujemy katalog StarterContent w poszukiwaniu assetu Floor_400 × 400. Z jego pomocą tworzymy podłogę. Ja ułożyłem matrycę 8 × 8. Dzięki temu mam sporo miejsca do dalszej pracy, a nie skaluję jednej podłogi, aby zachować poprawność UV (nie rozciągnie mi się nałożony materiał, przez co nie będę musiał takowego dostosowywać). Z racji tego, że na scenie nie ma jeszcze oświetlenia — pracujmy w widoku Unlit. Na wszystkie ułożone podłogi narzucamy zbiorowo ciemny materiał plastiku — MI_PlasticMatte01Black z paczki HighTech.

Ułożenie podłogi z użyciem assetu Floor_400 × 400. Źródło własne

 

Na środku umieszczamy stolik. Ja wybrałem stolik TableHigh07 z paczki Chairs and Tables. Stolik ten domyślnie przypisane ma dwa materiały. Oba znacząco różne. Dla lepszej spójności kolorystycznej przypisałem do obu slotów ciemny plastik. Pora na naszego bohatera! Na stoliku kładziemy Micro01 i dla jego czwartego slotu materiałowego przypisujemy materiał czerwonego plastiku z paczki HighTech.

Rozstawienie stolika oraz mikrofonu. Źródło własne

A teraz rzucimy trochę światła. Na ten moment prostego. Tak się składa, że w paczce Twinmotion HighTech znajduje się model lampy studyjnej typu softbox. Wykorzystamy asset SoftBox01Stand oraz SoftBox01 do zrobienia lampy (stojąca obok stolika, skierowana na mikrofon), a następnie umieścimy w odpowiednim miejscu (przed modelem lampy) RectLight dopasowany do softboxa (50 cm na 100 cm, Barn Door Angle na 65 jednostek). Aby całość wykonać precyzyjnie, możemy wspomóc się widokami ortograficznymi i opcjami snapingu.

Ustawienie lampy. Źródło własne

Całą lampę (3 elementy) kopiujemy, a duplikat umieszczamy z drugiej strony stolika. Drugą lampę umieszczamy trochę niżej. Jednemu światłu nadajemy cieplejszy kolor (Hex Linear FF8B60FF), drugiemu chłodniejszy (Hex Linear A8CEFFFF). Powinniśmy na ten moment otrzymać coś takiego:

Przygotowana scena. Źródło własne

Już prawie mamy nasze studio, naszą scenę. Rzemieślnicza część za nami. Teraz część artystyczna. Dodamy wolumetryczne światło, dostosujemy ustawienia Raytracing i lekki post process.

Tweakujemy oświetlenie

Tutaj sporo się wydarzy. Dobre oświetlenie jest kluczowe, aby produkt, który prezentujemy, wyglądał atrakcyjnie. Kilka efektów pozwoli nam uzyskać zamierzoną jakość.

Wolumetryczne oświetlenie / mgła / god rays. Chodzi o to, aby nadać atmosferze gęstość. Na pewno wszyscy kojarzymy zadymione pomieszczenie, do którego wpada trochę słonecznego światła, tworząc tym samym piękny słup. Dokładnie tego potrzebujemy.

W Unreal Engine uzyskamy taki efekt za pomocą Volumetric Fog i współgrających z nią świateł.

Prezentacja Volumetric Fog. Źródło własne

Wrzucamy na scenę Exponential Height Fog, zwiększamy gęstość tej mgły na 0,05 i włączamy opcję Volumetric Fog. Dla naszych źródeł światła (RectLight) podnosimy ustawienie Volumetric Scattering Intensity na 2. Pozwoli to wstrzyknąć więcej światła do otoczeniowej mgły.

Nasza scena jest obecnie bardzo intensywna, mocno oświetlona. Momentami przepalona. Dostosujemy teraz ustawienia ekspozycji, bloom i kilku zbyt na ten moment mocnych efektów.

Zaczniemy od wrzucenia na level Post Process Volume — to tutaj możemy bawić się wszelakim color gradingiem, ustawieniami Raytracing czy właśnie ekspozycji wyrenderowanej klatki. Z racji tego, że jest to volume, w każdym takowym mogą znaleźć się inne ustawienia, a efekt zostanie nam nałożony w zależności czy znajdujemy się w jego obszarze. W PPV (Post Process Volume) istnieje również przełącznik Infinite Extent, którym możemy włączyć efekty danego Volume’a globalnie, niezależnie czy jesteśmy w jego obszarze.

Włączamy Infinite Extent dla naszego PPV. Wylistuję teraz dobrane przeze mnie ustawienia wraz z ich krótkim opisem:

• Bloom Method = Convolution — bardziej filmowy bloom, niezalecany w grach, ale nasza scena jest na tyle nieskomplikowana, że możemy sobie pozwolić
• Bloom Intensity = 0,05 – zmniejszamy znacząco intensywność efektu bloom
• Exposure Metering Mode = Manual oraz Exposure Apply Physical Camera Exposure = False — to ustawienie pozwala nam zablokować ekspozycję w jednym miejscu, tak aby mieć pełną ręczną kontrolę
• Exposure Compensation = 3 – tutaj podnosimy kompensację ekspozycji (w dół — ciemniej, w górę — jaśniej)
• Chromatic Aberration Intensity = 0,1 – podnosimy lekko efekt aberracji chromatycznej, czyli efektu rozszczepienia światła na soczewce
• Lens Flares Intensity = 0,05 – zmniejszamy moc efektu flar obiektywu
• Vignette Intensity = 0 – wyłączamy winietowanie.

Dużo lepiej. Wyrównaliśmy ekspozycję i usunęliśmy zbyt natrętne efekty. Zostańmy jednak przy Post Process Volume.

Domyślnym, nazwijmy to silnikiem oświetleniowym w UE5, jest Lumen. Sprawdza się bardzo dobrze, ba — jest to jedno z najlepszych rozwiązań na rynku, jednak chcemy dodatkowo podnieść jakość, wykorzystując sprzęt NVidia RTX.

Lumen w naszym przypadku pozostanie włączony jako metoda Global Illumination, refleksy i cienie zaś ustawimy na Raytracing.

Dla naszych źródeł światła ustawimy Cast Ray Traced Shadows = Enabled i od razu zobaczymy różnicę w cieniowaniu. Cienie są teraz bardziej miękkie i naturalne. Dla PPV przełączymy Reflections Method na Standalone Ray Traced.

  Scena po dostosowaniu Post Process oraz oświetlenia. Źródło własne

Jeszcze nie aplikacja

Jesteśmy jakoś na półmetku i w tym miejscu zakończymy dzisiejsze rozważania. Zauważcie, że już w tym momencie, mimo iż nie jest to jeszcze działająca aplikacja, możemy wykonać kilka fajnych ujęć — wręcz reklamowo-marketingowych. Niedużym nakładem czasu stworzyliśmy studio, wykorzystajmy to do wizualizacji. Piękno Unreal Engine i jego realistycznej grafiki realtime polega między innymi na tym, że nie musimy czekać na wyrenderowanie wizualizacji (choć możemy, ale o tym kiedyś), wystarczy najzwyklejszy zrzut ekranu w dowolnym momencie. Co więcej, kiedy użyjemy Cine Camera Actor (kamery filmowej), nasze ujęcia staną się jeszcze bardziej soczyste. Wrzućmy zatem na scenę Cine Camera Actor i zacznijmy ją pilotować (PPM > Pilot CineCameraActor1). Teraz nasz viewport pokazuje nam, to co widzi kamera — i jest od razu bardziej filmowo. W ustawieniach kamery możemy dobrać ogniskową, fokus czy nawet ilość ostrzy w przysłonie.

 

 Przykładowa wizualizacja Cine Camera. Źródło własne

Przykładowa wizualizacja Cine Camera. Źródło własne

Przykładowa wizualizacja Cine Camera. Źródło własne

 

Co zostało nam do zrobienia? Na ten moment mamy tylko scenę, po wciśnięciu play nic się nie dzieje. Zatem przede wszystkim aplikacja — czyli trochę programowania. W kolejnej części przyjrzymy się pracy kamery. Również użyjemy kamery filmowej, ale tym razem w ruchu — tak aby pokazać produkt z każdej strony. Programujemy sekwencję filmową tak, by można było zatrzymać ją w dowolnym momencie podczas trwania prezentacji. Dorzucimy możliwość manipulowania światłem na scenie oraz konfigurację samego mikrofonu — zmiana głównego koloru itp. A wszystko to dzięki UI i stylizowanym przyciskom UMG.

Dziękuję Wam za dzisiaj i zapraszam do części drugiej, która ukaże się w kolejnym numerze Product Design Magazine!