【Android】我用 ARCore 做了一个 1:1 的高达

╰半橙微兮° 2022-09-11 00:12 142阅读 0赞

最近看到一则新闻，一个 1: 1 的自由高达落户在上海金桥。  
![9235ef0c3a4de39f5cebb7bd45e61837.png][]

作为高达爱好者的我一直想去现场感受一下高达真实的压迫感，无奈一直没机会去上海。不过这难不倒我，借助 AR 技术我自己动手做了一个1：1 的高达  
![请添加图片描述][5291b3b5744d40a49709183c51805395.gif]

怎么样，这效果不比上海金桥的差吧~

# 什么是 AR (Augemented Reality) #

--------------------

AR（增强现实）是近几年新兴的技术，他可以将3D模型等虚拟元素模拟仿真后应用到现实世界中，虚拟与现实，两种信息互为补充，从而实现对真实世界的“增强”。

不少人会将 AR（增强现实） 与 VR（虚拟现实）相混淆，两者的区别在于虚拟元素的占比：

*  VR：看到的场景和人物全是假的，是把你的意识代入一个虚拟的世界。
 *  AR：看到的场景和人物一部分是真一部分是假，是把虚拟的信息带入到现实世界中。

![c1e6629cb547c202c117a6c8c80f323d.png][]

VR 技术的研究已经有30多年的历史了，而 AR 则年轻得多，随着智能手机以及智能穿戴设备的普及而逐渐被人们熟知。相对于 VR，AR 的开发门槛低得多，只要有一台智能手机，借助 Google 提供的 ARCore，人人都可以开发出自己的 AR 应用。

![bed740aa5a2a2ada9bcbde982479dc34.png][]

[ARCore][] 是 Google 提供的 AR 解决方案，为开发者提供 API，可以通过 Android , iOS 等手机平台感知周边环境，打造沉浸式的 AR 体验。

ARCore 为开发者提供了三大能力：

<table> 
 <thead> 
  <tr> 
   <th align="center">ARCore 能力</th> 
   <th align="center">示意图</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center"><strong>动作追踪</strong><br> 通过识别相机图像中的可视特征点来跟踪拍摄者的位置，从而决定虚拟元素的相对位置变化</td> 
   <td align="center"><img src="https://img-blog.csdnimg.cn/img_convert/d6af6f6b70ab07e9cc7dfff52f215628.png" alt=""></td> 
  </tr> 
  <tr> 
   <td align="center"><strong>环境理解</strong><br>识别常见水平或垂直表面（如表格或墙壁）上的特征点群集，还可以确定平面边界，将虚拟对象放置在平面上</td> 
   <td align="center"><img src="https://img-blog.csdnimg.cn/img_convert/7095dd7028f4dd61671c29cc37f581be.png" alt=""></td> 
  </tr> 
  <tr> 
   <td align="center"><strong>光线预测</strong><br> 预测当前场景的光照条件，可以使用此照明信息来照亮虚拟 AR 对象</td> 
   <td align="center"><img src="https://img-blog.csdnimg.cn/img_convert/a46746e77242e9b570fba4b05d57a90c.png" alt=""></td> 
  </tr> 
 </tbody> 
</table>

![e36ebd97f10b88c72891532b6e43e55f.png][]

ARCore 为 AR 提供了周边环境的感知能力，但一个完整的 AR 应用还需要处理 3D 模型的渲染，这要借助 OpenGL ES 来完成，学习成本很高。官方意识到这个问题，在 2017 年推出 ARCore 之后，紧跟着 2018 年的 IO 大会上推出了 [Sceneform][] 这个在 Android 上的 3D 图像渲染库。

`.obj` , `.fbx` 或 `.gltf` 等常见的 3D 模型文件格式，虽然可以在主流的 3D 软件中通用，但在 Android 中，我们只能通过 OpenGL 代码对其进行渲染。而 Sceneform 可以将这些格式的模型文件，连同所依赖的资源文件（`.mtl`, `.bin`, `.png` 等） 转换为 `.sfb` 和 `.sfb` 格式。 后者是可供 Sceneform 渲染的二进制模型文件， 前者是具有可读性的摘要文件，用来描述后者。

相比于 OpenGL ， Sceneform 的使用要简单得多，而且 `sfb` 还可以通过 Sceneform 提供的 AS 插件在 IDE 中进行模型预览。

![8defc1fcf031681dac59f7441398b03b.png][]

接下来，通过 Sceneform 和 ARCore 来实现我的 1：1 高达

# 1. Gradle 添加依赖 #

--------------------

新建 AndroidStudio 工程，在 root 的 build.gradle 中添加 Sceneform 插件

dependencies {  
        classpath 'com.google.ar.sceneform:plugin:1.15.0' 
    }

接着在 app 的 build.gradle 中依赖 ARCore 和 Sceneform 的 aar

