Portál AR na vzhůru nohama od cizích věcí: 10 kroků (s obrázky)

2024 Autor: John Day | [email protected]. Naposledy změněno: 2024-01-30 08:23

Tento Instructable projde vytvořením mobilní aplikace pro rozšířenou realitu pro iPhone s portálem, který vede vzhůru nohama od Stranger Things. Můžete jít dovnitř portálu, projít se a vrátit se ven. Všechno uvnitř portálu je vidět pouze skrz portál, dokud nevejdete dovnitř. Jakmile jste uvnitř, vše se vykreslí všude, dokud neprojdete zpět do skutečného světa. Použijeme engine Unity 3D pro videohry s pluginem Apple ARKit. Veškerý software, který budeme používat, lze stáhnout a používat zdarma. Nemusíte být odborník, abychom vás mohli sledovat, projdeme každý krok!

Krok 1: Spusťte nový projekt Unity

Nejprve si stáhněte Unity3D a nezapomeňte nainstalovat soubory sestavení pro platformu IOS. Budete si také muset stáhnout Xcode a zaregistrovat si bezplatný účet vývojáře Apple. Váš iPhone také bude muset používat IOS 11 nebo vyšší. K dnešnímu dni, 5. února 2018, je iOS 11.3 venku, ale xCode 9.2 pro něj zatím nemá podpůrné soubory. Pokud tedy používáte nejnovější verzi IOS, stáhněte si nejnovější beta verzi Xcode z webu Apple. Developer.com.

Jakmile budete mít všechny potřebné programy, otevřete Unity a spusťte nový projekt, říkejte tomu jak chcete. Budeme potřebovat plugin Apple ARKit, abychom mohli pomocí kamery našeho telefonu detekovat na zemi objekty a umísťovat na podlahu předměty. Pojďme to nyní importovat tak, že přejdeme na kartu Asset Store a vyhledáme „ARKit“. Pokud účet Unity ještě nemáte, budete si muset vytvořit bezplatný účet, poté kliknutím na importovat plugin.

Přejděte do složky examples ve složce ARKit a najděte „UnityARKitScene“. Dvojitým kliknutím jej otevřete. Tuto scénu použijeme jako výchozí bod a budeme odtud stavět. Tato scéna vám ve výchozím nastavení umožní detekovat zem a po klepnutí na obrazovku bude do této polohy umístěna kostka.

Pojďme si nejprve sestavit nastavení sestavení na druhou, abychom to nezapomněli udělat později. Klikněte na soubor, vytvořte nastavení a odeberte všechny scény z tohoto seznamu. Kliknutím na přidat otevřené scény přidáte naši aktuální. Poslední věc, kterou zde musíme nastavit, je v nastavení přehrávače přejít na identifikátor svazku a formát pro tento řetězec je com. YourCompanyName. YourAppName, takže v mém případě dělám něco jako com. MatthewHallberg. PortalTest.

Krok 2: Nastavení scény

Nejprve se podívejte vlevo a najděte herní objekt s názvem „GeneratePlanes“. Když je to zvýrazněno, podívejte se hned doprava a kliknutím na zaškrtávací políčko jej deaktivujte. Tímto způsobem nebudeme vytvářet ošklivé modré čtverce, když ARKit detekuje pozemní rovinu. Dále odstraňte objekt hry „RandomCube“, protože to nechceme na naší scéně vidět.

Nyní musíme nejprve vytvořit bránu našeho portálu. Odstraňte krychli, která je podřízenou položkou „HitCubeParent“. Klikněte pravým tlačítkem a vyberte vytvořit prázdný herní objekt. Přejmenujte jej na „Portál“. Nyní klikněte pravým tlačítkem na tento objekt a vytvořte krychli, což z něj udělá podřízeného portálu. Přejmenujte jej na „PostLeft“a toto bude levý příspěvek našeho portálu. Změňte měřítko tak, že x je 1, y je 28 a z je jedna. Udělejte totéž pro správný příspěvek. Nyní vytvořte horní sloupek a změňte měřítko y na 14. Otočte tento bok a přesuňte jej tak, aby spojil ostatní sloupky. Vytvořte celé měřítko portálu 1,3 x 1,4 x 1.

Přejděte na google a zadejte texturu dřeva nebo kůry. Stáhněte si jeden z těchto obrázků a přetáhněte jej do složky aktiv v Unity. Nyní přetáhněte tento obrázek na všechny vaše příspěvky na portálu.

Klikněte znovu na objekt „Portál“a vpravo klikněte na Přidat komponentu. Přidejte do něj skript „UnityARHitTestExample“. Je tam prázdný slot pro „Hit Transform“, přetáhněte do tohoto slotu objekt „HitCubeParent“.

Krok 3: Udělejme nějaké částice

Nyní použijeme systém Unity Particle k vytvoření efektu kouře a plovoucích částic uvnitř našeho portálu. V horním panelu nabídek přejděte na Aktiva, standardní aktiva a importujte systémy částic.

Vytvořte na svém portálu dva prázdné herní objekty a jeden nazvěte „SmokeParticles“a druhý „FloatingParticles“.

Přidejte k částicím kouře komponentu systému částic.

Tato součást má spoustu možností, ale potřebujeme pouze změnit pár.

Změňte počáteční barvu na něco tmavě modrého s asi 50% průhledností. Udělejte emisní poměr 100. Ve tvaru vytvořte poloměr 0,01. V části vykreslovače v dolní části změňte minimální velikost na 0,8 a maximální velikost na 5. Na materiálové složce stačí vybrat kouřový materiál ze seznamu, ale to změníme později.

Přidejte nyní do objektu hry s plovoucími částicemi systém částic a nastavte emise na 500. Nastavte počáteční životnost na 2, poloměr na 10, minimální velikost částic na 0,01 a maximální velikost částic na 0,015. Nyní nastavte materiál na výchozí částice.

Nakonec vezměte oba herní objekty a otočte je o 90 stupňů na x a zvedněte je do vzduchu, aby vyzařovaly dolů do dveří portálu.

Krok 4: Zpomalení částic

Protože chceme, aby tyto částice pokrývaly velkou oblast, ale také se pohybovaly pomalu, musíme vytvořit vlastní funkci vzorku. Klikněte tedy pravým tlačítkem myši na složku aktiv a vytvořte nový skript C# a nazvěte jej „ParticleSample“. Zkopírujte a vložte tento kód:

pomocí System. Collections;

pomocí System. Collections. Generic; pomocí UnityEngine; veřejná třída ParticleSample: MonoBehaviour {private ParticleSystem ps; // Použijte to pro inicializaci 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; }}

Nyní přetáhněte tento skript na každý z vašich herních objektů částicového systému.

Krok 5: Vytvoření portálu

Nyní musíme vytvořit portál, takže klikněte pravým tlačítkem na objekt portálu a vytvořte čtyřkolku. Změňte velikost čtyřúhelníku tak, aby pokrýval celý portál, a toto se stane naším oknem portálu. První věc, kterou musíme přidat, je shader portálu, který vykreslí pouze objekty s jiným konkrétním shaderem. Klikněte pravým tlačítkem do složky aktiv a vytvořte nový neosvětlený shader. Odstraňte vše, co je tam, a vložte tento kód:

Shader "Portal/portalWindow"

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

Klikněte pravým tlačítkem v hierarchii a vytvořte nový materiál, nazvejte jej PortalWindowMat, v rozevíracím seznamu pro tento materiál vyhledejte sekci portálu a zvolte okno portálu. Přetáhněte tento materiál na čtveřici portálu.

Krok 6: Shadery částic

Opět klikněte pravým tlačítkem do složky aktiv a vytvořte nový shader. Potřebujeme vyrobit shadery pro částice, které jdou dovnitř portálu. Nahraďte celý kód tímto:

Shader "Portál/částice" {

Vlastnosti {_TintColor („Barva odstínu“, Barva) = (0,5, 0,5, 0,5, 0,5) _MainTex („Textura částic“, 2D) = „bílá“{} _InvFade („Faktor měkkých částic“, Rozsah (0,01, 3,0)) = 1.0 _Stencil ("stencil", int) = 6} Kategorie {Tags {"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: POZICE; fixed4 barva: COLOR; float2 texcoord: TEXCOORD0; UNITY_VERTEX_INPUT_INSTANCE_ID}; struct v2f {vrchol float4: SV_POSITION; fixed4 barva: 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átit 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 *= fade; #endif fixed4 col = 2.0f * i.color * tex2D (_MainTex, i.texcoord); UNITY_APPLY_FOG (i.fogCoord, col); návrat col; } ENDCG}}}}

Vytvořte dva nové materiály, jeden s názvem portalSmoke a jeden s názvem portalParticles.

Pro každého vyberte tento shader, z rozevíracího seznamu, na portálech, částice. Pro částice kouře zvolte texturu kouře a pro částice vyberte strukturu částic. Změňte barvu kouře na tmavší modrou s přibližně 50% průhledností. Přejděte na vykreslovací komponentu každého částicového systému na vašem portálu a vyberte příslušné materiály, které jsme právě vytvořili.

Krok 7: Vytvořte Skybox

Nyní, abychom skutečně vytvořili typ vzhůru nohama, musíme vše zbarvit do tmavě modra. K tomu použijeme transparentní skybox, takže vytvoříme nový shader a vložíme do tohoto kódu:

Shader "Portal/portalSkybox" {

Vlastnosti {_Tint ("Tint Color", Color) = (.5,.5,.5,.5) [Gamma] _Exposure ("Exposure", Range (0, 8)) = 1.0 _Rotation ("Rotation", Range (0, 360)) = 0 [NoScaleOffset] _Tex ("Cubemap (HDR)", Cube) = "grey" {} _Stencil ("StencilNum", int) = 6} SubShader {Tags {"Queue" = "Pozadí" "RenderType" = "Pozadí" "PreviewType" = "Skybox"} Vyřadit 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; polovina _Expozice; float _Rotace; float3 RotateAroundYInDegrees (vrchol float3, plovoucí stupně) {float alpha = stupňů * UNITY_PI / 180,0; float sina, cosa; sincos (alfa, sina, cosa); float2x2 m = float2x2 (cosa, -sina, sina, cosa); return float3 (mul (m, vertex.xz), vertex.y).xzy; } struct appdata_t {vrchol float4: POZICE; 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átit 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 *= _expozice; vrátit half4 (c, 0,5); } ENDCG}} Záložní vypnuto}

Nyní vytvořte nový materiál skyboxu, nazývejte jej „PortalSkybox“a v nabídce portálu vyberte tento shader portalSkybox. Přejděte nahoře na okno, osvětlení a vyberte tento skybox, který jsme právě vytvořili. Přejděte k hlavní kameře a nastavte jasné vlajky na skybox. Když jsme tady, přidáme na kameru nějaké komponenty, abychom mohli detekovat kolize. Přidejte do kamery komponentu s pevným tělem a zrušte zaškrtnutí políčka gravitace. Přidejte pole urychlovače a zaškrtněte políčko. Vytvořte rámeček srážky velikosti 0,5 x 1 x 4. Nastavte rovinu oříznutí na fotoaparátu na 0,01.

Krok 8: Logika portálu

Poslední věc, kterou musíme udělat, je vytvořit logiku, která řídí náš portál. Vytvořte nový skript C# a nazvěte ho PortalController.

pomocí System. Collections;

pomocí System. Collections. Generic; pomocí UnityEngine; obor názvů UnityEngine. XR.iOS {veřejná třída PortalController: MonoBehaviour {public Material materiály; public MeshRenderer meshRenderer; veřejné UnityARVideo UnityARVideo; private bool isInside = false; private bool isOutside = true; // Použijte to pro inicializaci void 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 (); }}} void OutsidePortal () {StartCoroutine (DelayChangeMat (3)); } void InsidePortal () {StartCoroutine (DelayChangeMat (6)); } IEnumerator DelayChangeMat (int stencilNum) {UnityARVideo.shouldRender = false; výnos return new WaitForEndOfFrame (); meshRenderer.enabled = false; foreach (Materiálová podložka v materiálech) {mat. SetInt ("_Stencil", stencilNum); } výnos vrátit nový WaitForEndOfFrame (); meshRenderer.enabled = true; UnityARVideo.shouldRender = true; }}}

Přetáhněte tento nový skript do okna portálu. To nás přenese dovnitř a ven z portálu, kdykoli kolidér na naší kameře koliduje s oknem portálu. Nyní ve funkci, která mění všechny materiály, říkáme pluginu ARkit, aby nevykreslil rámeček, přejděte tedy k hlavní kameře a otevřete skript UnityARVideo. Vytvořte veřejný bool shouldRender v horní části a nastavte jej na true. Dole ve funkci OnPreRender () zabalte vše do příkazu if, kde vše uvnitř poběží pouze tehdy, pokud shouldRender je true. Celý skript by měl vypadat takto:

pomocí System;

pomocí System. Runtime. InteropServices; pomocí UnityEngine; pomocí UnityEngine. Rendering; obor názvů UnityEngine. XR.iOS {veřejná třída UnityARVideo: MonoBehaviour {public Material m_ClearMaterial; [HideInInspector] public bool shouldRender = true; soukromý CommandBuffer m_VideoCommandBuffer; soukromé Texture2D _videoTextureY; soukromé Texture2D _videoTextureCbCr; soukromé 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); } void 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 void OnPreRender () {if (shouldRender) {ARTextureHandles handle = UnityARSessionNativeInterface. GetARSessionNativeInterface (). GetARVideoTextureHandles (); if (handle.textureY == System. IntPtr. Zero || handle.textureCbCr == System. IntPtr. Zero) {return; } if (! bCommandBufferInitialized) {InitializeCommandBuffer (); } Rozlišení currentResolution = Screen.currentResolution; // Textura 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); } // Texture 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 void SetYTexure (Texture2D YTex) {_videoTextureY = YTex; } public neplatné SetUVTexure (Texture2D UVTex) {_videoTextureCbCr = UVTex; } public void OnPreRender () {if (! bCommandBufferInitialized) {InitializeCommandBuffer (); } m_ClearMaterial. SetTexture ("_ textureY", _videoTextureY); m_ClearMaterial. SetTexture ("_ textureCbCr", _videoTextureCbCr); m_ClearMaterial. SetMatrix ("_ DisplayTransform", _displayTransform); } #endif}}

Krok 9: Téměř hotovo

Nakonec, když klikneme na obrazovku a umístíme portál, chceme, aby vždy stál proti nám. Chcete -li to provést, přejděte na skript „UnityARHitTestExample“na portálu. Nahraďte vše uvnitř tímto:

pomocí System;

pomocí System. Collections. Generic; obor názvů UnityEngine. XR.iOS {veřejná třída UnityARHitTestExample: MonoBehaviour {public Transform m_HitTransform; veřejný plová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 proudAngle = transform.eulerAngles; transform. LookAt (Camera.main.transform); transform.eulerAngles = nový Vector3 (proudAngle.x, transform.eulerAngles.y, proudAngle.z); return true; }} return false; } // Aktualizace se nazývá jednou za neplatný rámeček Update () {#if UNITY_EDITOR // tento skript použijeme pouze na straně editoru, ačkoli nic nebrání tomu, aby fungovalo na zařízení, pokud (Input. GetMouseButtonDown (0)) {Ray ray = Camera.main. ScreenPointToRay (Input.mousePosition); RaycastHit hit; // pokusíme se zasáhnout jeden z herních objektů urychlovače letadel, které byly generovány pluginem // efektivně podobné volání HitTestu pomocí ARHitTestResultType. ARHitTestResultTypeExistingPlaneUsingExtent if (Physics. Raycast (ray, out hit, maxRayDistance, CollisionLayer)) {// získáme pozici 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 rotace z transformace rovinného urychlovače 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}; // definovaly priority reults typy ARHitTestResultType resultTypes = {ARHitTestResultType. ARHitTestResultTypeExistingPlaneUsingExtent, // Chcete-li použít nekonečné roviny použít: //ARHitTestResultType. ARHitTestResultTypeExistingPlane, ARHitTestResultType. ARHitTestResultTypeHorizontalPlane, ARHitTestResultType. ARHitTestResultTypeFeaturePoint}; foreach (ARHitTestResultType resultType in resultTypes) {if (HitTestWithResultType (point, resultType)) {return; }}}} #endif}}}

Krok 10: Vložte aplikaci do telefonu

Nakonec jsme hotovi. Přejděte do souboru, vytvořte nastavení a klikněte na sestavení. Otevřete Xcode a vyberte složku, která byla vytvořena z buildu. Vyberte si svůj vývojový tým a vložte aplikaci do telefonu! Možná budete chtít změnit barvy částic a skyboxu, aby vyhovovaly vašim potřebám. Dejte mi vědět v komentářích, pokud máte nějaké dotazy a děkuji za shlédnutí!