Rendering two cameras on top of each other

Questions
, , ,
1

In my scene I have two camera. I want to render main camera to cover all viewport and I want to render second camera to bottom corner. I rendered two of them but it does not work as I want.
Problem is Main camera renders on top of second camera even I clear eveything, I can only see my second camera view when background is clear. You can see problem in the video as well.

useFrame(({camera, gl, scene}) => {
		gl.autoClear = false;

        gl.clear(true, true, true);

        // Render main camera
        gl.setViewport(0, 0, window.innerWidth, window.innerHeight);

        gl.setScissor(0, 0, window.innerWidth, window.innerHeight);
        gl.setScissorTest(true);
	    gl.render(scene, camera);

        // Render preview camera in small viewport
        if (defaultCameraRef.current) {
            gl.clearDepth()

            // Set viewport and scissor for the secondary camera
            gl.setViewport(0, 0, 200, 200);
            gl.setScissor(0, 0, 200, 200);
            gl.setScissorTest(true);
            gl.render(scene, defaultCameraRef.current);
        }})

2

It’s not clear to me what the issue is.
Is the mini view supposed to be stationary or something?

3

As I mentioned real camera view only appears when background is clear. If mini view background is not clear, main camera view overrides second camera view. You can see it in the video please check again.

4

Yeah I still don’t understand.

edit: are you setting autoClear = true back to true when you’re done? You clear it once but never restore it…
Not sure why both camera are moving if you are dragging the mouse? it’s still hard to tell what you are expecting vs what we are seeing.

5

Problem is Main Camera renders on top of second camera. In the video you see the same image from mini view and main view and that is the problem. Second camera is not moving. Second Camera view only visible when main camera not rendering anything (check 4th-5th seconds of video you will see on clear background mini view correctly rendering second camera)

6

Ohh i see. Yeah you’re not clearing the small viewport before rendering to it? You’re clearing the depth buffer but the color buffer is still filled. and the near/far/position of the second little camera is such that what it renders is “behind” the first camera.

What happens if you do:

            // Set viewport and scissor for the secondary camera
            gl.setViewport(0, 0, 200, 200);
            gl.setScissor(0, 0, 200, 200);
            gl.setScissorTest(true);
            gl.clear(true,true,true);
            gl.render(scene, defaultCameraRef.current);

for the second render?

Also… I see a lot of state setting but no restoring of the state. This can cause problems because the later rendering will assume the state.
So if you setScissorTest(true) you might want to set it back to false when you’re all done.
Same with viewport etc.

7

You were right! Resetting viewport solved my issue. gl.setViewport(0, 0, 0, 0); Solved overriding problem.

1 Like
8

Awesome! Good catch :smiley:

1 Like