dependencies { 
        ...
        implementation 'com.google.ar:core:1.5.0'
        implementation 'com.google.ar.sceneform.ux:sceneform-ux:1.5.1'
        implementation 'com.google.ar.sceneform:core:1.5.1'
    }

# 2. Manifest 申请权限 #

--------------------

<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" />
    
    </application>

# 3. 布局文件 #

--------------------

`ARFragment` 可以用来承载 AR 场景、响应用户行为，Android 中显示虚拟元素的最简答的方法就是在布局中添加一个 ARFRagment ：

<?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity">
      
    <fragment android:id="@+id/ux_fragment" android:name="com.google.ar.sceneform.ux.ArFragment" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="9" />
    
    </FrameLayout>

# 4. 制作 sfb 模型文件 #

--------------------

3D 模型一般是通过 Maya 或 3D Max 等专业软件制作的，不少 3D 建模爱好者会将自己的作品上传到一些设计网站供大家免费或有偿下载。

模型下载网站：https://sketchfab.com/  
![请添加图片描述][7635d2663ab34edb9b9bf621805019cc.gif]

我们可以在网站上下载常见格式的 3D 模型文件。以 `.obj` 为例，obj 文件中描述了多边形的顶点和片段信息等, 此外还有颜色、材质等信息存储在配套的 `.mtl` 文件中 , 我们将下载的 `obj/mtl/png` 等模型文件拷贝到非 assets 目录下，这样可以避免打入 apk。

例如 app/sampledata

![e7f8a002944f0a900f66dc83197952ef.png][]

我们在 build.gtadle 通过 `sceneform.asset(...)` 添加 `obj > sfb` 的配置如下

sceneform.asset('sampledata/msz-006_zeta_gundam/scene.obj',
            'default',
            'sampledata/msz-006_zeta_gundam/scene.sfa',
            'src/main/assets/scene')

`sampledata/msz-006_zeta_gundam/scene.obj` 是 obj 源文件位置， `src/main/assets/scene` 是生成的 sfb 目标路径，我们将目标文件生成在 `assets/` 中，打入 apk ，便于在运行时加载。

gradle 配置完后，sync 并 build 工程，build 过程中，会在 `assets/` 中生成同名 sfb 文件

# 5. 加载 sfb 模型 #

--------------------

//MainActivity.kt
    
        override fun onCreate(savedInstanceState: Bundle?) { 
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
            
            arFragment = supportFragmentManager.findFragmentById(R.id.ux_fragment) as ArFragment
            arFragment.setOnTapArPlaneListener {  hitResult, plane, motionEvent ->
            
                if (plane.type != Plane.Type.HORIZONTAL_UPWARD_FACING ||
                        state != AnchorState.NONE) { 
                    return@setOnTapArPlaneListener
                }
    
                val anchor = hitResult.createAnchor()
                placeObject(ux_fragment, anchor, Uri.parse("scene.sfb"))
    
            }
            
        }

ARFragment 能够响应在 AR 场景中的用户点击行为，在点击的位置中添加虚拟元素，  
`Uri.parse("scene.sfb")` 用来获取 assets 中生成的模型文件。

private fun placeObject(fragment: ArFragment, anchor: Anchor, model: Uri) { 
            ModelRenderable.builder()
                    .setSource(fragment.context, model)
                    .build()
                    .thenAccept { 
                        addNodeToScene(fragment, anchor, it)
                    }
                    .exceptionally {  throwable : Throwable ->
                       Toast.makeText(arFragment.getContext(), "Error:$throwable.message", Toast.LENGTH_LONG).show();
                       return@exceptionally null
                    }
        }

Sceneform 提供 `ModelRenderable` 用于模型渲染。 通过 `setSource` 加载 sfb 模型文件

private fun addNodeToScene(fragment: ArFragment, anchor: Anchor, renderable: Renderable) { 
            val anchorNode = AnchorNode(anchor)
            val node = TransformableNode(fragment.transformationSystem)
            node.renderable = renderable
            node.setParent(anchorNode)
            fragment.arSceneView.scene.addChild(anchorNode)
            node.select()
        }

`ARSceneView` 持有一个 `Scene`, Scene 是一个树形数据结构，作为 AR 场景的根节点，各种虚拟元素将作为其子节点被添加到场景中进行渲染

val node = TransformableNode(fragment.transformationSystem)
    node.renderable = renderable
    node.setParent(anchorNode)

所以，渲染 3D 模型，其实就是添加一个 Node 并为其设置 `Renderable` 的过程。

`hitResult` 是用户点击的位置信息，`Anchor`基于 hitResult 创建锚点，这个锚点作为子节点被添加到 Scene 根节点中，同时又作为 `TransformableNode` 的父节点。 TransformableNode 用来承载 3D 模型， 它可以接受手势进行拖拽或者放大缩小， 添加到 Archor 就相当于把 3D 模型放置到点击的位置上。

# 6. 完整代码 #

--------------------

class MainActivity : AppCompatActivity() { 
        lateinit var arFragment: ArFragment
        
