Rendering by layer to multiple canvases

[tropic rampart]

UPD: Now I just need to fix models that are weird for some reason, but feel like it's important to keep context.

I want to render my image to several canvases to achieve overlay effect with other HTML contents. Ideally, my plan is like following:

1. Render layer 2 to the frame buffer;
2. Copy part of that frame buffer to canvas B (overlay);
3. Render layer 1 to the frame buffer;
4. Put layer 2 on top of layer 1;
5. Apply that buffer to canvas A (background);

I cannot figure out whether I can just copy texture to canvas, and how to compose image later. I want to be efficient in order to no re-render same things twice.

Is it possible at all?

[sly stratus]

overlay effect?

i think this needs to be clarified before you jump into fbo's

what's the desired end goal?

[tropic rampart]

Yes, some objects of the scene should be on top of HTML elements, but not the whole scene. Scene is on the background, models are on foreground, html in-between

[sly stratus]

you dont need anything for that, just a plain blending mode

https://codesandbox.io/s/the-three-graces-0n9it

wait, i'll fetch the description, the demo is react but it's super easy to do in vanilla as well

[tropic rampart]

Let me get my scene back so it's easier to understand

[sly stratus]

here https://discourse.threejs.org/t/how-do-i-get-occlusions-of-webglobjects-onto-css3dobject/47008/3

with this html becomes a part of your scene, 3d objects can be before and in front of it

the demo above does that with three html annotations, but it could be any html. you'll see two behind the objects and one in front

[tropic rampart]

Background is visible. Blue part is a canvas, where I want to render only laptop model.

Looking at the link.

better mark it red

[sly stratus]

canvas is a dom element, if canvas is within the red area that's it, no?

that wouldn't require blending, fbo's, anything really, just css placement

[tropic rampart]

this thing is webgl scene too, which uses the same renderer. The curly thing on the background is a shader.

I have this state in my render pass, where black supposed to be transparent. I want to copy part of that state (texture), and slap it onto canvas (overlay), that is on top of HTML block, which is on top of another existing (background) canvas with whole scene.

Hope that makes sense.

Sorry for mad skillz photo editing, but expected result is something like this

From the examples looks like the only way to draw to canvas is
context.drawImage( renderer.domElement, 0, 0 );

which does several render passes and moves camera typically. But I don't need to move camera or anything, I just need to save partially rendered state (fbo) to canvas.

[tropic rampart]

Well, probably not going to happen the way I expect. Context is created for canvas, and even with texture it's not possible to share between contexts right. Rendering simple model is supposedly cheap anyway.

I'm pretty sure even quicker than trying to copy data from one canvas to another.

And I can use setViewOffset for camera

[tropic rampart]

For some reason some tris are weirdly shaded if anyone have idea why please let me know but overall this question is kind of figured out, i'll close it soon

[tropic rampart]

Not sure what could I do wrong but it's like almost like having inverted normals if I render it twice (?)

Same scene, same lights, same models, same camera parameters. When background is dark it's the second renderer used, it's visible that the model is having a bad day.