AR portál a fejjel lefelé az idegen dolgoktól: 10 lépés (képekkel)

2024 Szerző: John Day | [email protected]. Utoljára módosítva: 2024-01-30 09:43

Ez az Instructable kiterjesztett valóság mobilalkalmazást hoz létre az iPhone számára, amelynek portálja a Stranger Things fejjel lefelé vezet. Beléphet a portálra, körbejárhatja és visszatérhet. A portálon belül minden csak a portálon keresztül látható, amíg be nem lép. Ha már bent vagy, minden rendben lesz, amíg vissza nem lépsz a való világba. A Unity 3D videojáték -motort fogjuk használni az Apple ARKit beépülő modullal. Minden szoftver, amelyet használni fogunk, ingyenesen letölthető és használható. Nem kell szakértőnek lenni ahhoz, hogy kövesse nyomon, mi minden lépést végigjárunk!

1. lépés: Indítson el egy új Unity projektet

Először is töltse le az Unity3D programot, és győződjön meg róla, hogy telepítette az IOS platformhoz tartozó buildfájlokat. Ezenkívül le kell töltenie az Xcode -ot, és regisztrálnia kell egy ingyenes Apple fejlesztői fiókra. Az iPhone -jának is IOS 11 vagy újabb rendszert kell futtatnia. 2018. február 5 -én az IOS 11.3 nem elérhető, de az xCode 9.2 még nem rendelkezik támogató fájlokkal. Tehát ha a legújabb IOS verziót futtatja, akkor mindenképpen töltse le a legújabb Xcode béta verziót az Apple. Developer.com webhelyről.

Miután megvan az összes szükséges program, nyissa meg a Unity programot, és indítson el egy új projektet, nevezze el, ahogy akarja. Szükségünk lesz az Apple ARKit beépülő modulra, hogy telefonunk kamerájával felismerhessük a földet és helyezzünk tárgyakat a padlóra. Importáljuk most az Eszközbolt lapra, és keressük az "ARKit" keresést. Létre kell hoznia egy ingyenes Unity -fiókot, ha még nem rendelkezik ilyennel, majd kattintson az import gombra a bővítmény letöltéséhez.

Keresse meg az ARKit mappában lévő példák mappát, és keresse meg az "UnityARKitScene" elemet. Kattintson duplán a megnyitásához. Ezt a jelenetet kiindulópontként fogjuk használni, és innen építkezni. Ez a jelenet alapértelmezés szerint lehetővé teszi a talaj felderítését, és amikor megérinti a képernyőt, egy kocka kerül ebbe a helyzetbe.

Először tegyük négyzetbe építési beállításainkat, hogy ne felejtsük el később megtenni. Kattintson a fájlra, készítse el a beállításokat, és távolítsa el az összes jelenetet a listából. Kattintson a Nyílt jelenetek hozzáadása lehetőségre az aktuális jelenet hozzáadásához. Az utolsó dolog, amit itt be kell állítanunk, az, hogy a lejátszó beállításaiban le kell menni a kötegezonosítóba, és ennek a karakterláncnak a formátuma a com. YourCompanyName. YourAppName, tehát az én esetemben olyasmit csinálok, mint a com. MatthewHallberg. PortalTest.

2. lépés: Állítsa be a jelenetet

Először nézzen balra, és keresse meg a "GeneratePlanes" nevű játékobjektumot. Ezt kiemelve nézzen jobbra, és kattintson a jelölőnégyzetre a letiltásához. Így nem keletkeznek a csúnya kék négyzetek, amikor az ARKit érzékel egy földi síkot. Ezután törölje a "RandomCube" játékobjektumot, mert ezt nem akarjuk látni a jelenetünkben.

Most először létre kell hoznunk a portál ajtót. Törölje azt a kockát, amely a "HitCubeParent" gyermeke. Kattintson a jobb gombbal, és válassza az üres játékobjektum létrehozása lehetőséget. Nevezze át "Portálnak". Most kattintson a jobb egérgombbal az objektumra, és hozzon létre egy kockát, így lesz a portál gyermeke. Nevezze át "PostLeft" -nek, és ez lesz a portálunk bal bejegyzése. Méretezze át úgy, hogy x 1, y 28 és z egy. Tegye ugyanezt a megfelelő bejegyzésnél. Most hozza létre a felső oszlopot, és skálázza az y -t 14 -ig. Fordítsa ezt oldalra, és mozgassa úgy, hogy összekapcsolja a többi oszlopot. A teljes portál mérete 1,3 x 1,4 x 1.

