现如今,人们在网上聊天、发帖时越来越爱用表情包,表情包一方面是一种个性化的表达方式,另一方面更能传达出当下的心理活动,可以说在网络社交中表情包是一个不可或缺的存在。加上近年来元宇宙的兴起,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对应的最大值。

开发准备

  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 {
//构造函数初始化上下文和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);
}
}
  1. 最后在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);
}
}

具体实现可参考示例代码

了解更多详情>>

访问华为开发者联盟官网

获取开发指导文档

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

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

如何用AR Engine开发一个虚拟形象表情包?的更多相关文章

  1. 开发一个健壮的npm包

    项目地址:loan-calculate-utils npm包的发布.更新查看上一篇文章 开发一个基础的npm包 目前我们的目录是这个样子: . ├── source 源代码目录 │   └── ind ...

  2. 开发一个基础的npm包

    初始化项目 # 新建文件夹 mkdir whosmeya-npm-package-test # 进入 cd whosmeya-npm-package-test/ # 初始化 package.json, ...

  3. 如何用AR Engine环境Mesh能力实现虚实遮挡

    在AR应用中,用户最不希望看到不真实的穿模现象发生,如虚拟形象部分身体陷入墙壁之中,或者未碰到墙壁却已无法移动,这种不真实的交互十分影响用户体验.那如何才能让避免虚拟物体的穿模问题呢?使用AR Eng ...

  4. 如何用原生js开发一个Chrome扩展程序

    原文地址:How to Build a Simple Chrome Extension in Vanilla JavaScript 开发一个Chrome扩展程序非常简单,只需要使用原生的js就可以完成 ...

  5. 如何用Eggjs从零开始开发一个项目(2)

    在上一篇文章,我们已经使用Sequelize连接上了数据库,并能进行简单的数据库操作,在此基础上,我们试着来开发一个完整的项目.这篇文章我们从用户的注册.登录着手,试着开发用户模块的相关的代码. 用户 ...

  6. 如何用 Electron + WebRTC 开发一个跨平台的视频会议应用

    在搭建在线教育.医疗.视频会议等场景时,很多中小型公司常常面临 PC 客户端和 Web 端二选一的抉择.Electron 技术的出现解决了这一难题,只需前端开发就能完成一个跨平台的 PC 端应用.本文 ...

  7. 如何用Eggjs从零开始开发一个项目(1)

    前言 "纸上得来终觉浅,绝知此事要躬行."虽然node一直在断断续续地学,但总是东一榔头西一榔头的,没有一点系统,所以打算写一个项目来串联一下之前的学习成果. 为什么选择Eggjs ...

  8. 如何用Eggjs从零开始开发一个项目(3)

    上一篇中我们编写了用户注册登录.登录的代码,学习了如何进行用户的认证(JWT),如何安全地存储用的密码(hash).这一篇我们有以下2个任务: 获取token中的数据: 通过model来同步数据库. ...

  9. 如何开发一个自己的npm包

    目录 一.初始化npm包 二.新建自己的工具类 三.新建入口文件index.js 四.编写单元测试 五.登录仓库 六.发布包 七.安装使用 八.删除包 一.初始化npm包 npm init 运行输入包 ...

随机推荐

  1. ASP.NET MVC-动态网页开发-宿舍管理系统

    很不容易,我在这两周为了数据库的课程设计第一次学习到了动态网页的开发.首先是尊重知识,也是为了知识不被忘记,在这里写下这第一篇博客.才疏学浅如果有什么理解错误,多包涵. 首先是环境的配置,我自己使用的 ...

  2. 集合-List接口常用实现类的对比

    1.collection接口:单列集合,用来存储一个一个的对象 2. list接口:存储有序的.可重复的数据. --->"动态数组",替换原有的数组 (1) Arraylis ...

  3. Java方法的重写

    package Demo.oop.APP.Demo04; //启动器 public class application { public static void main(String[] args) ...

  4. Grid属性太多记不住?【Grid栅格布局可视化编辑器】直观易懂高效,拖拉拽,有手就行!

    手把手教你通过拖拉拽可视化的方式带你练习[Grid栅格布局]的各个属性,直观易懂!再也不愁记不住繁多的Grid属性了.整个过程在众触应用平台进行,不用手写一行CSS代码. grid-auto-flow ...

  5. 5-4 Seata 分布式事务管理

    下载Seata https://github.com/seata/seata/releases https://github.com/seata/seata/releases/download/v1. ...

  6. 1_day01_操作系统安装

    操作系统安装 内容介绍 1.制作U盘启动器 2.备份驱动 3.安装操作系统 4.驱动更新 5.依赖库检测 6.系统漏洞修复 7.系统布局优化 一.制作U盘启动器 1.1 下载老毛桃 下载老毛桃pe工具 ...

  7. 2.Android高仿网易云音乐-引导界面和广告界面实现

    效果图 效果图依次为图片广告,视频广告,引导界面. 系列文章目录导航 目录 1.实现分析 广告界面就是显示图片和视频,所以可以放一个图片控件,视频控件,然后跳过按钮,提示按钮,WiFi预加载提示都是放 ...

  8. 【Azure 事件中心】Azure Event Hub 新功能尝试 -- 异地灾难恢复 (Geo-Disaster Recovery)

    问题描述 关于Event Hub(事件中心)的灾备方案,大多数就是新建另外一个备用的Event Hub,当主Event Hub出现不可用的情况时,就需要切换到备Event Hub上. 而在切换的过程中 ...

  9. 算法竞赛进阶指南0x51 线性DP

    AcWing271. 杨老师的照相排列 思路 这是一个计数的题目,如果乱考虑,肯定会毫无头绪,所以我们从1号到最后一个依次进行安排. 经过反复实验,发现两个规律 每一行的同学必须是从左向右依次连续放置 ...

  10. 用kubeadm简单部署k8s

    一.环境准备 1.三台CentOS6.7虚拟机 master:192.168.0.54 注意:主节点最好是2颗cpu,否则在k8s控制平面初始化的时候会报错: node1:192.168.0.68 n ...