{"id":24256,"date":"2023-09-25T05:00:00","date_gmt":"2023-09-25T03:00:00","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=24256"},"modified":"2024-07-22T14:32:51","modified_gmt":"2024-07-22T12:32:51","slug":"dodawanie-obiektow-rozszerzonej-rzeczywistosci-na-urzadzeniach-mobilnych-przy-uzyciu-unreal-engine-na-przykladzie-platformy-ios","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/dodawanie-obiektow-rozszerzonej-rzeczywistosci-na-urzadzeniach-mobilnych-przy-uzyciu-unreal-engine-na-przykladzie-platformy-ios\/","title":{"rendered":"Dodawanie obiekt\u00f3w rozszerzonej rzeczywisto\u015bci na urz\u0105dzeniach mobilnych przy u\u017cyciu Unreal Engine (na przyk\u0142adzie platformy iOS)"},"content":{"rendered":"\n

W artykule opisa\u0142em jak krok po kroku dodawa\u0107 obiekty rozszerzonej rzeczywisto\u015bci na urz\u0105dzeniach mobilnych przy wykorzystaniu Unreal Engine. Zapraszam do lektury.<\/p>\n\n\n\n

Budowanie projektu w Unreal Engine<\/strong><\/h2>\n\n\n\n

Aby mie\u0107 na swoim Macu Unreal Engine, wcze\u015bniej potrzebujemy Epic Games Launcher. \u017beby to zrobi\u0107, wchodzimy na stron\u0119 i pobieramy instalk\u0119<\/a>. Po zainstalowaniu, wchodzimy w Epic Games Launcher, a nast\u0119pnie w zak\u0142adk\u0119 Unreal Engine -> Biblioteka.<\/p>\n\n\n\n

\"biblioteka\"<\/a><\/figure>\n\n\n\n

W Bibliotece mamy mo\u017cliwo\u015b\u0107 doinstalowania\/usuni\u0119cia innych wersji silnika. W artykule b\u0119dziemy u\u017cywa\u0107 ostatniej wersji 4.X.X, gdy\u017c wersja 5.1.1 (najnowsza na dzie\u0144 pisania) nie jest wstecznie kompatybilna. Dodatkowo, kompilacja shader\u00f3w trwa w niesko\u0144czono\u015b\u0107 (nawet, gdy chcemy wy\u015bwietli\u0107 tylko zwyk\u0142y sze\u015bcian), uniemo\u017cliwiaj\u0105c ca\u0142kowicie uruchomienie projektu.<\/p>\n\n\n\n

Po uruchomieniu silnika, wybieramy Games -> Next -> Blank -> Next.<\/p>\n\n\n\n

\"Select<\/a><\/figure>\n\n\n\n

Nast\u0119pnie w target platform zmieniamy na \u201eMobile\/Tablet\u201d, ustawiamy \u015bcie\u017ck\u0119 i nazw\u0119 projektu.<\/p>\n\n\n\n

\"Project<\/a><\/figure>\n\n\n\n

B\u0119d\u0105c ju\u017c w \u015bwie\u017co utworzonym projekcie, w sekcji \u201eContent Browser\u201d tworzymy nowy folder przy pomocy prawego przycisku myszy i nadajemy nazw\u0119 \u201eMaps\u201d. Nast\u0119pnie na g\u00f3rze ekranu naciskamy \u201eSave Current\u201d, by zapisa\u0107 nasz\u0105 now\u0105 map\u0119 w folderze \u201eMaps\u201d i ustawiamy jej nazw\u0119 \u201eBaseMap\u201d.<\/p>\n\n\n\n

\"Save<\/a><\/figure>\n\n\n\n

Z element\u00f3w mapy zostawiamy tylko \u201eLight Source\u201d i \u201eSky Light\u201d, by nasz wy\u015bwietlony object nie by\u0142 ca\u0142kowicie czarny. Mo\u017cna te\u017c korzysta\u0107 z gotowych preset\u00f3w z plik\u00f3w tekstowych, by mie\u0107 od razu skonfigurowane o\u015bwietlenie. Polecam przejrze\u0107 tutorial<\/a>.<\/p>\n\n\n\n

B\u0119dziemy potrzebowali 5 plik\u00f3w projektowych:<\/p>\n\n\n\n

    \n
  1. Konfiguracji sesji AR (w sekcji \u201eContent Browser\u201d \u2013 naciskamy prawy przycisk myszy -> Miscellaneous -> Data Asset -> ARSessionCoinfig -> Select),<\/li>\n\n\n\n
  2. Game Mode Base,<\/li>\n\n\n\n
  3. Pawn,<\/li>\n\n\n\n
  4. Player Controller,<\/li>\n\n\n\n
  5. Actor.<\/li>\n<\/ol>\n\n\n\n

    Poza AR Session Config wszystkie potrzebne pliki stworzymy przez PPM -> Blueprint Class (ekran wyboru komponentu plus wygl\u0105d i nazwa potrzebnych plik\u00f3w widoczne poni\u017cej).<\/p>\n\n\n\n

    \"Blueprint<\/a><\/figure>\n\n\n\n

    Nie ma potrzeby modyfikacji pliku konfiguracyjnego sesji AR. Bazowe ustawienia s\u0105 wystarczaj\u0105ce dla naszych potrzeb. Klikaj\u0105c dwukrotnie w AR_GameMode, przechodzimy do konfiguracji ustawie\u0144 gry. Powinni\u015bmy teraz zamieni\u0107 domy\u015blne klasy na stworzone przez nas w \u201ePlayer Controller Class\u201d oraz \u201eDefault Pawn Class\u201d jak w obrazku poni\u017cej:<\/p>\n\n\n\n

    \"Player<\/a><\/figure>\n\n\n\n

    Nast\u0119pnie, wchodzimy w opcje projektu tak, jak jest to pokazane na poni\u017cszej grafice,<\/p>\n\n\n\n

    \"opcje<\/a><\/figure>\n\n\n\n

    \u2026 a kolejno w sekcj\u0119 \u201eMaps & Modes\u201d.<\/p>\n\n\n\n

    Musimy by\u0107 pewni, \u017ce nasza gra startuje z zapisanej przez nas mapy, a nie z domy\u015blnego wzorca, dlatego w obu sekcjach \u201eDefault Maps\u201d wybieramy nasz\u0105 \u201eBaseMap\u201d. W \u201eDefault Modes\u201d ustawiamy przez nas stworzony \u201eAR_GameMode\u201d, tak aby \u201eSelected GameMode\u201d odzwierciedla\u0142 zmiany naniesione w naszym pliku AR_GameMode.<\/p>\n\n\n\n

    \"Project<\/a><\/figure>\n\n\n\n

    W sekcji Input (zak\u0142adka \u201eMobile\u201d) w polu \u201eDefault Touch Interface\u201d naciskamy na \u201eClear\u201d, aby wirtualny Joystick nie przes\u0142ania\u0142 nam widoku z kamery. Finalny efekt widzimy poni\u017cej.<\/p>\n\n\n\n

    \"finalny<\/a><\/figure>\n\n\n\n

    Bez poprawnego skonfigurowania sekcji \u201eMobile Provision\u201d dla opcji \u201eiOS\u201d b\u0119d\u0105c nadal w \u201eProject Settings\u201d, nie b\u0119dziemy mogli uruchomi\u0107 naszego projektu na urz\u0105dzeniu iOS.<\/p>\n\n\n\n

    Nale\u017cy pami\u0119ta\u0107, by w naszym p\u0119ku kluczy opr\u00f3cz certyfikatu developerskiego\/deploymentowego by\u0142 te\u017c zachowany klucz prywatny. Po \u015bci\u0105gni\u0119ciu provisioning profile z profilu developerskiego Apple nale\u017cy go w pierwszej kolejno\u015bci otworzy\u0107 poprzez Xcode, gdy\u017c musi mie\u0107 typ Xcode managed. W pierwszej kolejno\u015bci przy konfigurowaniu sekcji iOS w ustawieniach projektu nale\u017cy wpisa\u0107 nasz \u201eBundle Identifier\u201d. Po wpisaniu Unreal Engine zacznie dopasowywa\u0107 nam provisioning oraz certyfikat do podanego bundle ID.<\/p>\n\n\n\n

    \"kolejny<\/a><\/figure>\n\n\n\n

    R\u00f3wnie\u017c w sekcji iOS opcj\u0119 \u201eMax. Metal Shader Standard To Target\u201d ustawiamy na wersj\u0119 \u201eMetal v2.1\u201d i restartujemy projekt po sugestii silnika.<\/p>\n\n\n\n

    Poprzez \u201eSettings\u201d -> \u201ePlugins\u201d -> \u201eAugmented Reality\u201d w\u0142\u0105czamy pluginy rozszerzonej rzeczywisto\u015bci dla iOS i Android (Apple ARKit i Google ARCore).<\/p>\n\n\n\n

    \"w\u0142\u0105czanie<\/a><\/figure>\n\n\n\n

    Ka\u017cde urz\u0105dzenie iOS z zainstalowanym iOS SDK 11 (ni\u017csze SDK nas nie interesuje) lub wy\u017cej ma modu\u0142 AR. Inaczej jest w przypadku urz\u0105dze\u0144 Androidowych. Nasz projekt mo\u017cna uruchomi\u0107 tylko na urz\u0105dzeniach wskazanych na li\u015bcie<\/a>.<\/p>\n\n\n\n

    Dok\u0142adne ustawienia opcji Android nie s\u0105 uj\u0119te w tym artykule, ale konfiguracj\u0119 mo\u017cecie znale\u017a\u0107 w materia\u0142ach na YT. <\/a>\u00a0<\/p>\n\n\n\n

    Wracamy do bazowego widoku projektu i klikamy dwukrotnie na AR_Pawn. Na poni\u017cszym obrazku do DefaultSceneRoot musimy doda\u0107 komponent \u201eCamera\u201d (krok 1.). W sekcji EventGraph (krok 2.) widzimy ostateczny wygl\u0105d bulepuintu po dodaniu wszystkich nod\u00f3w. Jedynym niedost\u0119pnym nodem jest funkcja \u201eWorldHitTest\u201d, kt\u00f3r\u0105 trzeba stworzy\u0107 poprzez dodanie funkcji (krok 3.).<\/p>\n\n\n\n

    \"dodanie<\/a><\/figure>\n\n\n\n

    Powy\u017cszy blueprint AR_Pawn to prze\u0142o\u017cenie dotkni\u0119cia jednym palcem przez gracza, kt\u00f3rego akcje obs\u0142ugiwane s\u0105 w AR_PlayerController i sprawdzenie, czy w co\u015b nie uderzyli\u015bmy w funkcji WorldHitTest (funkcj\u0119 t\u0119 opisz\u0119 poni\u017cej). Je\u015bli nie uderzyli\u015bmy i trafili\u015bmy na p\u0142ask\u0105 powierzchni\u0119 geometryczn\u0105 wykryt\u0105 przez silnik, to bierzemy pierwsz\u0105 przestrze\u0144 ze zbioru znalezionych i spawnujemy na niej nasz obiekt klasy AR_Spawned_Actor.<\/p>\n\n\n\n

    W funkcji WorldHitTest, kt\u00f3ra przedstawia si\u0119 nast\u0119puj\u0105co:<\/p>\n\n\n\n

    \"WorldHitTest\"<\/a><\/figure>\n\n\n\n

    pobieramy od gracza screen position, gdzie dotkn\u0105\u0142 palcem, przeprojektowujemy to na wektor w \u015bwiecie 3D z kierunkiem do przodu i sprawdzamy, czy wektor nie styka si\u0119 z jednym z element\u00f3w \u015bwiata rzeczywistego, b\u0105d\u017a wewn\u0105trzsilnikowego.

    Funkcja dostarcza nam nie tylko informacj\u0119, czy nie b\u0119dziemy kolidowa\u0107 z jakim\u015b obiektem, ale te\u017c wszystkie powierzchnie geometryczne wykryte przez silnik, kt\u00f3re mia\u0142y styczno\u015b\u0107 z opisanym wektorem. Na ko\u0144cu pracy z bluprintem AR_Pawn musimy pami\u0119ta\u0107 o przekazaniu stworzonego przez nas pliku konfiguracyjnego sesji AR w nodzie Start AR Session (patrz obraz UE_AR_Pawn, krok 4.).<\/p>\n\n\n\n

    Dla cel\u00f3w testowych naszym aktorem, kt\u00f3rego b\u0119dziemy spawnowa\u0107, jest kula (sphere). Aby j\u0105 doda\u0107, dwukrotnie klikamy w stworzony przez nas blueprint AR_Spawned_Actor, nast\u0119pnie w \u201eDefaultSceneRoot\u201d, a p\u00f3\u017aniej w zielony przycisk \u201e+Add Component\u201d i wybieramy \u201eSphere\u201d.<\/p>\n\n\n\n

    \"Add<\/a><\/figure>\n\n\n\n

    Po zaznaczeniu sfery zmniejszamy j\u0105 dziesi\u0119ciokrotnie w menu \u201eDetails\u201d, by nie by\u0142a rozmiar\u00f3w metr x metr x metr. Mo\u017cemy uruchomi\u0107 projekt na naszym urz\u0105dzeniu mobilnym poprzez klikni\u0119cie tr\u00f3jk\u0105ta jako listy rozwijanej przy przycisku \u201eLaunch\u201d i wybranie naszego urz\u0105dzenia mobilnego (poni\u017cej).<\/p>\n\n\n\n

    \"uruchomienie<\/a><\/figure>\n\n\n\n

    Importowanie do naszego projektu obiekt\u00f3w z Blendera<\/strong><\/h2>\n\n\n\n

    Pobieramy program Blender<\/a> <\/a>i instalujemy na naszym Macu. Nast\u0119pnie ze strony Blender <\/a>pobieramy \u201eBugatti Chiron 2017 sports car\u201d. Po rozpakowaniu otwieramy plik \u201ebugatti.blend\u201d. Pliki .blend s\u0105 automatycznie otwierane przez Blendera. LPM naciskamy na pod\u0142og\u0119 i j\u0105 usuwamy, by lepiej mo\u017cna by\u0142o zaznaczy\u0107 elementy auta. Wybieramy tylko i wy\u0142\u0105cznie wszystkie<\/strong> elementy samochodu bez kamer i o\u015bwietlenia za nim.<\/p>\n\n\n\n

    Zaznaczone elementy powinny wygl\u0105da\u0107 tak:<\/p>\n\n\n\n

    \"importowanie<\/a><\/figure>\n\n\n\n

    Na zaznaczonych elementach klikamy LPM -> Convert To -> Mesh. Po uko\u0144czonej operacji PPM -> Join<\/p>\n\n\n\n

    Maj\u0105c zaznaczone Bugatti, naciskamy File -> Export -> FBX. W opcjach eksportu zmieniamy, by eksportowa\u0107 zaznaczone obiekty, w\u0142\u0105czy\u0107 Face smoothing, zaakceptowa\u0107 transformacje i modyfikatory; nie eksportowa\u0107 animacji ani ko\u015bci; w\u0142\u0105czy\u0107 eksport lu\u017anych kraw\u0119dzi, zaznaczy\u0107 styczne powierzchnie i przede wszystkim triangulacj\u0119 obiekt\u00f3w. Z\u0142a kombinacja spowoduje, \u017ce niekt\u00f3re elementy si\u0119 nie wyeksportuj\u0105<\/strong>. Zaznaczone opcje powinny wygl\u0105da\u0107 nast\u0119puj\u0105co:<\/p>\n\n\n\n

    \"zaznaczone<\/a><\/figure>\n\n\n\n

    Wracamy do Unreal Engine. Tworzymy nowy folder \u201eBlender\u201d i b\u0119d\u0105c w folderze \u201eBlender\u201d, klikamy na \u201eImport to \u2026\u201d<\/p>\n\n\n\n

    \"powr\u00f3t<\/a><\/figure>\n\n\n\n

    Nast\u0119pnie, w kolejnym menu naciskamy \u201eImport All\u201d, u\u017cywaj\u0105c domy\u015blnych opcji importu. Aby wy\u015bwietli\u0107 zaimportowane Bugatti, wystarczy z AR_Spawned_Actor usun\u0105\u0107 \u201eCube\u201d, czyli sfer\u0119 dodan\u0105 w poprzedniej cz\u0119\u015bci i metod\u0105 drag and drop przenie\u015b\u0107 model \u201ebugatti\u201d w miejsce. gdzie by\u0142a sfera.<\/p>\n\n\n\n

    Je\u015bli w poprzedniej cz\u0119\u015bci artyku\u0142u zmniejszali\u015bmy sfer\u0119 10-krotnie, to b\u0119dzie lepiej zmniejszy\u0107 Bugatti jeszcze bardziej. Silnik zapami\u0119tuje ostatnio wykorzystane urz\u0105dzenie, wi\u0119c teraz projekt mo\u017cemy uruchamia\u0107 po prostu naciskaj\u0105c przycisk \u201eLaunch\u201d.<\/p>\n\n\n\n

    \"efekt<\/figure>\n\n\n\n

    Podsumowanie<\/strong><\/h2>\n\n\n\n

    Model znacz\u0105co r\u00f3\u017cni si\u0119 materia\u0142ami od modelu wyrenderowanego w Blenderze. W znacznej wi\u0119kszo\u015bci przypadk\u00f3w rodzaj materia\u0142u z Blendera nie odpowiada temu z Unreal Engine. <\/p>\n\n\n\n

    Projektuj\u0105c modele w Blenderze tylko pod eksport do Unreal Engine, nale\u017cy si\u0119 przede wszystkim skupi\u0107 na bryle, a materia\u0142y dobra\u0107 w silniku. Gdy nie b\u0119dzie nas interesowa\u0142a modyfikacja tych materia\u0142\u00f3w w silniku, warto zainteresowa\u0107 si\u0119 opcj\u0105 wypalaniem tekstur do pliku .png w Blenderze. Jest to najmniej zasobo\u017cerna opcja, powszechnie u\u017cywana przy robieniu modeli do gier. Jednak doj\u015bcie do wprawnego wypalania tekstur wymaga du\u017cego do\u015bwiadczenia. W Blenderze nie warto r\u00f3wnie\u017c po\u015bwi\u0119ca\u0107 zbyt du\u017co czasu na o\u015bwietlenie albo efekty, gdy\u017c nie b\u0119dziemy w stanie tego dobrze wyeksportowa\u0107 do Unreal Engine.<\/p>\n\n\n\n

    Przydatne informacje<\/strong><\/h2>\n\n\n\n
      \n
    1. Dokumentacja podstawowa \u2013 je\u017celi zacz\u0105\u0142e\u015b swoj\u0105 przygod\u0119 z Unreal Engine, warto poczyta\u0107 troch\u0119 o podstawach i dost\u0119pnych elementach blueprintowych<\/a><\/li>\n\n\n\n
    2. O\u015bwietlenie \u2013 w przypadku korzystania z urz\u0105dze\u0144 mobilnych musimy liczy\u0107 si\u0119 z wieloma ograniczeniami, dlatego warto pozna\u0107 je, zanim zaczniemy budowanie bardziej zaawansowanych komponent\u00f3w. Ograniczenia w budowaniu o\u015bwietlenia<\/a><\/li>\n\n\n\n
    3. C++ zamiast blueprint\u00f3w \u2013 je\u015bli po\u015bwi\u0119cili\u015bmy ju\u017c troch\u0119 czasu na sw\u00f3j projekt i chcieliby\u015bmy u\u017cy\u0107 natywnego j\u0119zyka programowania w Unreal Engine, warto najpierw zainstalowa\u0107 Visual Studio for Mac. Wed\u0142ug dokumentacji Unreal Engine, nie jest to konieczne i mo\u017cna np. u\u017cywa\u0107 zwyk\u0142ego edytora tekstu, ale w praktyce, w nawet \u015brednio-ma\u0142ych projektach, jest to awykonalne. Polecam na pocz\u0105tku przerabia\u0107 klasy blueprintowe jedna po drugiej, a nie masowo. Opis znajdziecie w sekcji Exclusive Nativization w dokumentacji<\/a>.<\/li>\n\n\n\n
    4. Mo\u017cliwo\u015bci silnika w rozszerzonej rzeczywisto\u015bci \u2013 pomimo tego, \u017ce up\u0142yn\u0119\u0142o wiele lat od wypuszczenia tego video, nadal nie ma lepszego, kt\u00f3ry opisze podstawowe mo\u017cliwo\u015bci korzystania z rozszerzonej rzeczywisto\u015bci. Warto te\u017c ten materia\u0142 obejrze\u0107<\/a>, by mie\u0107 \u015bwiadomo\u015b\u0107, w jaki spos\u00f3b prostymi \u015brodkami udoskonali\u0107 sw\u00f3j projekt.<\/li>\n\n\n\n
    5. Informacje o importowaniu FBX-\u00f3w<\/a> i dlaczego trzeba u\u017cywa\u0107 opcji triangulacji w Blenderze przy eksportowaniu.<\/li>\n<\/ol>\n\n\n
      \n \n
      \n \n
      \n
      \n \n\n
      <\/div>\n <\/div>\n
      \n \n\n
      <\/div>\n <\/div>\n
      \n \n\n
      <\/div>\n <\/div>\n
      \n \n\n
      <\/div>\n <\/div>\n
      \n \n\n
      <\/div>\n <\/div>\n <\/div>\n \n
      \n
      \n \n\n
      <\/div>\n <\/div>\n
      \n \n\n
      <\/div>\n <\/div>\n
      \n \n\n
      <\/div>\n <\/div>\n
      \n \n\n
      <\/div>\n <\/div>\n
      \n \n\n
      <\/div>\n <\/div>\n <\/div>\n<\/div>\n \n\n
      \n 5\/5 ( votes: 3) <\/div>\n <\/div>\n","protected":false},"excerpt":{"rendered":"

      W artykule opisa\u0142em jak krok po kroku dodawa\u0107 obiekty rozszerzonej rzeczywisto\u015bci na urz\u0105dzeniach mobilnych przy wykorzystaniu Unreal Engine. Zapraszam do … Continued<\/a><\/p>\n","protected":false},"author":563,"featured_media":24307,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","inline_featured_image":false,"footnotes":""},"categories":[1316],"tags":[2427,1798,1512,521],"class_list":["post-24256","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development-na-miekko","tag-digital","tag-unreal-engine","tag-poradnik","tag-ios"],"acf":[],"aioseo_notices":[],"republish_history":[],"featured_media_url":"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/09\/Dodawanie-obiektow-rozszerzonej-rzeczywistosci-na-urzadzeniach-mobilnych-przy-uzyciu-Unreal-Engine-na-przykladzie-platformy-iOS.jpg","category_names":["Development na mi\u0119kko"],"_links":{"self":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/24256"}],"collection":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/users\/563"}],"replies":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/comments?post=24256"}],"version-history":[{"count":3,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/24256\/revisions"}],"predecessor-version":[{"id":24306,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/24256\/revisions\/24306"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media\/24307"}],"wp:attachment":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media?parent=24256"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/categories?post=24256"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/tags?post=24256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}