WebGLRenderer: Toggle on/off opaque / transmission / transparent passes for custom render pipeline

[DavidPeicho]

Is your feature request related to a problem? Please describe.

Currently, it's not possible to toggle off / on the rendering of opaque / transparent / transmission passes. This makes it difficult when creating more complexe rendering pipeline, where users might want to schedule those at different time.

For instance:

• Render opaque object
• Render objects with subsurface scattering
• Resolve the subsurface scattering (post-process blur basically)
• Render transparent objects

Describe the solution you'd like

1. The simple solution would be to enable / disable those passes using flags.
2. A more advanced solution would be to create a simple render graph. With this solution, Three.js can give a basic render graph with those passes, and users can extend it or even completely swap it out.

Solution 2 might sound too advanced for nothing, but with WebGPU coming, this could be the solution of choice. If it becomes possible to start the render passes in a parallel way, a render graph will be needed in case where the pipeline execution isn't linear.

A clear and concise description of any alternative solutions or features you've considered.

I didn't find an alternative solution yet. Those passes can't be modified externally.

[mrdoob]

I think GLTF is going to support subsurface scattering fairly soon, so that use case may not be very relevant by then... 🤔

[DavidPeicho]

This is just an example. We can take the example of volume rendering as well. Basically re-ordering passes is really useful. When creating an application it's ok, because you can design around that limitation. For people creating libraries wrapping Three.js, there is no solution AFAIK

[DavidPeicho]

Side note, do you have a link for the suburface? I am wondering what kind of implementation will be pushed by the standard.

[donmccurdy]

Certain properties of KHR_materials_volume (complete) will contribute to subsurface. Other related properties will come from KHR_materials_translucency (draft) or perhaps another proposal (draft). Those may still be early drafts at this point — the combination of {transmission, volume} for volumetric refraction was completed first.

[DavidPeicho]

Thanks @donmccurdy that's really nice to know.

I think this is still orthogonal to the issue. Three.js already provides all this work with passes and it would be nice if we could re-use it somewhat and let the developer order them freely (there might be dependencies).

For the example of volume rendering, I was referring to volume rendering based on 3D textures. I could see a pipeline like this one:

• Opaque meshes
• Volume Depth Raycasting
• Volume Rendering
• Transparent meshes

Even something simple could help, like 3 functions:

renderOpaquePass()
renderTransparentPass()
RenderTransmissionPass()

[DavidPeicho]

Thinking a bit more about it, we could bring something like the effect composer in the core? We would have:

• RenderOpaquePass
• RenderTransmissionPass
• RenderTransparentPass

If we make a simple pipeline processor it's not going to be much code anyway and will not affect the size of the library negatively.

[DavidPeicho]

I have some time to work on that. If you think it makes sense and we agree on a format I could give it a shot in a PR. I would find it odd if I was the only one experiencing that as a limitation.