So, with VR it’s a common use case to fade a scene partially and put a dialog box in front of it. Currently, as far as I can tell, there is no way to do this well in three.js. One way might be to fade any/all lights and any emissive elements in tandem. Another way would be to put a small black sphere or cube around the camera and manipulate the opacity, then put the dialog box inside of that. But if the dialog box itself has transparency, the dialog box plane will conflict with the “fader” box around the camera, negating the fader’s transparency and punching through to the background, because of webGL limitations (render order does not help here, and alpha tests just make it look pixellated).
I would love if there was the ability to exclude certain objects from certain lights, or vice versa, but that seems to have been debated for years and stalled.
So, this is a dual feature request that I think would make Three much more viable for building VR apps, which might not be as complex as lighting exclusions:
(1) A “UI” attribute for objects that cause them to render last after all the transparencies and solids behind them have rendered, (regardless of layer - I’m using both 1 & 2 for the VR camera) and
(2) A master fader that affects total light into the camera on the non-UI elements.
Basically I’m just asking for a sphere to render 2D stuff into that plays well with any transparencies behind it.
An alternative to this would be to just have a “brightness” setting on a group that could affect all its children. OR the ability to assign multiple layers to the left and right eye in VR, since then we could at least target everything in a layer to darken out and keep the layers we want to stay bright. Right now, the eyes only get layers 1 & 2, which is a bit hackish as everything has to be crammed into those.
If it weren’t for the culling of multiple transparencies this might not be a problem. But as it stands, it really prevents Three.js from being useful for creating complex VR apps with lots of interactive 2D elements overlaying the scene.
This is a feature request, not a criticism, and I recognize that there are a lot of limitations unless hackish methods are taken to overcome them. The truth is that most games have a 2D HUD layer that sits over the 3D and it’s less of a hack than an essential element in the way we design user interfaces. The last game HUD I worked on was the first iteration of Star Citizen and it was all Scaleform/AS2, which was nightmarish, but even modern Javascript isn’t much better. It would be wonderful if Three had something similar to the way other engines lay in HUDs, or at least a way to punch an element to the front and fade the rest, without creating multiple transparency artifacts by trying to integrate them into the same 3D scene.
Notice here how a canvas texture overlaying a transparent cube with opacity faded causes a punch-through to the background around the rounded corners:
