index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="generator" content="GitLab Pages">
  <title></title>
  <link rel="stylesheet" href="../assets/css/style.css">
  <link rel="stylesheet" href="../assets/css/mobile.css">

  <style>
    .cover{margin-top:48px;display:flex}.cover img{width:250px;object-fit:contain;margin-bottom:auto;box-shadow:0 1px 4px -1px #00000069}.metadata{display:flex;flex-direction:column;margin-left:1em}.title{flex-grow:1;font-size:2em;font-weight:700}.metadata-item{display:flex;flex-direction:column;margin-top:24px}.download-item{display:flex;margin-top:24px}.metadata-name{border-bottom:1px solid #cacaca;border-image:linear-gradient(to right,#cacaca,#ffffff00) 1;margin-bottom:5px}.supervisors{display:flex;flex-direction:column}.button{background-color:#4caf50;border:none;color:#fff;padding:15px 32px;text-align:center;text-decoration:none;display:inline-block;font-size:16px}@media only screen and (max-width :450px){.cover{flex-wrap:wrap}.cover img{width:100%}}
  </style>

</head>

<body>
  <header id="header">
    <div class="row">
      <div class="logo" id="logo"></div>
      <div class="hamburger">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
      </div>
      <nav></nav>
    </div>
    <div id='projectname'></div>
  </header>
  <div class="content">

    <div class="cover">
      <img src="cover.jpg">
      <ul class="metadata">
        <li class="metadata-item title">
          Outdoor Mobile Augmented Reality in Urban Planning; Concepts of Visualizing Focus and Context Using Grayscale Filter in Video-based AR.
        </li>
        <li class="metadata-item">
          <div class="metadata-name">Author</div>
          <div>Justin Jing Hui</div>
        </li>
        <li class="metadata-item">
          <div class="metadata-name">Supervisors</div>
          <div class="supervisors">
            <div>Prof. Dr.-Ing. Volker Coors</div>
            <div>Prof. Dr.-Ing. Eberhard Gülch</div>
          </div>
        </li>
        <li class="metadata-item">
          <div class="metadata-name">Year</div>
          <div>2021</div>
        </li>
        <li class="download-item"><a href="thesis.pdf" class="button" download>download</a></li>
      </ul>
    </div>

    <h1>Abstract</h1>

    <p>
      Urban planners and designers often use grayscale masking filters to highlight a selected urban feature and its context without the overwhelming   information. With the rising interest in applying augmented reality (AR) technology into the field of urban planning for increasing social engagement, this thesis aims to develop an outdoor mobile AR application that visualizes the urban environment using the mentioned grayscale masking filters. The application is able to apply the grayscale masking filter to the designated buildings in Nordbahnhof, Stuttgart when the device’s camera is pointing to them. State of the art of  outdoor mobile AR technologies are studied and reviewed. This thesis proposes the concepts and methodology of the video-based AR visualization and the development of the app. The implementation of the concepts and methodology is documented and the implementation process and result are evaluated.
    </p>

    <h1>The AR Application</h1>

    <p>
      The application developed for the thesis is able to visualize a series of desingated buildings in Nordbahnhof, Stuttgart with the grayscale masking filter. With the app on, once the user points the camera to the designated building, the system will in-real-time detects the building and render the surrounding in monochrome and leaving the building in color. The moving image below demonstrates the visualization from a screen recording when using the app.
      <br></br> 
      <img src="ezgif.com-gif-maker.gif" alt="video demonstration"/>
      <br></br>
      Codes and assets used for the development of this application can be found <a href="https://transfer.hft-stuttgart.de/gitlab/huijustinjing/ar-building-visualization-with-grayscale-filter"> here</a>.
    </p>

  </div>

  <div class="footer"></div>
  <div class="legal"></div>

  <script src="../settings.js"> </script>
  <script src="../main.js"> </script>
</body>

</html>