基于xr-frame实现微信小程序的图片扫描识别AR功能(含源码)

2024-08-24 21:20

本文主要是介绍基于xr-frame实现微信小程序的图片扫描识别AR功能(含源码),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言

xr-frame是一套小程序官方提供的XR/3D应用解决方案,基于混合方案实现,性能逼近原生、效果好、易用、强扩展、渐进式、遵循小程序开发标准。xr-frame在基础库v2.32.0开始基本稳定,发布为正式版,但仍有一些功能还在开发,目前(2024.08.24)有一些限制如下:

1最低要求客户端iOS8.0.29、安卓8.0.30及以上,推荐稳定版在iOS8.0.36、安卓8.0.35及以上。
2基础库最低2.27.1及以上,推荐2.32.0及以上。
3开发工具需要最新版本,建议Nightly版本。
4小程序全局同一时刻只能存在一个xr-frame组件,否则可能会发生异常。
5同一个xr-frame组件只能存在一个xr-scene,并且必须为顶层。
6目前不支持和小程序传统标签比如混写。
7目前不支持wxml自动补全,真机调试需要特别注意,见真机调试文档。

后续的展望:

1 XR-FRAME内置特色的UI组件,让开发者可以在XR-FRAME组件中写UI,来实现一套酷炫的UI系统。
2 AR/VR能力持续增强,支持眼睛设备。
3 交互手段进一步强化,物理碰撞、触发等功能(已完成,待发布)。
4 工具能力强化,包括标签属性自动补全等。

本文以该解决方案的官方demo为参考开发微信小程序的图片识别并叠加模型动作的功能,具体使用的是2D Marker识别模式,会将传入的 src (图片的网络/本地地址) 或是 image(image类型资源id,优先使用)作为特征,去识别出三维空间一个平面上的图像部分,继而进行追踪。这个技术现在已经十分成熟可靠。这里以一张蓝色蝴蝶的图片作为识别图片,识别后在识别图上叠加一个3D蝴蝶模型并播放动作。

效果

扫描中:
在这里插入图片描述

扫描识别结果:
在这里插入图片描述

硬广

自制3D版三维搭建俄罗斯方块WX小游戏,走过路过可以扫描支持。
在这里插入图片描述

三维的消除,地狱难度:
在这里插入图片描述

实现功能

由于该功能的较为稳定,所以基本是使用官方的微信小程序xr-frame系统的示例集中的“平面识别叠加Marker案例 ”(components/xr-ar-basic)修改而来,基本的代码都是沿用的,只不过修改了识别的展示,降云上的图片和模型资源用本地的素材替换。

素材准备

本demo较为简单计划只有两个界面,一个主界面和一个识别界面,主要就是一个主页背景(AI生成)、一个识别图和一个识别模型,资源如下:
在这里插入图片描述

主页搭建

主页的设计较为简单,一个背景图,附加一个标题,一个图片识别的按钮,点击后进入图片识别页面。

<!--pages/home/index.wxml-->
<view class="home-container"><image class="home-bg" src="../../assets/bgimg.png"/><view class="title">畅游AR世界</view><view class="btns"><navigator class="btn-nav" url="/pages/ar/index"><button class="btn green">AR识图</button></navigator></view>
</view>

在这里插入图片描述

识别组件

由于“目前不支持和小程序传统标签比如混写”的限制,所以识别的功能需要制作成组件放入到页面,识别的组件参考的是components/xr-ar-basic,其中wxml中修改了xr的资源加载如下:

  <xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded"><xr-asset-load type="gltf" asset-id="hudie" src="/assets/hudie.glb"/></xr-assets>

这里就将glb的模型加载进入场景,类型是“gltf”模型,asset-id可以自定义编号,不过识别跟踪的时候需要绑定,src是资源的地址可以是远程或者本地地址,这里模型是放到assets文件夹下所以路径是/assets/hudie.glb。

创建AR追踪器实现如下:

<xr-ar-tracker  mode="Marker" data-id="hudie-img" src="/assets/hudie.png" bind:ar-tracker-switch="handleTrackerSwitch"><xr-gltf  model="hudie" rotation="0 -90 0" anim-autoplay scale="1.5 1.5 1.5" ></xr-gltf>
</xr-ar-tracker>

其中mode是ar在追踪的模式,这里是2D Marker识别模式,src指定了识别图的路径(可以是远程或者本地地址);bind是绑定相关事件,这里是将追踪器状态切换事件绑定到handleTrackerSwitch函数处理。

追踪器的子节点是xr-gltf 即识别后的模型展示,model就是关联asset-id,rotation修改模型旋转值,scale修改模型缩放,这两个值可能需要多次调整才能达到需要的效果,还有position用于位置修改。anim-autoplay设置自动播放模型动画(有动画才生效)。

Json文件设定组件,并指定渲染为xr-frame渲染:

{"component": true,"usingComponents": {},"renderer": "xr-frame"
}

识别界面

上一步已经将ar图片识别的功能弄成了组件,在识别界面的搭建主要是组件的使用,这里先在json中引用组件:

{"usingComponents": {"xr-comp": "../../components/xr-image/index"},"navigationBarTitleText": "AR识图","navigationBarBackgroundColor": "#1D1918","navigationBarTextStyle": "white","disableScroll": true
}

这里将xr-image组件引用为xr-comp标签,设置标题和页面不可滑动。

在wxml中插入xr-comp:

<view class="ar-page"><xr-compdisable-scrollid="main-frame"class="main-ar-frame"width="{{renderWidth}}"height="{{renderHeight}}"style="width:{{width}}px;height:{{height}}px;top:{{top}}px;left:{{left}}px;display:block;"bind:arTrackerState="handleArStatusChange"/>
</view>

其中

bind:arTrackerState=“handleArStatusChange”

将ar追踪器的状态(arTrackerState)绑定到js中的handleArStatusChange函数:

  handleArStatusChange({detail}) {const {state, error} = detail;//console.log("handleArStatusChange status:" + state);this.setData({isScanning: state == 1, //是否在扫描中 1识别中, 2识别成功})
}

在handleArStatusChange中可以根据识别状态的变更编写更细节的交互逻辑。

工程源码

https://download.csdn.net/download/qq_33789001/89665224

这篇关于基于xr-frame实现微信小程序的图片扫描识别AR功能(含源码)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1103632

相关文章

C++中零拷贝的多种实现方式

《C++中零拷贝的多种实现方式》本文主要介绍了C++中零拷贝的实现示例,旨在在减少数据在内存中的不必要复制,从而提高程序性能、降低内存使用并减少CPU消耗,零拷贝技术通过多种方式实现,下面就来了解一下... 目录一、C++中零拷贝技术的核心概念二、std::string_view 简介三、std::stri

C++高效内存池实现减少动态分配开销的解决方案

《C++高效内存池实现减少动态分配开销的解决方案》C++动态内存分配存在系统调用开销、碎片化和锁竞争等性能问题,内存池通过预分配、分块管理和缓存复用解决这些问题,下面就来了解一下... 目录一、C++内存分配的性能挑战二、内存池技术的核心原理三、主流内存池实现:TCMalloc与Jemalloc1. TCM

OpenCV实现实时颜色检测的示例

《OpenCV实现实时颜色检测的示例》本文主要介绍了OpenCV实现实时颜色检测的示例,通过HSV色彩空间转换和色调范围判断实现红黄绿蓝颜色检测,包含视频捕捉、区域标记、颜色分析等功能,具有一定的参考... 目录一、引言二、系统概述三、代码解析1. 导入库2. 颜色识别函数3. 主程序循环四、HSV色彩空间

苹果macOS 26 Tahoe主题功能大升级:可定制图标/高亮文本/文件夹颜色

《苹果macOS26Tahoe主题功能大升级:可定制图标/高亮文本/文件夹颜色》在整体系统设计方面,macOS26采用了全新的玻璃质感视觉风格,应用于Dock栏、应用图标以及桌面小部件等多个界面... 科技媒体 MACRumors 昨日(6 月 13 日)发布博文,报道称在 macOS 26 Tahoe 中

Python实现精准提取 PDF中的文本,表格与图片

《Python实现精准提取PDF中的文本,表格与图片》在实际的系统开发中,处理PDF文件不仅限于读取整页文本,还有提取文档中的表格数据,图片或特定区域的内容,下面我们来看看如何使用Python实... 目录安装 python 库提取 PDF 文本内容:获取整页文本与指定区域内容获取页面上的所有文本内容获取

基于Python实现一个Windows Tree命令工具

《基于Python实现一个WindowsTree命令工具》今天想要在Windows平台的CMD命令终端窗口中使用像Linux下的tree命令,打印一下目录结构层级树,然而还真有tree命令,但是发现... 目录引言实现代码使用说明可用选项示例用法功能特点添加到环境变量方法一:创建批处理文件并添加到PATH1

Java使用HttpClient实现图片下载与本地保存功能

《Java使用HttpClient实现图片下载与本地保存功能》在当今数字化时代,网络资源的获取与处理已成为软件开发中的常见需求,其中,图片作为网络上最常见的资源之一,其下载与保存功能在许多应用场景中都... 目录引言一、Apache HttpClient简介二、技术栈与环境准备三、实现图片下载与保存功能1.

canal实现mysql数据同步的详细过程

《canal实现mysql数据同步的详细过程》:本文主要介绍canal实现mysql数据同步的详细过程,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的... 目录1、canal下载2、mysql同步用户创建和授权3、canal admin安装和启动4、canal

Nexus安装和启动的实现教程

《Nexus安装和启动的实现教程》:本文主要介绍Nexus安装和启动的实现教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、Nexus下载二、Nexus安装和启动三、关闭Nexus总结一、Nexus下载官方下载链接:DownloadWindows系统根

SpringBoot集成LiteFlow实现轻量级工作流引擎的详细过程

《SpringBoot集成LiteFlow实现轻量级工作流引擎的详细过程》LiteFlow是一款专注于逻辑驱动流程编排的轻量级框架,它以组件化方式快速构建和执行业务流程,有效解耦复杂业务逻辑,下面给大... 目录一、基础概念1.1 组件(Component)1.2 规则(Rule)1.3 上下文(Conte