手把手带你写AR应用--AR尺子预览

文章:

  1. AR尺子--简介
  2. AR尺子--预览

效果:

预览并渲染数据.gif

目录:

image.png

1. 前序

本篇文章较长。希望读者能够认真读下去。不管你是刚接触ARCore以及OpenGL的
程序员还是。马上要毕业,把该项目拿来用作毕设的学生。我相信只要你能坚持下去,一定会对你有所帮助。
该文章代码较多。部分解释都集中在代码的注解中。在最后还有项目的GitHub地址。希望大家耐着性子看下去。尽量写的详细,希望能帮到大家

2. 集成ARCore

1. 向 manifest 添加 AR 选项。并声明Camera权限
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="com.jtl.arcoredemo">
          
    //声明Camera权限
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-feature android:name="android.hardware.camera" />
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>

                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
        
        //添加AR选项,在启动应用时会判断是否安装了ARCore
        <meta-data android:name="com.google.ar.core" android:value="required" />
    </application>

</manifest>

2. 添加依赖库
android {
    ...
    //要求JDK 1.8
    compileOptions {
        sourceCompatibility 1.8
        targetCompatibility 1.8
    }
}
//在APP Gradle中添加ARCore的依赖库(截至2019.5.4,最新版本为1.8.0)
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'

    implementation "com.google.ar.sceneform:core:1.8.0"
}
3. 请求摄像机权限

这里引入一个PermissionHelper类

/**
 * 权限帮助类
 */
public final class PermissionHelper {
    private static final int CAMERA_PERMISSION_CODE = 0;
    private static final String CAMERA_PERMISSION = Manifest.permission.CAMERA;

    /**
     * 是否有相机权限
     * @param activity
     * @return
     */
    public static boolean hasCameraPermission(Activity activity) {
        return ContextCompat.checkSelfPermission(activity, CAMERA_PERMISSION)
                == PackageManager.PERMISSION_GRANTED;
    }

    /**
     * 请求相机权限
     * @param activity
     */
    public static void requestCameraPermission(Activity activity) {
        ActivityCompat.requestPermissions(
                activity, new String[]{CAMERA_PERMISSION}, CAMERA_PERMISSION_CODE);
    }
    
    /**
     * 展示申请权限的相应解释
     * @param activity
     * @return
     */
    public static boolean shouldShowRequestPermissionRationale(Activity activity) {
        return ActivityCompat.shouldShowRequestPermissionRationale(activity, CAMERA_PERMISSION);
    }

    /**
     * 打开设置界面
     *
     * @param activity
     */
    public static void launchPermissionSettings(Activity activity) {
        Intent intent = new Intent();
        intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
        intent.setData(Uri.fromParts("package", activity.getPackageName(), null));
        activity.startActivity(intent);
    }
    
    
}

在Activity中做相应的权限申请操作

    @Override
    protected void onResume() {
        super.onResume();
        // ARCore 申请相机权限操作
        if (!PermissionHelper.hasCameraPermission(this)) {
            PermissionHelper.requestCameraPermission(this);
            return;
        }
    }
    
    @Override
    public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
        if (!PermissionHelper.hasCameraPermission(this)) {
            Toast.makeText(this, "该应用需要相机权限", Toast.LENGTH_LONG)
                    .show();
            //弹出相应解释
            if (!PermissionHelper.shouldShowRequestPermissionRationale(this)) {
                // 直接跳至设置 修改权限
                PermissionHelper.launchPermissionSettings(this);
            }
            finish();
        }
    }

3. 初识Session

1. 什么是Session:

Session也称为会话,是ARCore最核心的一个类。他可以获取相机数据。并算出相应的锚点信息以及视矩阵投影矩阵等。这里的部分内容会在后面进行具体叙述。

2. 初始化Session

首先判断设备是否支持ARCore

@Override
    protected void onResume() {
        super.onResume();
        // ARCore 申请相机权限操作
        ...
        
        Exception exception =null;
        String msg =null;
        //初始化Session
        if (mSession==null){
            try {
                //判断是否安装ARCore
                switch (ArCoreApk.getInstance().requestInstall(this,!isInstallRequested)){
                    case INSTALL_REQUESTED:
                        isInstallRequested=true;
                        break;
                    case INSTALLED:
                        Log.i(TAG,"已安装ARCore");
                        break;
                }
                mSession=new Session(this);
            } catch (UnavailableArcoreNotInstalledException
                    | UnavailableUserDeclinedInstallationException e) {
                msg = "Please install ARCore";
                exception = e;
            } catch (UnavailableApkTooOldException e) {
                msg = "Please update ARCore";
                exception = e;
            } catch (UnavailableSdkTooOldException e) {
                msg = "Please update this app";
                exception = e;
            } catch (UnavailableDeviceNotCompatibleException e) {
                msg = "This device does not support AR";
                exception = e;
            } catch (Exception e) {
                msg = "Failed to create AR session";
                exception = e;
            }
            //有异常说明不支持或者没安装ARCore
            if (msg != null) {
                Log.e(TAG, "Exception creating session", exception);
                return;
            }
        }
        //该设备支持并且已安装ARCore
        try {
            //Session 恢复resume状态
            mSession.resume();
        } catch (CameraNotAvailableException e) {
            Log.e(TAG, "Camera not available. Please restart the app.");
            mSession = null;
            
            return;
        }
    }
3. 开始或恢复Session(会话)
@Override
    protected void onResume() {
        super.onResume();
        // ARCore 申请相机权限操作
        ...

        Exception exception =null;
        String msg =null;
        //初始化Session
        if (mSession==null){
            //判断是否支持ARCore
            ...
        }
        
        //该设备支持并且已安装ARCore
        try {
            //Session 恢复resume状态
            mSession.resume();
        } catch (CameraNotAvailableException e) {
            Log.e(TAG, "Camera not available. Please restart the app.");
            mSession = null;
            
            return;
        }
    }
4. 暂停关闭Session(会话)
    @Override
    protected void onPause() {
        super.onPause();
        if (mSession!=null){
            mSession.pause();
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        if (mSession!=null){
            mSession.close();
        }
    }

4.OpenGL渲染

1. 简单介绍:

首先这里只是简单介绍一下OpenGL,具体的会在后面进行具体叙述。
OpenGL是一个渲染协议。很多渲染引擎底层就是用OpenGL实现的。现在的移动手机都是用的OpenGL ES2.0,几乎涵盖了所有的苹果和Android手机。Android上有个叫做GLSurfaceView的控件。就是Google已经封装好的一个渲染控件。它的底层API都是Google 封装好的native方法,也就是俗称的JNI方法。他需要实现一个Render接口。这个接口有三个回调方法。每一个GLSurfaceView都会有一个相对应的GL线程,专门用来绘制。每个GL线程都有相应的resume和pause方法。用来resume绘制和pause绘制。

2. GLSurfaceView

xml布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">

    <android.opengl.GLSurfaceView
        android:id="@+id/gl_main_show"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

</android.support.constraint.ConstraintLayout>

初始化

public class MainActivity extends AppCompatActivity implements GLSurfaceView.Renderer {
    //用来使Session能够根据手机横竖屏,输出相应分辨率的数据
    private DisplayRotationHelper mDisplayRotationHelper;
    private GLSurfaceView mShowGLSurface;
    
    //初始化相应数据
    private void initData(){
        mShowGLSurface=findViewById(R.id.gl_main_show);
        mDisplayRotationHelper=new DisplayRotationHelper(this);

        // Set up renderer.
        mShowGLSurface.setPreserveEGLContextOnPause(true);
        mShowGLSurface.setEGLContextClientVersion(2);//OpenGL版本为2.0
        mShowGLSurface.setEGLConfigChooser(8, 8, 8, 8, 16, 0); // Alpha used for plane blending.
        mShowGLSurface.setRenderer(this);//实现Render接口
        mShowGLSurface.setRenderMode(GLSurfaceView.RENDERMODE_CONTINUOUSLY);//RENDERMODE_CONTINUOUSLY渲染模式为实时渲染。
    }
}

实现 Render接口的三个回调方法

    /**
     * GLSurfaceView创建时被回调,可以做一些初始化操作
     * @param gl
     * @param config
     */
     
    @Override
    public void onSurfaceCreated(GL10 gl, EGLConfig config) {
        //设置每一帧清屏颜色 传入参输为RGBA
        GLES20.glClearColor(0.1f,0.1f,0.1f,1.0f);
    }

    /**
     * GLSurfaceView 大小改变时调用
     * @param gl
     * @param width GLSurfaceView宽
     * @param height GLSurfaceView高
     */
     
    @Override
    public void onSurfaceChanged(GL10 gl, int width, int height) {
        //改变视口 方便 OpenGLES做 视口变换
        GLES20.glViewport(0,0,width,height);
    }

    /**
     * GLSurfaceView绘制每一帧调用,此处不在主线程中,而是在GL线程中。
     * 部分跨线程数据,需要做线程同步。不能直接更新UI(不在主线程)
     * @param gl
     */
     
    @Override
    public void onDrawFrame(GL10 gl) {
        //清空彩色缓冲和深度缓冲  清空后的颜色为GLES20.glClearColor()时设置的颜色
        GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT|GLES20.GL_DEPTH_BUFFER_BIT);
    }

