I cannot put any UI over the screen

0xdhu commented 3 years ago

Description: Hello, everyone. I was developing WebAR using aframe. It's great framework but I have some troubles for this. My project goal is to place object without any marker on the floor. (markerless AR)

A-Frame Version: 1.2.0
Platform / Device: Android

Reproducible Code Snippet or URL:

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ARcore Experience</title>
<link rel="stylesheet" type="text/css" href="assets/css/android/android_arcore.css">
<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@e47f441/dist/aframe-master.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.0/dist/aframe-extras.min.js"></script>
<script src="https://ghcdn.rawgit.org/chenzlabs/aframe-ar/8a7ee3b/dist/aframe-ar.min.js"></script>
<script src="https://unpkg.com/merge-images"></script>
</head>
<body style="margin: 0px; overflow: hidden;">
<!-- Next & Capture Button -->
<div class="buttons">
     <button class="next-button">Next</button>
</div>
<a-scene ar raycaster-move="target:#intersection" >
     <a-camera user-height="0" cursor="fuse:false" ar-raycaster raycaster="objects:none">
     </a-camera>
     <a-sphere id="intersection" visible="false" radius="0.02" color="red">
     </a-sphere>
</a-scene>
</body>
</html>

when I tap on "AR" button, the "next" button will be hidden automatically? Is there any way to keep the UI button over the AR scene?

dmarcos commented 3 years ago

That's expected and a constraint of the WebXR API. DOM elements are not rendered after immersive mode is engaged.

You can overlay DOM elements using via the WebXR DOM Overlay API extension but be aware that it's still experimental. It's exposed on A-Frame on the WebXR component. Chrome specific info and examples

0xdhu commented 3 years ago

Hi @dmarcos Thank you so much. Let me try to do it soon. Btw, I also tried to record AR gameplay in aframe but I were not able to record it. I can record AR background easily from webcam video tag and I cannot find way to merge 3D env with this webcam video. If you have any idea or example, can you please give me some like that? I really interested in the gameplay recording like model-viewer or reality composer in ios. thank you again.

dmarcos commented 3 years ago

Not sure about recording. I would probably look for a screen recording application but I have no experience with Android. Let me know how WebXR DOM Overlay works for you. Good luck

0xdhu commented 3 years ago

HI, dmarcos It's works perfectly on my side. Thank you for your help.

aframevr / aframe

I cannot put any UI over the screen #4829