A Realidade Aumentada é uma tecnologia que sobrepõe elementos virtuais no mundo real, criando um ambiente misto que aprimora a experiência do usuário. Com a crescente popularidade do AR, mais e mais desenvolvedores estão procurando maneiras de integrar essa tecnologia em seus aplicativos. Neste post, vamos implementar AR básico usando SceneView.

1️⃣Configurar o Gradle

Adicione a dependência ArSceneView (parte do SceneView) em app/build.gradle. Essa dependência inclui Filament e ARCore.

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

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

O formato suportado pelo SceneView é .glbe .gltf. Se você não tiver, pode obter o mesmo que usei aqui .

Em seguida, crie assetsum diretório dentro maindo diretório. Opcionalmente, você também pode criar modelsum diretório dentro dos ativos. Em seguida, importe seu modelo para o diretório arrastando ou copiando-o e colando-o de sua pasta.

3️⃣Adicione ArSceneView ao layout

Adicione ArSceneViewao seu layout. Esta visualização exibirá a câmera e colocará seu modelo 3D nela.

<?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>

Crie ArModelNodepara definir como o posicionamento, a posição e a âncora do modelo.

Para o placementMode, existem

PlacementMode.INSTANT: Posicionamento rápido

PlacementMode.DEPTH: Posicionamento preciso

PlacementMode.PLANE_HORIZONTAL: Apenas em planos/paredes horizontais

PlacementMode.PLANE_VERTICAL: Apenas em planos verticais/paredes

PlacementMode.PLANE_HORIZONTAL_AND_VERTICAL: Apenas em planos/paredes horizontais e verticais

PlacementMode.BEST_AVAILABLE: Posicionamento de precisão de refino automático

hitPositioné a posição da câmera/tela/visualização do nó onde será feito o acerto para encontrar uma posição AR.

followHitPositionfará com que o nó siga a câmera/tela

instantAnchorancorará o nó no primeiro local adequado.

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
        )
       
    }
}

Usando o ArModelNode, carregamos o modelo de nossos ativos chamando loadModelGlbAsync()porque usamos o formato .glb para o modelo. Ou, se quiser carregá-lo dentro de um Escopo de Coroutine, você pode chamar loadModel().

Você também pode carregar os modelos da internet passando o link em glbFileLocation.

scaleToUnité usado para dimensionar o modelo quando ele é carregado.

centerOriginé a posição de origem do ponto central dentro do modelo. Os valores estão entre -1,0 e 1,0 correspondendo às porcentagens dos tamanhos dos modelos.

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 ->

            }
        )
       
    }
}

Para exibir o modelo carregado, chame addChild()o método from ArSceneViewpassando o nó do modelo.

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)
        }
    }
}

Yay , acabamos de aprender como implementar a Realidade Aumentada (AR) no aplicativo Android. Exibimos com sucesso o modelo 3D no mundo real através do nosso telefone. Para a recapitulação, precisamos criar ArModelNodepara definir a configuração da posição. Usando o nó, carregamos o modelo e o exibimos em arquivos ArSceneView.

Obrigado por seguir até aqui. Siga-me para saber mais sobre as postagens de desenvolvimento do Android. Vamos nos conectar no LinkedIn e no Instagram

Referência

SceneView — Github

SceneView | 3D e AR View para Android, iOS e React Native (Android e iOS) trabalhando com ARCore/ARKit e Google Filament