GLSurfaceView的 resume和pause

@Override
    protected void onResume() {
        super.onResume();
        //ARCore的相应初始化操作
        ...
        
        //GLSurfaceView onResume
        mShowGLSurface.onResume();
        mDisplayRotationHelper.onResume();
    }
    
    @Override
    protected void onPause() {
        super.onPause();
        if (mSession!=null){
            //由于GLSurfaceView需要Session的数据。所以如果Session先pause会导致无法获取Session中的数据
            mShowGLSurface.onPause();//GLSurfaceView onPause
            mDisplayRotationHelper.onPause();
            mSession.pause();
        }
    }

3. 渲染数据

这里引入了一个BackgroundRenderer。它才是抽离出来的真正的用来渲染的类。具体写法以及用途将在下一章介绍。

  private BackgroundRenderer mBackgroundRenderer;
    /**
     * GLSurfaceView创建时被回调,可以做一些初始化操作
     * @param gl
     * @param config
     */
    @Override
    public void onSurfaceCreated(GL10 gl, EGLConfig config) {
        //设置每一帧清屏颜色 传入参输为RGBA
        GLES20.glClearColor(0.1f,0.1f,0.1f,1.0f);

        mBackgroundRenderer=new BackgroundRenderer();
        mBackgroundRenderer.createOnGlThread(this);
    }

    /**
     * GLSurfaceView 大小改变时调用
     * @param gl
     * @param width GLSurfaceView宽
     * @param height GLSurfaceView高
     */
    @Override
    public void onSurfaceChanged(GL10 gl, int width, int height) {
        //方便 OpenGLES做 视口变换
        GLES20.glViewport(0,0,width,height);
        mDisplayRotationHelper.onSurfaceChanged(width,height);
    }

    /**
     * GLSurfaceView绘制每一帧调用,此处不在主线程中,而是在GL线程中。
     * 部分跨线程数据,需要做线程同步。不能直接更新UI(不在主线程)
     * @param gl
     */
    @Override
    public void onDrawFrame(GL10 gl) {
        //清空彩色缓冲和深度缓冲  清空后的颜色为GLES20.glClearColor()时设置的颜色
        GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT|GLES20.GL_DEPTH_BUFFER_BIT);
        if (mSession==null){
            return;
        }
        //设置纹理ID
        mSession.setCameraTextureName(mBackgroundRenderer.getTextureId());
        //根据设备渲染Rotation,width,height。session.setDisplayGeometry(displayRotation, viewportWidth, viewportHeight);
        mDisplayRotationHelper.updateSessionIfNeeded(mSession);
        try {
            Frame frame=mSession.update();//获取Frame数据
            mBackgroundRenderer.draw(frame);//渲染frame数据
        } catch (CameraNotAvailableException e) {
            e.printStackTrace();
        }
    }

5. GitHub地址

  1. ARRuler 本教程版本
  2. ARRuler 已完成版

6. 后续:

这里的ARCore调用逻辑,来源Google官方的ARCore示例。
渲染部分的代码,有的没说清的,后续都会补上。OpenGL的知识会很难。估计我要写一阵了。如果有大神看到这篇文章中的错误,烦请及时指出。希望大家能共同进步,各位感兴趣的加油吧!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,976评论 6 513
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,249评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 167,449评论 0 360
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,433评论 1 296
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,460评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,132评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,721评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,641评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,180评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,267评论 3 339
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,408评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,076评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,767评论 3 332
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,255评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,386评论 1 271
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,764评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,413评论 2 358

推荐阅读更多精彩内容

  • ARCore 是 Google 的增强现实体验构建平台。 ARCore 利用不同的 API 让您的手机能够感知其环...
    NullBugs阅读 5,005评论 0 50
  • 1. 简介 ARCore 是 google 官方出的一款 AR SDK,其基本原理为: ARCore 使用手机摄像...
    zyl06阅读 9,752评论 2 8
  • OpenGL ES Android包含支持高性能2D和3D图形绘制开源库(OpenGL),尤其是OpenGL ES...
    Ricky_Zeng阅读 3,688评论 0 10
  • -孙解方正 【导读:很多人把网游妖魔化,无数的家长近乎狂热地相信一个事实,即网络游戏残害青少年。以我个人的看法,这...
    584b33fff306阅读 590评论 0 0
  • 吸引力法则真是太神奇了,我忍不住要跟大家分享我女儿的好消息。女儿这次期中考试成绩出来啦!虽然女儿在班级的名次还是第...
    刘盈666阅读 374评论 0 17