├── .gitignore
├── Screenshots
    ├── 0.jpg
    ├── 1.jpg
    ├── 2.jpg
    └── 3.jpg
├── Images
    └── discovery.jpg
├── LICENSE
├── README.md
└── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store


--------------------------------------------------------------------------------
/Screenshots/0.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabio914/passtracing/HEAD/Screenshots/0.jpg


--------------------------------------------------------------------------------
/Screenshots/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabio914/passtracing/HEAD/Screenshots/1.jpg


--------------------------------------------------------------------------------
/Screenshots/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabio914/passtracing/HEAD/Screenshots/2.jpg


--------------------------------------------------------------------------------
/Screenshots/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabio914/passtracing/HEAD/Screenshots/3.jpg


--------------------------------------------------------------------------------
/Images/discovery.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabio914/passtracing/HEAD/Images/discovery.jpg


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Fabio
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Passtracing
 2 | 
 3 | **Drawing/tracing projector in Augmented Reality (Passthrough)**
 4 | 
 5 | This is a simple [WebXR](https://immersiveweb.dev) app built with [three.js](https://threejs.org) and [three-mesh-ui](https://felixmariotto.github.io/three-mesh-ui/) that lets you use your Meta Quest 2 and Meta Quest Pro to draw/trace on top of virtual images in Augmented Reality.
 6 | 
 7 | Inspired by [Easely](https://github.com/RalphVR/easely-meta-hackathon) and [Contour](https://sidequestvr.com/app/6643/contour-demo).
 8 | 
 9 | ## Instructions
10 | 
11 | [Video](https://www.youtube.com/watch?v=tJqXpbIeRK8)
12 | 
13 | 1. Navigate to [fabio914.github.io/passtracing](https://fabio914.github.io/passtracing) with your PC.
14 | 
15 | 2. Copy an image URL and paste on the text field. For example, a public domain image from [rawpixel](https://www.rawpixel.com/public-domain).
16 | 
17 | *Keep in mind that some [CORS policies](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) might prevent the app from loading images from certain websites. You'll want to use URLs from websites that allow their content to be loaded from any origin* (`Access-Control-Allow-Origin: *`).
18 | 
19 | 3. Click on "Load image" to reload the page with this image, or click on "Send link to Meta Quest" to send this to your Meta Quest 2 or Meta Quest Pro.
20 | 
21 | 4. After opening the link on your Meta Quest 2 or Meta Quest Pro, click on "Start AR" to start.
22 | 
23 | 5. Use the thumbsticks (analog sticks) to control the opacity and size of the image. Hold the trigger button to position the image on top of a sheet of paper.
24 | 
25 | 6. Draw/Trace.
26 | 
27 | ## Screenshots
28 | 
29 | <img src="Screenshots/0.jpg" width="320" />
30 | 
31 | <img src="Screenshots/1.jpg" width="320" />
32 | 
33 | <img src="Screenshots/2.jpg" width="320" />
34 | 
35 | <img src="Screenshots/3.jpg" width="320" />
36 | 
37 | ## Requirements
38 | 
39 | Meta Quest 2 or Meta Quest Pro.
40 | 
41 | 
42 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |     <head>
  4 |         <title>Passtracing</title>
  5 |         <meta charset="utf-8">
  6 |         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css" />
  7 |         <style>
  8 |         body { margin: 0; }
  9 | 
 10 |         .github-fork-ribbon:before { 
 11 |             background-color: #f80; 
 12 |         }
 13 | 
 14 |         .popupWindow {
 15 |             position: fixed;
 16 |             top: 12.5%;
 17 |             left: 50%;
 18 |             transform: translate(-50%, -12.5%);
 19 |             background-color: #303841;
 20 |             border-radius: 4px;
 21 |             font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
 22 |             color: #EFEFEF;
 23 |             overflow: hidden;
 24 |         }
 25 | 
 26 |         .popupHeader {
 27 |             background-color: #2E3238; 
 28 |             padding: 8px; 
 29 |             text-align: center; 
 30 |             font-size: 75%;
 31 |         }
 32 | 
 33 |         .popupSection {
 34 |             padding: 8px; 
 35 |             white-space: pre-wrap; 
 36 |             background-color: #50565E;
 37 |         }
 38 |         </style>
 39 |     </head>
 40 |     <body style="background-color:black;">
 41 |         <!-- Import maps polyfill -->
 42 |         <!-- Remove this when import maps will be widely supported -->
 43 |         <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
 44 | 
 45 |         <script type="importmap">
 46 |         {
 47 |             "imports": {
 48 |                 "three": "https://unpkg.com/three@0.147.0/build/three.module.js",
 49 |                 "three/addons/": "https://unpkg.com/three@0.147.0/examples/jsm/",
 50 |                 "three-mesh-ui": "https://unpkg.com/three-mesh-ui@6.5.2/build/three-mesh-ui.module.js"
 51 |             }
 52 |         }
 53 |         </script>
 54 | 
 55 |         <script type="x-shader/x-vertex" id="vertexshader">
 56 |         varying vec2 vUv;
 57 | 
 58 |         void main() {
 59 |             vUv = uv;
 60 |             gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
 61 |         }
 62 |         </script>
 63 | 
 64 |         <script type="x-shader/x-fragment" id="fragmentshader">
 65 |         uniform sampler2D colorTexture;
 66 |         uniform float opacity;
 67 |         float stepSize = 2.0;
 68 | 
 69 |         varying vec2 vUv;
 70 | 
 71 |         float intensity(in vec4 color) {
 72 |             return sqrt((color.x*color.x)+(color.y*color.y)+(color.z*color.z));
 73 |         }
 74 | 
 75 |         void main() {
 76 |             vec2 uv = vUv;
 77 |             
 78 |             ivec2 imageSize = textureSize(colorTexture, 0);
 79 |             vec2 step = vec2(stepSize/float(imageSize.x), stepSize/float(imageSize.y));
 80 | 
 81 |             float topLeft     = intensity(texture2D(colorTexture, uv + vec2(-step.x, step.y)));
 82 |             float left        = intensity(texture2D(colorTexture, uv + vec2(-step.x, 0)));
 83 |             float bottomLeft  = intensity(texture2D(colorTexture, uv + vec2(-step.x, -step.y)));
 84 |             float top         = intensity(texture2D(colorTexture, uv + vec2(0, step.y)));
 85 |             float bottom      = intensity(texture2D(colorTexture, uv + vec2(0, -step.y)));
 86 |             float topRight    = intensity(texture2D(colorTexture, uv + vec2(step.x, step.y)));
 87 |             float right       = intensity(texture2D(colorTexture, uv + vec2(step.x, 0)));
 88 |             float bottomRight = intensity(texture2D(colorTexture, uv + vec2(step.x, -step.y)));
 89 |          
 90 |             float horizontal = topLeft + 2.0 * left + bottomLeft - topRight - 2.0 * right - bottomRight;
 91 |             float vertical = -topLeft - 2.0 * top - topRight + bottomLeft + 2.0 * bottom + bottomRight;
 92 | 
 93 |             float sobelResult = sqrt(horizontal * horizontal + vertical * vertical);
 94 | 
 95 |             vec4 sobelColor = vec4(1.0 - sobelResult, 1.0 - sobelResult, 1.0 - sobelResult, sobelResult);
 96 |             vec4 currentColor = texture2D(colorTexture, uv);
 97 | 
 98 |             float smoothOpacity = smoothstep(0.0, 0.3, opacity);
 99 | 
100 |             gl_FragColor = vec4(
101 |                 currentColor.x * smoothOpacity + (1.0 - smoothOpacity) * sobelColor.x,
102 |                 currentColor.y * smoothOpacity + (1.0 - smoothOpacity) * sobelColor.y,
103 |                 currentColor.z * smoothOpacity + (1.0 - smoothOpacity) * sobelColor.z,
104 |                 currentColor.w * min(opacity, smoothOpacity) + (1.0 - smoothOpacity) * sobelColor.w
105 |             );
106 |         }
107 |         </script>
108 | 
109 | 
110 |         <script type="module">
111 | 
112 |         import * as THREE from 'three';
113 |         import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
114 |         import { ARButton } from 'three/addons/webxr/ARButton.js';
115 | 
116 |         import ThreeMeshUI from 'three-mesh-ui';
117 | 
118 |         let container;
119 |         let camera, scene, renderer;
120 |         let controller1, controller2;
121 |         let clock;
122 | 
123 |         let group = null;
124 |         let imagePlane = null;
125 |         let instructionsPlane = null;
126 |         let currentOpacity = 0.75;
127 |         let currentScale = 1.0;
128 |         let previousDidPressHideImage = false;
129 |         let previousDidPressHideInstructions = false;
130 | 
131 |         init();
132 |         animate();
133 | 
134 |         function init() {
135 |             container = document.getElementById("container");
136 | 
137 |             scene = new THREE.Scene();
138 | 
139 |             camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 10);
140 |             camera.position.set(0, 0, 1);
141 | 
142 |             const controls = new OrbitControls(camera, container);
143 |             controls.minDistance = 0;
144 |             controls.maxDistance = 8;
145 | 
146 |             clock = new THREE.Clock();
147 | 
148 |             // Renderer
149 | 
150 |             renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
151 |             renderer.setPixelRatio(window.devicePixelRatio);
152 |             renderer.setSize(window.innerWidth, window.innerHeight);
153 |             renderer.outputEncoding = THREE.sRGBEncoding;
154 |             renderer.localClippingEnabled = true;
155 |             renderer.xr.enabled = true;
156 |             renderer.xr.setFoveation(0);
157 |             container.appendChild(renderer.domElement);
158 | 
159 |             // Controllers
160 | 
161 |             controller1 = renderer.xr.getController(0);
162 |             scene.add(controller1);
163 | 
164 |             controller2 = renderer.xr.getController(1);
165 |             scene.add(controller2);
166 | 
167 |             // UI
168 | 
169 |             makeInstructionsUI();
170 | 
171 |             // Load image
172 | 
173 |             const length = 0.25;
174 |             group = new THREE.Group();
175 |             group.position.set(0, 0, -0.5);
176 | 
177 |             scene.add(group);
178 | 
179 |             const url = new URL(window.location);
180 |             const imageUrlString = url.searchParams.get('image');
181 | 
182 |             if (imageUrlString == null) {
183 |                 loadTexture(group, length, 'Images/discovery.jpg');
184 |             } else {
185 |                 try {
186 |                     const imageUrl = new URL(imageUrlString);
187 |                     document.getElementById("urlInput").value = imageUrlString;
188 |                     loadTexture(group, length, imageUrl.toString());
189 |                 } catch (exception) {
190 |                     alert("Invalid URL, try a different URL.");
191 |                 }
192 |             }
193 | 
194 |             // Resize event
195 | 
196 |             window.addEventListener('resize', onWindowResize);
197 | 
198 |             // URL Input
199 | 
200 |             const inputLink = document.getElementById("urlInputLink");
201 |             inputLink.onclick = changeImageUrl;
202 | 
203 |             // Send to Quest
204 | 
205 |             const sendToQuestLink = document.getElementById("urlToQuestLink");
206 |             sendToQuestLink.onclick = sendUrlToQuest;
207 |         }
208 | 
209 |         function makeInstructionsUI() {
210 |             const textContainer = new ThreeMeshUI.Block({
211 |                 borderRadius: 0.05,
212 |                 width: 0.45,
213 |                 height: 0.60,
214 |                 padding: 0.05,
215 |                 textAlign: 'left',
216 |                 fontKerning: 'none',
217 |                 whiteSpace: 'pre-wrap',
218 |                 fontFamily: 'https://unpkg.com/three-mesh-ui@6.5.2/examples/assets/Roboto-msdf.json',
219 |                 fontTexture: 'https://unpkg.com/three-mesh-ui@6.5.2/examples/assets/Roboto-msdf.png'
220 |             });
221 | 
222 |             textContainer.rotation.y = -45.0 * (Math.PI/180.0);
223 |             textContainer.position.set(0.5, 0, -0.5);
224 | 
225 |             textContainer.add(
226 |                 new ThreeMeshUI.Text({
227 |                     content: "Instructions\n",
228 |                     fontSize: 0.04,
229 |                     fontColor: new THREE.Color(0xffff00)
230 |                 }),
231 | 
232 |                 new ThreeMeshUI.Text({
233 |                     content: "\nAnalog right: ",
234 |                     fontSize: 0.025,
235 |                     fontColor: new THREE.Color(0xffff00)
236 |                 }),
237 | 
238 |                 new ThreeMeshUI.Text({
239 |                     content: "Increase opacity",
240 |                     fontSize: 0.025,
241 |                     fontColor: new THREE.Color(0xffffff)
242 |                 }),
243 | 
244 |                 new ThreeMeshUI.Text({
245 |                     content: "\nAnalog left: ",
246 |                     fontSize: 0.025,
247 |                     fontColor: new THREE.Color(0xffff00)
248 |                 }),
249 | 
250 |                 new ThreeMeshUI.Text({
251 |                     content: "Decrease opacity",
252 |                     fontSize: 0.025,
253 |                     fontColor: new THREE.Color(0xffffff)
254 |                 }),
255 | 
256 |                 new ThreeMeshUI.Text({
257 |                     content: "\n\nAnalog up: ",
258 |                     fontSize: 0.025,
259 |                     fontColor: new THREE.Color(0xffff00)
260 |                 }),
261 | 
262 |                 new ThreeMeshUI.Text({
263 |                     content: "Increase size",
264 |                     fontSize: 0.025,
265 |                     fontColor: new THREE.Color(0xffffff)
266 |                 }),
267 | 
268 |                 new ThreeMeshUI.Text({
269 |                     content: "\nAnalog down: ",
270 |                     fontSize: 0.025,
271 |                     fontColor: new THREE.Color(0xffff00)
272 |                 }),
273 | 
274 |                 new ThreeMeshUI.Text({
275 |                     content: "Decrease size",
276 |                     fontSize: 0.025,
277 |                     fontColor: new THREE.Color(0xffffff)
278 |                 }),
279 | 
280 | 
281 |                 new ThreeMeshUI.Text({
282 |                     content: "\n\nHold trigger: ",
283 |                     fontSize: 0.025,
284 |                     fontColor: new THREE.Color(0xffff00)
285 |                 }),
286 | 
287 |                 new ThreeMeshUI.Text({
288 |                     content: "Reposition image",
289 |                     fontSize: 0.025,
290 |                     fontColor: new THREE.Color(0xffffff)
291 |                 }),
292 | 
293 |                 new ThreeMeshUI.Text({
294 |                     content: "\n\nA or X: ",
295 |                     fontSize: 0.025,
296 |                     fontColor: new THREE.Color(0xffff00)
297 |                 }),
298 | 
299 |                 new ThreeMeshUI.Text({
300 |                     content: "Show/Hide image",
301 |                     fontSize: 0.025,
302 |                     fontColor: new THREE.Color(0xffffff)
303 |                 }),
304 | 
305 |                 new ThreeMeshUI.Text({
306 |                     content: "\nB or Y: ",
307 |                     fontSize: 0.025,
308 |                     fontColor: new THREE.Color(0xffff00)
309 |                 }),
310 | 
311 |                 new ThreeMeshUI.Text({
312 |                     content: "Show/Hide instructions",
313 |                     fontSize: 0.025,
314 |                     fontColor: new THREE.Color(0xffffff)
315 |                 })
316 |             );
317 | 
318 |             scene.add(textContainer);
319 |             instructionsPlane = textContainer;
320 |         }
321 | 
322 |         function changeImageUrl() {
323 |             const urlInput = document.getElementById("urlInput");
324 |             const url = new URL(window.location);
325 |             url.searchParams.set("image", urlInput.value);
326 |             window.location = url.toString();
327 |         }
328 | 
329 |         function sendUrlToQuest() {
330 |             const urlInput = document.getElementById("urlInput");
331 |             const url = new URL(window.location);
332 |             url.searchParams.set("image", urlInput.value);
333 | 
334 |             let sendToQuestUrl = new URL("https://oculus.com/open_url/");
335 |             sendToQuestUrl.searchParams.set("url", url);
336 |             window.location.href = sendToQuestUrl;
337 |         }
338 | 
339 |         function loadTexture(container, length, url) {
340 | 
341 |             const loader = new THREE.TextureLoader();
342 | 
343 |             loader.load(
344 |                 url,
345 | 
346 |                 function (texture) {
347 |                     document.body.appendChild(ARButton.createButton(renderer));
348 | 
349 |                     let originalWidth = texture.image.width;
350 |                     let originalHeight = texture.image.height;
351 | 
352 |                     let max = Math.max(originalWidth, originalHeight);
353 |                     let width = (originalWidth/max) * length;
354 |                     let height = (originalHeight/max) * length;
355 | 
356 |                     const geometry = new THREE.PlaneGeometry(width, height);
357 | 
358 |                     texture.generateMipmaps = false;
359 | 
360 |                     const sobelMaterial = new THREE.ShaderMaterial({
361 |                         transparent: true,
362 |                         side: THREE.DoubleSide,
363 |                         uniforms: {
364 |                             colorTexture: { value: texture },
365 |                             opacity: { value: currentOpacity }
366 |                         },
367 |                         vertexShader: document.getElementById('vertexshader').textContent,
368 |                         fragmentShader: document.getElementById('fragmentshader').textContent
369 |                     });
370 | 
371 |                     imagePlane = new THREE.Mesh(geometry, sobelMaterial);
372 | 
373 |                     container.add(imagePlane);
374 |                 },
375 | 
376 |                 undefined,
377 | 
378 |                 function (err) {
379 |                     alert("Unable to load image, try a different URL.\n\nCross-Origin Resource Sharing (CORS) policies might prevent the app from loading images from certain websites.");
380 |                 }
381 |             );
382 |         }
383 | 
384 |         function incrementOpacity(delta) {
385 |             currentOpacity += delta;
386 |             currentOpacity = Math.min(Math.max(currentOpacity, 0.0), 1.0);
387 | 
388 |             if (imagePlane != null) {
389 |                 imagePlane.material.uniforms["opacity"].value = currentOpacity;
390 |             }
391 |         }
392 | 
393 |         function incrementScale(delta) {
394 |             currentScale += delta;
395 |             currentScale = Math.min(Math.max(currentScale, 0.0), 4.0);
396 | 
397 |             if (group != null) {
398 |                 group.scale.set(currentScale, currentScale, currentScale);
399 |             }
400 |         }
401 | 
402 |         function onWindowResize() {
403 |             camera.aspect = window.innerWidth / window.innerHeight;
404 |             camera.updateProjectionMatrix();
405 |             renderer.setSize( window.innerWidth, window.innerHeight );
406 |         }
407 | 
408 |         //
409 | 
410 |         function animate() {
411 |             renderer.setAnimationLoop(loop);
412 |         }
413 | 
414 |         function loop() {
415 |             updateInput();
416 |             ThreeMeshUI.update();
417 |             renderer.render(scene, camera);
418 |         }
419 | 
420 |         function updateInput() {
421 |             const xrSession = renderer.xr.getSession();
422 |             const elapsedTime = clock.getDelta();
423 | 
424 |             let didPressHideImage = false;
425 |             let didPressHideInstructions = false;
426 | 
427 |             if (xrSession == null || xrSession.inputSources.length <= 0) {
428 |                 return;
429 |             }
430 | 
431 |             for (let i = 0; i < xrSession.inputSources.length; i++) {
432 |                 const input = xrSession.inputSources[i];
433 |                 const gamepad = input.gamepad; 
434 | 
435 |                 if (
436 |                     gamepad != null && 
437 |                     gamepad.mapping == "xr-standard" &&
438 |                     gamepad.axes.length >= 4
439 |                 ) {
440 |                     const horizontal = gamepad.axes[2]; // Primary thumbstick X
441 |                     const vertical = gamepad.axes[3]; // Primary thumbstick Y
442 | 
443 |                     const triggerButton = gamepad.buttons[0];
444 |                     const axButton = gamepad.buttons[4];
445 |                     const byButton = gamepad.buttons[5];
446 | 
447 |                     if (vertical > 0.7) {
448 |                         incrementScale(-1.0 * elapsedTime);
449 |                     } else if (vertical < -0.7) {
450 |                         incrementScale(1.0 * elapsedTime);
451 |                     }
452 | 
453 |                     if (horizontal > 0.7) {
454 |                         incrementOpacity(1.0 * elapsedTime);
455 |                     } else if (horizontal < -0.7) {
456 |                         incrementOpacity(-1.0 * elapsedTime);
457 |                     }
458 | 
459 |                     // FIXME: This index won't match the correct controller
460 |                     // if a disconnection happens during the session.
461 |                     const controllerToUse = renderer.xr.getController(i);
462 | 
463 |                     if (triggerButton.pressed) {
464 |                         const offsetPosition = controllerToUse.localToWorld(new THREE.Vector3(0, 0, 0.045));
465 |                         group.position.copy(offsetPosition);
466 |                         group.setRotationFromQuaternion(controllerToUse.quaternion);
467 |                     }
468 | 
469 |                     if (axButton.pressed) {
470 |                         didPressHideImage = true;
471 |                     }
472 | 
473 |                     if (byButton.pressed) {
474 |                         didPressHideInstructions = true;
475 |                     }
476 |                 }
477 |             }
478 | 
479 |             const shouldChangeInstructionsVisibility = (!didPressHideInstructions && previousDidPressHideInstructions);
480 |             previousDidPressHideInstructions = didPressHideInstructions;
481 | 
482 |             if (shouldChangeInstructionsVisibility) {
483 |                 instructionsPlane.visible = !instructionsPlane.visible;
484 |             }
485 | 
486 |             const shouldChangeImageVisibility = (!didPressHideImage && previousDidPressHideImage);
487 |             previousDidPressHideImage = didPressHideImage;
488 | 
489 |             if (shouldChangeImageVisibility) {
490 |                 imagePlane.visible = !imagePlane.visible;
491 |             }
492 |         }
493 | 
494 |         </script>
495 | 
496 |         <a class="github-fork-ribbon" href="https://github.com/fabio914/passtracing" data-ribbon="Fork me on GitHub" title="Fork me on GitHub">Fork me on GitHub</a>
497 | 
498 |         <div id="container"></div>
499 | 
500 |         <div class="popupWindow">
501 |             <div class="popupHeader">Passtracing - AR Tracing</div>
502 |             <div class="popupSection">1. Paste an image URL below.<br/>2. Click on "Load image" or "Send link to Meta Quest".<br/>3. Click on the "Start AR" button below to start.</div>
503 |             <div class="popupSection"><div style="margin-right: 8px"><input id="urlInput" type="url" style="width: 100%" placeholder="https://paste.some.website/image/here.jpg"/></div></div>
504 |             <div class="popupSection"><a href="#" style="color: #EFEFEF" id="urlInputLink">Load image</a></div>
505 |             <div class="popupSection"><a href="#" style="color: #EFEFEF" id="urlToQuestLink">Send link to Meta Quest</a></div>
506 |         </div>
507 |     </body>
508 | </html>


--------------------------------------------------------------------------------