Augmented Reality ist eine Technologie, die virtuelle Elemente in der realen Welt überlagert und so eine gemischte Umgebung schafft, die das Benutzererlebnis verbessert. Mit der zunehmenden Beliebtheit von AR suchen immer mehr Entwickler nach Möglichkeiten, diese Technologie in ihre Anwendungen zu integrieren. In diesem Beitrag implementieren wir grundlegende AR mithilfe von SceneView.

1️⃣Konfigurieren Sie den Gradle

Fügen Sie die ArSceneView-Abhängigkeit (Teil von SceneView) hinzu app/build.gradle. Diese Abhängigkeit umfasst Filament und ARCore.

// 3D and ARCore
implementation 'io.github.sceneview:arsceneview:0.9.7'

defaultConfig {
        ...
        minSdk 24  // minSdk to use sceneview is 24
        ...
    }

Das von SceneView unterstützte Format ist .glbund .gltf. Wenn Sie es nicht haben, können Sie das Gleiche bekommen, das ich hier verwendet habe .

Erstellen Sie dann assetsein Verzeichnis innerhalb maindes Verzeichnisses. Optional können Sie auch modelsein Verzeichnis innerhalb der Assets erstellen. Als nächstes importieren Sie Ihr Modell in das Verzeichnis, indem Sie es aus Ihrem Ordner ziehen oder kopieren und einfügen.

3️⃣Fügen Sie ArSceneView zum Layout hinzu

ArSceneViewZu Ihrem Layout hinzufügen . In dieser Ansicht wird die Kamera angezeigt und Ihr 3D-Modell darauf platziert.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <io.github.sceneview.ar.ArSceneView
        android:id="@+id/arSceneView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Erstellen ArModelNode, um die Platzierung, Position und Verankerung des Modells zu definieren.

Für die placementModegibt es

PlacementMode.INSTANT: Schnelle Platzierung

PlacementMode.DEPTH: Genaue Platzierung

PlacementMode.PLANE_HORIZONTAL: Nur auf horizontaler Ebene/Wänden

PlacementMode.PLANE_VERTICAL: Nur auf vertikaler Ebene/Wänden

PlacementMode.PLANE_HORIZONTAL_AND_VERTICAL: Nur auf horizontaler und vertikaler Ebene/Wänden

PlacementMode.BEST_AVAILABLE: Automatische Verfeinerung der Genauigkeitsplatzierung

hitPositionist der Knoten Kamera-/Bildschirm-/Ansichtsposition, an dem der Treffer ausgeführt wird, um eine AR-Position zu finden.

followHitPositionsorgt dafür, dass der Knoten der Kamera/dem Bildschirm folgt

instantAnchorverankert den Knoten an der ersten geeigneten Stelle.

class MainActivity : AppCompatActivity() {

    lateinit var arSceneView: ArSceneView
    var modelNode : ArModelNode? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        arSceneView = findViewById(R.id.arSceneView)

        modelNode = ArModelNode(
            placementMode = PlacementMode.BEST_AVAILABLE,
            hitPosition = Position(x = 0.0f, y = 0.0f, z = -2.0f),
            followHitPosition = true,
            instantAnchor = true
        )
       
    }
}

Mit ArModelNodeladen wir das Modell per Aufruf aus unseren Assets, loadModelGlbAsync()da wir das .glb-Format für das Modell verwenden. Wenn Sie es innerhalb eines Coroutine-Bereichs laden möchten, können Sie auch aufrufen loadModel().

Sie können die Modelle auch aus dem Internet laden, indem Sie den Link in übergeben glbFileLocation.

scaleToUnitwird verwendet, um das Modell beim Laden zu skalieren.

centerOriginist die Ursprungsposition des Mittelpunkts innerhalb des Modells. Die Werte liegen zwischen -1,0 und 1,0 und entsprechen den Prozentsätzen der Modellgrößen.

class MainActivity : AppCompatActivity() {

    lateinit var arSceneView: ArSceneView
    var modelNode : ArModelNode? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        ...

        modelNode = ArModelNode(...)

        modelNode?.loadModelGlbAsync(
            context = this@MainActivity,
            glbFileLocation = "models/panda.glb",
            autoAnimate = true,
            scaleToUnits = 0.9f,
            centerOrigin = Position(y = -1.0f),
            onError = {exception ->
                Toast.makeText(this, exception.message.toString(), Toast.LENGTH_SHORT).show()
            },
            onLoaded = {modelInstance ->

            }
        )
       
    }
}

Um das geladene Modell anzuzeigen, rufen Sie addChild()die Methode auf ArSceneView, indem Sie den Modellknoten übergeben.

class MainActivity : AppCompatActivity() {

    lateinit var arSceneView: ArSceneView
    var modelNode : ArModelNode? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        ...

        modelNode = ArModelNode(
            ...
        )

        modelNode?.loadModelGlbAsync(
            ...
        )

        modelNode?.let {
            arSceneView.addChild(it)
        }
    }
}

package com.rizqi.ar

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Toast
import io.github.sceneview.ar.ArSceneView
import io.github.sceneview.ar.node.ArModelNode
import io.github.sceneview.ar.node.PlacementMode
import io.github.sceneview.math.Position

class MainActivity : AppCompatActivity() {

    lateinit var arSceneView: ArSceneView
    var modelNode : ArModelNode? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        arSceneView = findViewById(R.id.arSceneView)

        modelNode = ArModelNode(
            placementMode = PlacementMode.BEST_AVAILABLE,
            hitPosition = Position(x = 0.0f, y = 0.0f, z = -2.0f),
            followHitPosition = true,
            instantAnchor = true
        )
        modelNode?.loadModelGlbAsync(
            context = this@MainActivity,
            glbFileLocation = "models/panda.glb",
            autoAnimate = true,
            scaleToUnits = 0.9f,
            centerOrigin = Position(y = -1.0f),
            onError = {exception ->
                Toast.makeText(this, exception.message.toString(), Toast.LENGTH_SHORT).show()
            },
            onLoaded = {modelInstance ->

            }
        )
        modelNode?.let {
            arSceneView.addChild(it)
        }
    }
}

Juhuu , wir lernen gerade, wie man Augmented Reality (AR) in einer Android-App implementiert. Wir zeigen das 3D-Modell erfolgreich in der realen Welt über unser Telefon an. Für die Zusammenfassung müssen wir erstellen, ArModelNodeum die Positionskonfiguration zu definieren. Mithilfe des Knotens laden wir das Modell und zeigen es in an ArSceneView.

Vielen Dank, dass Sie bis hierhin gefolgt sind. Folgen Sie mir , um mehr über Beiträge zur Android-Entwicklung zu erfahren. Lassen Sie uns auf LinkedIn und Instagram vernetzen

Referenz

SceneView – Github

SceneView | 3D- und AR-Ansicht für Android, iOS und React Native (Android und iOS) arbeiten mit ARCore/ARKit und Google Filament