        override fun onCreate(savedInstanceState: Bundle?) { 
            super.onCreate(savedInstanceState)
            if (!checkIsSupportedDeviceOrFinish(this)) return
            setContentView(R.layout.activity_main)
            
            arFragment = supportFragmentManager.findFragmentById(R.id.ux_fragment) as ArFragment
            arFragment.setOnTapArPlaneListener {  hitresult: HitResult, plane: Plane, motionevent: MotionEvent? ->
                if (plane.type != Plane.Type.HORIZONTAL_UPWARD_FACING)
                    return@setOnTapArPlaneListener
                val anchor = hitresult.createAnchor()
                placeObject(arFragment, anchor, R.raw.cube)
            }
        }
    
        private fun placeObject(arFragment: ArFragment, anchor: Anchor, uri: Int) { 
            ModelRenderable.builder()
                    .setSource(arFragment.context, uri)
                    .build()
                    .thenAccept {  modelRenderable: ModelRenderable -> addNodeToScene(arFragment, anchor, modelRenderable) }
                    .exceptionally {  throwable: Throwable ->
                       Toast.makeText(arFragment.getContext(), "Error:$throwable.message", Toast.LENGTH_LONG).show();
                        return@exceptionally null
                    }
        }
    
        private fun addNodeToScene(arFragment: ArFragment, anchor: Anchor, renderable: Renderable) { 
            val anchorNode = AnchorNode(anchor)
            val node = TransformableNode(arFragment.transformationSystem)
            node.renderable = renderable
            node.setParent(anchorNode)
            arFragment.arSceneView.scene.addChild(anchorNode)
            node.select()
        }
    
        private fun checkIsSupportedDeviceOrFinish(activity: Activity): Boolean { 
            if (Build.VERSION.SDK_INT < Build.VERSION_CODES.N) { 
                Toast.makeText(activity, "Sceneform requires Android N or later", Toast.LENGTH_LONG).show()
                activity.finish()
                return false
            }
            val openGlVersionString = (activity.getSystemService<Any>(Context.ACTIVITY_SERVICE) as ActivityManager)
                    .deviceConfigurationInfo
                    .glEsVersion
            if (openGlVersionString.toDouble() < MIN_OPENGL_VERSION) { 
                Toast.makeText(activity, "Sceneform requires OpenGL ES 3.0 or later", Toast.LENGTH_LONG)
                        .show()
                activity.finish()
                return false
            }
            return true
        }
    
        companion object { 
            private const val MIN_OPENGL_VERSION = 3.0
        }
    }

`checkIsSupportedDeviceOrFinish` 用来检测可运行环境，通过实现可知Sceneform 的运行条件是 AndroidN 以及 OpenGL 3.0 以上。

以上就是全部代码了，代码很少，效果很酷！  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAZnVuZHJvaWRf5pa55Y2T_size_20_color_FFFFFF_t_70_g_se_x_16]

# 最后 #

--------------------

Sceneform 配合 ARCore 可以快速搭建 AR 应用，除了加载静态的 3D 模型以外，Sceneform 也可以加载带动画的模型。随着 “元宇宙” 概念的兴起，Google，Facebook 等巨头必将加大在 AR 乃至 VR 技术上的研究投入，虚拟现实技术或将成为移动互联网之后的一个新的社交、娱乐场景，想象空间十分巨大。

今天就写到这里吧， 我要去跟我的虚拟女友玩耍了，

![请添加图片描述][b18788ee4e4040bb9db98936e52a268b.gif]

[9235ef0c3a4de39f5cebb7bd45e61837.png]: /images/20220829/7285a79e598f4b96b1d37cfbbeb1c031.png
[5291b3b5744d40a49709183c51805395.gif]: /images/20220829/da2ad732adc14d91bccacef9eae56467.png
[c1e6629cb547c202c117a6c8c80f323d.png]: /images/20220829/32774bc504b140cab09a0b792d0f8861.png
[bed740aa5a2a2ada9bcbde982479dc34.png]: /images/20220829/7c19ff214b3f485095f180cee8cecf29.png
[ARCore]: https://developers.google.com/ar
[e36ebd97f10b88c72891532b6e43e55f.png]: /images/20220829/b45e6f76b04a45dda26f32cf8b77af51.png
[Sceneform]: https://developers.google.com/sceneform/develop
[8defc1fcf031681dac59f7441398b03b.png]: /images/20220829/7523c871d6c84e35be044b821556e206.png
[7635d2663ab34edb9b9bf621805019cc.gif]: /images/20220829/45e17a6ecb264154be027c2a55059437.png
[e7f8a002944f0a900f66dc83197952ef.png]: /images/20220829/a7ed84d743af43c18fa97358b68c4cbd.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAZnVuZHJvaWRf5pa55Y2T_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/a6fff5cf3ca341d1b0770b43440b4c5e.png
[b18788ee4e4040bb9db98936e52a268b.gif]: /images/20220829/1fa3174bf6f04f9a8e4c77094133c70c.png