写点什么

如何用 AR Engine 开发一个虚拟形象表情包?

作者:HMS Core
  • 2022 年 9 月 21 日
    贵州
  • 本文字数:3437 字

    阅读完需:约 11 分钟

现如今,人们在网上聊天、发帖时越来越爱用表情包,表情包一方面是一种个性化的表达方式,另一方面更能传达出当下的心理活动,可以说在网络社交中表情包是一个不可或缺的存在。加上近年来元宇宙的兴起,3D 虚拟形象广泛应用,用户可以通过自己的表情来控制虚拟形象的表情,做一系列专属的表情包,更加生动形象。


那么,如何赋予虚拟形象“生命”,让其拥有人类那样多变的表情呢?HMS Core AR Engine人脸表情跟踪能力就能帮助实现,实时计算人脸各表情对应的参数值。用户可通过自己的面部动作,控制虚拟人物的表情,最终制作成虚拟人物的各种搞怪表情,以更有趣的形式配合传达文字情绪,同时也极大方便了虚拟人物的表情制作等应用场景。


比如在社交 App 中,不想露脸的人可以把自己的喜怒哀乐通过虚拟形象的表情传达,在保护隐私的同时又增加了趣味性。在直播、电商 App 里,为了避免同质化,商家利用虚拟主播的表情生动性能够给用户带来更生动的消费场景以及新奇的互动体验,激发年轻人对沉浸式虚拟娱乐和数字消费的需求。在短视频、拍照等 App 中,用户利用人脸表情控制虚拟形象的表情,进行自我展示与表达,拉近人与人的距离;而在教育、文旅等 App 中,捕捉人脸图像信息,实时将其理解成人脸表情内容,用虚拟形象进行讲解教学更加生动,激发用户的学习兴趣。


实现方法


AR Engine提供“人脸表情跟踪”能力,可实时跟踪获取人脸图像信息,计算人脸的位姿,并将其理解成人脸表情内容,并转化成各种表情参数,利用表情参数可以实现人脸表情直接控制虚拟形象的表情。AR Engine目前共提供 64 种表情,包含眼睛、眉毛、眼球、嘴巴、舌头等主要脸部器官的表情动作。眼部共有 21 种表情,包括眼球的移动、睁闭眼、眼皮的微动作等;嘴部共有 28 种表情,包括张嘴噘嘴、嘴角下拉、抿嘴唇、舌头的动作等;眉毛共有 5 种表情,包括抬眉、单侧眉毛朝下或抬上等。其他具体表情参数可见FaceAR设计规范

效果展示

开发步骤

开发环境要求:


JDK 1.8.211 及以上。安装 Android Studio 3.0 及以上:minSdkVersion 26 及以上 targetSdkVersion 29(推荐)compileSdkVersion 29(推荐)Gradle 6.1.1 及以上(推荐)


在华为终端设备上的应用市场下载 AR Engine 服务端 APK(需在华为应用市场,搜索“华为 AR Engine”)并安装到终端设备。


测试应用的设备:参见AREngine特性软硬件依赖表。如果同时使用多个 HMS Core 的服务,则需要使用各个 Kit 对应的最大值。

开发准备

  1. 在开发应用前需要在华为开发者联盟网站上注册成为开发者并完成实名认证,具体方法请参见帐号注册认证

  2. 华为提供了 Maven 仓集成方式的 AR Engine SDK 包,在开始开发前,需要将 AR Engine SDK 集成到您的开发环境中。

  3. Android Studio 的代码库配置在 Gradle 插件 7.0 以下版本、7.0 版本和 7.1 及以上版本有所不同。请根据您当前的 Gradle 插件版本,选择对应的配置过程。

  4. 以 7.0 为例:


打开 Android Studio 项目级“build.gradle”文件,添加 Maven 代码库。


在“buildscript > repositories”中配置 HMS Core SDK 的 Maven 仓地址。


buildscript {      repositories {          google()          jcenter()          maven {url "https://developer.huawei.com/repo/" }      }}
复制代码


打开项目级“settings.gradle”文件,配置 HMS Core SDK 的 Maven 仓地址


dependencyResolutionManagement {    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)        repositories {              repositories {                    google()                  jcenter()                  maven {url "https://developer.huawei.com/repo/" }              }          }}
复制代码


  1. 添加依赖 在“dependencies”中添加如下编译依赖:


