react-xr
react-xr copied to clipboard
How to use XRLayer with uikit? It gets blurry
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?