three-mesh-ui
three-mesh-ui copied to clipboard
felixmariotto
Examples on Website have Glitchy Artifacts in WebXR / Oculus Quest 2
I was just checking out the project demos, on my Oculus Quest 2. There were constantly some sparkly artifacts even when barely moving. When moving left to right and looking at the 3D text in particular I was seeing what reminded me of the judder effect on my old Oculus DK2.
This issue does not occur in any of the Three.js examples, which I checked to make sure it wasn't a general WebGL/WebXR issue
If you could take a photo (using sharing functionality in Oculus Quest 2) when you experience these artifacts that would provide a valuable reference.
Good timing as I'd just started to work on capturing a video. It doesn't appear to show up in the recording. So my guess is it's either a per eye camera discrepancy or frame-rate dropping, assuming they just don't record anything but official frames.
https://user-images.githubusercontent.com/1845/186525335-977bec79-221f-46b0-a227-d6b606214f61.mov
First time learning to shoot view through headset. I couldn't capture the judder effect well, but definitely the weird shimmer/sparkle is noticeable. Ignore my breathing! 🙃 https://www.youtube.com/shorts/STQFwNi3zE0
Indeed in Oculus they record only one eye. Do not expect everything is going to be perfect. This is still experimental technology and the issue is more related to the WebXR API: https://github.com/immersive-web/webxr camera and ThreeJS https://github.com/mrdoob/three.js than the three-mesh-library in itself, but I might not provide you the most relevant answer. I just ignore some minor rendering issues usually happening when the browsers memory is overloaded.
You can see what I mean in the second video I shared (the Youtube one) though right?
The issue is indeed noticeable in the second video, I wonder what is happening here. With my Quest 1 and Oculus Browser last version I have no issue. Which browser are you using ? If Oculus Browser, did you upgrade to the latest version ?
Hi! I am experiencing the same issue on latest Oculus browser version on a Quest 2. Seems that the more text the more evident it is.
@felixmariotto I am using the latest built in browser, using the latest OS updates, and on a Quest2
@seflless @fcor does it happen on both panels in this example ? https://felixmariotto.github.io/three-mesh-ui/#antialiasing
I've merge the current state of interactive elements, with msdf text example to provide a live VR text options selector : https://felixmariotto.github.io/three-mesh-ui/7.x.x/ex__msdf_text.html
@seflless, @fcor , @felixmariotto If you have the opportunity, and if it works (I don't own a VR headset, Im on mobile XR + cardboard), please test as much combinaisons as possible to see if some parameter impacts ( positively, or negatively ) this glitch.
Some clues, as @felixmariotto said, antialiasing ( fontSmooth ) may be a good starting point. Also letterspacing and plain material could be interesting.
Thanks !
@swingingtom Hey! Just tested this one and works smoothly! I will do some more tests this week and I'll let you know how works.
@felixmariotto It happens on both panels but the one on the right looks way better.