استفاده از واقعیت افزوده در اندروید با ARCore

استفاده از واقعیت افزوده در اندروید با ARCore

در این آموزش ، ما درباره واقعیت افزوده بحث خواهیم کرد و با استفاده از Sceneform یک برنامه نمونه  در اندروید پیاده سازی می کنیم.

واقعیت افزوده

واقعیت افزوده (Augmented Reality یا AR) روز به روز محبوبیت بیشتری پیدا می کند. واقعیت افزوده برای نشان دادن مدلها یا گرافیکی های سه بعدی مجازی در دنیای واقعی در دوربین تلفن همراه شما استفاده می شود. واقعیت افزوده برای نشان دادن موارد شبیه سازی شده در دنیای واقعی مانند رنگ یا دکوراسیونی که می خواهید روی دیوار خود ببینید ، مفید است.

واقعیت افزوده جایی بین واقعیت مجازی و محیط واقعی قرار دارد.

ARCore در اندروید

Google برای کمک به توسعه واقعیت افزوده (AR) کتابخانه ARCore را ارائه داده است.

ARCore ردیابی حرکت را در دنیای واقعی از طریق دوربین انجام می دهد تا مسیرهایی را در سطوح ایجاد کند که بتوانیم مدلها و گرافیکی های سه بعدی خود را بر روی آنها قرار دهیم.

SceneForm یک چارچوب سه بعدی است که اخیراً ارائه شده و جایگزین بهتری برای OpenGL است. از نظر برخی برنامه نویسان OpenGL برای برنامه نویسی ترسناک به نظر می رسد.

SceneForm به ما امکان می دهد بدون نیاز به یادگیری گرافیک یا OpenGL ، اشیا سه بعدی را به سرعت رندر کنیم.

برای مشاهده و ارائه مدل های سه بعدی می توانیم افزونه « Google Sceneform Tools » را در Android Studio نصب کنیم.

می توانید به https://poly.google.com بروید و یک نمونه مدل را بارگیری کنید.

به طور معمول ، از فرمت های OBJ و GLTX برای ارائه تصاویر افزوده استفاده می شود.

