ARCanvas is pixelated

[JakeJustLearning]

I have the following two repos and associated github pages that show building nearly the same thing in three.js/webxr and react-xr and three-fiber.

In react-three-fiber/xr the AR Canvas is rendering everything in a very pixelated form.
this component is where I am initiated my ARCanvas in React which is having pixelation issues

and this is the basic three and webxr where I initiate my scene and do not have any pixelation problems.

Can someone please help me understand what configuration I am missing in my react version to prevent pixelation?

The device I use is an iphone XS with the XR viewer app.

[mwmwmw]

I think your ARCanvas repo is set to private, so I can't see it.

My gut instinct based on what you've described says that you're having a DPI scaling issue.

You can set the DPI for your canvas with <ARCanvas dpr={window.devicePixelRatio} />

Also, double check your public/index.html file and make sure this is in the header

  <meta
	  name="viewport"
	  content="width=device-width, initial-scale=1, shrink-to-fit=no"
  />

[Edited to provide correct param to canvas]