Web与小程序AR技术原理

article/2025/8/17 22:57:52

AR(Augmented Reality增强现实)技术，能够将虚拟数字信息与真实世界信息无缝连接，将虚拟物体带入现实中与用户进行互动。凭借其丰富真实的交互体验，AR技术成为了各大品牌的营销利器。

今天，我们就来简单梳理一下“AR” 究竟是一项什么样的技术原理，并为想要了解AR技术的前端同学提供了一些基础的功能和代码实现，一起来看看吧~

本文章适合于对AR技术还不甚了解的读者哦

AR效果的构成

由上面的视频可知，AR主打的效果就是“虚实融合”，那么有三个技术部分是必不可少的：

  1. Camera画面 - 呈现真实的现实画面，作为“实”的部分存在。一般来说，就是打开用户设备的摄像头即可(特殊情况下，也可以是视频流等其他介质)。
  2. 虚拟信息 - 呈现仿真的虚拟内容，作为“虚”的部分存在。一般来说和现实内容存在逻辑上的关联，会尽力做到真实、有趣或观赏度高，这也是AR技术最吸引人的部分。常用3D模型、透明特效视频、普通视频、容积视频、图片等作为介质。
  3. AR图像算法 - AR技术的核心部分，用来将现实内容与虚拟内容进行关联、追踪或融合，目的就是两者绑定，而不是独立的出现或运行。只有具备“虚实融合算法”的能力，才能展示出“增强现实”的质感。

Camera技术

原理上来说，展示Camera画面是独立且和平台相关的技术，且Android/iOS/Web/小程序各不相同。

     Android需要使用CameraManager获取Camera数据流CameraCaptureSession，并使用TextureView来呈现出Camera画面。

     iOS需要使用AVCaptureDevice来获取Camera数据流AVCaptureSession，并使用AVCaptureVideoPreviewLayer来呈现Camera画面。

     Web上则需要使用mediaDevices来获取Camera数据流MediaStream，并使用video标签来呈现出Camera画面。

     小程序则可以使用camera组件，直接呈现出Camera画面。而获取Camera数据流，则需要使用CameraContext.onCameraFrame。

我们以表格的形式来简单的总结一下：

平台

控制API

UI

数据流

AndroidCameraManagerTextureViewCameraCaptureSession
iOSAVCaptureDeviceAVCaptureVideoPreviewLayerAVCaptureSession
WebmediaDevicesvideoMediaStream
微信小程序CameraContextcameraCameraContext.onCameraFrame

从表格中可以看出，Camera部分的技术的三个技术点：

  1. Camera硬件控制的API - 打开、关闭、闪光、对焦等。
  2. 展示Camera画面的UI - 呈现给用户。
  3. Camera的数据流 - 这是最为重要的部分，我们需要从数据流中，获取当前一帧画面的bitmap(可以简单理解为一张截图)，拿给AR图像算法进行计算，得出一个4x4跟踪矩阵。而这个追踪矩阵，就用来实现出虚实融合的效果。

虚拟信息技术

为了打造更真实的虚实融合效果，虚拟部分最重要的特点就是要有3D感，否则一个平面2d UI 是无法和真实内容产生出你中有我，我中有你的融合感。因此常用的UI渲染技术在AR内容中基本不会使用。

我们通常会使用3D渲染的技术，这门技术广泛应用于游戏、仿真模拟、电影制作等领域，而实现这门技术的常用方案，就是渲染引擎，或者游戏引擎。

和Camera技术不同的是，通常渲染引擎都可以跨平台支持。比如常见的一些游戏引擎：Unity3D、Unreal、寒霜、CE等等。

特别是Unity3D，在开发App(Android/iOS)的AR领域，Unity3D是大多数人的首选方案。所以当你在网上搜索AR技术时，能看到很多和Unity3D引擎相关的文章。

