增强现实引擎ARToolKit工作原理简介

techbrood 发表于 2018-11-19 17:46:47

标签: webar, artoolkit, webxr

- +

ARToolkit是一个基于CV(计算机视觉)和Marker(标识)的开源增强现实引擎。

其具备如下功能特性:

A. 鲁棒跟踪,包括基于标记的跟踪与基于特征的跟踪; 

B. 强用力的摄像头/相机标定支持(摄像头/相机标定需要确定中心点坐标(光心)、摄像机实际焦距(fx=α∗f,fy=β∗f)(fx=α∗f,fy=β∗f)与镜头畸变参数(取决于畸变模型);主要提供两种标定方法:两步标定法与一步标定法;当已知摄像头/相机内部参数时,ARToolkit程序就可以在运行时自动矫正摄像头畸变); 

C. 多目标支持与单目相机支持; 

D. 移动设备优化;

E. Unity3D、OpenSceneGraph支持;

F. 支持WebAR。(JSARToolkit或AR.js)


ARToolkit通过计算机视觉来判断是否找到标记及在标识识别成功后计算虚拟物体所处位置,其流程图如下:

artoolkit.gif

A. 摄像机捕获真实世界的视频,并将其传送给计算机; 

B. 软件监控视频流中的每一帧图像,并在其中搜索所有的正方形(方形标记); 

C. 如果找到并且匹配和识别方形标记(方形和嵌入的图像)后,计算出相对摄像头的图形标记位置和图案方向(投影变换矩阵/位姿); 

D. 利用摄像头位姿来调整模型的位置和方向; 

E. 将模型渲染到标记卡所在(帧画面)的位置(叠加在视频图像帧上)。


基于ARToolkit的AR系统(或应用程序)工作流程如下:

A. 系统初始化:初始化视频捕捉、载入模板及其对应虚拟对象、相机内参(光心|焦距|畸变参数); 

B. 标记检测(搜索整个图像,寻找含有正确标识模板的标记):计算分割阈值、图像分割、模板匹配、计算投影变换矩阵; 

C. 3D场景渲染:匹配成功则利用ARToolkit传递的投影变换矩阵计算3D场景(一般是虚拟物体模型)叠加位置并最终渲染显示。

possitive(21) views13053 comments0

发送私信

最新评论

请先 登录 再评论.
相关文章
  • 常用光照类型基本概念工作原理及其计算公式

    在三维场景中,原理上物体的渲染效果取决于光照与物体表面的相互作用,对于渲染程序而言,可以通过把一些数学公式应用于像素着色来实现,从而模拟出真实生活中的...

  • WebAssembly工作原理和JavaScript语言性能对比分析

    本文简单说明WebAssembly(简称wasm)工作原理和高性能的原由(和JavaScript相比)。不过需要提醒的是Wasm并非设计来完全替代JS,而是对JS的一个强大补充,JS中...

  • CSS3特性查询(Feature Query: @supports)功能简介

    这是2017年不能不了解和学习的一个CSS新特性,非常实用,考虑到现实世界浏览器的复杂性,该特性本应该先于其他新特性出来。我们已经知道使用媒体查询(Media Que...

  • React JSX语法简介

    JSX是一种类似XML的标签语法,用来简化代码,我们可以不使用JSX,但了解并使用也没什么坏处:)在React中,JSX是一个使用 React.createElement() API的快捷方式...

  • JavaScript语言多编程范式简介

    和C++等语言类似,JS支持多范式(paradigms)编程。我们常常混合这些范式来完成一些大型Web项目。JS支持3种编程范式:命令式、面向对象和函数式。命令式(Imperative JavaScript)命令式就是简单的从上而下完成任务,流水账过程式编码风格:function

  • CSS3弹性布局弹性流(flex-flow)属性详解和实例

    弹性布局是CSS3引入的强大的布局方式,用来替代以前Web开发人员使用的一些复杂而易错hacks方法(如使用float进行类似流式布局)。其中flex-flow是flex-direction...

  • 如何使用WebGL实现空气高温热变形动画特效

    我们在炎炎夏日,或者在火堆旁,经常会观察到热源周围空气的不稳定波动现象。本文将讲解如何通过WebGL来实现这个特效。该效果可用于热变形、波浪、水面波光等场...

  • 如何使用WebGL创建一个逼真的下雨动画

    之前写过文章来分别讲解如何使用CSS3和Canvas2D实现过雨滴和下雨动画。通过背景处理看起来也有视觉上的3D效果,但并非真正的3D场景,如果要加入用户交互,进行36...

  • IE各版本CSS Hack(兼容性处理)语法速查表

    为了兼容IE各个版本,需要在CSS中添加额外的代码,比如以前常用的_width。之所以工作,是因为浏览器会忽略不能解析的样式规则,因此举个例子来说,把_width写在w...

  • D3.js读取外部json数据

    D3.js是一个很好的数据可视化工具,支持从web服务读取json数据,或者从外部文件如.json, .csv文件中直接读取。由于部分服务比如flickrs上的图文数据服务需要VPN...

  • 如何使用CSS3实现书页(书本)卷角效果

    我们有时候想在页面显示一个公告或用户提示信息。一个常用设计是使用书签形状。我们可以给书签添加卷角效果,以使其更为逼真。所谓的“卷角”实际上可以用小角度...

  • 更多...