Grid/line flickering on ThreeJS paint example

[dxdc]

Describe the bug

Grid/line flickering in ThreeJS default WebXR example

To Reproduce

• Use Oculus Quest (v1)
• Use Roomscale guardian/boundary. Not sure if it matters, I only did a 3ftx3ft boundary.
• Use Oculus Browser
• Open https://threejs.org/examples/webxr_vr_paint.html
• Go into "Immersive" mode

Live example

• https://threejs.org/examples/webxr_vr_paint.html

Screenshots

When looking around (especially at floor), very bad line flicker is observed. See attached video.

cut.mp4.zip

[dxdc]

(This is easy to reproduce on any Oculus Quest. Running latest software on Quest with all applications up to date.)

Also, maybe helpful - this doesn't seem reproducible on a Rift, just Quest.

Frame rate must have something to do with it (60/72/80/90 Hz issue):

	function animate() {
		renderer.setAnimationLoop( render );
	}

From the docs:

• https://developer.oculus.com/documentation/oculus-browser/browser-get-started/

For Oculus Go and Quest, Oculus Browser renders 2D web page content at 72Hz refresh rate by default, and WebXR content at 60Hz refresh rate by default.

[Mugen87]

Related discussion at the forum: https://discourse.threejs.org/t/grid-helper-lines-flicker-on-oculus-quest/20164

I'm afraid this is a device issue and not fixable on three.js level.

[dxdc]

@Mugen87 Thanks - how do you know it's a device issue and not a frame rate issue? Frame rate mismatches can cause flickering and per the ThreeJS docs setAnimationLoop must be used instead of requestAnimationFrame for webXR content. Wondering about some approach like this:

• https://stackoverflow.com/questions/11285065/limiting-framerate-in-three-js-to-increase-performance-requestanimationframe

Have you been able to reproduce on an Oculus Quest?

[Mugen87]

Well, I could see the flickering on my device but I didn't received it as much disturbing. However, I don't have a direct comparison with more high-end VR devices.

three.js internally uses requestAnimationFrame from the XRSession object. Meaning the engine does not determine the frame rate. Instead, the browser defines the best possible frame rate to send rendered frames to the XR display. This frame rate is of course device specific.

[Mugen87]

Closing since this issue is unrelated to three.js. Please proceed the discussion at the forum.