ismar-contest.html

<!DOCTYPE html>
<html lang="en">
<head>

	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keywords" content="">
	<meta name="description" content="">
	<link rel="icon" type="image/x-icon" href="/favicon.ico">

	<title>Hybrid Conference Experiences in the ARENA</title>
<!--
Snapshot Template
http://www.templatemo.com/tm-493-snapshot

Zoom Slider
https://vegas.jaysalvat.com/

Caption Hover Effects
http://tympanus.net/codrops/2013/06/18/caption-hover-effects/
-->
	<link rel="stylesheet" href="ismar/css/bootstrap.min.css">
	<link rel="stylesheet" href="ismar/css/animate.min.css">
	<link rel="stylesheet" href="ismar/css/font-awesome.min.css">
  	<link rel="stylesheet" href="ismar/css/component.css">

    <link rel="stylesheet" href="ismar/css/owl.theme.css">
	<link rel="stylesheet" href="ismar/css/owl.carousel.css">
	<link rel="stylesheet" href="ismar/css/vegas.min.css">
	<link rel="stylesheet" href="ismar/css/style.css">

	<!-- Google web font  -->
	<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,300' rel='stylesheet' type='text/css'>

</head>
<body id="top" data-spy="scroll" data-offset="50" data-target=".navbar-collapse">


<!-- Preloader section -->

<div class="preloader">
     <div class="sk-spinner sk-spinner-pulse"></div>
</div>


<!-- Navigation section  -->

  <div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">

      <div class="navbar-header">
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon icon-bar"></span>
          <span class="icon icon-bar"></span>
          <span class="icon icon-bar"></span>
        </button>
        <a href="#top" class="navbar-brand smoothScroll">ARENA Hybrid Conference</a>
      </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#top" class="smoothScroll"><span>Home</span></a></li>
            <li><a href="#arena" class="smoothScroll"><span>ARENA</span></a></li>
            <li><a href="#venue" class="smoothScroll"><span>About the Venue</span></a></li>
            <li><a href="#enter" class="smoothScroll"><span>Enter the Venue</span></a></li>
          </ul>
       </div>

    </div>
  </div>


<!-- Home section -->

