Output Webgpu Postprocessing Render to a Texture (PiP)

Questions
,
1

I’m attempting to take the output from a webgpu postprocessing render and use that as a texture, to create a picture-in-picture effect.

I’ve achieved the result using a RenderTarget ( see below ) but it doesn’t include any of the postprocessing effects, as I’m just doing a normal render.


  renderer.setRenderTarget(renderTarget)
  renderer.render(this.scene, this.camera)
  renderer.setRenderTarget(null)


 plane.material.map = renderTarget.texture

replacing the line:

// renderer.render(this.scene, view.camera)
postprocessing.render()

doesn’t seem to work as I think post processing works on its own internal render target.

Any help would be greatly appreciated.

2

I managed to solve this and it was annoyingly simple in the end.

plane.material.colorNode = combined1.rgba

// or 

plane.material.colorNode = scenePass.getTextureNode('output')

The first one is using the result of a mix function, which I applied to my postProcessing.outputNode, so I needed to access the rgba component.

The second is just a basic render but does include some post processing like bloom.

For context I’ve used separate scenes for main scene/ui, so my postprocessing needs to blend the results together.

I think I was going down the wrong path as my mind was fixed on using textures and RenderTargets. I just need to get used to thinking differently when working with TSL/WebGPU