Portál AR k hore nohám od cudzích vecí: 10 krokov (s obrázkami)

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 12:00

Tento Instructable prejde vytvorením mobilnej aplikácie pre rozšírenú realitu pre iPhone s portálom, ktorý povedie od Stranger Things hore nohami. Môžete ísť dovnútra portálu, prejsť sa a vyjsť von. Všetko, čo je vo vnútri portálu, je možné vidieť iba cez portál, kým vojdete dovnútra. Akonáhle ste vo vnútri, všetko sa bude vykresľovať všade, kým neprejdete späť do skutočného sveta. Použijeme engine Unity 3D pre videohry s doplnkom Apple ARKit. Všetok softvér, ktorý budeme používať, je možné stiahnuť a používať zadarmo. Na to, aby ste postupovali, nemusíte byť odborníkom, prejdeme každým krokom!

Krok 1: Začnite nový projekt Unity

Najprv si stiahnite Unity3D a nainštalujte si súbory zostavy pre platformu IOS. Budete si tiež musieť stiahnuť Xcode a zaregistrovať sa na bezplatný účet vývojára Apple. Váš iPhone bude tiež musieť používať IOS 11 alebo novší. Od dnes 5. februára 2018 je iOS 11.3 vydaný, ale xCode 9.2 zatiaľ nemá podporné súbory. Ak teda používate najnovšiu verziu systému iOS, stiahnite si najnovšiu beta verziu Xcode z webu Apple. Developer.com.

Akonáhle budete mať všetky potrebné programy, otvorte Unity a začnite nový projekt, nazvite ho, ako chcete. Budeme potrebovať doplnok Apple ARKit, aby sme pomocou kamery nášho telefónu mohli rozpoznať objekty na zemi a na zem. Importujeme to teraz tak, že prejdeme na kartu Obchod s aktívami a vyhľadáme „ARKit“. Ak ešte nemáte účet Unity, budete si ho musieť vytvoriť zadarmo, potom kliknutím na importovať získate doplnok.

Prejdite do priečinka examples v priečinku ARKit a nájdite priečinok „UnityARKitScene“. Dvojitým kliknutím ho otvoríte. Túto scénu použijeme ako východiskový bod a budeme odtiaľto vychádzať. Táto scéna vám v predvolenom nastavení umožní rozpoznať zem a keď klepnete na obrazovku, v tejto polohe bude umiestnená kocka.

Poďme najskôr zrušiť nastavenia zostavy, aby sme to nezabudli urobiť neskôr. Kliknite na súbor, vytvorte nastavenia a odstráňte všetky scény z tohto zoznamu. Kliknutím na pridať otvorené scény pridáte našu aktuálnu. Posledná vec, ktorú tu musíme nastaviť, je v nastaveniach prehrávača prejsť na identifikátor balíka a formát tohto reťazca je com. YourCompanyName. YourAppName, takže v mojom prípade robím niečo ako com. MatthewHallberg. PortalTest.

Krok 2: Nastavte scénu

Najprv sa pozrite doľava a nájdite herný objekt s názvom „GeneratePlanes“. Keď je to zvýraznené, pozerajte sa teraz doprava a deaktivujte to kliknutím na začiarkavacie políčko. Týmto spôsobom nevzniknú škaredé modré štvorce, keď ARKit detekuje pozemnú rovinu. Potom odstráňte objekt hry „RandomCube“, pretože to nechceme na našej scéne vidieť.

Teraz musíme najskôr vytvoriť bránu nášho portálu. Odstráňte kocku, ktorá je podradenou položkou HitCubeParent. Kliknite pravým tlačidlom myši a zvoľte Vytvoriť prázdny herný objekt. Premenujte ho na „Portál“. Teraz kliknite pravým tlačidlom myši na tento objekt a vytvorte kocku, vďaka ktorej sa stane dieťaťom portálu. Premenujte ho na „PostLeft“a toto bude ľavý príspevok nášho portálu. Upravte ho tak, aby x bolo 1, y je 28 a z je jedna. To isté urobte so správnym príspevkom. Teraz vytvorte horný stĺpik a upravte mierku y na 14. Otočte tento bok a posuňte ho tak, aby spájal ostatné stĺpiky. Vytvorte celú portálovú mierku 1,3 x 1,4 x 1.

