Transparency broken

[jgwinner]

Description

Bug - transparency imported via gLTF makes objects BEHIND the masked item also transparent in some cases

Expected behavior

If I have a transparent object, I should see objects behind the areas masked out as transparent

Actual behavior

Some of the transparency works, but some objects behind the imported object end up being transparent as well, even if they shouldn't be.

Reproduction

1) Import a hedge via:

            <Model
                source={{
                    gltf2: asset('MazeHedges2DoubleSided.gltf'),
                }}
            />

Place several of these in a rendered area - in my case, a maze built with hedges.

Hedge.zip

SOME of the objects behind the hedges will appear to also be transparent, as if the transparent squares the leaves represent 'cut out' the geometry behind the hedge.

Solution

I don't know if this is a React-VR issue, my feeling is it's either a three.js issue or a gLTF issue, but I thought I'd start here.

If you think it's a three.js or gLTF issue, do you want me to open a bug over there?

Additional Information

• 'react-vr' package version: [FILL THIS OUT: get this by running npm list react-vr]
• 'react-vr-web' package version: [FILL THIS OUT: get this by running npm list react-vr-web]
• Operating System: [FILL THIS OUT: MacOS, Linux, or Windows?]
• Graphics Card: [FILL THIS OUT: NVIDA, ATI, Intel? Which Driver?]
• Browser: [FILL THIS OUT: Oculus Browser, Chrome, Edge, Safari? Which version?]
• VR Device: [FILL THIS OUT: In or Out of VR? Headset? ]

[jgwinner]

Whoops, forgot the details. React-vr 2.0, react-vr-web 2.0. Upgrading didn't help.

Windows, NVidia GTX 1070, Samsun Gear VR (S8+, up to date O/S).

Firefox.

In and out of headset.

[jgwinner]

Nothing? It's a pretty bad bug.

[jgwinner]

I'll remove this part from the book. My publisher is getting on me to include the code. I really wanted to use the transparency version :(

I'll go to concrete squares or something.

[andrewimm]

Unfortunately I have no context on the glTF loader, so I can't provide much help until I understand it better. Given that this affects some elements and not others, I fear it's an issue with the Three.js glTF code.

[jgwinner]

Thanks.

The problem is, there are NO transparency options - which makes some types of modeling very difficult. The OBJ transparency isn't read.

Do you know any other way to do transparency?

You'd advise me to opening a bug with the gLTF group? I'll go do that, unless you'd rather me hold off.

== John ==

[mikearmstrong001]

Bug - transparency imported via gLTF makes objects BEHIND the masked item also transparent in some cases

This will be a bug with the gltf loader. It looks like the issue being that the transparency is still rendering depth despite being marked as transparent. However, from the screenshot an alpha cutout would make more sense. I've grabbed your model so will have a look if I can provide more help.

I would raise an issue with three.js too

[jgwinner]

Hmm - still, something that's got an alpha channel (a window) you should see items behind it, but I agree, it does look like that. What's odd is it works differently at different angles, but this might be related to single vs. double sides too. I'll build a test case.

Opening with gltf and three.js once I get the test case.