Menj a Google -ba, és írd be a fa vagy a kéreg textúráját. Töltse le az egyik ilyen képet, és húzza át a Unity eszköztárába. Most húzza a képet az összes portálbejegyzésre.

Kattintson ismét a "Portál" objektumra, majd kattintson az összetevő hozzáadása elemre a jobb oldalon. Adja hozzá az "UnityARHitTestExample" szkriptet. Van egy üres hely a "Hit Transform" számára, húzza a "HitCubeParent" objektumot a nyílásba.

3. lépés: Készítsünk néhány részecskét

Most a Unity Particle rendszert fogjuk használni füst- és lebegő részecskehatás létrehozására portálunkon belül. Lépjen a felső menüsáv Eszközök, standard eszközök és részecskerendszerek importálása elemre.

Hozzon létre két üres játékobjektumot a portálon belül, és nevezze az egyiket "SmokeParticles", a másikat "FloatingParticles" -nek.

Adjon hozzá egy részecskerendszer -összetevőt a füstrészecskékhez.

Ennek az összetevőnek számos lehetősége van, de csak párat kell megváltoztatnunk.

Módosítsa a kezdő színt sötétkékre, körülbelül 50% -os átlátszósággal. Készítsük el a kibocsátási arányt 100. Belső alakzatban adjuk meg a sugarat.01. Az alsó renderelő részben a minimális méretet 0,8 -ra, a maximális méretet pedig 5 -re módosítsa. Az anyagkomponensen csak válassza ki a füstanyagot a listából, de ezt később módosítjuk.

Most adjon hozzá egy részecskerendszert a lebegő részecskék játékobjektumhoz, és állítsa az emissziót 500 -ra. Állítsa a kezdő élettartamot 2 -re, a sugarát 10 -re, a minimális részecskeméretet 0,01 -re, a maximális részecskeméretet pedig 0,15 -re. Állítsa az anyagot alapértelmezett részecskévé.

Végül vegye mindkét játék tárgyát, és forgassa el őket 90 fokkal az x -en, és emelje fel a levegőbe, hogy azok a portál ajtajára kerüljenek.

4. lépés: A részecskék lassítása

Mivel azt szeretnénk, hogy ezek a részecskék nagy területet fedjenek le, de lassan is mozogjanak, létre kell hoznunk saját mintafunkciónkat. Tehát kattintson jobb gombbal az eszközök mappájába, és hozzon létre egy új C# szkriptet, és nevezze el "ParticleSample" -nek. Másolja és illessze be ezt a kódot:

a System. Collections használatával;

