EZXR 开发者中心

Appearance

ezxrMarker 算法插件 ​

2D Marker AR 能力，能够识别预先设定的目标物体(定义为 Marker），进行视觉跟踪与定位，通过在目标物体周围渲染虚拟物体，从而实现 AR 功能。

插件申请和示例代码 ​

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

  • 插件权限申请

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

  • 内容资源替换

    • 第一步，在洞见 AR-World 小程序能力平台创建图片物体跟踪 - 图片跟踪内容
    • 第二步，参考接入示例接入

  • 示例 Demo

ezxrMarker-demo.zip

更新日志 ​

20230302 v1.0.0
  feat：支持洞见 AR-World 小程序能力平台配置

使用说明 ​

2.1 添加插件 ​

1）首先要在小程序管理后台的“设置-第三方服务-插件管理”中添加插件。

开发者可登录小程序管理后台，通过 appid [wx932aacff36d461ce] 查找插件并添加。

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

代码示例：

javascript
"plugins": {
    "ezxrARSession": {
        "version": "1.0.0",
        "provider": "wx932aacff36d461ce"
    }
}

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

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

代码示例：

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
        "&markerImgUrl=" +
        markerImgUrl
});

2）fnAddMarker

添加 Marker 图片路径，目前只支持本地用户图片

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
this.arSessionCpt = this.selectComponent("#ezxr-arsession");
// 获取WebGLRenderer
const renderer = this.arContentCpt.fnGetRenderer();
// 启动ARSession
const trackerOption = {
    renderer: renderer
};
const trackerType = this.data.MARKER_TYPE["2D"];
await this.arSessionCpt.fnStart(trackerType, trackerOption);

渲染引擎 ​

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

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

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

Unity 内容摆放 ​

摆放步骤：

  1. 将图片导入 unity 中，图片改为 sprite 类型；

  1. 将图片拖动到场景中；position 和 rotation 设置如下：

  1. 场景新建一个 cube；transform 信息如下（y 值也可设为-0.5）：

  1. 将 marker 识别图（marker 上传图）进行缩放，使 marker 识别图的左右边界对齐 cube 边界；

  1. 对齐后，即可根据图片进行开发内容的摆放和大小调整

  1. 效果预览（洞见 AR-World 小程序能力平台内容 ID： 8196）

识别 ​

识别图要求：

跟踪效果 ​

  1. 当跟踪丢失时，不在摄像机下的物体将不显示，摄像机下子物体与跟踪状态无关，将一直显示，除非代码控制。

代码示例 ​