WebXR camera artifacts since r136 release


Hi,
I’m using threejs webxr on Oculus Quest 2,
as you can see from the screenshot when I switch to WebXR a sort of “chessboard” artifacts appears which makes rendering step worst in particular when the object is rendered by a texture. Using wireframe the bad rendered effect is more visible. In order to avoid my “bad using” of threejs I looked webxr_vr_dragging.html (modified just to introduce a wireframe) and the rendering problem appears also.
I test the various releases and I discovered that the problem appears since release r136. r135 and below (I tested till r130) are ok.
Have you any idea or suggestion for this?
I tried to search for analogous post but I didn’t find anything with artifacts or other keys on webxr.

Thanks a lot.
Regards,
Alessandro

Are these artifacts also visible with the official WebXR examples?

The first thing needed for investigation is a test case that reproduces the issue on a Quest 2.

Yes, they are visible for example in webxr_vr_dragging.html,
I modified it just to set wireframe true because with wireframe the problem is more visible.

Can you please be more specific? What materials have you modified?

Whenever you file issues like above, please always accompany your report with a live example that demonstrates the issue.

I add wireframe to the material, I changed the code of webxr_vr_dragging.html

const geometries = [
new THREE.BoxGeometry( 0.2, 0.2, 0.2 ),
new THREE.ConeGeometry( 0.2, 0.2, 64 ),
new THREE.CylinderGeometry( 0.2, 0.2, 0.2, 64 ),
new THREE.IcosahedronGeometry( 0.2, 8 ),
new THREE.TorusGeometry( 0.2, 0.04, 64, 32 )
];

			for ( let i = 0; i < 50; i ++ ) {

				const geometry = geometries[ Math.floor( Math.random() * geometries.length ) ];
				const material = new THREE.MeshStandardMaterial( {
					color: Math.random() * 0xffffff,
					roughness: 0.7,
					metalness: 0.0,
                                            **wireframe: true**
				} );

the result is (I’ve indicated with two red arrows the begin of artifact):

I observed that this “artifact” rectangle change the controller line tracking color where line intersecs this rectangle, as I could suppose which the problem influence the lines primitive, anyway there no problem with release r135 and below.

I upload a screenshot because I’m using oculus quest visor.

same here

The artifact is visible in vr paint example (and more).
But not on rolleroaster example

oculus quest 2, using oculus browser.
When using firefox reality, no artifacts.

@busato, @eviltik Do you solve the problem, and how?

Look same here with react-xr, three version is r147

Oculus Quest 2, default browser has artifacts at edge of viewer,
Firefox no artifacts.

Old version of three r135 no artifacts at both default browser and Firefox.


As the screen shot by Quest 2, the edge of view showing pixelated.

Ok, I find my problem happen with:
“three#WebXRManager resets foveation to 1”

which fixed with v5.1.3 react-xr fix.

1 Like