遗憾的是，虽然Unity3D支持Web平台，但AR算法很少有适配于Web平台的，就导致了AR算法在Web平台不能使用。那么如果只使用Unity3D的渲染能力，又会特别笨重(资源大和加载慢)，且相关插件少。并且对前端开发而言，需要学习一门全新的语言(C#)和平台(Unity3D)，成本就变得很高。

那么在小程序/Web平台上，有没有类似于Unity3D的渲染引擎呢？

市面上虽然存在不少，但各方面来说，都没有Unity3D效果好。主要地，Three.js流行度和市占率可能是领先的，但Babylon.js也紧随其后(某些方面还会更好)。

对于前端开发来说，3D渲染已经完全是不同的技术领域，目前了解知道的人多，但善于此道且精通的就非常少了。

平台

常用渲染引擎

AndroidUnity3D、Filament
iOSUnity3D、SceneKit
WebThree.js、Babylon.js
微信小程序threejs-miniprogram、three-platformize

接下来，我们就分别演示一下在Web和小程序平台开发AR效果时，最基础的一些功能和代码实现。

WebAR开发

打开摄像头

// 打开后置摄像头
const stream = await navigator.mediaDevices.getUserMedia({video: { ideal: "environment" }
});
// 呈现Camera画面
const video = document.createElement("video");
video.srcObject = stream;
document.body.appendChild(video);

重要限制：需要网页以https协议或者localhost域名打开，这样才存在navigator.mediaDevices对象，否则为undefined。

渲染3D场景

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);const renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.domElement.style = "position:absolute;left:0;top:0;width:100%;height:100%";const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
cube.positiin.z = -5;function animate() {renderer.render(scene, camera);requestAnimationFrame(animate);
};animate();

AR图像算法达成虚实融合效果

const canvas = document.createElement("canvas");
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
const ctx = canvas.getContext("2d"); cube.matrixAutoUpdate = false;
cube.frustumCulled = false;
cube.onBeforeRender = () => {// 获取Camera当前一帧画面数据ctx.drawImage(video, 0, 0);const cameraFrame = ctx.getImageData(0, 0, canvas.width, canvas.height);// 利用AR图像算法，输入Camera画面数据，计算出追踪矩阵，再赋值给3D内容。// 这样，真实内容和虚拟内容，就融合在了一起。const trackMatrix = SomeArAlgorithm.tracking(cameraFrame);cube.matrix.copy(trackMatrix);
};

上述的示例代码仅供参考，可以提供WebAR技术应用层的基本实现思路。实际可用代码参考：webAR 开发示例

小程序AR开发

打开摄像头

<camera resolution="high" frame-size="medium"></camera>
<canvas type="webgl" id="webgl"></canvas>

渲染3D场景

import { createScopedThreejs } from "threejs-miniprogram";Page({onReady() {wx.createSelectorQuery().select('#webgl').node().exec((res) => {const canvas = res[0].node;const THREE = createScopedThreejs(canvas);this.init3d(THREE);});},init3d(THREE) {const scene = new THREE.Scene();const { windowWidth, windowHeight } = wx.getSystemInfoSync();const camera = new THREE.PerspectiveCamera(75, windowWidth / windowHeight, 0.1, 1000);const renderer = new THREE.WebGLRenderer({ alpha: true });renderer.setSize(windowWidth, windowHeight);const geometry = new THREE.BoxGeometry();const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });const cube = new THREE.Mesh(geometry, material);scene.add(cube);cube.positiin.z = -5;function animate() {renderer.render(scene, camera);requestAnimationFrame(animate);};animate();}
});

AR图像算法达成虚实融合效果

const cameraCtx = wx.createCameraContext();
const listener = cameraCtx.onCameraFrame((cameraFrame) => {// 利用AR图像算法，输入Camera画面数据，计算出追踪矩阵，再赋值给3D内容。// 这样，真实内容和虚拟内容，就融合在了一起。const trackMatrix = SomeArAlgorithm.tracking(cameraFrame);cube.matrix.copy(trackMatrix);cube.matrixAutoUpdate = false;
});
listener.start();
同样，上述的示例代码仅供参考，为大家提供了小程序AR技术应用层的基本实现思路。实际可用代码参考：https://developers.weixin.qq.com/s/aAUxADmW7Nzs

Kivicube平台

在上面的示例中，AR内容仅仅只是一个非常简单的Cube，毫无实际意义。而在真实的商业项目中，我们还需要随机应变处理非常多的细节和功能。

