初识xr-frame识别追踪渲染3D模型

初识xr-frame识别追踪渲染3D模型

微信的3D引擎xr-frame发布已经有一段时间了，官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework/xr-frame/。
我这段时间有空，正好研究下，小程序中可以直接使用，不用另外引入引擎包，相比threejs等第三方包，可以减少不小包体积。

xr-frame内置AR系统支持，AR追踪器ARTracker是AR系统的一部分，提供了一种非常简单的方式，在特定的识别模式下识别出图像或者物体，对其进行跟随。
文档上没有找到使用多识别图片使用方法，所有使用云识别功能，云识别使用的无间科技的技术，官方文档地址：https://developer.wujianar.com/iss/search.html。
使用例子：https://gitee.com/wujianar/wujianar-wx-mini-sample。

1. 云识别配置

使用无间科技的开发中心创建一个云识别库，上传识别图与配置关联信息，本次开发用到的如下：

识别图：

关联信息：

{"modelUrl":"https://wujianar-cdn.oss-cn-hangzhou.aliyuncs.com/ardemo/models/kl.gltf","scale":0.07}
1

在云别库中的图库密钥中选择客户端密钥，选择一个有效期，并把生成的Token复制下来，云识别需要用这个来认证，替换app.ts中的Token就行。

2. 小程序开发配置

将域名 iss-api.wujianar.cn 加入到request合法域名中，及将 wjasset.oss-cn-hangzhou.aliyuncs.com 加入到downloadFile合法域名中。在开发的时候也可以勾选不检测域名。

3. wxml文件

xr-model/index.wxml

<xr-scene ar-system="modes:Marker" id="xr-scene" bind:ready="handleReady" bind:ar-ready="handleARReady" bind:tick="handleTick">
    <xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">
        <xr-asset-load wx:if="{{assetId != ''}}" type="gltf" asset-id="{{assetId}}" src="{{modelUrl}}" />
    </xr-assets>
    <xr-node>
        <xr-ar-tracker wx:if="{{markerUrl != ''}}" mode="Marker" src="{{markerUrl}}" id="arTracker" bind:ar-tracker-switch="handleTrackerSwitch">
            <xr-gltf wx:if="{{assetId != ''}}" node-id="player" model="{{assetId}}" scale="{{scale}} {{scale}} {{scale}}" anim-autoplay />
        </xr-ar-tracker>
        <xr-camera id="camera" node-id="camera" position="0.8 2.2 -5" clear-color="0.925 0.925 0.925 1" background="ar" is-ar-camera></xr-camera>
    </xr-node>
    <xr-shadow id="shadow-root"></xr-shadow>
    <xr-node node-id="lights">
        <xr-light type="ambient" color="1 1 1" intensity="1" />
        <xr-light type="directional" rotation="180 0 0" color="1 1 1" intensity="1" />
    </xr-node>
</xr-scene>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

4. ts文件（不完整，请下载sample查看完成代码）

xr-model/index.ts

云识别部分

# 获取场景的内容，发送到云识别服务识别
const base64 = this.scene.share.captureToDataURL({ type: 'type', quality: 0.7 });
wuJianAR.search({ image: base64.split('base64,').pop() }).then(msg => {
    console.info(msg);

    // code为200时识别到目标，非200时为未识别到目标
    if (msg.code !== 200) {
        wx.showToast({ title: `未识别到目标`, icon: 'none', duration: 1000 });
        return;
    }

    this.triggerEvent('searchSuccess', msg.data, {});
    wx.showToast({ title: `识别到目标：${msg.data.name}`, icon: 'none', duration: 1000 });

    this.showModel(msg.data);
}).catch(err => {
    console.warn(err);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

设置xr-frame追踪部分

showModel: async function (data: any) {
    let brief: ModelSetting;
    try {
        brief = JSON.parse(data.brief);
    } catch (e) {
        console.error(e);
        wx.showModal({
            title: '提示',
            content: '解析关联数据错误',
            showCancel: false,
        });
        return;
    }

    if (!brief.modelUrl) {
        wx.showToast({ title: '模型地址错误', icon: 'error' });
        return;
    }

    this.setData({
        markerUrl: data.image,
        assetId: data.uuid,
        scale: brief.scale,
        modelUrl: brief.modelUrl,
    });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

5. 需要注意的地方

使用Nightly版本的工具

xr-frame目前仍然是是Beta版本，需要Nightly版本的工具，特定客户端（8.0.29以上）和基础库（2.28.1以上），更多限制请见限制和展望。

xr-model/index.json文件中要设置xr-frame，不然是不会加载xr-frame引擎的。

{
  "component": true,
  "renderer": "xr-frame"
}
1
2
3
4

miniprogram/app.json文件是增加一条 “lazyCodeLoading”: “requiredComponents”，如

{
    "pages": [
        "pages/index/index",
        "pages/xr-model/index"
    ],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "无间WebAR 微信小程序Sample",
        "navigationBarTextStyle": "black"
    },
    "lazyCodeLoading": "requiredComponents",
    "style": "v2",
    "sitemapLocation": "sitemap.json",
    "useExtendedLib": {
        "weui": true
    }
}
｀｀｀

## 6. 最终效果


[video(video-NSdCj49j-1682153593791)(type-csdn)(url-https://live.csdn.net/v/embed/291965)(image-https://video-community.csdnimg.cn/vod-84deb4/0eeef810e0e871ed83886633b79f0102/snapshots/d6bfb97cc1af4948b29b0a3f65c0792a-00002.jpg?auth_key=4835752286-0-0-7a2e8bfa2ae35fc83112da8f349a3b53)(title-微信小程序xr-frame开发AR追踪功能)]


sample下载　https://gitee.com/wujianar/wujianar-wx-mini-sample

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28