基于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

相关文章

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》:本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定

Java实现时间与字符串互相转换详解

《Java实现时间与字符串互相转换详解》这篇文章主要为大家详细介绍了Java中实现时间与字符串互相转换的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、日期格式化为字符串(一)使用预定义格式(二)自定义格式二、字符串解析为日期(一)解析ISO格式字符串(二)解析自定义

opencv图像处理之指纹验证的实现

《opencv图像处理之指纹验证的实现》本文主要介绍了opencv图像处理之指纹验证的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录一、简介二、具体案例实现1. 图像显示函数2. 指纹验证函数3. 主函数4、运行结果三、总结一、

SpringKafka消息发布之KafkaTemplate与事务支持功能

《SpringKafka消息发布之KafkaTemplate与事务支持功能》通过本文介绍的基本用法、序列化选项、事务支持、错误处理和性能优化技术,开发者可以构建高效可靠的Kafka消息发布系统,事务支... 目录引言一、KafkaTemplate基础二、消息序列化三、事务支持机制四、错误处理与重试五、性能优

SpringIntegration消息路由之Router的条件路由与过滤功能

《SpringIntegration消息路由之Router的条件路由与过滤功能》本文详细介绍了Router的基础概念、条件路由实现、基于消息头的路由、动态路由与路由表、消息过滤与选择性路由以及错误处理... 目录引言一、Router基础概念二、条件路由实现三、基于消息头的路由四、动态路由与路由表五、消息过滤

Springboot处理跨域的实现方式(附Demo)

《Springboot处理跨域的实现方式(附Demo)》:本文主要介绍Springboot处理跨域的实现方式(附Demo),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不... 目录Springboot处理跨域的方式1. 基本知识2. @CrossOrigin3. 全局跨域设置4.

Spring Boot 3.4.3 基于 Spring WebFlux 实现 SSE 功能(代码示例)

《SpringBoot3.4.3基于SpringWebFlux实现SSE功能(代码示例)》SpringBoot3.4.3结合SpringWebFlux实现SSE功能,为实时数据推送提供... 目录1. SSE 简介1.1 什么是 SSE?1.2 SSE 的优点1.3 适用场景2. Spring WebFlu

基于SpringBoot实现文件秒传功能

《基于SpringBoot实现文件秒传功能》在开发Web应用时,文件上传是一个常见需求,然而,当用户需要上传大文件或相同文件多次时,会造成带宽浪费和服务器存储冗余,此时可以使用文件秒传技术通过识别重复... 目录前言文件秒传原理代码实现1. 创建项目基础结构2. 创建上传存储代码3. 创建Result类4.

SpringBoot日志配置SLF4J和Logback的方法实现

《SpringBoot日志配置SLF4J和Logback的方法实现》日志记录是不可或缺的一部分,本文主要介绍了SpringBoot日志配置SLF4J和Logback的方法实现,文中通过示例代码介绍的非... 目录一、前言二、案例一:初识日志三、案例二:使用Lombok输出日志四、案例三:配置Logback一

Python如何使用__slots__实现节省内存和性能优化

《Python如何使用__slots__实现节省内存和性能优化》你有想过,一个小小的__slots__能让你的Python类内存消耗直接减半吗,没错,今天咱们要聊的就是这个让人眼前一亮的技巧,感兴趣的... 目录背景:内存吃得满满的类__slots__:你的内存管理小助手举个大概的例子:看看效果如何?1.