比如：

  1. 多类型的素材支持，比如3D模型、普通视频、透明特效视频、精灵图、图片、天空盒、音乐等；
  2. 简单方便的场景搭建(拖拉拽即可)；
  3. camera功能的多浏览器兼容；
  4. 渲染效果的多平台兼容；
  5. 模型材质的实时预览调节；
  6. 渲染效果的优化；
  7. 等等。

这些问题的处理对于大部分的前端开发人员来说，就进入了一个全新的，从未接触过的领域，需要的学习时间和精力是非常高的。

那么在低代码平台流行的今天，有没有这样一个既能提升开发效率，又能快速出效果的平台呢？

免费的AR在线编辑器——Kivicube - https://www.kivicube.com，就能大致满足大家的需求。

Kivicube既拥有可视化的低代码搭建平台，也能提供简单灵活的API，可供开发人员快速的实现需求交互。

微信小程序

在微信小程序端，平台提供了一个Kivicube小程序AR插件，直接以组件的形式，给到开发人员使用。

组件kivicube-scene可以直接打开在Kivicube平台制作好的AR场景。省去了开发人员自己处理Camera、3D渲染、AR算法、多类型素材支持等等相关的工作。

既然是组件的形式，自然而然的，如果有特殊的UI和交互需求(Kivicube平台暂不支持的)，开发人员也可以自行实现。

插件与组件接入方式

在使用插件前，首先要在小程序管理后台的“设置-第三方设置-插件管理”中添加插件。开发者可登录小程序管理后台，通过 appid [wx3bbab3920eabccb2] 查找插件并添加。

之后，可在小程序的app.json配置文件之中，增加插件的声明配置，如下所示：

{..."plugins": {"kivicube": {"version": "1.6.6","provider": "wx3bbab3920eabccb2"}}...
}
再在需要接入AR场景的页面中，配置好kivicube-scene组件，如下所示：{"usingComponents": {"kivicube-scene": "plugin://kivicube/kivicube-scene"}
}

然后，就可以直接在页面的wxml中使用组件了。

<kivicube-sceneclass="kivicube"scene-id="9vR08tpLesfKVWs2XbbnNKSsX3JqpaAp"
/>
.kivicube {display: block;width: 100vw;height: 100vh;
}

通过上面很简短的几句代码，我们就实现了一个AR功能，由此可见，Kivicube平台带来的优势是很明显的。

组件需要通过sceneId属性指定打开的场景，而场景Id，需要在Kivicube平台获取。

在Kivicube平台制作并保存场景之后，点击右上角"分享"按钮，然后点击"复制链接"，在链接中最后一个正斜杠，之后的一串乱码字符，就是场景id了。 比如复制的链接为：https://www.kivicube.com/scenes/9vR08tpLesfKVWs2XbbnNKSsX3JqpaAp ，则9vR08tpLesfKVWs2XbbnNKSsX3JqpaAp 就是场景id。

更为详细的教程，请参考：Kivicube · 语雀

Web

我们正在准备Web端的AR插件能力，使AR在Web平台上的开发变得一样的简单快捷，并会在不久的将来与大家见面！

今天关于“AR”技术原理的讲解就到这里啦，欢迎各位前端同学试用并给我们提出宝贵建议~

同时也欢迎大家来免费注册使用Kivicube平台，使用低代码编辑器快速创建出专属于你的AR场景。


http://chatgpt.dhexx.cn/article/WICHLY6q.shtml

相关文章

AR增强现实技术解读

AR增强现实技术解读

来源&#xff1a;网络 AR增强现实&#xff0c;是用户对现实世界感知的新技术。 一般认为&#xff0c;AR技术的出现源于虚拟现实技术&#xff08;Virtual Reality&#xff0c;简称VR&#xff09;的发展&#xff0c;但二者存在明显的差别。 传统VR技术给予用户一种在虚拟世界中…
阅读更多...
【我的渲染技术进阶之旅】【AR研究】第一集—AR的基本原理科普

【我的渲染技术进阶之旅】【AR研究】第一集—AR的基本原理科普

AR&#xff0c;即增强现实技术&#xff0c;它的出现意味着能将计算机技术带到现实当中来&#xff0c;能使科技更“贴近”人们的现实世界的生活&#xff0c;被誉为可能是代替智能手机的&#xff0c;未来的下一个平台。 作为永远要离未来更近一些的设计师&#xff0c;当然需要了解…
阅读更多...
AR技术简谈：相关原理，技术应用以及设备推荐，带你感受虚拟信息与真实世界巧妙融合。

