Can the lib be used with World Space/XR about core HOT 13 CLOSED

Yes, world space rendering is supported. I haven't tested VR/XR yet but it should also be working. Don't forget to set the event camera.

You need to setup GameObject like this:

This is because ReactUnity takes width directly from the element it is attached to. So you need to set Canvas to a high width/height like 1000 then scale it down with something like 1/1000. After that you need to add another GameObject under the canvas and attach ReactUnityUGUI component to that.

When you set width to 6 and height to 3 as in your example, all calculations go wrong. For example if you add 6px margin to an element, it means entire width of the canvas.

from core.

Ok, I got it otherwise working but for some reason the react content is only rendered for the left eye. I'm using a single pass instanced render mode (URP). Does ReactUnity perhaps use some shader that isn't single pass compatible?

Edit. I just noticed that an h1 element is visible for both eyes. Investigating further...
Edit2. It's the backgroundColor that seems to be only for the left eye. Text seems fine.

from core.

I am not sure. I will check it asap. I guess the custom shaders I wrote aren't compatible. If text is visible but graphics (background/border etc.) aren't visible, then that is the case.

from core.

Ok I found a small workaround. Adding a separate black RawImage to act as a background seems to work to some degree.
Text (inside a header element at least) seems to render just fine for both eyes.

So there's something going on with the "backgroundColor" style-attribute.

from core.

Seems like the culprit is Unity's Mask. Apparently, Mask does not work in stereo rendering. I will write a custom mask shader and component to solve this issue.

Setting background-color also creates a mask so that explains it. Other properties like overflow, border and box-shadow will also have this issue.

from core.

Fixed in 0.4.3. Let me know if you have other issues.

from core.

That was fast, thank you! The one-eye rendering bug seems to be solved now. However, I stumbled upon a few new ones now:

(The following are from 0.4.3)

(1)
This may be a bit (really) hard to see, but the screen (background) has a strange banding effect going on. Like some lines that seem to be mirroring the HMD rotation. Difficult to see in the pic, but quite noticeable in VR, especially as they're constantly rotating.

(2) Another thing are the white borders. Didn't have those with the RawImage approach.

And one more is that the base "page" beneath the app seems to stay white, even though the root component (App) is set to be background: black in css. This causes two issues: 1) as the screen appears, the UI is initially white and then rapidly switches to black. 2) As in the picture below, any opacity to the canvas group is displayed as white, instead of as the actual background color. This is unfortunate if the UI canvas is animated to appear/disappear like in this case.

import './app.css';

const App = () => <view id={'app'}>Home</view>;

Renderer.render(<App />);

#app {
  position: absolute;
  top: 48px;
  right: 48px;
  bottom: 48px;
  left: 48px;
  overflow: hidden;
  color: #ffffff;
  background: #000000;
}

And here's a vid just to be safe:
https://youtu.be/Chblb7nqGQk

from core.

About 2:

There is a root element above the #app element. It is the GameObject which you assign ReactUnityUGUI. I guess white color comes from that. You should remove image components from that element if they exist. You can then style root element like:

:root {
  background-color: #000000;
}

Also, use background-color instead of background. background sets the background-image, and that is a bit different. This is my bad. It was a temporary solution until I implement full background spec.

any opacity to the canvas group is displayed as white

I don't understand this part. Can you try the solution above and see if that fixes it?

I will check why the border appears. I guess there are some floating point errors.

from core.

The :root didn't solve the mystery, but it did perhaps reveal a clue; the black "border" caused by the root's black background doesn't seem to have the same fade to white issue as the background of the App. As the menu fades away, the root background fades properly but the App container switches to white.

:root {
  background-color: #000000;
}

I don't understand this part. Can you try the solution above and see if that fixes it?

I'm altering the alpha of the parent canvas to programmatically fade-in/out the menu as seen in the video. This should fade out the menu on close, but the issue is that the App component turns white if the parent canvas has alpha applied that != 1.0.

And this is App if it has no background color set. The proper behavior should probably be transparent and therefore a black background (of :root).

from core.

And here's a pic of the strange line artifacts with some Photoshop enhancement:

These lines rotate and move (probably because the canvas is locked to HMD orientation and the lines seem like some kind of reflection perhaps?).

from core.

I found the white background. Seems like I introduced this bug in the last version. It was a bit rushed. Should be fixed now but I don't know if it is the source of your issue.

About the diagonal lines, I don't think they are caused by reflection. The UI shaders are unlit. In any case, I explicitly disabled reflection and specular. Issue may be fixed in 0.4.4. I haven't noticed any issue in my Rift S.

To me, it seems like sun flare is clipping through UI. Can you try with a regular Unity Canvas and see if the same problem happens?

from core.

The 0.4.4 fixed all the issues stated above, even the lines! Bravo 👏🏻

from core.

Thank you for your help. Testing ReactUnity in all platforms can be hard for me alone so I appreciate when users report bugs. Sorry for the trouble.

from core.