ARKit: come rilevare, tenere traccia e visualizzare un video con Alpha sopra un piano di immagini

Immagine riconosciuta e video visualizzato in Realtà Aumentata.

Rilevare e visualizzare un video sopra un'immagine usando ARKit può essere complicato quando si inizia a sviluppare per la prima volta. Questa guida ha lo scopo di aiutare rapidamente gli sviluppatori a raggiungerlo utilizzando ARKit e fondendo il progetto di esempio di riconoscimento delle immagini di Apple con un paio di righe di codice personalizzate.

Prima di tutto, per implementare ARKit dobbiamo aggiungere uno storyboard con un ARSCNView. Questa scena avrà il compito di utilizzare la telecamera per tracciare il mondo reale intorno all'utente. È inoltre necessario aggiungere una cartella di risorse Risorse AR per memorizzare tutte le immagini che verranno rilevate e tracciate.

Tracciamento delle immagini

È importante aggiungere le immagini che desideri rilevare nella cartella Risorse AR del nostro progetto:

Nota: le immagini da riconoscere possono anche essere ottenute da un'API e create a livello di programmazione.
Immagini delle cartelle delle risorse AR

Nel nostro ViewController dobbiamo aggiungere un riferimento a ARSCNView e applicare i delegati in viewDidLoad e dobbiamo anche aggiungere un accessor per la sessione sceneView.

Nel nostro viewDidAppear dobbiamo aggiungere un metodo resetTracking:

Il metodo resetTracking si occupa di:

  • Avvio di una sessione ARS
  • Impostazione della configurazione di ARSession
  • Dire alla ARSession quali immagini conosciute verranno tracciate

Quando viene rilevata una delle immagini aggiunte alla cartella Risorse AR durante l'utilizzo della videocamera del dispositivo, ARSCNView chiama il seguente delegato:

Il delegato contiene informazioni sull'immagine rilevata all'interno dell'ancora e, una volta rilevata, mostra il nome dell'immagine rilevata:

Immagine delle risorse AR rilevata.

Visualizzazione di un video sopra un piano immagine rilevato

Possiamo già rilevare un'immagine con quel codice. Ora l'idea è quella di visualizzare un video in cima all'immagine. Dai un'occhiata al delegato in cui è già presente l'immagine rilevata:

L'idea è di aggiungere un metodo displayVideo all'interno di un helper passando tre parametri:

  • l'immagine di riferimento rilevata
  • il nodo
  • il video da mostrare

Il metodo displayVideo all'interno di VideoHelper è responsabile della visualizzazione del video. Fondamentalmente fa quanto segue:

  1. Ottieni la larghezza e l'altezza fisica dell'immagine di riferimento
  2. Crea un nodo per contenere il video player
  3. Crea il video player
  4. Aggiungi il nodo che tiene il lettore video al nodo rilevato originale
  5. Imposta il nodo video

Il metodo setupVideoOnNode è incaricato di impostare il video all'interno del piano del supporto video:

  1. Crea un videoPlayer
  2. Crea un SKVideoNode con videoPlayer che contiene il video
  3. Crea uno spriteKitScene per posizionare il video all'interno
  4. Aggiungi una trasparenza alfa
  5. Riproduzione del video
  6. Riproduzione in loop del video

Trasparenza video alfa

Si noti che getAlphaShader viene aggiunto da una classe helper EffectNodeHelper che si occupa dell'applicazione di un SKShader. Un oggetto SKShader contiene uno shader di frammenti OpenGL ES personalizzato, utilizzato per personalizzare il comportamento del disegno di molti diversi tipi di nodi. In questo caso, viene applicato un alfa.

Gerarchia dei nodi illustrata.

Risultato

Di conseguenza, quando viene rilevata l'immagine riconoscibile, un video con trasparenza alfa viene mostrato nella parte superiore del piano rilevato.

Il video con trasparenza alfa viene visualizzato nella parte superiore dell'immagine riconosciuta.

È importante ricordare che le immagini devono avere buoni punti di riferimento e contrasti per funzionare con il tracciamento delle immagini in iOS12.

Un progetto demo è disponibile qui. È fondamentalmente il progetto di esempio del riconoscimento di immagini di Apple con alcune modifiche per aggiungere il video sopra l'immagine.

Risorse utili

  • Tracciamento delle immagini con ARKit 2.0
  • Un'introduzione al monitoraggio delle immagini di ARKit 2
  • Riproduzione di video in Realtà Aumentata utilizzando ARKit

Conosci qualche suggerimento? Lascia un commento! Lo apprezziamo davvero.

Major League è un'agenzia per il personale e l'approvvigionamento di Lateral View.