Support for multiple XRProjectionLayers

[dbradleyfl]

Is your feature request related to a problem? Please describe.

The best illustration of the problem is if you want to do the following:

1. create an XRProjectionLayer with some 3D environment
2. create a XRQuadLayer with some media (photo / video)
3. create an XRProjectionLayer for controllers / hands / cursors to always be the last thing rendered (top)

Currently there is no way to define the elements from a scene that should be included in projLayer1 and also define the other elements that should be on projLayer2.

Describe the solution you'd like

Ideally you'd be able to do something like:

session.updateRenderState({ layers: [projLayer1, mediaLayer, projLayer2] });

Potentially, projLayer1 and projLayer2 could each be defined by an instance of a new class called XRProjectionLayerGroup that extends THREE.Group. The WebXRManager could check the scene children for instances of XRProjectionLayerGroup to create multiple projection layers.

The current implementation of xr layers seems to only allow the creation of a single projection layer from a single threejs scene / renderer. As you can see here the projection layer is session.renderState.layers[ 0 ] which is set by the WebXRManager. For someone to create a second projection layer from a group of elements within the same scene, I believe they'd have to implement their own version of WebXRManager and they'd also have to figure out how to render the two groups of elements separately.

[dbradleyfl]

Related discussion: #22069

[sigmaxipi]

create an XRProjectionLayer with some 3D environment
create a XRQuadLayer with some media (photo / video)
create an XRProjectionLayer for controllers / hands / cursors to always be the last thing rendered (top)

@dbradleyfl , I think this is the wrong use case for multiple projection layers. See my updated WebXR Layers demo or this livecoding experiment for an example of how to create a quad layer with proper depth testing when interacting with 3D objects. (I need to clean it up, but I'll send a PR today.) Using a sandwich of projection-quad-projection layers is hard because you have to track and sort the layers. A cleaner alternative is to have a single projection layer on top with a hole punched through it to show other quad layers.

I think there is a limited use case for multiple projection layers in the context of remote rendering. E.g, create a projection layer that is streaming remotely rendered VR from a server. And then create another projection layer with locally rendered controllers. 2D Remote Desktop apps sort of do this by rendering the cursor locally to give the illusion of smother mouse movements. However, I don't know of any native or web apps that have this hybrid streaming approach.

[cabanier]

FYI for the environment, it's likely better if you create a cubemap layer. However I think it's reasonable to use 2 projection layers like @dbradleyfl is asking.