MeshPhysicalMaterial transmission doesn't work correctly in WebXR immersive mode

Describe the bug

We improved MeshPhysicalMaterial transmission support in #21884. But transmission doesn’t work correctly in WebXR immersive mode yet.

For transmissive objects, we use multi passes. First we render opaque objects to a render target and then render transmissive objects with the render target.

The problem in VR immersive mode is the current transmission shader code doesn’t expect stereoscopic vision so the calculated coordinates in the shader for the render target will be wrong.

The problem in AR immersive mode is we render the objects on camera but the camera isn’t rendered to the render target so the transmissive objects can’t be transparent to the camera (especially transparent = false MeshPhysicalMaterial).

To Reproduce

Steps to reproduce the behavior:

1. Go to edit a WebXR examples to use MeshPhysicalMaterial with transmission = 1
2. Open the example
3. Enter immersive mode
4. See the transmission doesn’t work correctly

Expected behavior

transmission works correctly even in WebXR immersive mode A clear and concise description of what you expected to happen.

Screenshots

Platform:

• Device: Any WebXR devices
• OS: Any
• Browser: Any
• Three.js version: dev

[mrdoob]

#22426 fixed VR and #22425 kind of fixed AR

[mrdoob]

@mrdoob What do you think of this temporal workaround?

I’ve just tried it and it doesn’t seem to produce good results…