云裂变营销网
标题:
微信小程序最新大招——xr-frame尝鲜，AR
[打印本页]
作者:
匿名
时间:
2023-3-10 10:50
标题:
微信小程序最新大招——xr-frame尝鲜，AR
xrframe对ar的使用进行了非常多的简化，只需要简单的几步就可以开发一个带有ar能力的小程序，并且还能支持图像、手势、平面识别等ar中常用的AI能力。
demo效果如下：
平面识别
自定义marker识别
人脸识别
手势识别
躯体识别
本文为系列文章，建议没看过基础讲解的同学先看看：微信小程序最新大招——xr-frame尝鲜，基础图形讲解
全文目录：微信小程序最新大招——xr-frame尝鲜
本文讲解demo：AR案例：
官方给出的代码示例大同小异，这里统一讲解，对应官方小程序（名字：小程序示例）的交互动画/xrframe/gltf案例，代码为：
https://github.com/dtysky/xr-frame-demo/tree/master/miniprogram/components/xr-ar-basic
https://github.com/dtysky/xr-frame-demo/tree/master/miniprogram/components/xr-ar-camera
https://github.com/dtysky/xr-frame-demo/tree/master/miniprogram/components/xr-ar-2dmarker
https://github.com/dtysky/xr-frame-demo/tree/master/miniprogram/components/xr-ar-osdmarker
https://github.com/dtysky/xr-frame-demo/tree/master/miniprogram/components/xr-ar-face
https://github.com/dtysky/xr-frame-demo/tree/master/miniprogram/components/xr-ar-hand
https://github.com/dtysky/xr-frame-demo/tree/master/miniprogram/components/xr-ar-body
以下讲解实现方案：
1.在真实世界上渲染：
1).在xr-scene标签上增加ar-system属性，值为camera:Back：
<xr-scene ar-system=&#34;camera:Back&#34;>
复制代码
camera表示使用手机的前置（Front）还是后置（Back，默认）摄像头
2).在xr-camera标签增加background属性，值为ar：
<xr-camera ... background=&#34;ar&#34;/>
复制代码
这样camera在渲染背景时就会使用手机摄像头拍摄到的图像：
demo效果如下：中间的桌子是个gltf节点，场景背景是摄像头拍到的真实世界
2.使用AI能力：
在真实世界上渲染只是ar的最基础一步，想要做出有趣的ar小程序，还需要借助AI的识别能力，识别真实世界中的物体并与之交互，目前xr-frame提供了一些直接可用的AI识别能力：
1).平面识别：
可以根据摄像头拍摄到的真实世界，识别出桌面、地面等平面，并可以将一个元素放在这个平面上，元素会根据手机的移动在平面上移动，并保持近大远小的效果
demo效果如下：
实现方法：
在xr-scene标签的ar-system属性中，增加modes:Plane
<xr-scene ar-system=&#34;modes:Plane&#34;>
复制代码
之后使用xr-ar-tracker标签，声明mode为Plane，子节点为需要在平面上移动的元素
<xr-ar-tracker mode=&#34;Plane&#34;>
<xr-gltf model=&#34;anchor&#34;></xr-gltf>
</xr-ar-tracker>
复制代码
最后在xr-camera上增加is-ar-camera属性，此时相机的各参数将由AR系统自动控制
<xr-camera ... background=&#34;ar&#34; is-ar-camera>
复制代码
注意：增加is-ar-camera后不能用js修改相机的属性，否则会和系统的控制冲突
xr-frame还提供了两个方法，供开发更多交互能力：
scene.ar.placeHere(nodeId | element, switchVisible)
scene.ar.resetPlane();
复制代码
placeHere将一个元素放到平面上，随着摄像头移动（如前进或后退），元素会相对固定在平面的放置位置
resetPlane将放置的元素清除
2).2D Marker、OSD Marker：
Marker是事先给出的一个识别物（比如苹果），在识别到一个marker时，实时计算出这个marker的位置，这样就可以根据该位置来渲染元素，从而与真实世界同步，如：在苹果上渲染两个眼睛，摄像头移动时，眼睛始终在苹果上
2D Marker与OSD Marker的区别在于二者使用的识别算法不一样，2D Marker在marker旋转的时候，渲染的元素也会跟着旋转，但OSD Marker则不会旋转
demo效果如下：我拍了一张我杯盖的照片，再去识别杯盖
实现方法：
在xr-scene的ar-system上设置modes:Marker或OSD
<xr-scene ar-system=&#34;modes:Marker&#34;>
复制代码
使用xr-ar-tracker，声明mode为Marker或OSD，并传入marker图片的地址
<xr-ar-tracker mode=&#34;Marker&#34; src=&#34;***.png&#34;>
<xr-gltf model=&#34;gltf&#34; .../>
</xr-ar-tracker>
复制代码
src可以传入绝对路径，也可以传入临时文件路径（wx.chooseMedia的回调）
子元素（就是demo上的三个蝴蝶）是以marker位置为基准来偏移的
注意，camera元素依然要有background=&#34;ar&#34;和is-ar-camera属性
3).人脸、手势、躯体识别
人脸、手势、躯体的识别方式都是根据特征点来识别的，下面以人脸为例说明
xr-frame会识别出人脸的上百个特征点，通过这些特征点，可以判断人脸的位置、五官的位置甚至是表情等微观细节
以下是一个特征点的示例：
我们可以将元素绑定到某个特征点上，在特征点移动时元素将会跟着移动：
<xr-ar-tracker mode=&#34;Face&#34; auto-sync=&#34;-1 105 104 45 98&#34;>
<xr-node name=&#34;face&#34;><xr-mesh .../></xr-node>
<xr-node name=&#34;eyeL&#34;><xr-mesh .../></xr-node>
<xr-node name=&#34;eyeR&#34;><xr-mesh .../></xr-node>
<xr-node name=&#34;nose&#34;><xr-mesh .../></xr-node>
<xr-node name=&#34;mouth&#34;><xr-mesh .../></xr-node>
</xr-ar-tracker>
复制代码
xr-ar-tracker的mode需要为Face，auto-sync代表了其子元素应该绑定到哪个特征点上，-1表示不绑定，如第二个元素eyeL会被绑定在105特征点上，位置大致在左眼，效果如下：
3.编程接口
除此之外，xrframe还提供了接口来方便开发更多交互功能：
const trackerEl = this.scene.getElementById(&#39;tracker&#39;);
const tracker = trackerEl.getComponent(xrSystem.ARTracker);
// 获取某特征点位置
// 第一个参数是特征点编好
// 第二个参数可选，传入一个Vector3，会将结果放入其中
// 第三个参数可选，返回的坐标否相对于`ARTracker`，false为返回绝对坐标
const position = tracker.getPosition(98, new xrSystem.Vector3(), true);
// 获取手势姿态，详见官网
const gesture = tracker.gesture;
// 获取总体置信度
const score = tracker.score;
复制代码
4.tracker的状态
由于识别需要一定的时间，因此在实时度要求高的场景下，需要判断tracker的状态（已识别/识别中/失败）来进行编程
xr-ar-tracker标签支持两种事件：
1. ar-tracker-state： 状态改变时触发，事件回调的参数：ARTracker实例，包括了识别状态、错误信息
2. ar-tracker-switch：简化的事件，只有识别到了和未识别到两种状态
绑定事件有两种方式，第一种是绑定到标签的属性
<xr-ar-tracker ... bind:ar-tracker-state=&#34;handleARTrackerState&#34;>
复制代码
第二种是在代码里绑定，注意这里需要在scene的ar-ready触发事件后绑定
<xr-scene ... bind:ar-ready=&#34;handleARReady&#34;>
handleARReady({detail}) {
const tracker = this.scene.getElementById(&#39;ar-tracker&#39;).getComponent(xrFrameSystem.ARTracker);
tracker.el.event.add(&#39;ar-tracker-state&#39;, tracker => {
const {state, errorMessage} = tracker;
});
}
复制代码
欢迎光临 云裂变营销网 (https://www.yunliebian.com/yingxiao/)
Powered by Discuz! X3.4