AR技术简谈：相关原理，技术应用以及设备推荐，带你感受虚拟信息与真实世界巧妙融合。

1.AR技术原理 AR技术是一种增强现实技术&#xff0c;利用计算机生成的模拟信息与真实世界进行混合叠加&#xff0c;从而创造出新的虚拟图像。AR技术可以广泛应用于多媒体、智能交互、传感等领域&#xff0c;例如在游戏、教育、医疗、建筑、旅游等领域中&#xff0c;通过AR技术可…
阅读更多...
搭建nutz框架实现登录登出

搭建nutz框架实现登录登出

创建web项目 把jar粘贴到lib目录下 全选build path 新建类 类名为MainModule 添加模块类自动扫描 web.xml文件 注意< display-name> 和< parm-name>标签 需要修改 <?xml version"1.0" encoding"UTF-8"?> <web-app xmlns:xsi&q…
阅读更多...
使用nutz框架，找不到入口函数，访问Url报404

使用nutz框架，找不到入口函数，访问Url报404

案例 今天在跟着nutz框架教程去配置demo时&#xff0c;发现访问URL找不到入口函数&#xff0c;出现了Search mapping for path/user/count : NOT Action match 异常&#xff0c;据nutz文档介绍&#xff0c;找不到方法, 一般是At写错或者UserModule的package写错,导致映射不到或…
阅读更多...
Nutz框架-- Cnd条件使用原生sql

Nutz框架-- Cnd条件使用原生sql

案例 今天接到一个临时的业务需求&#xff0c;做一个简单的过滤作为临时业务需要使用一两天&#xff0c;于是想到在原有的Cnd条件上加上一个Not like 进行过滤&#xff0c;但是发现现有Cnd条件查询好像满足不了 解决方案 使用Nutz框架中的Static类来实现自定义sql与Cnd.and()拼…
阅读更多...
对于nutz框架的学习入门级使用——配置

对于nutz框架的学习入门级使用——配置

准备&#xff1a;eclipse&#xff0c;jdk8.0&#xff0c;tomcat8.5&#xff0c;nutz的jar包 第一步&#xff1a;新建一个项目 第二步&#xff1a;导入需要的包&#xff08;数据的jar包也会同时导入&#xff09; 第三步&#xff1a;新建一个Mainmodule的类&#xff0c;并写入如…
阅读更多...
Nutz框架crud持久层操作指南

Nutz框架crud持久层操作指南

Nutz框架 nutz框架是一个轻量级的ssh框架&#xff0c;因为它有spring的职责&#xff0c;它又负责了hiberate的持久&#xff0c;以及struct的大servlet功能。以及提供了一系列轻便的工具&#xff0c;所以我们能很容易的只专注于业务&#xff0c;此篇在于介绍一下nutz框架持久层…
阅读更多...
开源框架Nutz开发者访谈

开源框架Nutz开发者访谈

Nutz是SSH的替代方案，它是一组轻便小型的框架的集合， 各个部分可以被独立使用。 Nutz 的目标是： 在力所能及的情况下，最大限度的提高Web开发人员的生产力 “是的，提高生产力是这个框架唯一的目标。 就像 Java 设计之初，考虑最多的是程序员的易用性和运行时效率的权衡， …
阅读更多...
Nutz框架学习（一）

Nutz框架学习（一）

dao层学习 1.创建 POJO(java bean实体类) 在 Java 项目中建立一个POJO&#xff0c;比如 com.zzh.demo.Person : package com.dodoke.bean;import java.util.Date;import org.nutz.dao.entity.annotation.*;Table("t_test") // 声明了Test对象的数据表 public …
阅读更多...
Nutz框架的简单使用

Nutz框架的简单使用

Q&#xff1a;什么是Nutz。 A&#xff1a;类似于SSH的一个框架。官网http://www.nutzam.com/ Q&#xff1a;Nutz怎么读。 A&#xff1a;读作 “纳特Z&#xff08;Z发重音&#xff09;”。Nutz 的 Nut 是因为霍金的《果壳中的宇宙》是 zozoh 最喜欢的一本书之一。 Z 是 zozoh 小…
阅读更多...
nutz mysql 关键词_nutz框架简单入门