Prejdite na google a zadajte textúru dreva alebo kôry. Stiahnite si jeden z týchto obrázkov a presuňte ho do priečinka s aktívami v Unity. Teraz presuňte tento obrázok na všetky svoje portálové príspevky.

Znova kliknite na objekt „Portál“a vpravo kliknite na položku Pridať komponent. Pridajte do neho skript „UnityARHitTestExample“. Tam je prázdny slot pre „Hit Transform“, pretiahnite objekt „HitCubeParent“do tohto slotu.

Krok 3: Urobme niekoľko častíc

Teraz použijeme systém Unity Particle na vytvorenie efektu dymu a plávajúcich častíc vo vnútri nášho portálu. Prejdite na položku Aktíva v hornom paneli s ponukami, štandardné položky a systémy importu častíc.

Vo svojom portáli vytvorte dva prázdne herné objekty a jeden nazvite „SmokeParticles“a druhý „FloatingParticles“.

K časticiam dymu pridajte súčasť systému častíc.

Tento komponent má veľa možností, ale potrebujeme iba zmeniť pár.

Zmeňte počiatočnú farbu na niečo tmavomodré s asi 50% priehľadnosťou. Urobte emisnú rýchlosť 100. Vo vnútri tvaru urobte polomer.01. V spodnej časti vykresľovača v spodnej časti zmeňte minimálnu veľkosť na 0,8 a maximálnu veľkosť na 5. Na komponente materiálu stačí vybrať dymový materiál zo zoznamu, ale to zmeníme neskôr.

Teraz k objektu hry s plávajúcimi časticami pridajte systém častíc a nastavte emisiu na 500. Nastavte životnosť na 2, polomer na 10, minimálnu veľkosť častíc na 0,01 a maximálnu veľkosť na 0,15. Nastavte materiál zatiaľ na predvolené častice.

Nakoniec vezmite oba herné objekty a otočte ich o x o 90 stupňov na x a zdvihnite ich do vzduchu, aby vyžarovali nadol do brány portálu.

Krok 4: Spomalenie častíc

Pretože chceme, aby tieto častice pokrývali veľkú plochu, ale aby sa tiež pohybovali pomaly, musíme vytvoriť vlastnú funkciu vzorky. Kliknite teda pravým tlačidlom myši na priečinok s aktívami a vytvorte nový skript C# a nazvite ho „ParticleSample“. Skopírujte a prilepte tento kód:

pomocou System. Collections;

