三维Marker

3D Marker识别模式,使用方法与 2D Marker 基本一致,差异是,识别特征用的 src 需使用 三维识别特征文件 map,该文件可以通过 微信小程序示例 的 接口VisionKit视觉能力3DMarkerAR 页面生成。

三维识别特征文件 map 是根据 VisionKit 提供的算法能力,通过环绕物体一周的视频生成。流程同时还会产出三维重建的产物 glTF。具体的生成视频规范、生成流程、以及产物细节可以参考 VisionKit 3DMarker。

该模式下,识别出来的三维坐标系,会自带一个基于生成视频的旋转,一般情况下,这个旋转值都是很接近的。可以在业务逻辑上,对这个旋转进行适配。

<xr-ar-tracker mode="Marker" src="/assets/3d-marker.map">
  <!-- 一般情况下,可以用140度的旋转进行修正 -->
  <xr-node rotation="140 0 0">
      <xr-gltf model="gltf"></xr-gltf>
  </xr-node>
</xr-ar-tracker>

二维Marker

2D Marker识别模式,会将传入的 src (图片的网络地址) 或是 imageimage类型资源id,优先使用)作为特征,去识别出三维空间一个平面上的图像部分,继而进行追踪。这个技术现在已经十分成熟可靠。

注意需要相机组件开启isARCamera 在这种追踪模式下,当AR系统识别到目标时会自动应用3D变换到AR追踪器组件所在的节点元素上,进而影响所有的子节点:

案例代码片段 链接

<xr-ar-tracker mode="Marker" src="{{markerImg}}">
  <xr-gltf model="gltf" anim-autoplay position="0.2 0 -0.2" scale="0.6 0.6 0.6" rotation="0 -50 0" />
  <xr-gltf model="gltf" anim-autoplay position="0.4 0 0.3" scale="0.5 0.5 0.5" rotation="0 -50 0" />
  <xr-gltf model="gltf" anim-autoplay position="-0.3 0 0.3" scale="0.4 0.4 0.4" rotation="0 -50 0" />
</xr-ar-tracker>

不同AR追踪器的坐标系差异

在使用对应的 识别模式ARTracker后, xr-camera 会完全由 VisionKit 的 VKCamera 完全接管相机的控制权(使用 VKCamera 的 ViewMatrix 与 ProjectionMatrix)。

此时,xr-frame 的坐标系,将会由 VisionKit 对应模式的坐标系决定。

