How to change the DPR (pixel ratio) of renderer?

🧑‍💻 Technical Support
1

Hi everyone,

I’m using 8th Wall with a Three.js pipeline module, and I’m currently tracking an image using the imagefound, imageupdated, and imagelost events.

Everything works as expected, but the rendering appears very pixelated. To improve the visual quality, I tried setting the pixel ratio of my renderer using:

renderer.setPixelRatio(window.devicePixelRatio);

However, when I do this, the canvas seems to scale up, and the positions returned by the tracking details (like detail.position) become inaccurate or offset.

Has anyone successfully increased the resolution using setPixelRatio() without breaking the image tracking or alignment?
Is there a recommended way to update the DPR in this context?

Any tips or insights would be appreciated!

Thanks in advance :folded_hands:

2

Hi, welcome to the forums!

Which device are you seeing this issue with? Can you land your changes and share your project with the support workspace?

3

Hello,

Thanks for your answer. This is a confidential projet, i can not share the code.
I copy past the corresponding section below :

const xr8Modules = [
			XR8.GlTextureRenderer.pipelineModule(), // Draws the camera feed.
			XR8.Threejs.pipelineModule(), // Creates a ThreeJS AR Scene.
			XR8.XrController.pipelineModule(), // Enables SLAM tracking.,
			{
				name: 'xr-scene',
				onStart: this.#onStart,
				listeners: [
					{ event: 'reality.imagefound', process: this.#onImageDetect },
					{ event: 'reality.imageupdated', process: this.#onImageUpdate },
					{ event: 'reality.imagelost', process: this.#onImageLoose },
				],
			},
		];
		if (XR_CONFIG.needExtras) {
			xr8Modules.push(XRExtras.FullWindowCanvas.pipelineModule()); // Modifies the canvas to fill the window.
			xr8Modules.push(XRExtras.RuntimeError.pipelineModule()); // Shows an error image on runtime error.
		}
		
		XR8.addCameraPipelineModules(xr8Modules);

		try {
			XR8.run({
				canvas: this.canvas,
				allowedDevices: XR8.XrConfig.device().ANY,
				cameraConfig: { direction: XR8.XrConfig.camera().BACK },
				glContextConfig: {
					antialias: true,
				},
			});
			
		} catch (err) {
			this.#onCameraAccessDenied();
		}
	};

	#onStart = ({ canvasWidth, canvasHeight }) => {
		if (XR8) {
			const { scene, camera, renderer } = XR8.Threejs.xrScene();
			this.renderer = renderer;
			this.scene = scene;
			this.camera = camera;
			renderer.outputEncoding = THREE.sRGBEncoding;

			renderer.setSize(canvasWidth, canvasHeight, false);
			renderer.setPixelRatio(2); // TODO: tmp value for testing

			
			XR8.XrController.updateCameraProjectionMatrix({
				origin: camera.position,
				facing: camera.quaternion,
			});
		}

	};

Thanks :slight_smile:

4

I need to see the issue with the renderer. :thinking: Can you DM me a video of the issue?

5

Hi,

You can find the videos here. : SwissTransfer - Send large files securely and free of charge

The dpr1 is working, the dpr2 doesn’t track the object properly

Thanks !

6

@GeorgeButler Did you see the videos ?

Thanks a lot

7

No problem! I took a look at the videos, but I’m having a hard time seeing the differences in tracking. Perhaps you can record another video or describe the issue a bit more? I’m not entirely sure if setting the PixelRatio is supported either however I’ll have to confirm with the team.

8

Hi,

On the video with dpr = 2, the mesh is not following the “quinton byfield” statue :slight_smile: