-
Notifications
You must be signed in to change notification settings - Fork 0
/
ar.html
112 lines (105 loc) · 8.7 KB
/
ar.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Robot Simulation - VARobot</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/img/upbicon.png" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.15.1/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic" rel="stylesheet" type="text/css" />
<!-- Third party plugin CSS-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body id="page-top">
<!-- Navigation -->
<nav class="navbar bg-light navbar-light navbar-expand-lg fixed-top" id="mainNav">
<div class="container">
<a href="index.html" class="navbar-brand js-scroll-trigger"><img src="assets/img/logo.png" alt="VARobot" width="50" height="50"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a href="ar.html" class="nav-link active js-scroll-trigger">Augmented Reality</a></li>
<li class="nav-item"><a href="#benefits" class="nav-link js-scroll-trigger">Benefits</a></li>
</ul>
</div>
</div>
</nav>
<!-- End Navigation -->
<!-- Augmented Reality -->
<section class="orange-page arial" id="nxt">
<div class="row justify-content-center">
<div class="col-lg-8 text-center">
<h2 class="text-white mt-0">Augmented Reality</h2>
<hr class="divider my-4" />
</div>
</div>
<div class="cardalt" style="max-width: 50%;">
<div class="card-body">
<p class="card-text text-black" style="text-align:justify">Augmented Reality (AR for short) describes the real-time combination of real-world input with virtual enhancements. This usually happens by displaying real-life camera footage and displaying virtual objects in it. A very commonly known example is the application “Pokémon Go”, where it is possible to see virtual creatures (augmented) in the real world. AR can commonly be used either on a handheld device, like a smartphone or tablet, or on a head mounted device like the HoloLens.<br />In our project, both kinds of devices can be used in an approach to achieve interoperability and a wider selection of interaction possibilities. The handheld devices are limited to Android-capable ones, since we used ARCore for its advanced features.</p>
<div class="text-center">
<div class="">
<img src="assets/img/AR/ARCoreImage.png" width="910" height="910" alt="" class="img-fluid">
<figcaption style="color: black;">The ARCore plane tracking: the plane is visualized by the dotted surface, the virtual Android robot is placed on top of it</figcaption>
</div>
</div>
<br />
<p class="card-text text-black" style="text-align:justify">ARCore offers so-called “plane detection” which is the possibility to scan a room with the smartphone camera and detect any planes. On these planes, objects can be placed and they will be displayed in the chosen position even if the user moves around. For this, special sensors are necessary, but luckily, most modern smartphones are equipped with these.<br />For the head-mounted device we use the HoloLens in combination with the MRTK, a toolkit for head mounted AR. The MRTK enables us to use, among other features, hand gestures or even eye tracking, offering new interaction possibilities.</p>
<!--
<div class="text-center">
<div class="">
<img src="assets/img/" width="910" alt="" class="img-fluid">
<figcaption>An interface in AR. The information and control elements are in sight at all time without disturbing the workflow.</figcaption>
</div>
</div>
-->
</div>
</div>
</section>
<!-- Benefits -->
<section class="white-page arial" id="benefits">
<div class="row justify-content-center">
<div class="col-lg-8 text-center">
<h2 class="text-white mt-0">Benefits of AR for our Use Case</h2>
<hr class="divider my-4" />
</div>
</div>
<div class="cardalt text-black" style="max-width: 50%;">
<div class="card-body">
<p class="card-text" style="text-align:justify">The benefits of AR are diverse and play into our research in different ways. Firstly, of course, there is the general point that AR can make interactions easier. Especially when wearing the HoloLens, the user can use both hands while still seeing information. In our framework, we use this to display interface elements like the code editor, so the user always has them in view. The components can also still be clicked in a similar way to non-AR applications, but in addition, the user can use additional options, like the hand gestures on the HoloLens, for interaction. This way, the user can choose the option that is the most comfortable for them.<br />The central point that sets the VAROBOT framework apart from others, however, is the fact that AR is used to simulate robot program executions. This way, a created program can be executed on a simulated robot before trying it on a real robot. Since robot programming is highly complex and needs a lot of knowledge about the surroundings, conventional methods are often very time consuming and error prone. One big problem is the need to deploy the program to a real robot every time for testing it and risking the robot getting damaged if there was a mistake in the program and the real robot, for example, collides with something. This can, in the worst case, be extremely expensive and might even stall production processes. The VAROBOT framework solves this issue by simulating the robot programs in AR, making it possible to see how the robot would react and move virtually in the real space the robot should operate in. This way, it is possible to see if there are any collisions and if the robot moves as expected. Furthermore, the real robot can even continue working undisturbed by the development, as a good part of testing out programs can take place in AR. If the robot program is completed in AR, there is also an option to deploy it directly to the robot.</p>
<!--
<div class="text-center">
<div class="">
<img src="assets/img/" width="910" alt="" class="img-fluid">
<figcaption>A robot simulated in its target environment. The simulation will show any unforeseen problems in interacting with the environment</figcaption>
</div>
</div>
<br />
-->
<p class="card-text" style="text-align:justify">We hope to help making the programming more effective and less time- and resource consuming, as this would save a lot of costs. This might also support new developments in robots, since developing new solutions becomes more feasible. A reduction in development costs could even make robots become more accessible for small and medium enterprises.</p>
</div>
</div>
</section>
<!-- Footer-->
<footer class="bg-light py-5">
<div class="container"><div class="small text-center text-muted">Copyright © 2021 - VARobot</div></div>
</footer>
<!-- Bootstrap core JS-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Third party plugin JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>