Appearance
ezxrHumanMarker 算法插件
能够实时识别相机拍摄到的人脸、人体和手势，进行视觉跟踪与定位，而且支持在可选择的关键点位置上渲染虚拟物体，从而实现 AR 功能。
插件申请和示例代码
为了快速对插件进行基础的了解和认识，请直接下载示例 Demo，使用微信小程序开发工具打开，修改 AppId 为已申请插件授权的 AppID，替换绑定了上述 AppID 的内容资源，然后在真机扫码预览效果。
插件权限申请
- 首先要在小程序管理后台的“设置-第三方服务-插件管理”中添加插件，通过 AppID** [wx3496c04a64a4ceab]** 查找插件并添加。
- 或者在微信小程序开发者工具中，导入示例 Demo 以后，等开发工具提示需要插件权限时，点击『申请』
内容资源替换
- 第一步，在洞见 AR-World 小程序能力平台创建图片物体跟踪 - 脸部、肢体或手部跟踪内容
- 第二步，参考接入示例接入
示例 Demo
更新日志
202304024 v1.0.0
feat：支持洞见 AR-World 小程序能力平台配置使用说明
2.1 添加插件
1）首先要在小程序管理后台的“设置-第三方服务-插件管理”中添加插件。
开发者可登录小程序管理后台，通过 appid [wx3496c04a64a4ceab] 查找插件并添加。
2）使用插件前，使用者要在 app.json 中声明需要使用的插件
代码示例：
javascript
"plugins": {
"ezxrARSession": {
"version": "1.0.0",
"provider": "wx3496c04a64a4ceab"
}
}2.2 引用插件
此插件提供的页面入口地址为：plugin://ezxrARSession/ARSession
javascript
//在page或component的js文件中添加
const plugin = requirePlugin('ezxrARSession')
//在page或component的json文件中添加
"usingComponents": {
"ezxr-arsession": "plugin://ezxrARSession/ARSession"
}
//在page或component的wxml文件中添加
<ezxr-arsession id="ezxr-arsession"></ezxr-arsession>接口说明
3.1 AREzxr
1）fnWxRequestRes
获取平台内容资源，根据资源类型跳转对应的渲染引擎，并传入获取到的跟踪类别和跟踪点 ID，
代码示例：
javascript
const response = await this.ezxr.fnWxRequestRes(cid, "development");
// 获取跟踪类型trackerType和跟踪点trackPointNumber
let trackerType = response.contentType;
let trackerPointID = response.trackPointNumber;
// editorType 1-web编辑器 2-unity编辑器
if (response.editorType === 1)
rootPath = "/threejs/pages/Entrance/index?";
else if (response.editorType === 2)
rootPath = "/Insight/pages/Entrance/index?";
else return console.error("response with invalid editorType");
wx.navigateTo({
url: rootPath +
"contentPackageUrl=" +
response.contentPackageUrl +
"&trackerType=" +
trackerType +
"&trackerPointID=" +
trackerPointID,
});2）fnGetAnchor2DList
javascript
const anchor2Dlist = this.arEzxr.fnGetAnchor2DList();获取识别到的人脸、人体或手势信息，方便内容层自定义。其中的坐标为归一化后屏幕坐标(0 为左/上边缘，1 为右/下边缘)。详细输出说明：
javascript
// 人脸输出
struct anchor
{
points, // 106点在图像中的(x,y)坐标
origin, // 人脸框的左上角(x,y)坐标
size, // 人脸框的宽和高(w,h)
angle, // 人脸角度信息(pitch, yaw, roll)
}
// 人体输出
struct anchor
{
points, // 人体2D关键点在图像中的(x,y)坐标
origin, // 人体检测框的左上角(x,y)坐标
size, // 人体检测框的宽和高(w,h)
}
// 手势输出
struct anchor
{
points, // 人手2D关键点在图像中的(x,y)坐标
origin, // 人手检测框的左上角(x,y)坐标
size, // 人手检测框的宽和高(w,h)
gesture // 人手手势类别}
}人脸、人体手势点位分布详情：
手势类型列表：
3）fnSetAnchorsAddedListener
设置增加 anchor 的事件监听
4）fnSetAnchorsUpdatedListener
设置更新 anchor 的事件监听，每帧检测到目标触发
5）fnSetAnchorsRemovedListener
设置移除 anchor 的事件监听，每帧未检测到目标触发
6）fnGetCameraFov
获取相机 Fov，可用于设置渲染相机视场角
代码示例：
javascript
this.setData({
camFov: this.ezxr.fnGetCameraFov()
});
this.arContentCpt.fnSetCameraFov(this.data.camFov);7）PoseUpdate
根据配置的跟踪点进行位姿计算，其中人脸跟踪包含位置和姿态角信息，人体和手势仅包含位置信息
8）fnGetGlobalGLPose
获取位姿计算结果
注意事项：fnGetGlobalGLPose 返回结果包含 pose 和 ezxrPose
如使用非易现Insight渲染引擎（threejs-miniprogram），则使用 pose；
如使用易现 Insight 渲染，则使用 ezxrPose。代码示例：
javascript
this.arEzxr.PoseUpdate();
const poseStatus = this.arEzxr.fnGetGlobalGLPose();
if (!poseStatus) {
console.warn("pose is null when updating cam pose");
return;
}
// 使用threejs-miniprogram渲染引擎
this.contentCpt.fnSetCameraPose(poseStatus.pose);
// or 使用Insight渲染引擎
// this.contentCpt.fnSetCameraPose(poseStatus.ezxrPose);3.2 ARSession
1）fnStart
启动 ARSession，需传入渲染引擎 renderer
由于 ARSession 依赖于渲染上下文，在启动算法前需要先准备好 WebGLRenderer 渲染器
可以设置是否绘制点和边框
代码示例：
javascript
data: {
TRACKER_TYPE: {
6: "face", // 6-人脸跟踪 7-人体跟踪 8-手势跟踪
7: "body",
8: "hand"
},
this.arSessionCpt = this.selectComponent("#ezxr-arsession");
// 获取WebGLRenderer
const renderer = this.arContentCpt.fnGetRenderer();
// 启动ARSession
const trackerOption = {
renderer: renderer
drawPoints: true, // 可选配置,是否绘制点和边框,若无则为默认值true
drawBorder: false
};
const trackerType = this.this.data.TRACKER_TYPE[options.trackerType];
await this.arSessionCpt.fnStart(trackerType, trackerPointID, trackerOption);渲染引擎
插件 demo 内容渲染可选 threejs-miniprogram 或 易现自研渲染引擎(Insight)
如选择 threejs-miniprogram 渲染引擎，可在内容平台使用 Web 编辑器制作资源后发布。
如选择 Insight 渲染引擎，当前需要依赖易现内部创作工具进行资源导出，开发者可提供定制美术资源，易现进行导出后使用。