Using scissor with postprocessing

[alexpineda]

Hello,

I'd like to have PIP (picture in picture) effect where I have another camera rendering a small box in the corner. In the below example I support an indefinite number of viewports. A simplified example:

const renderer = composer.getRenderer();

for (const viewport of viewports) {
      
      renderer.setScissorTest(true);
      renderer.setViewport(viewport);
      renderer.setScissor(viewport);
        
       // renderPass.clearPass.enabled === true
       // autoRenderToScreen === true
        composer.render(delta);

        renderer.setScissorTest(false);
}

However I'm not seeing the result of the 2nd viewport at all. If I do this with the regular WebGLRenderer I do see the result.

[alexpineda]

Hi feel free to delete this. I believe I've resolved this and it may have been to how I was sizing my viewports.

[vanruesc]

@alexpineda How did you resolve it? Custom viewport/scissor settings are currently not supprted, see #386.

[alexpineda]

That is a neat example in there. Any chance you have additional codebox samples for me as a treat? ^^

In your example you use multiple render passes. My setup is slightly different. I use the same render pass and potentially different post processing passes depending on the user configuration per view. Not sure if that makes a difference.

https://github.com/imbateam-gg/titan-reactor/blob/dev/src/renderer/render/renderer.ts#L127

[vanruesc]

Thanks for the info! I'm surprised that works, though. Afaik, WebGLRenderer uses the viewport/scissor of the current render target which means that renderer.setViewport and renderer.setScissor shouldn't do anything when using postprocessing unless you're only rendering to screen without any effects.

[vanruesc]

Any chance you have additional codebox samples for me as a treat?

Unfortunately, all of my sandboxes are either broken or don't make sense without context from accompanying bug tickets. This one is somewhat fun to look at: https://codesandbox.io/s/postprocessing-feedback-k7s2p?file=/src/index.js

[alexpineda]

I do use effects. https://github.com/imbateam-gg/titan-reactor/blob/dev/src/renderer/view-replay.ts#L292 and soon will re-add depth blur only once I figure out an issue which I may soon add to your lovely Q&A section :)

According to what you are saying it could be that once the different viewports use different effects it will no longer work. I will test tonight.

[alexpineda]

Now that I think of it it makes sense that mine works because I'm not using multiple render passes per say. I'm rendering multiple render passes but not in the same chain of passes. Each time I iterate I set the appropriate viewport/scissor.