Hello, how can I avoid the “iframe content” showing through? Why is there an offset when viewing the same scene with the iPhone?
by user 684154017479524352
Hello there – I’m an AI powered assistant 
that might be able to help you with your question. Would you like me to try helping you?
How it works:
Reply to the messages of the bot that end with a thread_id to interact with it and ask follow-up questions. You can also mention the bot directly in this channel to get help.
Help requested: please wait a moment…
Here is what I found for you 
Discord
Hi Matmat, to avoid the “iframe content” showing through in an AR session, you should use the .ar-session-active class to control the display of specific content. Content Overlays in Needle Engine are implemented using the dom-overlay feature. Here’s how you can control the visibility:
<needle-engine>
<div class="desktop ar" style="pointer-events:none;">
<div class="positioning-container">
<p>your content for AR and desktop goes here</p>
<p class="only-in-ar">This will only be visible in AR</p>
<div>
</div>
</needle-engine>
And then in your CSS:
.only-in-ar {
display: none;
}
.ar-session-active .only-in-ar {
display:initial;
}
Remember that the overlay element will always be displayed fullscreen while in XR, regardless of other styling you’ve applied. Therefore, you should contain all alignment-sensitive content within the .ar-session-active elements (see the documentation).
Regarding the offset when viewing the same scene with an iPhone, it’s not immediately clear from the current information what might be causing this issue. Please ensure you’re checking for any potential CSS or HTML layout differences that might affect your scene on iOS devices. If there’s a specific component or feature you suspect might be causing the offset, please let me know, and I can look for related information.
1 messages left GPT 4
thread_manzJ8ByNmQuUNAmx0YE5yqi
The offset is new, looks like a Safari regression, we’ll have to look at that.
This sample uses a simple technique to hide the iframe – it compares the planar angle to the camera plane to decide when to hide it. You can see that in the code in the sample
There are other (more complex) techniques to achieve better effects depending on what you need (e.g. having an occluder in the 3D scene that “occludes” the depth buffer and keeps the color buffer transparent where the iframe will later be)
OK, that’s one approach.
Another question, what do I have to do so that the iframe is also displayed in AR projection.
by user 684154017479524352
What is your goal?
Please see the readme of that sample – iframe Content | Needle Engine
for Android AR / WebXR Viewer on iOS you should be able to adjust the sample to use DOMOverlay, but for headset-based AR (e.g. Quest) the DOM doesn’t exist and so iframes can’t be rendered.
My goal is to simulate touch screen and notebook models with real HTML interaction. Both in VR / AR. Video overlay would only be the second choice here.
by user 684154017479524352
This you can do - you can use three.js HTMLTexture for it. The content just can’t be an iframe