nutz mysql 关键词_nutz框架简单入门

最近几年随着python语言的崛起&#xff0c;java在web方面被各种脚本语言诟病效率低下&#xff0c;这也是事实&#xff0c;java在运用第三方类库(框架)开发时&#xff0c;效率确实很低下。麻烦的框架整合&#xff0c;复杂的配置文件都是拦路虎&#xff0c;不过今天我要推荐的nut…
阅读更多...
给大家推荐一个非常非常非常好用的java轻量级框架-Nutz永远滴神

给大家推荐一个非常非常非常好用的java轻量级框架-Nutz永远滴神

或许以后再也用不到了&#xff0c;写篇文章纪念一下吧~ 前段时间离职来到了现在的新公司&#xff0c;奔向了光明的未来&#xff0c;唯一让我留恋的就是原本使用的框架—Nutz了&#xff0c;这个框架相对于现在的mybatis&#xff08;过段时间可能会“mybatis真香”&#xff09;来…
阅读更多...
【Nutz】Nutz起步

【Nutz】Nutz起步

一、Nutz 是一组轻便小型的框架集合&#xff0c;可以极大程度上提高开发人员的生产力&#xff0c;更多内容请点击访问Nutz官网。Nutz主要包括以下几个模块&#xff1a; DAO&#xff1a;针对JDBC进行了薄封装&#xff0c;事务模板&#xff0c;无缓存IoC&#xff1a;JSON风格配…
阅读更多...
【工具】——远程协助（向日葵）

【工具】——远程协助（向日葵）

在烈日炎炎的午后&#xff0c;一片片金黄金黄的田野中&#xff0c;要是能够看到上图这样的风景&#xff0c;那是多么的赏心悦目啊 &#xff0c;并且身旁有佳人&#xff0c;那是何等的荣幸之至。当然&#xff0c;今天的主体就是向日葵&#xff0c;一个远在千里却近乎咫尺之间的桌…
阅读更多...
Windows系统自带远程桌面和远程协助怎么连接？

Windows系统自带远程桌面和远程协助怎么连接？

随着IT技术的发展和远程办公的兴起&#xff0c;在日常工作中&#xff0c;远程桌面和远程协助等功能已经成为很多用户需要掌握的技能之一。而对于使用Windows系统的用户来说&#xff0c;Windows系统自带的远程桌面和远程协助功能&#xff0c;更是令人欣喜的利器。下面我们就来一…
阅读更多...
Windows实用小工具–Windows远程协助

Windows实用小工具–Windows远程协助

在企业里&#xff0c;有的公司办公区域比较大&#xff0c;电脑有问题一般都是通过远程、徒步、电话等方式来解决&#xff0c;对于远程协助解决问题&#xff0c;我们首先想到的会是如何连接对方的电脑&#xff0c;相信大家都已经使用过很多的软件了吧&#xff01;当然还有Micros…
阅读更多...
远程协助软件

远程协助软件

向日葵 https://sunlogin.oray.com/ anydesk https://anydesk.com/zhs/downloads/windows?dvwin_exe ToDesk https://www.todesk.com/ 快速助手 中文&#xff1a;https://learn.microsoft.com/zh-cn/windows/client-management/quick-assist 英文&#xff1a;https://l…
阅读更多...
常见的远程协助软件简介

常见的远程协助软件简介

1.RayLink远程控制软件 RayLink是一个支持多系统多设备间相互远程控制的软件&#xff0c;是具有远程制作、远程办公、远程游戏、远程协助等需求的IT技术、游戏玩家、网络办公等这些人的最佳选择。通过使用RayLink&#xff0c;可随时随地远程控制其他电脑或手机&#xff0c;远程…
阅读更多...
9款免费的Windows远程协助软件

9款免费的Windows远程协助软件

首先，如果网友和你在同一个局域网中你可以使用的就是Windows 的远程桌面功能。如果你不在局域网中，并且只有一个Internet 连接。你可以通过其他的远程协助软件从互联网中得到网友的帮助。这里我们列出九款免费的Windows远程协助软件。 1。 Team Viewer：TeamViewer是一个既简…
阅读更多...
推荐文章

Copyright @ 2022~2023