Jak vytvořit aplikaci ARKit za 5 minut pomocí React Native

V WWDC 2017 Apple vydal ARKit, po Google a Facebook do Augmented Reality. Je to velký krok, protože iPhone téměř všude se stane prvním rozšířeným zařízením AR. Vývojáři budou mít možnost vyzkoušet své produkty AR na veřejnosti. Je také úžasné, že každý osobní vývojář může použít ARKit k napsání své vlastní AR aplikace.

Apple učinil ARKit velmi snadno použitelným, ale stále vyžaduje hodně úsilí, aby bylo správně nastaveno a spuštěno první demo, zejména pro ty, kteří nejsou příliš obeznámeni s 3D programováním. V tomto článku vám ukážeme, že pomocí React Native a reagovat-native-arkit můžete přeskočit netriviální nastavení a budete moci napsat svou aplikaci AR za pouhých 5 minut.

Nebudu se zabývat podrobnostmi toho, jak ARKit funguje, protože nejsou nutné. Pravděpodobně nejlepším způsobem, jak to pochopit, je mít spuštěný na vašem iPhone a vidět výsledky očima. Poté, pokud máte zájem o jeho mechanismus, můžete se obrátit na oficiální dokumentaci ARKit, kde najdete technické podrobnosti.

Předpoklady

1. iOS 11 beta, Xcode 9 beta a zařízení s procesory A9 +

ARKit je stále v beta verzi, takže musíte mít vývojářský účet Apple a upgradovat váš iPhone / iPad na iOS 11 beta. Pokud jste tak ještě neučinili, zaregistrujte se do programu Apple Beta Software Program a postupujte podle těchto pokynů a upgradujte své zařízení.

Poznámka: ARKit vyžaduje procesory A9 nebo novější, což znamená, že musíte mít iPhone 6s / 7 / SE nebo iPad 2017 / Pro.

K vytvoření aplikace ARKit je také třeba nainstalovat Xcode 9 beta. Stáhněte si ji zde.

2. Reagujte Nativní

Facebook představil React Native jako knihovnu napříč platformami pro vývoj aplikací pro iOS / Android pomocí JavaScriptu. Pokud ji používáte poprvé, přejděte do části Začínáme a postupujte podle části Stavební projekty s nativním kódem a nainstalujte React Native a spusťte první ukázku. Chcete také vědět, jak spouštět React Native Apps na zařízeních, protože na simulátorech nelze spustit ARKit. Po těchto tutoriálech by vám nemělo trvat déle než půl hodiny.

Spusťte první aplikaci ARKit

Nyní je čas napsat naši první aplikaci ARKit! Projděte si níže uvedené pokyny a většina z nich by měla být přímá.

  • Vytvořte nový projekt React Native a nainstalujte reag-native-arkit
Reakce-nativní init MyFirstARKitApp
cd MyFirstARKitApp
npm install - saveave-native-arkit
  • Propojte reakční-nativní-arkit, abychom mohli volat nativní kódy pomocí JavaScriptu
reakce-nativní odkaz reakce-nativní-arkit
  • Otevřete index.ios.js a nahraďte vše následujícím
// index.ios.js
importovat React, {Component} z 'reagovat';
importovat {AppRegistry, View} z 'reag-native';
importovat {ARKit} z 'reagovat-native-arkit';
export výchozí třídy Aplikace rozšiřuje komponentu {
  poskytnout() {
    vrátit se (
      
        
          
        
      
    );
  }
}
AppRegistry.registerComponent ('MyFirstARKitApp', () => App);
  • Přejděte do složky ios a nezapomeňte použít Xcode 9 beta k otevření MyFirstARKitApp.xcodeproj. ARKit použije kameru k záznamu, analýze a zobrazení reality, proto musíme přidat nastavení ochrany osobních údajů, abychom jí měli přístup. Otevřete program Info.plist a přidejte klíč Ochrana osobních údajů - Popis použití fotoaparátu s připomenutím pro uživatele, například „ARKit vyžaduje přístup z kamery.“
  • V Xcode stiskněte + + ,, vyberte Konfiguraci budovy, která má být uvolněna, a zavřete vyskakovací dialog. Připojte svůj iPhone k počítači a klikněte na tlačítko Spustit. Voila! Právě jsme vytvořili naši první aplikaci ARKit!

Spusťte aplikaci a počkejte několik sekund, než se ARKit inicializuje. Pak byste měli mít možnost vidět krychli připojenou k 3D ose plovoucí před vámi. Můžete trochu přesunout svůj iPhone a vidět, jak krychle zůstává v prostoru, jak to ve skutečnosti existuje. Toto je hlavní rys ARKitu. Dosahuje toho v podstatě proto, že má algoritmus pro sledování pohybu vašeho iPhone a zpětný výpočet, kde se má objekt zobrazit na obrazovce, takže se cítí, jako by objekt zůstal ve skutečnosti na pevné pozici.

Něco více

Nyní můžeme do scény přidat další objekty. ARKit podporuje 9 základních geometrií. Otevřete soubor index.ios.js a upravte komponentu ARKit


  
  
  
  
  
  
  
  
  

Znovu sestavte aplikaci a před sebou uvidíte 9 geometrií. Věřím, že tyto parametry jsou zcela samovysvětlující, a můžete s nimi hrát, abyste vytvořili fantastický složený objekt.

Mezi další dvě hlavní vlastnosti, které ARKit má, patří detekce letadel a odhad světla. Jsou také podporovány reakcí-native-arkit. Naše první aplikace ve skutečnosti dělá ty na pozadí. Zkuste přepínat mezi světlým a tmavým prostředím a uvidíte, jak se osvětlení objektů přizpůsobuje pozadí. K detekci letadel však potřebujeme další práci, abychom ji nastavili, a vysvětlím, jak to udělat v dalším článku.

Doufám, že si s ARKitem zatím hrajete rádi. Je to opravdu jednoduché, že? Stále pracuji na přenesení dalších funkcí ARKit do reaktivního-nativního arkitu a některé další efekty, jako jsou Transmission Gate a fyzicky založené vykreslování, budou v React Native velmi brzy možné. Budu zveřejňovat další návody, abych ukázal, jak je implementovat. Jste také vítáni, abyste zkontrolovali moje repozitáře GitHubu ohledně nejnovějších aktualizací.