Integrating FSR Support into THREE.js Using Postprocess

Questions
1

Hello everyone,

I am currently attempting to integrate FSR (FidelityFX Super Resolution) support into my THREE.js project using Postprocess to save some rendering resources while maintaining acceptable rendering quality. I have referred to the web-fsr project and have tried converting the EASU and RCAS shaders into postprocess shaders.

However, I am facing some difficulties, particularly in the following areas, and I would greatly appreciate any help and guidance:

  1. Connecting renderer, renderTarget, and composer:

    • I have attempted to create a new renderTarget but not unsure how to correctly connect the renderer, renderTarget, and composer to ensure proper rendering.
    • I understand that the scene needs to be rendered to an intermediate renderTarget and then processed by FSR, but the specific steps and code implementation are confusing to me.

  2. Order of applying FSR processing and other shaders:

    • I am unclear on the steps to add other shaders before or after the FSR processing.
    • For example, if I want to perform some preprocessing before the FSR processing or some post-processing after the FSR processing, how should I arrange these steps?

I am seeking guidance on the following aspects:

  • How to correctly set up the connection between renderTarget and composer?
  • What is the correct way to add other shaders before or after the FSR processing?
  • Are there any recommended code structures or examples that can help me better understand and implement this process?

Thank you very much for your help!

2

The current solution I have thought of is:

  1. Create two scenes.
  2. In the main scene, render the normal 3D objects and output the rendering result to a low-resolution render target.
  3. Create a new scene, in which a quad is created, and use the output of the previous render target as a texture on this quad.
  4. Apply post-processing to this quad.

Is there a more elegant way to achieve this effect?