以下,结合案例(红色轴为 x 轴、绿色轴为 y 轴、蓝色轴为 z 轴,都朝向正方向轴长为 2

简要阐述不同模式的坐标系规则:

Plane 模式

平面模式下,初始化场景后,相机所在的坐标,就是世界坐标的 (0, 0, 0),坐标轴会基于初始化的手机朝向,决定坐标轴的方向(正上方为+Y,正右方为+X,正后方为+Z)。

手机的移动和旋转,相机都会有对应的响应。

周围的具体坐标信息变化,是存在多种情况。

在支持 Plane V2 模式下,会使用 Plane V2 模式:

该模式下,类似现实世界的空间坐标,坐标系的单位距离和现实中的物理距离有关,单位1相当于现实中的1米。

该模式下,tracker同步的识别平面坐标,会完全基于三维空间坐标进行定义。

在不支持 Plane V2 模式下,会使用 Plane V1 模式,

该模式下,类似一个可以无限延展的平面空间,可以移动,但坐标系的单位距离和现实中的物理距离无关

具体 VisionKit 细节可以参考 VisionKit Plane 文档。

ThreeDof 模式

初始化场景后,相机所在的坐标下方,就是世界坐标的 (0, 0, 0)

该模式下,类似一个可以无限延展的平面空间,不可以移动,且坐标系的单位距离和现实中的物理距离无关

手机移动过程中,相机在坐标系中的坐标不会发生改变,但会有旋转的响应。

Marker 模式

该模式下,识别点中心就是 世界坐标的 (0, 0, 0),坐标轴会基于识别物,决定坐标轴的方向(识别图片往外为+Y,识别图片右方为+X,识别图片下方为+Z),单位1相当于识别物体的大小。

OSD 模式

该模式下,识别结果为二维。

识别点中心就是 世界坐标的 (0, 0, 0),坐标轴会基于识别物,决定坐标轴的方向(识别图片往内为+Z,识别图片上方为+Y,识别图片向右为+X),单位1相当于识别物体的大小。

Hand Face Body 模式

该模式下,识别点的关键点就是 世界坐标的 (0, 0, 0)坐标轴 也是用于特征点定位,单位1是基于识别物体的比例。

AR场景事件

<xr-scene bind:ready="handleReady" bind:ar-ready="handleARReady">
</xr-scene>

AR系统为场景元素提供了以下事件:

事件 参数 立即 wxml 时机
ar-ready 微信小程序AR功能启动成功
ar-error 错误error 微信小程序AR功能启动失败

ARCamera

<xr-camera
  background="ar" is-ar-camera
/>

首先是background,当将其设置为ar时,整个场景的背景会显示为当前手机摄像头拍摄的画面。

然后是isARCamera,当开启它时,这个相机会被作为AR相机使用。在AR系统为PlaneMarker模式时,相机的参数将由AR系统控制,请不要在脚本中自行修改相机属性!!!

深度遮挡

Beta 版本特性 依赖基础库版本 v3.1.0

需要在 Plane 模式,且支持 v2 的设备上,planeMode 需设定为 1(只允许水平面识别)。

通过以下几个属性确定 ARsystem 深度遮挡的具体表现

  1. depthMask 在满足使用要求的情况下,是否开启实时深度遮挡。
  2. depthNear 开启实时深度遮挡时,遮挡的近处阈值。
  3. depthFar 开启实时深度遮挡时,遮挡的远处阈值。
  4. depthDebug 开启实时深度遮挡时,显示一个用于Debug的图层。

案例代码片段 链接

<!-- plane + depth 模式下 planeMode 需设置为 1 (只允许水平面识别) -->
<!-- 水平平面识别情况下,开启深度,近处阈值为0.1,远处阈值为1的深度遮挡,并显示调试用图层 -->
<xr-scene ar-system="modes:Plane; planeMode: 1; depthMask: true; depthNear: 0.1; depthFar: 100; depthDebug: true;">
</xr-scene>

识别模式

modes 属性,决定AR系统使用的具体识别模式。大部分情况下只允许同时运行一种模式。

目前不支持 modes 模式的动态切换。如果需要切换,可以考虑销毁原AR组件后,新建其他AR模式组件实现

目前支持的单一模式:

  1. 平面识别 Plane
  2. 2DMarker / 3DMarker 识别 Marker
  3. OSD识别 OSD
  4. 人脸识别 Face
  5. 肢体识别 Body
  6. 手部识别 Hand

目前由于微信小程序AI系统限制,除了 Plane + Marker 模式外,只能同时开启一种模式!!!

目前支持的混合模式:

  1. 平面结合Marker识别 Plane Marker
<!-- 目前版本 plane + marker 模式下 planeMode 需设置为 1 (只允许水平面识别) -->
<xr-scene ar-system="modes:Plane Marker; planeMode: 1"></xr-scene>

GLTF画廊

*以下图片均为 xr-frame 渲染截屏,模型来源为 gltf 官方示例与 sketchfab 资源(CC-Licensed)。

物件模型

人物模型

卡通模型

完整场景

GLTF介绍

GLTF是一种被广泛使用的文件格式,用来储存3D模型和3D场景。在xr-frame里你可以非常轻松地引入任意GLTF模型,并将其渲染出来。

使用GLTF的优势

📦 单一文件,完整场景

使用GLTF打包后的GLB文件,可将一整个场景的所有要素包揽进去。轻松管理你的3D资源。

🌍 成熟生态,海量资源

来自全世界的优秀创作者,在不同社区中分享作品。配合xr-frame的渲染能力,简直是随取随用。

微信小程序 + GLTF 可以做到…

  • 基础三角形网格模型
  • 场景树状节点组织
  • PBR材质渲染
  • 渲染状态控制
  • 模型基础动画
  • 骨骼蒙皮以及骨骼动画
  • 顶点Morph以及Morph动画
  • 点选GLTF模型与其交互
  • TS脚本控制GLTF渲染
  • ……

GLTF模型一般是什么样的?

如果你对GLTF还没有一个大致的了解:别担心,这里准备了一些图片,带你阅览各种各样的GLTF模型。

我要怎么做才能使用GLTF模型?

仅需要2行xml代码,2个xml标签,一个负责加载,一个负责渲染。即可将任意GLTF模型引入你的微信小程序中。

点击这里跟着我们的步骤来实现。


GLTF

  • GLTF格式介绍 – 面向不熟悉GLTF格式的用户;
  • 画廊 – 由xr-frame渲染的GLTF画廊;
  • GLTF使用说明 – 在xr-frame里使用GLTF的方法与规则;
  • 模型优化工具