<section id="home">
  <div class="overlay"></div>
  <div class="container">
    <div class="row" >

			<div class="col-md-offset-1 col-md-10 col-sm-12 wow fadeInUp" data-wow-delay="0.3s">
					<h1 class="wow fadeInUp" data-wow-delay="0.6s">Hybrid Conference Experiences in the ARENA</h1>
					<p class="wow fadeInUp" data-wow-delay="0.5s">Remote attendees navigate (in VR) a 3D model of the venue and can interact with in-person attendees wearing AR headsets and tablets.<strong> Awarded Best "Hybrid Conference of the Future" at the 2021 IEEE International Symposium on Mixed and Augmented Reality (<a href="https://ismar21.org/program/awards/">ISMAR'21 Awards</a>).</strong></p>
					<a href="#video" class="smoothScroll btn btn-success btn-lg wow fadeInUp" data-wow-delay="1.2s">Watch the Video</a>
      </div>

    </div>
  </div>
</section>

<section id="video">
  <div class="container">
    <div class="row">
			<div class="col-md-offset-1 col-md-10 col-sm-12 wow fadeInUp" data-wow-delay="0.3s">
        <p class="wow fadeInUp" data-wow-delay="0.5s">
					<p class="wow fadeInUp" data-wow-delay="0.5s">We present an alternative hybrid conference experience where remote attendees can interact (in VR) with attendees wearing AR headsets and tablets.
						By using a 3D model of the venue (obtained using an off-the-shelf laser scanner) and registering digital objects with the real world, remote attendees have a similar sense of the space as those physically present.</p>
					<p class="wow fadeInUp" data-wow-delay="0.5s">This experience is made possible by <a href="#arena">ARENA</a>.</p>
						<br/>
				 	<p>
						<div class="video-container">
						  <iframe width="960" height="540" src="https://www.youtube-nocookie.com/embed/-opIF8wtiQ4?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
					  </div>
				  </p>
					<p>Watch a longer, in-depth <a href="https://www.youtube-nocookie.com/embed/ydDAa2edIMI" target="_blank">video of the concept and underlying technology</a>.</p>
      </div>
    </div>
  </div>
</section>

<!-- arena section -->

<section id="arena">
  <div class="container">
    <div class="row">

      <div class="col-md-9 col-sm-8 wow fadeInUp" data-wow-delay="0.2s">
        <div class="arena-thumb">
          <h1>ARENA</h1>
          <p>We are using the <a href="https://arenaxr.org" target="_blank">Augmented Reality Edge Network Architecture (ARENA)</a> to support this hybrid conference experience.</p>
					<p>	ARENA is a platform we developed (see <a href="https://ismar21.org/program/accepted-papers/#session9" target="_blank">ISMAR'21 Session P9</a>), to simplify the creation of collaborative mixed reality using standard Web Browsers. It includes features such as
						location-based content discovery, defines networked entities to manipulate content, user and device io with integrated access control,
						can run sandboxed user applications, and supports experiences across desktop, mobile platforms and AR/VR headsets.</p>
					<p>See the <a href="https://docs.arenaxr.org" target="_blank">ARENA documentation website</a>.</p>
					<p>See details about our <a href="#venue">"conference venue"</a>.
        </div>
      </div>

      <div class="col-md-3 col-sm-4 wow fadeInUp arena-img" data-wow-delay="0.6s">
        <img src="ismar/images/xr-logo.png" class="img-responsive " alt="arena">
      </div>

      <div class="clearfix"></div>

    </div>
  </div>
</section>

<!-- Conference Experiences section -->

<section id="venue">
  <div class="container">
    <div class="row">

      <div class="col-md-offset-2 col-md-8 col-sm-12 wow fadeInUp" data-wow-delay="0.3s">
        <div class="section-title">
          <h1>The Venue: Our Lab</h1>
        </div>
      </div>

			<div class="col-md-offset-1 col-md-10 col-sm-12 wow fadeInUp" data-wow-delay="0.2s">
					<p>We scanned our lab space to host the "conference venue." The figure shows the scanned model.</p>
					<figure>
            <div><img src="ismar/images/space-annotated.png" alt="The venue" width="90%"></div>
          </figure>
				 </p><p>These are some side-to-side photos of the actual space and a similar VR view.</p>
      </div>

			<ul class="grid cs-style-4">
				<li class="col-md-6 col-sm-6">
					<figure>
						<div><img src="ismar/images/cic-annex.jpg" alt="Photo of the venue space"></div>
						<figcaption>
							<small>Photo of the venue space</small>
						</figcaption>
					</figure>
				</li>

				<li class="col-md-6 col-sm-6">
					<figure>
						<div><img src="ismar/images/cic-annex-vr.jpg" alt="VR view of scanned space"></div>
						<figcaption>
							<small>VR view of scanned space</small>
						</figcaption>
					</figure>
				</li>

				<li class="col-md-6 col-sm-6">
					<figure>
						<div><img src="ismar/images/cic-annex-1.jpg" alt="Photo of the venue space"></div>
						<figcaption>
							<small>Photo of the venue space</small>
						</figcaption>
					</figure>
				</li>

				<li class="col-md-6 col-sm-6">
					<figure>
						<div><img src="ismar/images/cic-annex-1-vr.jpg" alt="VR view of scanned space"></div>
						<figcaption>
							<small>VR view of scanned space</small>
						</figcaption>
					</figure>
				</li>
			</ul>


			<div class="col-md-offset-1 col-md-10 col-sm-12 wow fadeInUp" data-wow-delay="0.2s">
					<p>
					Several in-person participants (named AR1, AR2, AR3, ...) will be using a mix of AR devices (iPads, phones, magic leap) and interact with remote participants through their devices. <strong>Say hi, or ask us a question!</strong>
			  	</p><br/><p>
					We also have an AR/VR portal where remote participants can interact with in-person participants and see a glimpse into what is happening at the physical location. The portal is registered in the 3D scan, so the virtual and real-world geometry are aligned.
					</p>
					<ul class="grid cs-style-4">
						<li class="col-md-4 col-sm-4">
							<figure>
								<div><img src="ismar/images/portal-vr.jpg" alt="AR/VR Portal (VR View)"></div>
								<figcaption>
									<small>AR/VR Portal (VR View)</small>
								</figcaption>
							</figure>
						</li>

						<li class="col-md-4 col-sm-4">
							<figure>
								<div><img src="ismar/images/portal-1.png" alt="AR/VR Portal Physical Setup"></div>
								<figcaption>
									<small>AR/VR Portal Physical Setup</small>
								</figcaption>
							</figure>
						</li>

						<li class="col-md-4 col-sm-4">
							<figure>
								<div><img src="ismar/images/portal-2.png" alt="Another Perspective of the AR/VR Portal"></div>
								<figcaption>
									<small>Another Perspective of the AR/VR Portal</small>
								</figcaption>
							</figure>
						</li>
					</ul>
      </div>

    </div>
  </div>
</section>


<!-- Contact section -->

<section id="enter">
  <div class="container">
    <div class="row">

      <div class="col-md-9 col-sm-8 wow fadeInUp" data-wow-delay="0.2s">
        <div class="arena-thumb">
					<h1>Enter the Venue</h1>
					<br/>
					<h2>Requirements</h2>
					<p><small>For the best ARENA performance, you need a few things:</small></p>
						<ul>
						 <li><strong>Browser</strong> (we have tested ARENA with recent Chrome, FireFox and <i>Oculus Browser</i>)</li>
						 <li>No ad blockers/privacy extensions (sorry, we are working on it; some are known to cause issues)</li>
						 <li><strong>Headphones highly recommended</strong>. They provide directional sound and stop echo. Please stay on mute when not speaking if you don’t have headphones.</li>
						 <li>A fast, recent machine to handle all the processing and 3D graphics is also <strong>highly recommended</strong></li>
					 </ul>
						<p><small>Details about the VR user interface in our <a href="https://docs.arenaxr.org/content/overview/user-guide.html" target="_blank">"First time in the ARENA"</a> tutorial.<small></p>

						<br/>
						<h2>To enter, follow this link (new tab):</h2><br/>
						<h3><strong><a href="https://arenaxr.org/wiselab/ismar" target="_blank">https://arenaxr.org/wiselab/ismar</a></strong></h3>

						 <br/>
							<p>Remote participants can use VR in a browser or a VR headset to navigate the lab space and meet both remote and in-person attendees.</p>
							<p> Everyone is referenced in the real venue, so remote participants should have a sense of interacting with in-person participants in a shared space.</p>

							<br/><p><strong>Judges:</strong> A private link will be emailed to judges.</p>
							<br/>
						<h2>Once Inside the Venue in ARENA</h2>
						<p><small>Note that <strong>everyone starts muted and with video off.</small></strong>
						<h3>Moving inside ARENA</h3>
						<p><small>Use the arrow buttons or a combination of WASD + mouse to move:</small></p>
						<div><img src="ismar/images/movement.png" width="600px" alt="Movement in ARENA"></div>
						<h3>Audio and Video</h3>
						<p><small>On the upper right, you will see your audio/video control buttons:</small></p>
						<div><img src="ismar/images/audio-video.png" width="150px" alt="Audio/Video Controls."></div>
						<br/>
						<h2>Got a VR Headset?</h2>
						<p><small>To try ARENA in VR, you can go to a WebXR enabled browser. For example, go to Oculus Browser on Quest 2 and enter the scene URL above.  Be patient while the scene loads and click “Enter” on the normal AV dialog box.  Unmute mic <strong>BEFORE</strong> entering VR.  Click the VR button in the lower right to enter immersive mode.  A forward push on the left hand rocker brings up the teleportation ring.  Clicking the rocker left and right rotates.</small></p>
						<div><img src="ismar/images/quest2-controls.png" width="600px" alt="Quest Controls."></div>

        </div>
      </div>

			<div class="col-md-3 col-sm-4 wow fadeInUp arena-img" data-wow-delay="0.6s">
				<img src="ismar/images/xr-logo-1.png" class="img-responsive " alt="arena">
			</div>

      <div class="clearfix"></div>

    </div>
  </div>
</section>



<!-- Footer section -->

<footer>
	<div class="container">

		<div class="row">

			<div class="col-md-12 col-sm-12">
				<br/>
				<p class="wow fadeInUp"  data-wow-delay="1s" ><a href=https://wise.ece.cmu.edu/ target="_blank">Wiselab</a>, Carnegie Mellon University</a></p>
			</div>

		</div>

	</div>
</footer>

<!-- Back top -->
<a href="#" class="go-top"><i class="fa fa-angle-up"></i></a>

<!-- Javascript  -->
<script src="ismar/js/jquery.js"></script>
<script src="ismar/js/bootstrap.min.js"></script>
<script src="ismar/js/vegas.min.js"></script>
<script src="ismar/js/modernizr.custom.js"></script>
<script src="ismar/js/toucheffects.js"></script>
<script src="ismar/js/owl.carousel.min.js"></script>
<script src="ismar/js/smoothscroll.js"></script>
<script src="ismar/js/wow.min.js"></script>
<script src="ismar/js/custom.js"></script>

</body>
</html>