EZXR 开发者中心

Appearance

ezxrARSession-6dof 算法插件 ​

6DoF 算法相比 3DoF 除了转动姿态跟踪外，还具有移动位置的跟踪同步，实现手机与虚拟内容更多维度的交互能力。

插件申请和示例代码 ​

为了快速对插件进行基础的了解和认识，请直接下载示例 Demo，使用微信小程序开发工具打开，修改 AppId 为已申请插件授权的 AppID，替换绑定了上述 AppID 的内容资源，然后在真机扫码预览效果。

  • 插件权限申请

    • 首先要在小程序管理后台的“设置-第三方服务-插件管理”中添加插件，通过 AppID** [wxc540558fed1b91d5]** 查找插件并添加。
    • 或者在微信小程序开发者工具中，导入示例 Demo 以后，等开发工具提示需要插件权限时，点击『申请』

  • 内容资源替换

    • 第一步，在洞见 AR-World 小程序能力平台创建 6DoF 跟踪 - 桌面级内容
    • 第二步，参考接入示例接入

  • 示例 Demo

wx-ezxrarsession-6dof-demo.zip

更新日志 ​

20230901 v1.2.3
  支持拓展的平面识别

20230726 v1.2.2
  优化日志
  
20230726 v1.2.1
  增加算法启动和成功运行状态回调接口
  
20230307 v1.2.0
  支持unity和 threejs Web 双编辑器  
  支持洞见 AR-World 小程序能力平台配置
  拍照功能

使用说明 ​

3.1 添加插件 ​

1）使用插件前，使用者要在 app.json 中声明需要使用的插件

代码示例：

javascript
"plugins": {
    "ezxrARSession": {
        "version": "1.2.2",
        "provider": "wxc540558fed1b91d5"
    }
}

3.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>

 this.ezxr = new plugin.AREzxr(); // 同下文中this.arEzxr

接口说明 ​

4.1 AREzxr ​

【AREzxr 方法库】

方法名称方法说明入参与返回
fnWxRequestRes

获取内容平台配置

入参如下：

cid：内容平台 cid（同内容id）

key：内容平台环境，development（测试）/production（线上）

返回如下：

contentId：内容ID

contentName：内容名

contentPackageUrl：内容包资源链接

contentType：内容类别，1；

editorType： 1-web 编辑器 2-unity 编辑器

PoseUpdate获取 GL 坐标 pose算法更新。

fnGetGlobalGLPose

获取 ezxrGL 坐标 pose

获取算法坐标。

返回:ezxrPose,pose,timestamp

fnGetHitTestPose进行空间放置检测

入参：屏幕像素归一化坐标x, y

返回：空间姿态矩阵数组

fnGetCameraFov获取相机Fov返回：Fov

1）fnWxRequestRes

获取平台内容资源，根据资源类型跳转对应的渲染引擎

代码示例：

javascript
const response = await this.ezxr.fnWxRequestRes(cid, "development");
// 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,
});

2）PoseUpdate

进行跟踪位姿计算

3）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);

4）fnGetHitTestPose

进行空间放置检测，输入参数为屏幕像素归一化坐标 x, y

返回结果为代表空间姿态矩阵的数组(列优先)

注意事项：fnGetHitTestPose 返回结果包含 pose 和 ezxrPose

如使用非易现Insight渲染引擎（threejs-miniprogram），则使用 pose；
如使用易现 Insight 渲染，则使用 ezxrPose。

代码示例：

javascript
const hitPose = this.arEzxr.fnGetHitTestPose(0.5, 0.5);

// 使用threejs-miniprogram渲染引擎
this.contentCpt.fnUpdateReticlePointer(hitPose.pose);
// or 使用Insight渲染引擎
// this.contentCpt.fnUpdateReticlePointer(hitPose.ezxrPose);

5）fnGetCameraFov

获取相机 Fov，应用于渲染引擎

代码示例：

javascript
this.setData({
    camFov: this.ezxr.fnGetCameraFov()
});
this.arContentCpt.fnSetCameraFov(this.data.camFov);

4.2 ARSession ​

【ARSession 组件】

方法名称方法说明入参与返回
fnStart

算法启动

trackerType：跟踪类型，填11；

trackerOption：跟踪参数

renderer: 渲染引擎上下文

onStarted: 算法启动完成回调, >=1.2.1版

onRecogSuccess: 算法成功运行回调, >=1.2.1版本

1）fnStart

启动 ARSession，需传入渲染引擎 renderer

由于 ARSession 依赖于渲染上下文，在启动算法前需要先准备好 WebGLRenderer 渲染器

代码示例：

javascript
this.arSessionCpt = this.selectComponent("#ezxr-arsession");
// 获取WebGLRenderer
const renderer = this.arContentCpt.fnGetRenderer();
// 算法启动, 可渲染背景;
const onStarted = () => {   
    console.log("Tracker onStarted");
};
// 算法初始化完成, 可获得camera pose;
// 初始化后同步内容和算法fov, 同时获取pose开始显示内容;
const onRecogSuccess = () => {  
    console.log("Tracker onCompleted");
    // 获取算法Fov, 设置内容渲染fov
    const camFov = this.ezxr.fnGetCameraFov();
    this.arContentCpt.fnSetCameraFov(camFov);
}
_const trackerOption = {
    renderer: wcengine,
    onStarted: onStarted,
    onRecogSuccess: onRecogSuccess,
__};_
//算法启动，要求先启动内容后再启动算法
const trackerType = this.data.TRACK_TYPE.DOF_6;
await this.arSessionCpt.fnStart(trackerType, trackerOption);

渲染引擎 ​

插件 demo 内容渲染可选 threejs-miniprogram 或 易现自研渲染引擎(Insight)

如选择 threejs-miniprogram 渲染引擎，可在内容平台使用 Web 编辑器制作资源后发布。

如选择 Insight 渲染引擎，当前需要依赖易现内部创作工具进行资源导出，开发者可提供定制美术资源，易现进行导出后使用。