حال بیایید اولین برنامه واقعیت افزوده (AR) خود را  بسازیم  و از مدل سه بعدی فوق (که از سایت https://poly.google.com دانلود کردید ) به عنوان تصویر واقعیت افزوده (AR) استفاده کنیم.

ساختار پروژه نمونه واقعیت افزوده

در پروژه فوق ، ما یک پوشه به نام sampledata ایجاد کرده ایم ، جایی که فایل obj و mtl را که قبلاً دانلود کردیم، اضافه می کنیم.

نیازمندی زیر را در build.gradle پروژه خود اضافه کنید:

classpath 'com.google.ar.sceneform:plugin:1.0.1'

نیازمندی زیر را نیز در فایل build.gradle داخل ماژول app پروژه خود اضافه کنید:

implementation 'com.google.ar.sceneform.ux:sceneform-ux:1.0.0'

همچنین باید پلاگین ar را در فایل Gradle برنامه خود تنظیم کنید. پلاگین زیر را در زیر وابستگی ها (dependencies) اضافه کنید:

apply plugin: 'com.google.ar.sceneform.plugin'

ما از تصویر زیر استفاده کرده ایم ، می توانید آن را از لینک زیر بارگیری کرده و در فهرست sampledata قرار دهید:

https://poly.google.com/view/1HpVP5w2x1D

اکنون بر روی فایل obj کلیک راست کرده و گزینه «import sceneform assets» را انتخاب کنید:

عمل فوق به صورت خودکار asset های قابل رندر واقعیت افزوده sceneform  را ایجاد می کند و خطوط زیر را به طور خودکار در انتهای build.gradle ماژول app اضافه می کند:

sceneform.asset('sampledata/Coffee Cup_final.obj',
        'default',
        'sampledata/Coffee Cup_final.sfa',
        'src/main/assets/Coffee Cup_final')

فایل build.gradle برنامه سرانجام به این شکل است:

// Clicksite ( clicksite.ir@gmail.com )
apply plugin: 'com.android.application'

android {
    compileSdkVersion 28
    defaultConfig {
        applicationId "com.clicksite.androidarsceneform"
        minSdkVersion 24
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0-alpha3'
    implementation 'com.android.support.constraint:constraint-layout:1.1.1'
    implementation 'com.android.support:design:28.0.0-alpha3'
    testImplementation 'junit:junit:4.12'
    implementation 'com.google.ar.sceneform.ux:sceneform-ux:1.0.0'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

apply plugin: 'com.google.ar.sceneform.plugin'

sceneform.asset('sampledata/Coffee Cup_final.obj',
        'default',
        'sampledata/Coffee Cup_final.sfa',
        'src/main/assets/Coffee Cup_final')

Android ARCore Sceneform به نسخه جاوا 8 یا بالاتر نیاز دارد.

sja و sjb پرونده Sceneform Asset Description و Sceneform Binary هستند. فایل sjb در نمایشگر سه بعدی قابل مشاهده است و داخل APK حاصل قرار می گیرد. از فایل sja برای تنظیم خصوصیات فایل sjb استفاده می شود. می توانید مقیاس مدل را در پرونده sja تغییر دهید.

پیاده سازی واقعیت افزوده

برای پیکربندی ARCore در برنامه خود ، مجوز و فراداده زیر را به پرونده AndroidManifest.xml خود اضافه کنید:

<uses-permission android:name="android.permission.CAMERA" />
    <uses-feature
        android:name="android.hardware.camera.ar"
        android:required="true" />

فراداده درون تگ application قرار می گیرد:

<meta-data
            android:name="com.google.ar.core"
            android:value="required" />

کد لایوت activity_main.xml در زیر آورده شده است:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            android:background="?android:attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_input_add" />

</android.support.design.widget.CoordinatorLayout>

کد content_main.xml در زیر آورده شده است:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity"
    tools:showIn="@layout/activity_main">

    <fragment
        android:id="@+id/sceneForm"
        android:name="com.google.ar.sceneform.ux.ArFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

ما فرگمنت را به عنوان ArFragment تنظیم کرده ایم. ArFragment بررسی می کند که آیا دستگاه با ARCore سازگار است.

همچنین ، بررسی می کند که آیا اجازه دوربین گرفته شده است. اگر اینگونه نباشد ، به صورت خودکار مجوز را درخواست می کند.

همچنین ، از شما می خواهد ARCore را توسط برنامه Google دانلود کنید.

لیست دستگاه های سازگار با ARCore  را می توانید در لینک زیر ببینید:

https://developers.google.com/ar/discover/supported-devices

کد کلاس MainActivity.java در زیر آورده شده است:

// Clicksite( clicksite.ir@gmail.com )
package com.clicksite.androidarsceneform;

import android.graphics.Point;
import android.net.Uri;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;

import com.google.ar.core.Anchor;
import com.google.ar.core.Frame;
import com.google.ar.core.HitResult;
import com.google.ar.core.Plane;
import com.google.ar.core.Trackable;
import com.google.ar.sceneform.AnchorNode;
import com.google.ar.sceneform.rendering.ModelRenderable;
import com.google.ar.sceneform.ux.ArFragment;
import com.google.ar.sceneform.ux.TransformableNode;

import java.util.List;
import java.util.function.Consumer;
import java.util.function.Function;

public class MainActivity extends AppCompatActivity {

    ArFragment arFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                addObject(Uri.parse("Coffee Cup_Final.sfb"));
            }
        });

        arFragment = (ArFragment) getSupportFragmentManager().findFragmentById(R.id.sceneForm);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

    private void addObject(Uri parse) {
        Frame frame = arFragment.getArSceneView().getArFrame();
        Point point = getScreenCenter();
        if (frame != null) {
            List<HitResult> hits = frame.hitTest((float) point.x, (float) point.y);

            for (int i = 0; i < hits.size(); i++) {
                Trackable trackable = hits.get(i).getTrackable();
                if (trackable instanceof Plane && ((Plane) trackable).isPoseInPolygon(hits.get(i).getHitPose())) {
                    placeObject(arFragment, hits.get(i).createAnchor(), parse);
                }
            }
        }
    }

    private final void placeObject(final ArFragment fragment, final Anchor createAnchor, Uri model) {
        ModelRenderable.builder().setSource(fragment.getContext(), model).build().thenAccept((new Consumer() {
            public void accept(Object var1) {
                this.accept((ModelRenderable) var1);
            }

            public final void accept(ModelRenderable it) {
                if (it != null)
                    MainActivity.this.addNode(arFragment, createAnchor, it);
            }
        })).exceptionally((new Function() {
            public Object apply(Object var1) {
                return this.apply((Throwable) var1);
            }

            @Nullable
            public final Void apply(Throwable it) {
                AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
                builder.setMessage(it.getMessage()).setTitle("error!");
                AlertDialog dialog = builder.create();
                dialog.show();
                return null;
            }
        }));
    }

    private void addNode(ArFragment fragment, Anchor createAnchor, ModelRenderable renderable) {

        AnchorNode anchorNode = new AnchorNode(createAnchor);
        TransformableNode transformableNode = new TransformableNode(fragment.getTransformationSystem());
        transformableNode.setRenderable(renderable);
        transformableNode.setParent(anchorNode);
        fragment.getArSceneView().getScene().addChild(anchorNode);
        transformableNode.select();
    }

    private Point getScreenCenter() {
        View vw = findViewById(android.R.id.content);
        return new Point(vw.getWidth() / 2, vw.getHeight() / 2);
    }
}

لنگر (anchor) موقعیتی است که مدل یا گره در صفحه قرار می گیرد. در اینجا از مرکز صفحه برای آن استفاده شده است.

در متد addObject  فرگمنت ARFragment  نقاط مورد نظر را در صفحه با استفاده از ردیابی حرکت بدست می آورد.

placeObject گره را به صورت غیر همزمان به مرکز صفحه تنظیم می کند.

تصاویر زیر خروجی برنامه است:

در خروجی نهایی ، فنجان بر روی صفحه ای قرار دارد که از نقاط سفید تشکیل شده است. تصویر بالا مربوط به Samsung S8 است.

به عنوان یک تمرین اکنون مقیاس مدل را در فایل SFA تغییر دهید و نتیجه را بررسی کنید!