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

**URL:** <https://forum.8thwall.com/t/how-to-change-the-dpr-pixel-ratio-of-renderer/5979>\
**Category:** Technical Support\
**Tags:** general\
**Created:** [April 9, 2025, 1:36pm UTC](https://forum.8thwall.com/t/how-to-change-the-dpr-pixel-ratio-of-renderer/5979 "2025-04-09T13:36:48Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Baptiste\_60fps](https://avatars.discourse-cdn.com/v4/letter/b/d26b3c/32.png) [@Baptiste\_60fps](https://forum.8thwall.com/u/Baptiste_60fps)\
**Post date:** [April 9, 2025, 1:36pm UTC](https://forum.8thwall.com/t/how-to-change-the-dpr-pixel-ratio-of-renderer/5979/1 "2025-04-09T13:36:48Z")

</div>

**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 🙏

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [April 9, 2025, 4:09pm UTC](https://forum.8thwall.com/t/how-to-change-the-dpr-pixel-ratio-of-renderer/5979/2 "2025-04-09T16:09:51Z")

</div>

Hi, welcome to the forums!

Which device are you seeing this issue with? Can you land your changes and [share your project](https://www.8thwall.com/docs/guides/projects/project-sharing/#share-project-with-another-workspace) with the `support` workspace?

---

<div class="post-metadata">

**Author:** ![Baptiste\_60fps](https://avatars.discourse-cdn.com/v4/letter/b/d26b3c/32.png) [@Baptiste\_60fps](https://forum.8thwall.com/u/Baptiste_60fps)\
**Post date:** [April 10, 2025, 9:23am UTC](https://forum.8thwall.com/t/how-to-change-the-dpr-pixel-ratio-of-renderer/5979/3 "2025-04-10T09:23:59Z")

</div>

Hello,

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

```auto
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 🙂

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [April 10, 2025, 4:05pm UTC](https://forum.8thwall.com/t/how-to-change-the-dpr-pixel-ratio-of-renderer/5979/4 "2025-04-10T16:05:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Baptiste\_60fps](https://avatars.discourse-cdn.com/v4/letter/b/d26b3c/32.png) [@Baptiste\_60fps](https://forum.8thwall.com/u/Baptiste_60fps)\
**Post date:** [April 11, 2025, 9:36am UTC](https://forum.8thwall.com/t/how-to-change-the-dpr-pixel-ratio-of-renderer/5979/5 "2025-04-11T09:36:34Z")

</div>

Hi,

You can find the videos here. : [SwissTransfer - Send large files securely and free of charge](https://www.swisstransfer.com/d/6648e63d-5a43-457d-a672-a6badab1da3f)

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

Thanks !

---

<div class="post-metadata">

**Author:** ![Baptiste\_60fps](https://avatars.discourse-cdn.com/v4/letter/b/d26b3c/32.png) [@Baptiste\_60fps](https://forum.8thwall.com/u/Baptiste_60fps)\
**Post date:** [April 17, 2025, 9:59am UTC](https://forum.8thwall.com/t/how-to-change-the-dpr-pixel-ratio-of-renderer/5979/6 "2025-04-17T09:59:10Z")

</div>

@GeorgeButler Did you see the videos ?

Thanks a lot

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [April 17, 2025, 5:33pm UTC](https://forum.8thwall.com/t/how-to-change-the-dpr-pixel-ratio-of-renderer/5979/7 "2025-04-17T17:33:47Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Baptiste\_60fps](https://avatars.discourse-cdn.com/v4/letter/b/d26b3c/32.png) [@Baptiste\_60fps](https://forum.8thwall.com/u/Baptiste_60fps)\
**Post date:** [April 18, 2025, 7:55am UTC](https://forum.8thwall.com/t/how-to-change-the-dpr-pixel-ratio-of-renderer/5979/8 "2025-04-18T07:55:43Z")

</div>

Hi,

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