Viewport rendering with PostProcessing renderer

[x0YYYY0]

Description

Original thread here

With the WebGPURenderer and TSL node system I am not seeing renderer.autoClear respected when rendering with the post processing renderer. Rendering to a viewport directly after does not respect the frame buffers color and overwrites with background.

Reproduction steps

1. Create a basic PostProcessing node with a scene pass
2. Call PostProcessing render
3. Render to a viewport after post processing, notice white background

Code

// render loop

renderer.clear();

// WORKS
// renderer.render( scene, camera );
// BREAKS
postProcessing.render()

// Render a minimap like ViewHelper
 {
      const dim = 128;
      const x = renderer.domElement.offsetWidth - dim;
      const y = renderer.domElement.offsetHeight - dim;
      renderer.getViewport(viewport);
      renderer.setViewport(x, y, dim, dim);
      renderer.render(minMapScene, orthoCamera);
      renderer.setViewport(viewport);
  }

Live example

https://jsfiddle.net/tj1mz5qe/100/

Screenshots

Expected correct result with renderer.render

Result I am seeing with postProcessing.render

Version

r0.178.0

Device

Desktop

Browser

Chrome

OS

MacOS

[Mugen87]

A manual render() call after postProcessing.render() is problematic. PostProcessing and normal render() calls have different approaches for tone mapping and color space conversion. Besides, clear operation affect different internal framebuffers so you need a different approach.

The idea is to put your mini map render into a pass() object and blend it with your scene.

const scenePass = TSL.pass( scene, camera );
const mapPass = TSL.pass( minMapScene, orthoCamera );

postProcessing.outputNode = TSL.blendColor( scenePass, mapPass );

However, a manual configuration of mapPass.renderTarget.viewport is currently not possible since RenderTarget.setSize() overwrites viewport and scissor with the new width and height, see https://jsfiddle.net/0bp5gwfL/1/.

@sunag We can fix this by introducing two new booleans RenderTarget.autoScissor and RenderTarget.autoViewport, both with true as default values. When set to true, viewport and scissor are kept in sync with the render target's dimensions. If set to false, the developer can manually assign values.

[Mugen87]

Wait...it's probably better move the booleans to PassNode and provide PassNode.setViewport() and PassNode.setScissor(). In this way, the user does not have to take care of the device pixel ratio.

[x0YYYY0]

Thanks so much for the fast response and API change, this looks exactly what i wanted!