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

相关文章

Spring Security+JWT如何实现前后端分离权限控制

《SpringSecurity+JWT如何实现前后端分离权限控制》本篇将手把手教你用SpringSecurity+JWT搭建一套完整的登录认证与权限控制体系,具有很好的参考价值,希望对大家... 目录Spring Security+JWT实现前后端分离权限控制实战一、为什么要用 JWT?二、JWT 基本结构

Java实现优雅日期处理的方案详解

《Java实现优雅日期处理的方案详解》在我们的日常工作中,需要经常处理各种格式,各种类似的的日期或者时间,下面我们就来看看如何使用java处理这样的日期问题吧,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言一、日期的坑1.1 日期格式化陷阱1.2 时区转换二、优雅方案的进阶之路2.1 线程安全重构2

Android实现两台手机屏幕共享和远程控制功能

《Android实现两台手机屏幕共享和远程控制功能》在远程协助、在线教学、技术支持等多种场景下,实时获得另一部移动设备的屏幕画面,并对其进行操作,具有极高的应用价值,本项目旨在实现两台Android手... 目录一、项目概述二、相关知识2.1 MediaProjection API2.2 Socket 网络

使用Python实现图像LBP特征提取的操作方法

《使用Python实现图像LBP特征提取的操作方法》LBP特征叫做局部二值模式,常用于纹理特征提取,并在纹理分类中具有较强的区分能力,本文给大家介绍了如何使用Python实现图像LBP特征提取的操作方... 目录一、LBP特征介绍二、LBP特征描述三、一些改进版本的LBP1.圆形LBP算子2.旋转不变的LB

Redis消息队列实现异步秒杀功能

《Redis消息队列实现异步秒杀功能》在高并发场景下,为了提高秒杀业务的性能,可将部分工作交给Redis处理,并通过异步方式执行,Redis提供了多种数据结构来实现消息队列,总结三种,本文详细介绍Re... 目录1 Redis消息队列1.1 List 结构1.2 Pub/Sub 模式1.3 Stream 结

C# Where 泛型约束的实现

《C#Where泛型约束的实现》本文主要介绍了C#Where泛型约束的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录使用的对象约束分类where T : structwhere T : classwhere T : ne

将Java程序打包成EXE文件的实现方式

《将Java程序打包成EXE文件的实现方式》:本文主要介绍将Java程序打包成EXE文件的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录如何将Java程序编程打包成EXE文件1.准备Java程序2.生成JAR包3.选择并安装打包工具4.配置Launch4

MySQL索引的优化之LIKE模糊查询功能实现

《MySQL索引的优化之LIKE模糊查询功能实现》:本文主要介绍MySQL索引的优化之LIKE模糊查询功能实现,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧... 目录一、前缀匹配优化二、后缀匹配优化三、中间匹配优化四、覆盖索引优化五、减少查询范围六、避免通配符开头七、使用外部搜索引擎八、分

Python实现特殊字符判断并去掉非字母和数字的特殊字符

《Python实现特殊字符判断并去掉非字母和数字的特殊字符》在Python中,可以通过多种方法来判断字符串中是否包含非字母、数字的特殊字符,并将这些特殊字符去掉,本文为大家整理了一些常用的,希望对大家... 目录1. 使用正则表达式判断字符串中是否包含特殊字符去掉字符串中的特殊字符2. 使用 str.isa

Java程序进程起来了但是不打印日志的原因分析

《Java程序进程起来了但是不打印日志的原因分析》:本文主要介绍Java程序进程起来了但是不打印日志的原因分析,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Java程序进程起来了但是不打印日志的原因1、日志配置问题2、日志文件权限问题3、日志文件路径问题4、程序