Issue 1:
I believe this bug has various scenarios for happening, but I've managed to pinpoint just one:

When opening the editor, (only) after adding some object, and duplicating the tab, some settings get corrupt. At the least the keyboard shortcuts are corrupted, but I have reason to believe it may be more than that.

kEMPWgZRAL.mp4

Device: Desktop

Issue 2:
Hi,

In my current project I have to implement some complex 2D objects (multilayered GUI) and those will be anchored in 3D space.

I have noticed lots of artifacts on those planar 2D objects caused by z-index sorting of 2D layers in the same GUI object. There are few ways to solve it:

disable sorting and use global THREE.Object3D.renderOrder to sort items - this is not the best option as I would need to keep track of THREE.Object3D.renderOrder globally and update it on many objects if only one item gets inserted in the middle.

render to off-screen texture first - could work but my GUI is quite dynamic and I gain no perf when doing so and it requires me to update render targets on window / GUI resize.

apply some small Z epsilon value to separate layers so depth buffer works fine - tried that but this doesn't work 100%. I don't want to limit myself on how far/close to the object the camera can be.

Create multiple scenes and do few separate render passes - won't work for my project as it would make my project non-extensible or at least it would make it very hard.

None of the above are good enough nor easy to implement. IMO the cleanest solution to the problem (which I implemented and tested) was to modify the way WebGLRendererList sorts items by adding possibility to group render items into some kind of layers and then play with rather "local" than "global" THREE.Object3D.renderOrder property.

The easiest implementation of this feature would look like this:

Object3D.js

class Object3D {
// Group render items by this value
renderOrderGroup: number;
}

RenderItem.js

class Object3D {
// Group render items by this value
renderOrderGroup: number;
}

WebGLRendererLists.js

// Render item would look something like this
renderItem = {
id: object.id,
object: object,
geometry: geometry,
material: material,
program: material.program,
renderOrder: object.renderOrder,
renderOrderGroup: object.renderOrderGroup,
z: z,
group: group
};

// Sorting extended by this
function painterSortStable(a: RenderItem, b: RenderItem) {
if (a.renderOrderGroup !== b.renderOrderGroup) {
return (a.renderOrderGroup || Number.MIN_SAFE_INTEGER) - (b.renderOrderGroup || Number.MIN_SAFE_INTEGER);
}
// ... followed by rest of the sorting comparisons
}

Being able to group items with layers is a nice and clean way to solve the limitation of ThreeJS (big one in my project at least) when working with GUI/2D objects embedded in 3D space.

Another way (even more extensible IMO) would be to add support for customizing sorting logics so app can do whatever crazy stuff they want (i.e. via data stored in THREE.Object3D.userData property).

One would simply pass custom sorter into the THREE.WebGLRendererLists or even pass entirely new implementation to the THREE.WebGLRenderer.renderLists property.

I could make a PR with either of the proposed changes if anyone thinks it is a good idea. Otherwise I will stick with my little hack where I override the prototype of the WebGLRendererLists - ugly but works for me now. :)

Thanks,

Lukasz