如何用AR Engine开发一个虚拟形象表情包?
现如今,人们在网上聊天、发帖时越来越爱用表情包,表情包一方面是一种个性化的表达方式,另一方面更能传达出当下的心理活动,可以说在网络社交中表情包是一个不可或缺的存在。加上近年来元宇宙的兴起,3D虚拟形象广泛应用,用户可以通过自己的表情来控制虚拟形象的表情,做一系列专属的表情包,更加生动形象。
那么,如何让虚拟形象拥有人类一样多变的表情呢?HMS CoreAR 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对应的最大值。
开发准备
华为提供了Maven仓集成方式的AR Engine SDK包,在开始开发前,需要将AR Engine SDK集成到您的开发环境中。
Android Studio的代码库配置在Gradle插件7.0以下版本、7.0版本和7.1及以上版本有所不同。请根据您当前的Gradle插件版本,选择对应的配置过程。
以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/" }
}
}
}
- 添加依赖 在“dependencies”中添加如下编译依赖:
dependencies {
implementation 'com.huawei.hms:arenginesdk:{version}
}
应用开发
- 运行前验证:检查当前设备是否安装了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;
}
- 创建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);
- 配置人脸跟踪AR场景参数,启动人脸跟踪场景:
mArSession.configure(mArConfig);
mArSession.resume();
- 创建FaceGeometryDisplay类,此类是获取人脸几何数据,并在屏幕上渲染数据
public class FaceGeometryDisplay {
//初始化与面几何体相关的OpenGL ES渲染,包括创建着色器程序。
void init(Context context) {...
}
}
- 在FaceGeometryDisplay类中创建,onDrawFrame方法,用face.getFaceGeometry()方法来获取人脸Mesh
public void onDrawFrame(ARCamera camera, ARFace face) {
ARFaceGeometry faceGeometry = face.getFaceGeometry();
updateFaceGeometryData(faceGeometry);
updateModelViewProjectionData(camera, face);
drawFaceGeometry();
faceGeometry.release();
}
- 在FaceGeometryDisplay类中创建方法updateFaceGeometryData()传入人脸Mesh数据进行配置 用OpenGl来设置表情参数
private void updateFaceGeometryData(ARFaceGeometry faceGeometry){
FloatBuffer faceVertices = faceGeometry.getVertices();
FloatBuffer textureCoordinates =faceGeometry.getTextureCoordinates();
//获取人脸Mesh纹理坐标点数组,在渲染时,与getVertices()返回的顶点数据配合使用。
}
- 创建FaceRenderManager类,此类来管理与人脸数据相关的渲染:
public class FaceRenderManager implements GLSurfaceView.Renderer {
//构造函数初始化上下文和activity
public 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;
}
...
@Override
public void onSurfaceCreated(GL10 gl, EGLConfig config) {
mFaceGeometryDisplay.init(mContext);
}
}
- 最后在FaceActivity中 调用方法:通过设置这些方法来实现最终的效果
public class FaceActivity extends BaseActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
mFaceRenderManager = new FaceRenderManager(this, this);
mFaceRenderManager.setDisplayRotationManage(mDisplayRotationManager);
mFaceRenderManager.setTextView(mTextView);
glSurfaceView.setRenderer(mFaceRenderManager);
glSurfaceView.setRenderMode(GLSurfaceView.RENDERMODE_CONTINUOUSLY);
}
}
具体实现可参考示例代码。
了解更多详情>>
访问华为开发者联盟官网
获取开发指导文档
华为移动服务开源仓库地址:GitHub、Gitee
关注我们,第一时间了解 HMS Core 最新技术资讯~
如何用AR Engine开发一个虚拟形象表情包?的更多相关文章
- 开发一个健壮的npm包
项目地址:loan-calculate-utils npm包的发布.更新查看上一篇文章 开发一个基础的npm包 目前我们的目录是这个样子: . ├── source 源代码目录 │ └── ind ...
- 开发一个基础的npm包
初始化项目 # 新建文件夹 mkdir whosmeya-npm-package-test # 进入 cd whosmeya-npm-package-test/ # 初始化 package.json, ...
- 如何用AR Engine环境Mesh能力实现虚实遮挡
在AR应用中,用户最不希望看到不真实的穿模现象发生,如虚拟形象部分身体陷入墙壁之中,或者未碰到墙壁却已无法移动,这种不真实的交互十分影响用户体验.那如何才能让避免虚拟物体的穿模问题呢?使用AR Eng ...
- 如何用原生js开发一个Chrome扩展程序
原文地址:How to Build a Simple Chrome Extension in Vanilla JavaScript 开发一个Chrome扩展程序非常简单,只需要使用原生的js就可以完成 ...
- 如何用Eggjs从零开始开发一个项目(2)
在上一篇文章,我们已经使用Sequelize连接上了数据库,并能进行简单的数据库操作,在此基础上,我们试着来开发一个完整的项目.这篇文章我们从用户的注册.登录着手,试着开发用户模块的相关的代码. 用户 ...
- 如何用 Electron + WebRTC 开发一个跨平台的视频会议应用
在搭建在线教育.医疗.视频会议等场景时,很多中小型公司常常面临 PC 客户端和 Web 端二选一的抉择.Electron 技术的出现解决了这一难题,只需前端开发就能完成一个跨平台的 PC 端应用.本文 ...
- 如何用Eggjs从零开始开发一个项目(1)
前言 "纸上得来终觉浅,绝知此事要躬行."虽然node一直在断断续续地学,但总是东一榔头西一榔头的,没有一点系统,所以打算写一个项目来串联一下之前的学习成果. 为什么选择Eggjs ...
- 如何用Eggjs从零开始开发一个项目(3)
上一篇中我们编写了用户注册登录.登录的代码,学习了如何进行用户的认证(JWT),如何安全地存储用的密码(hash).这一篇我们有以下2个任务: 获取token中的数据: 通过model来同步数据库. ...
- 如何开发一个自己的npm包
目录 一.初始化npm包 二.新建自己的工具类 三.新建入口文件index.js 四.编写单元测试 五.登录仓库 六.发布包 七.安装使用 八.删除包 一.初始化npm包 npm init 运行输入包 ...
随机推荐
- 2022-7-19 第五组 pan小堂 封装和 this
this关键字 this关键字由来和使用: A:this:代表所在类的对象引用方法被哪个对象调用,this就代表那个对象 B:什么时候使用this呢 ? 局部变量和成员变量重名 set 和 get 方 ...
- 递归概念&分类&注意事项和使用递归计算1-n之间的和
递归 概述 递归:指在当前方法内调用自己的这种现象. 递归的分类: 递归分为两种,直接递归和间接递归 直接递归称为方法自身调用自己 简介递归可以A方法调用B方法,B方法调用C方法,C方法调用A方法 注 ...
- iframe 标签
iframe是一个内联框架,可以在当前HTML页面中嵌入另一个文档,一般情况下使用iframe直接在页面嵌套iframe标签再指定src就可以了. iframe 的常用属性: name : 规定 &l ...
- ZJOI2016 小星星 题解
我一生之敌是状压 本文发表于 洛谷博客:https://www.luogu.com.cn/blog/LoveMC/solution-p3349 Cnblogs:https://www.cnblogs. ...
- 自定义bean对象实现序列化接口
上一个word count的案例中,我们为了理解mapreduce的流程,写了上面的代码.现在我们要把一个实体类序列化.比如现在有这么一个文件,里面的数据格式是这样的: 第一列是时间戳,第二列是手机号 ...
- 利用Css3样式属性Cursor来更换自定义个性化鼠标指针(光标)
现而今,我们纵向的回顾整个大前端的历史,不难发现,人们对前端的审美要求越来越高,越来越严苛,与此同时,人们对追求美的体验是也极致的,从理性到感性,从平面到几何,从现实到虚拟,所以从某种角度来说,作为前 ...
- 一网成擒全端涵盖,在不同架构(Intel x86/Apple m1 silicon)不同开发平台(Win10/Win11/Mac/Ubuntu)上安装配置Python3.10开发环境
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_200 时光荏苒,过隙白驹,即将进入2022年,著名敏捷开发语言Python也放出了3.10最终版,本次我们来展示一下在不同的系统和 ...
- 论文翻译:2021_LACOPE: Latency-Constrained Pitch Estimation for Speech Enhancement
论文地址:延迟约束的语音增强基音估计 引用格式:Schröter H, Rosenkranz T, Escalante-B A N, et al. LACOPE: Latency-Constraine ...
- 论文解读(DropEdge)《DropEdge: Towards Deep Graph Convolutional Networks on Node Classification》
论文信息 论文标题:DropEdge: Towards Deep Graph Convolutional Networks on Node Classification论文作者:Yu Rong, We ...
- Android 自定义View - 柱状波形图 wave view
前言 柱状波形图是一种常见的图形.一个个柱子按顺序排列,构成一个波形图. 柱子的高度由输入数据决定.如果输入的是音频的音量,则可得到一个声波图. 在一些音频软件中,我们也可以左右拖动声波,来改变音频的 ...