pomocou System. Collections. Generic; pomocou UnityEngine; verejná trieda ParticleSample: MonoBehaviour {private ParticleSystem ps; // Použite to na inicializáciu void Start () {ps = GetComponent (); StartCoroutine (SampleParticleRoutine ()); } IEnumerator SampleParticleRoutine () {var main = ps.main; main.simulationSpeed = 1000f; ps. Play (); výnos return new WaitForSeconds (.1f); main.simulationSpeed =.05f; }}

Teraz presuňte tento skript na každý zo svojich objektov v hernej časticovej sústave.

Krok 5: Vytvorenie portálu

Teraz musíme vytvoriť portál, takže pravým tlačidlom myši kliknite na objekt portálovej hry a vytvorte štvoricu. Upravte štvoricu tak, aby pokrývala celý portál, a stane sa z toho naše okno portálu. Prvá vec, ktorú musíme pridať, je shader portálu, ktorý vykreslí iba objekty s iným konkrétnym shaderom. Kliknite pravým tlačidlom myši na priečinok s aktívami a vytvorte nový neosvetlený shader. Odstráňte všetko, čo je tam, a vložte tento kód:

Shader "Portál/portálWindow"

{SubShader {Zwrite off Colormask 0 cull off Stencil {Ref 1 Pass replacement} Pass {}}}

Kliknite pravým tlačidlom myši v hierarchii a vytvorte nový materiál, nazvaný ho PortalWindowMat, v rozbaľovacom zozname pre tento materiál vyhľadajte sekciu portálu a zvoľte okno portálu. Presuňte tento materiál na štvoricu portálov.

Krok 6: Shadery častíc

Opäť kliknite pravým tlačidlom myši na priečinok s aktívami a vytvorte nový shader. Musíme vyrobiť shadery pre častice, ktoré idú dovnútra portálu. Nahraďte celý kód týmto:

Shader „Portál/častice“{

Vlastnosti {_TintColor ("Tint Color", Color) = (0,5, 0,5, 0,5, 0,5) _MainTex ("Particle Texture", 2D) = "white" {} _InvFade ("Soft Particles Factor", Range (0,01, 3,0)) = 1.0 _Stencil ("stencil", int) = 6} Kategória {Tagy {"Queue" = "Transparent" "IgnoreProjector" = "True" "RenderType" = "Transparent" "PreviewType" = "Plane"} Blend SrcAlpha OneMinusSrcAlpha ColorMask RGB Cull Off Lighting Off ZWrite Off SubShader {Stencil {Ref 1 Comp [_Stencil]} Pass {CGPROGRAM #pragma vertex vert #pragma fragment frag #pragma target 2.0 #pragma multi_compile_particles #pragma multi_compile_fog #include "UnityCG.cginc" sam fixed4 _TintColor; struct appdata_t {vrchol float4: POZÍCIA; farba fixed4: COLOR; float2 texcoord: TEXCOORD0; UNITY_VERTEX_INPUT_INSTANCE_ID}; struct v2f {vrchol float4: SV_POSITION; farba fixed4: COLOR; float2 texcoord: TEXCOORD0; UNITY_FOG_COORDS (1) #ifdef SOFTPARTICLES_ON float4 projPos: TEXCOORD2; #endif UNITY_VERTEX_OUTPUT_STEREO}; float4 _MainTex_ST; v2f vert (appdata_t v) {v2f o; UNITY_SETUP_INSTANCE_ID (v); UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO (o); o.vertex = UnityObjectToClipPos (v.vertex); #ifdef SOFTPARTICLES_ON o.projPos = ComputeScreenPos (o.vertex); COMPUTE_EYEDEPTH (o.projPos.z); #endif o.color = v.color * _TintColor; o.texcoord = TRANSFORM_TEX (v.texcoord, _MainTex); UNITY_TRANSFER_FOG (o, o.vertex); vrátiť o; } UNITY_DECLARE_DEPTH_TEXTURE (_CameraDepthTexture); float _InvFade; fixed4 frag (v2f i): SV_Target {#ifdef SOFTPARTICLES_ON float sceneZ = LinearEyeDepth (SAMPLE_DEPTH_TEXTURE_PROJ (_CameraDepthTexture, UNITY_PROJ_COORD (i.projPos))); float partZ = i.projPos.z; float fade = saturate (_InvFade * (sceneZ-partZ)); i.color.a *= vyblednutie; #endif fixed4 col = 2.0f * i.color * tex2D (_MainTex, i.texcoord); UNITY_APPLY_FOG (i.fogCoord, kol.); návrat stĺpca; } ENDCG}}}}

Vytvorte dva nové materiály, jeden s názvom portalSmoke a jeden s názvom portalParticles.

Pre každý vyberte tento shader, z rozbaľovacieho zoznamu, na portáloch, častice. Pre častice dymu zvoľte textúru dymu a pre častice zvoľte textúru častíc. Zmeňte farbu dymu na tmavšiu modrú s asi 50% priehľadnosťou. Prejdite na renderovací komponent každého systému častíc na svojom portáli a vyberte príslušný materiál, ktorý sme práve vytvorili.

Krok 7: Vytvorte Skybox

Teraz, aby sme skutočne vytvorili prevrátený typ vzhľadu, musíme všetko zafarbiť na tmavomodro. Na tento účel použijeme transparentný skybox, takže vytvorte nový shader a vložte ho do tohto kódu:

Shader "Portál/portálSkybox" {

Vlastnosti {_Tint ("Farba odtieňa", Farba) = (.5,.5,.5,.5) [Gamma] _Expozícia ("Expozícia", Rozsah (0, 8)) = 1,0 _Rotácia ("Rotácia", Rozsah (0, 360)) = 0 [NoScaleOffset] _Tex ("Cubemap (HDR)", Cube) = "grey" {} _Stencil ("StencilNum", int) = 6} SubShader {Tags {"Queue" = "Background" "RenderType" = "Background" "PreviewType" = "Skybox"} Vyradiť ZWrite Off Blend SrcAlpha OneMinusSrcAlpha Stencil {Ref 1 Comp [_Stencil]} Pass {CGPROGRAM #pragma vertex vert #pragma fragment frag. #Pragma target 2.0 #include "UnityCG.cginc "samplerCUBE _Tex; half4 _Tex_HDR; half4 _Tint; polovica _Expozícia; float _Rotácia; float3 RotateAroundYInDegrees (vrchol float3, plávajúce stupne) {float alfa = stupne * UNITY_PI / 180,0; float sina, cosa; sincos (alfa, sina, cosa); float2x2 m = float2x2 (cosa, -sina, sina, cosa); návrat float3 (mul (m, vrchol.xz), vrchol.y).xzy; } struct appdata_t {vrchol float4: POZÍCIA; UNITY_VERTEX_INPUT_INSTANCE_ID}; struct v2f {vrchol float4: SV_POSITION; float3 texcoord: TEXCOORD0; UNITY_VERTEX_OUTPUT_STEREO}; v2f vert (appdata_t v) {v2f o; UNITY_SETUP_INSTANCE_ID (v); UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO (o); float3 rotated = RotateAroundYInDegrees (v.vertex, _Rotation); o.vertex = UnityObjectToClipPos (otočený); o.texcoord = v.vertex.xyz; vrátiť o; } fixed4 frag (v2f i): SV_Target {half4 tex = texCUBE (_Tex, i.texcoord); half3 c = DecodeHDR (tex, _Tex_HDR); c = c * _Tint.rgb * unity_ColorSpaceDouble.rgb; c *= _expozícia; vrátiť half4 (c, 0,5); } ENDCG}} Záložné vypnutie}

Teraz vytvorte nový materiál skyboxu, nazvite ho „PortalSkybox“a vyberte si z ponuky portálu tento shader portalSkybox. V hornej časti prejdite na Okno, Osvetlenie a vyberte tento skybox, ktorý sme práve vytvorili. Prejdite na hlavný fotoaparát a nastavte jasné vlajky na skybox. Keď sme tu, umožníme pridať do fotoaparátu niekoľko komponentov, aby sme mohli detekovať kolízie. Pridajte do fotoaparátu súčasť pevného telesa a zrušte začiarknutie políčka gravitácia. Pridajte urýchľovač poľa a začiarknutie políčka sa spustí. Nastavte veľkosť zrážačov boxu.5 x 1 x 4. Nastavte rovinu orezania na fotoaparáte na.01.

Krok 8: Logika portálu

Posledná vec, ktorú musíme urobiť, je vytvoriť logiku, ktorá ovláda náš portál. Vytvorte nový skript C# a nazvite ho PortalController.

pomocou System. Collections;

pomocou System. Collections. Generic; pomocou UnityEngine; priestor názvov UnityEngine. XR.iOS {verejná trieda PortalController: MonoBehaviour {public Material materiály; verejné MeshRenderer meshRenderer; verejná UnityARVideo UnityARVideo; private bool isInside = false; private bool isOutside = true; // Použite to na inicializáciu neplatné Start () {OutsidePortal (); } neplatné OnTriggerStay (Collider col) {Vector3 playerPos = Camera.main.transform.position + Camera.main.transform.forward * (Camera.main.nearClipPlane * 4); if (transform. InverseTransformPoint (playerPos).z <= 0) {if (isOutside) {isOutside = false; isInside = true; InsidePortal (); }} else {if (isInside) {isInside = false; isOutside = true; OutsidePortal (); }}} neplatné OutsidePortal () {StartCoroutine (DelayChangeMat (3)); } neplatné InsidePortal () {StartCoroutine (DelayChangeMat (6)); } IEnumerator DelayChangeMat (int stencilNum) {UnityARVideo.shouldRender = false; výnos návrat nový WaitForEndOfFrame (); meshRenderer.enabled = false; foreach (Materiálová podložka v materiáloch) {mat. SetInt ("_Stencil", stencilNum); } výnos návrat nový WaitForEndOfFrame (); meshRenderer.enabled = true; UnityARVideo.shouldRender = true; }}}

Presuňte tento nový skript do okna portálu. To nás prevedie na portál a z neho vždy, keď sa zrazič našej kamery zrazí s oknom portálu. Teraz vo funkcii, ktorá mení všetky materiály, povieme doplnku ARkit, aby nevykreslil rám, tak choďte na hlavný fotoaparát a otvorte skript UnityARVideo. Vytvorte verejný bool shouldRender v hornej časti a nastavte ho na true. Dole vo funkcii OnPreRender () zabaľte všetko do príkazu if, kde všetko vo vnútri pobeží iba vtedy, ak je parameter shouldRender pravdivý. Celý skript by mal vyzerať takto:

pomocou systému;

pomocou System. Runtime. InteropServices; pomocou UnityEngine; pomocou UnityEngine. Rendering; priestor názvov UnityEngine. XR.iOS {public class UnityARVideo: MonoBehaviour {public Material m_ClearMaterial; [HideInInspector] public bool shouldRender = true; súkromný CommandBuffer m_VideoCommandBuffer; private Texture2D _videoTextureY; private Texture2D _videoTextureCbCr; súkromné Matrix4x4 _displayTransform; private bool bCommandBufferInitialized; public void Start () {UnityARSessionNativeInterface. ARFrameUpdatedEvent += UpdateFrame; bCommandBufferInitialized = false; } void UpdateFrame (kamera UnityARCamera) {_displayTransform = new Matrix4x4 (); _displayTransform. SetColumn (0, cam.displayTransform.column0); _displayTransform. SetColumn (1, cam.displayTransform.column1); _displayTransform. SetColumn (2, cam.displayTransform.column2); _displayTransform. SetColumn (3, cam.displayTransform.column3); } neplatné InitializeCommandBuffer () {m_VideoCommandBuffer = new CommandBuffer (); m_VideoCommandBuffer. Blit (null, BuiltinRenderTextureType. CurrentActive, m_ClearMaterial); GetComponent (). AddCommandBuffer (CameraEvent. BeforeForwardOpaque, m_VideoCommandBuffer); bCommandBufferInitialized = true; } neplatné OnDestroy () {GetComponent (). RemoveCommandBuffer (CameraEvent. BeforeForwardOpaque, m_VideoCommandBuffer); UnityARSessionNativeInterface. ARFrameUpdatedEvent -= UpdateFrame; bCommandBufferInitialized = false; } #if! UNITY_EDITOR public neplatné OnPreRender () {if (shouldRender) {ARTextureHandles handle = UnityARSessionNativeInterface. GetARSessionNativeInterface (). GetARVideoTextureHandles (); if (handle.textureY == System. IntPtr. Zero || handle.textureCbCr == System. IntPtr. Zero) {return; } if (! bCommandBufferInitialized) {InitializeCommandBuffer (); } Rozlíšenie currentResolution = Screen.currentResolution; // Texture Y if (_videoTextureY == null) {_videoTextureY = Texture2D. CreateExternalTexture (currentResolution.width, currentResolution.height, TextureFormat. R8, false, false, (System. IntPtr) handle.textureY); _videoTextureY.filterMode = FilterMode. Bilinear; _videoTextureY.wrapMode = TextureWrapMode. Repeat; m_ClearMaterial. SetTexture ("_ textureY", _videoTextureY); } // Textúra CbCr if (_videoTextureCbCr == null) {_videoTextureCbCr = Texture2D. CreateExternalTexture (currentResolution.width, currentResolution.height, TextureFormat. RG16, false, false, (System. IntPb)rure.text _videoTextureCbCr.filterMode = FilterMode. Bilinear; _videoTextureCbCr.wrapMode = TextureWrapMode. Repeat; m_ClearMaterial. SetTexture ("_ textureCbCr", _videoTextureCbCr); } _videoTextureY. UpdateExternalTexture (handle.textureY); _videoTextureCbCr. UpdateExternalTexture (handle.textureCbCr); m_ClearMaterial. SetMatrix ("_ DisplayTransform", _displayTransform); }} #else public neplatné SetYTexure (Texture2D YTex) {_videoTextureY = YTex; } verejná neplatnosť SetUVTexure (Texture2D UVTex) {_videoTextureCbCr = UVTex; } public neplatné OnPreRender () {if (! bCommandBufferInitialized) {InitializeCommandBuffer (); } m_ClearMaterial. SetTexture ("_ textureY", _videoTextureY); m_ClearMaterial. SetTexture ("_ textureCbCr", _videoTextureCbCr); m_ClearMaterial. SetMatrix ("_ DisplayTransform", _displayTransform); } #koniec Ak } }

Krok 9: Takmer hotovo

Nakoniec, keď klikneme na obrazovku a umiestnime portál, chceme, aby bol vždy tvárou k nám. Ak to chcete urobiť, choďte na skript "UnityARHitTestExample" na portáli. Vymeňte všetko vo vnútri za toto:

pomocou systému;

pomocou System. Collections. Generic; priestor názvov UnityEngine. XR.iOS {public class UnityARHitTestExample: MonoBehaviour {public Transform m_HitTransform; verejný plavák maxRayDistance = 30,0f; public LayerMask CollisionLayer = 1 <0) {foreach (var hitResult in hitResults) {Debug. Log ("Got hit!"); m_HitTransform.position = UnityARMatrixOps. GetPosition (hitResult.worldTransform); m_HitTransform.rotation = UnityARMatrixOps. GetRotation (hitResult.worldTransform); Debug. Log (string. Format ("x: {0: 0. ######}} y: {1: 0. ######}} z: {2: 0. ###### } ", m_HitTransform.position.x, m_HitTransform.position.y, m_HitTransform.position.z)); Vector3 prúdAngle = transform.eulerAngles; transform. LookAt (Camera.main.transform); transform.eulerAngles = nový Vector3 (proudAngle.x, transform.eulerAngles.y, proudAngle.z); návrat true; }} return false; } // Aktualizácia sa volá raz za neplatný rámček Update () {#if UNITY_EDITOR // tento skript použijeme iba na strane editora, aj keď nič nebráni tomu, aby fungoval na zariadení, ak (Input. GetMouseButtonDown (0)) {Ray ray = Camera.main. ScreenPointToRay (Input.mousePosition); RaycastHit hit; // pokúsime sa zasiahnuť jeden z herných objektov rovinného urýchľovača, ktoré boli vygenerované doplnkom // efektívne podobné volaniu HitTest pomocou ARHitTestResultType. ARHitTestResultTypeExistingPlaneUsingExtent if (Physics. Raycast (ray, out hit, maxRayDistance, CollisionLayer)) {// pozíciu získame z kontaktného bodu m_HitTransform.position = hit.point; Debug. Log (string. Format ("x: {0: 0. ######}} y: {1: 0. ######} z: {2: 0. ###### } ", m_HitTransform.position.x, m_HitTransform.position.y, m_HitTransform.position.z)); // a rotácia z transformácie rovinného urýchľovača m_HitTransform.rotation = hit.transform.rotation; }} #else if (Input.touchCount> 0 && m_HitTransform! = null) {var touch = Input. GetTouch (0); if (touch.phase == TouchPhase. Began || touch.phase == TouchPhase. Moved) {var screenPosition = Camera.main. ScreenToViewportPoint (touch.position); Bod ARPoint = nový ARPoint {x = screenPosition.x, y = screenPosition.y}; // definovali priority reults typy ARHitTestResultType resultTypes = {ARHitTestResultType. ARHitTestResultTypeExistingPlaneUsingExtent, // Ak chcete použiť nekonečné roviny použiť: //ARHitTestResultType. ARHitTestResultTypeExistingPlane, ARHitTestResultType. ARHitTestResultTypeHorizontalPlane, ARHitTestResultType. ARHitTestResultTypeFeaturePoint}; foreach (ARHitTestResultType resultType in resultTypes) {if (HitTestWithResultType (point, resultType)) {return; } } } } #koniec Ak } } }

Krok 10: Vložte aplikáciu do telefónu

Nakoniec sme hotoví. Prejdite na súbor, vytvorte nastavenia a kliknite na zostaviť. Otvorte Xcode a vyberte priečinok, ktorý bol vytvorený z zostavy. Vyberte si svoj vývojový tím a vložte aplikáciu do telefónu! Možno budete chcieť zmeniť farby častíc a skyboxu, aby vyhovovali vašim potrebám. V prípade akýchkoľvek otázok mi dajte vedieť v komentároch a ďakujem, že ste sa na ne pozreli!