Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

r172 breaks vr on Pico4 #30263

Open
caramboleyo-no2fa opened this issue Jan 4, 2025 · 10 comments
Open

r172 breaks vr on Pico4 #30263

caramboleyo-no2fa opened this issue Jan 4, 2025 · 10 comments
Labels
Device Issue Regression

Comments

@caramboleyo-no2fa
Copy link

Description

WebGL: INVALID_FRAMEBUFFER_OPERATION: clear: Cannot render to a XRWebGLLayer framebuffer outside of an XRSession animation frame callback. three.module.js:15287
WebGL: INVALID_FRAMEBUFFER_OPERATION: drawArrays: Cannot render to a XRWebGLLayer framebuffer outside of an XRSession animation frame callback. three.module.js:2184
WebGL: INVALID_FRAMEBUFFER_OPERATION: drawArrays: Cannot render to a XRWebGLLayer framebuffer outside of an XRSession animation frame callback. three.module.js:2184

Reproduction steps

See code

Code

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>VR Test</title>
		<style>
			body { margin: 0; overflow: hidden; }
			canvas { display: block; }
		</style>
		<script type="importmap">
			{
				"imports": {
					"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
					"three/examples/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/"
				}
			}
		</script>
		<script type="module">
			import * as THREE from 'three';
			import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
			import { BoxLineGeometry } from 'three/examples/jsm/geometries/BoxLineGeometry.js';

			const scene = new THREE.Scene();
			scene.background = 0xCCC;
			globalThis.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
			camera.position.y = 1.5;
			const renderer = new THREE.WebGLRenderer({ antialias: true });
			renderer.setSize(window.innerWidth, window.innerHeight);
			renderer.xr.enabled = true;
			document.body.appendChild(VRButton.createButton(renderer));
			document.body.appendChild(renderer.domElement);

			const room = new THREE.LineSegments(
				new BoxLineGeometry(6, 6, 6, 10, 10, 10).translate(0, 3, 0),
				new THREE.LineBasicMaterial({ color: 0x808080 })
			);
			scene.add(room);

			window.addEventListener('resize', () => {
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();
				renderer.setSize(window.innerWidth, window.innerHeight);
			});

			renderer.setAnimationLoop(() => {
				renderer.render(scene, camera);
			});
		</script>
	</head>
	<body>
	</body>
</html>

Live example

(https://jsfiddle.net/tkxse2rh/) vr not allowed

Screenshots

No response

Version

172

Device

No response

Browser

No response

OS

No response
@Mugen87
Copy link
Collaborator

Mugen87 commented Jan 4, 2025

I can't reproduce the issue on a Quest 2 with any of the official WebXR demos: https://threejs.org/examples/?q=webxr

It does not look like your are doing something special in your code example. What device are you using?

@caramboleyo-no2fa
Copy link
Author

pico4, pico browser is chrome based
when i change to 171 in the importmap urls or some other prior version it all works fine.
i removed all the special stuff for the last two hours going crazy cause i had a prototype were everything worked fine but with the npm package suddenly it just crashed when you hit the vr button. It did not came to me for quite some time that three could be the issue.
gpt insisted i have to make two render loops, one for regular and one for xr, but in the examples thats never the case. And there don't seem to be any breaking changes in 172..

@Mugen87
Copy link
Collaborator

Mugen87 commented Jan 4, 2025

Having a single animation loop is totally fine.

My first guess would be you maybe include more than one three.js version in your build which can produce unexpected side effects. Make sure this is not the case.

@caramboleyo-no2fa
Copy link
Author

Thats why i made the code example above, i run it from a simple html file within my local network. There is not more than that and the error keeps coming with 172 but not with prior versions.

@caramboleyo-no2fa
Copy link
Author

Here is a live one now: https://labs.setanodus.net/three/vr/bug-with-172.html

@Mugen87
Copy link
Collaborator

Mugen87 commented Jan 4, 2025 •
edited
Loading

The link works fine on a Quest 2.

WebGL: INVALID_FRAMEBUFFER_OPERATION: clear: Cannot render to a XRWebGLLayer framebuffer outside of an XRSession animation frame callback. three.module.js:15287
WebGL: INVALID_FRAMEBUFFER_OPERATION: drawArrays: Cannot render to a XRWebGLLayer framebuffer outside of an XRSession animation frame callback. three.module.js:2184
WebGL: INVALID_FRAMEBUFFER_OPERATION: drawArrays: Cannot render to a XRWebGLLayer framebuffer outside of an XRSession animation frame callback. three.module.js:2184

Do you see this log but the application runs fine? Or is the application crashing?

@caramboleyo-no2fa
Copy link
Author

When i hit the button everything goes black and i see a spinner for a few seconds, than i am back looking at the browser and the page is being reloaded with those three error logs left in the console.

@Mugen87
Copy link
Collaborator

Mugen87 commented Jan 4, 2025 •
edited
Loading

The only WebXR related change in r172 is #30112.

Do you mind testing if reverting the change in your local three.js copy fixes the issue?

@caramboleyo-no2fa
Copy link
Author

I'll do it, I'll get back to you as soon as I have something

@Mugen87 Mugen87 mentioned this issue Jan 5, 2025
Merged
@caramboleyo-no2fa
Copy link
Author

Yes, i can confirm that reverting the #30112 changes to src/renderers/webxr/WebXRManager.js fix the problem on pico4:
https://labs.setanodus.net/three/vr/bug-without-30112.html

@caramboleyo-no2fa caramboleyo-no2fa changed the title r172 breaks vr r172 breaks vr on Pico4 Jan 5, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Device Issue Regression
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Mugen87 @caramboleyo-no2fa