react-xr icon indicating copy to clipboard operation
react-xr copied to clipboard

How to use XRLayer with uikit? It gets blurry

Open edhyah opened this issue 8 months ago • 0 comments

Hello! This should be a simple problem.

I have the following code in pmndrs/uikit:

      <Root pixelSize={0.01} sizeX={2} sizeY={2}>
        <Text> ... </Text>
      </Root>

It looks sharp, but to have antialiasing, I wrapped this code in an XRLayer.

    <XRLayer
      scale={2}
      dpr={1}
      pixelWidth={200}
      pixelHeight={200}
      shape="quad"
      quality="text-optimized"
    >
      <Root pixelSize={0.01} sizeX={2} sizeY={2}>
        <Text> ... </Text>
      </Root>
    </XRLayer>

However, doing this makes the text look blurry. Why? Wouldn't this work because Root essentially creates an image of size 200x200 (pixelSize is 0.01, sizeX and sizeY is 2)? I'm wondering if this is because XRLayer's implementation renders children with a perspective camera, but changing to an orthographic camera doesn't work either.

I don't want to increase pixelWidth and pixelHeight to high values because I'm running a memory-constrained application. There must be a different way, right?

edhyah avatar May 15 '25 20:05 edhyah