a System. Collections. Generic használatával; a UnityEngine használatával; public class ParticleSample: MonoBehaviour {private ParticleSystem ps; // Használja ezt az inicializáláshoz void Start () {ps = GetComponent (); StartCoroutine (SampleParticleRoutine ()); } IEnumerator SampleParticleRoutine () {var main = ps.main; main.simulationSpeed = 1000f; ps. Játssz (); hozam hozam új WaitForSeconds (.1f); main.simulationSpeed =.05f; }}

Most húzza ezt a szkriptet minden részecskerendszer játék objektumára.

5. lépés: A portál létrehozása

Most létre kell hoznunk a portált, így jobb klikk a portáljáték objektumra, és létre kell hoznunk egy quadot. Méretezze a quadot, hogy lefedje a teljes portált, ez lesz a portál ablakunk. Az első dolog, amit hozzá kell adnunk, a portál árnyékoló, ez csak olyan objektumokat jelenít meg, amelyeken egy másik árnyékoló található. Kattintson a jobb gombbal az eszközök mappába, és hozzon létre egy új, megvilágítatlan árnyékolót. Távolítson el mindent, és illessze be ezt a kódot:

Shader "Portal/portalWindow"

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

Kattintson a jobb egérgombbal a hierarchiában, és hozzon létre egy új anyagot, nevezze el azt PortalWindowMat néven, az anyag legördülő menüjében keresse meg a portál részt, és válassza a portál ablakot. Húzza ezt az anyagot a portál négyesére.

6. lépés: Részecske -árnyékolók

Kattintson ismét a jobb gombbal az eszközök mappába, és hozzon létre egy új árnyékolót. El kell készítenünk az árnyékolókat a portálon belüli részecskékhez. Cserélje ki az összes kódot ezzel:

Shader "Portál/Részecskék" {

Tulajdonságok {_TintColor ("Színárnyalat", Szín) = (0,5, 0,5, 0,5, 0,5) _MainTex ("Részecske textúra", 2D) = "fehér" {} _InvFade ("Lágy részecskék tényezője", tartomány (0,01, 3,0)) = 1.0 _Stencil ("stencil", int) = 6} Kategória {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 frag fragment frag #pragma target 2.0 #pragma multi_compile_particles #pragma multi_compile_fog #include "UnityCG.cg_cg fix4 _TintColor; structure appdata_t {float4 csúcs: POSITION; fix4 szín: SZÍN; float2 texcoord: TEXCOORD0; UNITY_VERTEX_INPUT_INSTANCE_ID}; structure v2f {float4 csúcs: SV_POSITION; fix4 szín: SZÍN; 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); visszatérés o; } UNITY_DECLARE_DEPTH_TEXTURE (_CameraDepthTexture); float _InvFade; fix4 frag (v2f i): SV_Target {#ifdef SOFTPARTICLES_ON float sceneZ = LinearEyeDepth (SAMPLE_DEPTH_TEXTURE_PROJ (_CameraDepthTexture, UNITY_PROJ_COORD (i.projPos)))); úszó partZ = i.projPos.z; float fade = saturate (_InvFade * (sceneZ-partZ)); i.color.a *= fakulás; #endif fix4 col = 2.0f * i.color * tex2D (_MainTex, i.texcoord); UNITY_APPLY_FOG (i.fogCoord, oszlop); return col; } ENDCG}}}}

Hozzon létre két új anyagot, az egyik a portalSmoke, a másik a portalParticles.

Mindenki válassza ezt az árnyékolót, a legördülő menüből, portálokban, részecskékben. A füstrészecskékhez válasszon füst textúrát, a részecskékhez pedig a részecske textúrát. Módosítsa a füst színét sötétebb kékre, körülbelül 50% -os átlátszósággal. Lépjen a portál minden részecskerendszere megjelenítő összetevőjére, és válassza ki az éppen létrehozott anyagokat.

7. lépés: Hozza létre a Skybox -ot

Most, hogy valóban megteremtsük a fejjel lefelé irányuló megjelenést, mindent sötétkékre kell színeznünk. Ehhez átlátszó skyboxot fogunk használni, ezért készítsen új árnyékolót, és illessze be ezt a kódot:

Shader "Portal/portalSkybox" {

Tulajdonságok {_Tint ("Színárnyalat", Szín) = (.5,.5,.5,.5) [Gamma] _Exposure ("Exposure", Range (0, 8)) = 1.0 _Rotation ("Rotation", Range) (0, 360)) = 0 [NoScaleOffset] _Tex ("Cubemap (HDR)", Cube) = "szürke" {} _Stencil ("StencilNum", int) = 6} SubShader {Címkék {"Queue" = "Háttér" "RenderType" = "Background" "PreviewType" = "Skybox"} Törölje a ZWrite -t Keverjük össze SrcAlpha OneMinusSrcAlpha Stencil {Ref 1 Comp [_Stencil]} Pass {CGPROGRAM #pragma vertex vert #pragma fragment frag #pragma target 2.0 #include "UnC.cginc "samplerCUBE _Tex; half4 _Tex_HDR; half4 _Tint; fél _expozíció; float _Rotation; float3 RotateAroundYInDegrees (float3 csúcs, lebegési fok) {float alpha = fok * UNITY_PI / 180.0; float sina, cosa; sincos (alfa, sina, cosa); float2x2 m = float2x2 (cosa, -sina, sina, cosa); return float3 (mul (m, csúcs.xz), csúcs.y).xzy; } szerkezet appdata_t {float4 csúcs: POSITION; UNITY_VERTEX_INPUT_INSTANCE_ID}; structure v2f {float4 csúcs: 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 (elforgatva); o.texcoord = v.vertex.xyz; visszatérés o; } fix4 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íció; visszatérési fele4 (c,.5); } ENDCG}} Fallback Off}

Most hozzon létre egy új skybox -anyagot, nevezze el "PortalSkybox" -nak, és válassza ki ezt a portalSkybox shader -t a portál menüből. Lépjen az Ablak, Világítás oldalra, és válassza ki ezt a skyboxot, amelyet most készítettünk. Lépjen a fő kamerához, és állítsa az egyértelmű zászlókat a skyboxra. Amíg itt vagyunk, adjunk hozzá néhány elemet a fényképezőgépünkhöz, hogy észlelhessük az ütközéseket. Adjon hozzá egy merev testalkatrészt a fényképezőgéphez, és törölje a jelölést a gravitáció használatáról. Adjon hozzá egy dobozütközőt, és ellenőrizze, hogy a trigger. Állítsa a doboz ütközőit.5 x 1 x 4. Állítsa a vágólapot a fényképezőgépre.01 -re.

8. lépés: Portállogika

Az utolsó dolog, amit meg kell tennünk, létre kell hoznunk azt a logikát, amely vezérli portálunkat. Hozzon létre egy új C# szkriptet, és hívja PortalControllernek.

a System. Collections használatával;

a System. Collections. Generic használatával; a UnityEngine használatával; névtér UnityEngine. XR.iOS {public class PortalController: MonoBehaviour {public Material anyagok; public MeshRenderer meshRenderer; nyilvános UnityARVideo UnityARVideo; private bool isInside = hamis; private bool isOutside = true; // Használja ezt az inicializáláshoz void Start () {OutsidePortal (); } void OnTriggerStay (ütköző oszlop) {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 = igaz; InsidePortal (); }} else {if (isInside) {isInside = false; isOutside = igaz; OutsidePortal (); }}} void OutsidePortal () {StartCoroutine (DelayChangeMat (3)); } void InsidePortal () {StartCoroutine (DelayChangeMat (6)); } IEnumerator DelayChangeMat (int stencilNum) {UnityARVideo.shouldRender = false; hozam visszatérítés új WaitForEndOfFrame (); meshRenderer.enabled = false; foreach (Anyagszőnyeg az anyagokban) {mat. SetInt ("_Stencil", stencilNum); } hozam visszatér új WaitForEndOfFrame (); meshRenderer.enabled = igaz; UnityARVideo.shouldRender = igaz; }}}

Húzza ezt az új szkriptet a portál ablakába. Ez átvált minket a portálra és onnan, amikor a kameránk ütközője ütközik a portál ablakával. Most az összes anyagot megváltoztató funkcióban azt mondjuk az ARkit bővítménynek, hogy ne jelenítse meg a keretet, ezért lépjen a főkamerához, és nyissa meg a UnityARVideo szkriptet. Hozzon létre egy nyilvános bool -t a tetején, és állítsa egyenlőre a true értékkel. Az OnPreRender () függvényben mindent le kell csomagolni egy if utasításba, ahol minden csak akkor fut, ha a shouldRender igaz. Az egész szkriptnek így kell kinéznie:

a rendszer használata;

a System. Runtime. InteropServices használatával; a UnityEngine használatával; a UnityEngine. Rendering használatával; névtér UnityEngine. XR.iOS {public class UnityARVideo: MonoBehaviour {public Material m_ClearMaterial; [HideInInspector] public bool shouldRender = true; privát CommandBuffer m_VideoCommandBuffer; privát Texture2D _videoTextureY; privát Texture2D _videoTextureCbCr; privát Matrix4x4 _displayTransform; privát bool bCommandBufferInitialized; public void Start () {UnityARSessionNativeInterface. ARFrameUpdatedEvent += UpdateFrame; bCommandBufferInitialized = hamis; } void UpdateFrame (UnityARCamera cam) {_displayTransform = új 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 = új CommandBuffer (); m_VideoCommandBuffer. Blit (null, BuiltinRenderTextureType. CurrentActive, m_ClearMaterial); GetComponent (). AddCommandBuffer (CameraEvent. BeforeForwardOpaque, m_VideoCommandBuffer); bCommandBufferInitialized = igaz; } void OnDestroy () {GetComponent (). RemoveCommandBuffer (CameraEvent. BeforeForwardOpaque, m_VideoCommandBuffer); UnityARSessionNativeInterface. ARFrameUpdatedEvent -= UpdateFrame; bCommandBufferInitialized = hamis; } #if! UNITY_EDITOR public void OnPreRender () {if (shouldRender) {ARTextureHandles handles = UnityARSessionNativeInterface. GetARSessionNativeInterface (). GetARVideoTextureHandles (); if (handles.textureY == System. IntPtr. Zero || handles.textureCbCr == System. IntPtr. Zero) {return; } if (! bCommandBufferInitialized) {InitializeCommandBuffer (); } Felbontás currentResolution = Screen.currentResolution; // Y textúra, ha (_videoTextureY == null) {_videoTextureY = Texture2D. CreateExternalTexture (currentResolution.width, currentResolution.height, TextureFormat. R8, false, false, (System. IntPtr) handles.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. IntPtr) handles.texC _videoTextureCbCr.filterMode = FilterMode. Bilinear; _videoTextureCbCr.wrapMode = TextureWrapMode. Repeat; m_ClearMaterial. SetTexture ("_ textureCbCr", _videoTextureCbCr); } _videoTextureY. UpdateExternalTexture (handles.textureY); _videoTextureCbCr. UpdateExternalTexture (handles.textureCbCr); m_ClearMaterial. SetMatrix ("_ DisplayTransform", _displayTransform); }} #else public void SetYTexure (Texture2D YTex) {_videoTextureY = YTex; } public void 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}}

9. lépés: Majdnem kész

Végül, amikor rákattintunk a képernyőre, és elhelyezzük a portált, azt szeretnénk, hogy mindig felénk nézzen. Ehhez menjen a portál "UnityARHitTestExample" parancsfájljához. Cseréljen ki mindent belülről ezzel:

a rendszer használata;

a System. Collections. Generic használatával; névtér UnityEngine. XR.iOS {public class UnityARHitTestExample: MonoBehaviour {public Transform m_HitTransform; public float maxRayDistance = 30.0f; public LayerMask collisionLayer = 1 <0) {foreach (var hitResult in hitResults) {Debug. Log ("Találat!"); 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 currAngle = átalakítani.eulerAngles; transform. LookAt (Camera.main.transform); transform.eulerAngles = új Vector3 (currAngle.x, transform.eulerAngles.y, currAngle.z); return true; }} return false; } // A frissítést frame -nként egyszer hívják meg.) {Ray ray = Camera.main. ScreenPointToRay (Input.mousePosition); RaycastHit sláger; // megpróbáljuk elérni a plugin által generált repülőgép -ütköző játékobjektumok egyikét // gyakorlatilag hasonló a HitTest meghívásához ARHitTestResultType. ARHitTestResultTypeExistingPlaneUsingExtent if (Physics. Raycast (ray, out hit, maxRayDistance, collisionLayer)) {// a pozíciót az m_HitTransform.position = hit.point érintkezési pontból fogjuk megkapni; 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)); // és a forgás a síkütköző transzformációjából 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); ARPoint pont = új ARPoint {x = screenPosition.x, y = screenPosition.y}; // Prioritize reults típusok ARHitTestResultType resultTypes = {ARHitTestResultType. ARHitTestResultTypeExistingPlaneUsingExtent, // ha a használni kívánt végtelen síkok használja ezt: //ARHitTestResultType. ARHitTestResultTypeExistingPlane, ARHitTestResultType. ARHitTestResultTypeHorizontalPlane, ARHitTestResultType. ARHitTestResultTypeFeaturePoint}; foreach (ARHitTestResultType resultType in resultTypes) {if (HitTestWithResultType (pont, eredményTípus)) {return; }}}} #endif}}}

10. lépés: Tedd fel az alkalmazást a telefonodra

Végül végeztünk. Lépjen a fájlba, készítse el a beállításokat, és kattintson a build gombra. Nyissa meg az Xcode -ot, és válassza ki a buildből létrehozott mappát. Válassza ki a fejlesztői csapatát, és tegye az alkalmazást a telefonjára! Érdemes megváltoztatni a részecskék és a skybox színeit az Ön igényeinek megfelelően. Ha bármilyen kérdése van, és megjegyzéseihez forduljon hozzászólásban, jelezze!