dependencies {    implementation 'com.huawei.hms:arenginesdk:{version}}
复制代码

应用开发

  1. 运行前验证:检查当前设备是否安装了 AR Engine,若已经安装则正常运行,若没有安装,App 应采用合适的方式提醒用户安装 AR Engine,如主动跳转应用市场,请求安装 AR Engine。具体实现代码如下


boolean isInstallArEngineApk =AREnginesApk.isAREngineApkReady(this);if (!isInstallArEngineApk) {    // ConnectAppMarketActivity.class为跳转应用市场的Activity。startActivity(new Intent(this, com.huawei.arengine.demos.common.ConnectAppMarketActivity.class));    isRemindInstall = true;}
复制代码


  1. 创建 AR 场景:AR Engine 提供 5 种场景,包括运动跟踪(ARWorldTrackingConfig)、人脸跟踪(ARFaceTrackingConfig)、手部识别(ARHandTrackingConfig)、人体跟踪(ARBodyTrackingConfig)和图像识别(ARImageTrackingConfig)。调用ARFaceTrackingConfig接口,创建人脸跟踪。


// 创建ARSession。mArSession = new ARSession(this);// 根据要使用的具体场景,选用具体的Config来初始化ARSession。ARFaceTrackingConfig config = new ARFaceTrackingConfig(mArSession);
复制代码


创建人脸跟踪ARSession后,可通过 config.setXXX 方法配置场景参数


//设置相机的打开方式,外部打开或内部打开,其中外部打开只能在ARFace中使用,推荐使用内部打开相机的方式。mArConfig.setImageInputMode(ARConfigBase.ImageInputMode.EXTERNAL_INPUT_ALL);
复制代码


  1. 配置人脸跟踪 AR 场景参数,启动人脸跟踪场景:


mArSession.configure(mArConfig);mArSession.resume();
复制代码


  1. 创建 FaceGeometryDisplay 类,此类是获取人脸几何数据,并在屏幕上渲染数据


public class FaceGeometryDisplay {//初始化与面几何体相关的OpenGL ES渲染,包括创建着色器程序。void init(Context context) {...}}
复制代码


  1. 在 FaceGeometryDisplay 类中创建,onDrawFrame 方法,用 face.getFaceGeometry()方法来获取人脸 Mesh


public void onDrawFrame(ARCamera camera, ARFace face) {    ARFaceGeometry faceGeometry = face.getFaceGeometry();    updateFaceGeometryData(faceGeometry);    updateModelViewProjectionData(camera, face);    drawFaceGeometry();    faceGeometry.release();}
复制代码


  1. 在 FaceGeometryDisplay 类中创建方法 updateFaceGeometryData()传入人脸 Mesh 数据进行配置 用 OpenGl 来设置表情参数


private void  updateFaceGeometryData(ARFaceGeometry faceGeometry){FloatBuffer faceVertices = faceGeometry.getVertices();FloatBuffer textureCoordinates =faceGeometry.getTextureCoordinates();//获取人脸Mesh纹理坐标点数组,在渲染时,与getVertices()返回的顶点数据配合使用。 }
复制代码


  1. 创建 FaceRenderManager 类,此类来管理与人脸数据相关的渲染:


public class FaceRenderManager implements GLSurfaceView.Renderer {//构造函数初始化上下文和activitypublic FaceRenderManager(Context context, Activity activity) {    mContext = context;    mActivity = activity;}//设置ARSession,获取最新数据public void setArSession(ARSession arSession) {    if (arSession == null) {        LogUtil.error(TAG, "Set session error, arSession is null!");        return;    }    mArSession = arSession;}//设置ARConfigBase,获取配置模式。public void setArConfigBase(ARConfigBase arConfig) {    if (arConfig == null) {        LogUtil.error(TAG, "setArFaceTrackingConfig error, arConfig is null.");        return;    }    mArConfigBase = arConfig;}//设置外置摄像头打开方式public void setOpenCameraOutsideFlag(boolean isOpenCameraOutsideFlag) {    isOpenCameraOutside = isOpenCameraOutsideFlag;}...@Overridepublic void onSurfaceCreated(GL10 gl, EGLConfig config) {mFaceGeometryDisplay.init(mContext);}}
复制代码


  1. 最后在 FaceActivity 中 调用方法:通过设置这些方法来实现最终的效果


public class FaceActivity extends BaseActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {mFaceRenderManager = new FaceRenderManager(this, this);mFaceRenderManager.setDisplayRotationManage(mDisplayRotationManager);mFaceRenderManager.setTextView(mTextView);
glSurfaceView.setRenderer(mFaceRenderManager);glSurfaceView.setRenderMode(GLSurfaceView.RENDERMODE_CONTINUOUSLY);}}
复制代码


具体实现可参考示例代码


了解更多详情>>


访问华为开发者联盟官网


获取开发指导文档


华为移动服务开源仓库地址:GitHubGitee


关注我们,第一时间了解 HMS Core 最新技术资讯~

发布于: 刚刚阅读数: 6
用户头像

HMS Core

关注

HMS Core技术团队。 2022.06.16 加入

分享最新的技术干货,带来最全的能力应用场景,更新热门开发者圈子活动。与开发者一起,同成长,共精彩。

评论

发布
暂无评论
如何用AR Engine开发一个虚拟形象表情包?_AR_HMS Core_InfoQ写作社区