I like to think that this is a rather complex issue, at least if it’s solved efficiently with a single canvas and gl.scissor view splitting. The code that is normally required would be pages.
For a while now drei has the <View> component which takes care of it, it sandboxes contents and figures out all the gl.scissor stuff + event delegation. You can have controls in them, environments, nothing will bleed over. But how do you have uniform controls?
Recently <PivotControls> was merged and that completes something i always struggled with, controlling the same objects with unified controls. If you tried that with TransformControls it would go haywire because that control re-parents the attached mesh. But Pivot can be matrix driven.
This is really cool! I’ve never used gl.scissor before - can you explain the efficiency gain here? You’re still rendering the scene once for each view, but the difference is, they’re all drawing into different regions of the same canvas, and that’s less overhead than drawing into 4 different canvases?
so this is one canvas rendering into four regions, but with shared geometry and materials which is efficient, and of course a shared state model which gives it some sanity. it only ever renders if something moves and then stops.
if these were four canvases then no data could be shared among them, it would parse the contents 4 times, create the geometries and materials 4 times, it would be very inefficient.
view splitting is quite complex and this is what drei/View is taking care of now. the hardest is probably sandboxing it and continued interop. to these components it’s as if nothing is different, they don’t suspect they’re rendering inside a view.