example/index.html

<!-- 
  Copyright (c) Meta Platforms, Inc. and affiliates.

  This source code is licensed under the MIT license found in the
  LICENSE file in the root directory of this source tree.
-->

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1, shrink-to-fit=no"
		/>
		<title>RATK Demo</title>
		<style>
			body {
				font-family: Arial, sans-serif;
				margin: 0;
				line-height: 1.2;
			}
			ul {
				list-style-type: none;
				padding: 0;
			}
			li {
				background: #f9f9f9;
				padding: 5px;
				margin-bottom: 5px;
				border-radius: 5px;
			}
			strong {
				font-weight: bold;
			}
		</style>
	</head>
	<body style="margin: 0">
		<div id="scene-container" style="display: block"></div>
		<div style="position: fixed; top: 10px; left: 10px">
			<h1>Reality Accelerator Toolkit Demo</h1>

			<ul>
				<li>
					<strong>Visualizing Tracked Planes and Meshes:</strong>
					Displays wireframe outlines of real-world planes and meshes.
				</li>

				<li>
					<strong>Interactive Hit-Testing:</strong>
					Allows users to conduct hit tests against physical space.
				</li>

				<li>
					<strong>Persistent Anchors Creation:</strong>
					Enables users to create persistent markers in the MR space, shown as
					green blocks.
				</li>

				<li>
					<strong>Recovering Previous Session Anchors:</strong>
					Recovers and displays markers from previous sessions, shown as red
					blocks.
				</li>
			</ul>

			<p>
				<strong>How to use:</strong> Press trigger to generate marker at target,
				press grip to erase all saved markers
			</p>

			<button id="ar-button"></button>
			<button id="web-launch-button" style="display: none">
				OPEN ON META QUEST
			</button>
		</div>
	</body>
</html>